Spaces:
Running
Running
File size: 14,907 Bytes
76e6deb f1c77a7 76e6deb fdc62ad 76e6deb f1c77a7 76e6deb fdc62ad 76e6deb f1c77a7 76e6deb fdc62ad 76e6deb f1c77a7 76e6deb fdc62ad 76e6deb f7e790c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Türkiye</title>
<link rel="icon" type="image/x-icon" href="https://www.apple.com/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.apple-nav-item {
transition: all 0.2s ease;
}
.apple-nav-item:hover {
opacity: 0.8;
}
.hero-gradient {
background: linear-gradient(to bottom, #000000, #1a1a1a);
}
.product-card:hover {
transform: scale(1.02);
transition: transform 0.3s ease;
}
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Navigation -->
<nav class="bg-black bg-opacity-90 text-gray-100 sticky top-0 z-50 backdrop-blur-sm">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center h-12">
<div class="flex space-x-6">
<a href="#" class="apple-nav-item">
<i data-feather="apple" class="w-5 h-5"></i>
</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Store</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Mac</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">iPad</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">iPhone</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Watch</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">AirPods</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">TV & Home</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Entertainment</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Accessories</a>
<a href="#" class="apple-nav-item text-sm hidden md:block">Support</a>
</div>
<div class="flex items-center space-x-4">
<button class="apple-nav-item">
<i data-feather="search" class="w-5 h-5"></i>
</button>
<button class="apple-nav-item">
<i data-feather="shopping-bag" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Mobile Navigation -->
<div class="bg-gray-100 text-gray-800 py-2 px-4 md:hidden sticky top-12 z-40">
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium">iPhone 14 Pro</a>
<i data-feather="chevron-right" class="w-4 h-4"></i>
</div>
</div>
<!-- Hero Section -->
<section class="hero-gradient text-white py-16">
<div class="max-w-7xl mx-auto px-4 text-center">
<h1 class="text-5xl font-bold mb-4">iPhone 14 Pro</h1>
<h2 class="text-2xl mb-6">Pro. Beyond.</h2>
<div class="flex justify-center space-x-6 mb-8">
<a href="#" class="px-6 py-2 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-lg font-medium">Daha fazla bilgi</a>
<a href="#" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-lg font-medium">Satın al</a>
</div>
<img src="https://www.apple.com/v/iphone/home/bh/images/overview/hero/iphone_14_pro_hero__e8a2d10gdmoy_large.jpg" alt="iPhone 14 Pro" class="mx-auto max-w-full">
</div>
</section>
<!-- Products Grid -->
<section class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-3xl font-semibold text-center mb-10">The latest. Take a look at what's new, right now.</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">iPhone 14</h3>
<p class="text-gray-600 mb-4">Wonderfull.</p>
<div class="space-x-4 text-lg">
<a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
<a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
</div>
</div>
<img src="https://www.apple.com/v/iphone/home/bh/images/overview/compare/compare_iphone_14__baxk5t4p5vpy_large.jpg" alt="iPhone 14" class="w-full">
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Apple Watch Series 8</h3>
<p class="text-gray-600 mb-4">A healthy leap ahead.</p>
<div class="space-x-4 text-lg">
<a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
<a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
</div>
</div>
<img src="https://www.apple.com/v/watch/home/2022/images/overview/hero/hero_s8__f265j5okx8qe_large.jpg" alt="Apple Watch Series 8" class="w-full">
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md md:col-span-2">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">MacBook Air with M2 chip</h3>
<p class="text-gray-600 mb-4">Don't take it lightly.</p>
<div class="space-x-4 text-lg">
<a href="#" class="px-4 py-1 border-2 border-blue-500 text-blue-500 rounded-full hover:bg-blue-500 hover:text-white transition-colors duration-300 text-sm font-medium">Daha fazla bilgi</a>
<a href="#" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 text-sm font-medium">Satın al</a>
</div>
</div>
<img src="https://www.apple.com/v/macbook-air/m/images/overview/hero/hero_macbook_air__f2e6b8chbxmq_large.jpg" alt="MacBook Air" class="w-full">
</div>
</div>
</div>
</section>
<!-- Quick Links -->
<section class="py-12 bg-gray-100">
<div class="max-w-7xl mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center">
<i data-feather="truck" class="w-8 h-8 mx-auto mb-2"></i>
<p class="text-sm">Free delivery</p>
<p class="text-xs text-gray-600">And free returns. See checkout for delivery dates.</p>
<a href="#" class="text-xs text-blue-500 hover:underline">Learn more ></a>
</div>
<div class="text-center">
<i data-feather="dollar-sign" class="w-8 h-8 mx-auto mb-2"></i>
<p class="text-sm">Pay monthly at 0% APR</p>
<p class="text-xs text-gray-600">You can pay over time when you choose to check out with Apple Card.</p>
<a href="#" class="text-xs text-blue-500 hover:underline">Learn more ></a>
</div>
<div class="text-center">
<i data-feather="message-square" class="w-8 h-8 mx-auto mb-2"></i>
<p class="text-sm">Get help buying</p>
<p class="text-xs text-gray-600">Have a question? Call a Specialist or chat online.</p>
<a href="#" class="text-xs text-blue-500 hover:underline">Contact us ></a>
</div>
<div class="text-center">
<i data-feather="map-pin" class="w-8 h-8 mx-auto mb-2"></i>
<p class="text-sm">Find a store</p>
<p class="text-xs text-gray-600">Buy online or visit an Apple Store near you.</p>
<a href="#" class="text-xs text-blue-500 hover:underline">Find a store ></a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-200 py-8">
<div class="max-w-7xl mx-auto px-4">
<div class="border-b border-gray-300 pb-6 mb-6">
<p class="text-xs text-gray-600 mb-4">
1. Trade-in values will vary based on the condition, year, and configuration of your eligible trade-in device. Not all devices are eligible for credit. You must be at least 18 years old to be eligible to trade in for credit or for an Apple Gift Card. Trade-in value may be applied toward qualifying new device purchase, or added to an Apple Gift Card. Actual value awarded is based on receipt of a qualifying device matching the description provided when estimate was made. Sales tax may be assessed on full value of a new device purchase. In-store trade-in requires presentation of a valid photo ID. Offer may not be available in all stores, and may vary between in-store and online trade-in. Some stores may have additional requirements. Apple or its trade-in partners reserve the right to refuse or limit quantity of any trade-in transaction for any reason.
</p>
<p class="text-xs text-gray-600">
To access and use all Apple Card features and products available only to Apple Card users, you must add Apple Card to Wallet on an iPhone or iPad that supports and has the latest version of iOS or iPadOS. Apple Card is subject to credit approval, available only for qualifying applicants in the United States, and issued by Goldman Sachs Bank USA, Salt Lake City Branch.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-5 gap-8 mb-6">
<div>
<h4 class="font-semibold mb-4">Shop and Learn</h4>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="#" class="hover:underline">Store</a></li>
<li><a href="#" class="hover:underline">Mac</a></li>
<li><a href="#" class="hover:underline">iPad</a></li>
<li><a href="#" class="hover:underline">iPhone</a></li>
<li><a href="#" class="hover:underline">Watch</a></li>
<li><a href="#" class="hover:underline">AirPods</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Services</h4>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="#" class="hover:underline">Apple Music</a></li>
<li><a href="#" class="hover:underline">Apple TV+</a></li>
<li><a href="#" class="hover:underline">Apple Fitness+</a></li>
<li><a href="#" class="hover:underline">Apple News+</a></li>
<li><a href="#" class="hover:underline">Apple Arcade</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Apple Store</h4>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="#" class="hover:underline">Find a Store</a></li>
<li><a href="#" class="hover:underline">Genius Bar</a></li>
<li><a href="#" class="hover:underline">Today at Apple</a></li>
<li><a href="#" class="hover:underline">Apple Camp</a></li>
<li><a href="#" class="hover:underline">Apple Trade In</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">For Business</h4>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="#" class="hover:underline">Apple and Business</a></li>
<li><a href="#" class="hover:underline">Shop for Business</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">About Apple</h4>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="#" class="hover:underline">Newsroom</a></li>
<li><a href="#" class="hover:underline">Apple Leadership</a></li>
<li><a href="#" class="hover:underline">Career Opportunities</a></li>
<li><a href="#" class="hover:underline">Investors</a></li>
<li><a href="#" class="hover:underline">Ethics & Compliance</a></li>
</ul>
</div>
</div>
<div class="text-sm text-gray-600">
<p>More ways to shop: <a href="#" class="text-blue-500 hover:underline">Find an Apple Store</a> or <a href="#" class="text-blue-500 hover:underline">other retailer</a> near you. Or call 1-800-MY-APPLE.</p>
<div class="border-t border-gray-300 mt-4 pt-4 flex flex-col md:flex-row justify-between">
<p>Copyright © 2023 Apple Inc. All rights reserved.</p>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:underline">Privacy Policy</a>
<a href="#" class="hover:underline">Terms of Use</a>
<a href="#" class="hover:underline">Sales and Refunds</a>
<a href="#" class="hover:underline">Legal</a>
<a href="#" class="hover:underline">Site Map</a>
</div>
<a href="#" class="hover:underline mt-4 md:mt-0">Turkey</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html>
|