Spaces:
Running
Running
| <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> | |