Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShopSparkle Hub - Premium Product Landing</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Custom Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Carousel Section --> | |
| <section class="relative overflow-hidden bg-white"> | |
| <div class="carousel-container relative h-96 md:h-[600px]"> | |
| <div class="carousel-track flex transition-transform duration-500 ease-in-out h-full" id="carousel-track"> | |
| <div class="carousel-slide min-w-full h-full flex items-center justify-center bg-gradient-to-br from-indigo-100 to-purple-100"> | |
| <img src="http://static.photos/technology/1200x630/11" alt="Product 1" class="object-cover h-full w-full"> | |
| </div> | |
| <div class="carousel-slide min-w-full h-full flex items-center justify-center bg-gradient-to-br from-pink-100 to-purple-100"> | |
| <img src="http://static.photos/technology/1200x630/12" alt="Product 2" class="object-cover h-full w-full"> | |
| </div> | |
| <div class="carousel-slide min-w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-indigo-100"> | |
| <img src="http://static.photos/technology/1200x630/13" alt="Product 3" class="object-cover h-full w-full"> | |
| </div> | |
| </div> | |
| <button onclick="prevSlide()" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white p-3 rounded-full shadow-lg transition"> | |
| <i data-feather="chevron-left" class="w-6 h-6"></i> | |
| </button> | |
| <button onclick="nextSlide()" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white p-3 rounded-full shadow-lg transition"> | |
| <i data-feather="chevron-right" class="w-6 h-6"></i> | |
| </button> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <button onclick="goToSlide(0)" class="carousel-dot w-3 h-3 bg-white rounded-full transition"></button> | |
| <button onclick="goToSlide(1)" class="carousel-dot w-3 h-3 bg-white/50 rounded-full transition"></button> | |
| <button onclick="goToSlide(2)" class="carousel-dot w-3 h-3 bg-white/50 rounded-full transition"></button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Details Section --> | |
| <section class="container mx-auto px-4 py-12"> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Product Info --> | |
| <div> | |
| <div class="mb-6"> | |
| <span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full mb-4">NEW ARRIVAL</span> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">Premium Wireless Headphones</h2> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5"></i> | |
| </div> | |
| <span class="ml-2 text-gray-600">(128 reviews)</span> | |
| </div> | |
| <p class="text-3xl font-bold text-indigo-600 mb-6">$299.99</p> | |
| <p class="text-gray-600 mb-8">Experience crystal-clear audio with our premium wireless headphones. Featuring advanced noise cancellation, 30-hour battery life, and superior comfort for all-day wear.</p> | |
| </div> | |
| <!-- Color Selector --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3">Color: <span id="selected-color">Midnight Black</span></h3> | |
| <div class="flex space-x-3"> | |
| <button onclick="selectColor('Midnight Black', 'bg-black')" class="color-btn w-10 h-10 bg-black rounded-full border-2 border-indigo-600"></button> | |
| <button onclick="selectColor('Pearl White', 'bg-white')" class="color-btn w-10 h-10 bg-white rounded-full border-2 border-gray-300"></button> | |
| <button onclick="selectColor('Navy Blue', 'bg-blue-800')" class="color-btn w-10 h-10 bg-blue-800 rounded-full border-2 border-gray-300"></button> | |
| <button onclick="selectColor('Rose Gold', 'bg-pink-300')" class="color-btn w-10 h-10 bg-pink-300 rounded-full border-2 border-gray-300"></button> | |
| </div> | |
| </div> | |
| <!-- Size Selector --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3">Size</h3> | |
| <div class="flex space-x-3"> | |
| <button onclick="selectSize('Small')" class="size-btn px-6 py-2 border-2 border-gray-300 rounded-lg hover:border-indigo-600 transition">S</button> | |
| <button onclick="selectSize('Medium')" class="size-btn px-6 py-2 border-2 border-indigo-600 rounded-lg bg-indigo-50 transition">M</button> | |
| <button onclick="selectSize('Large')" class="size-btn px-6 py-2 border-2 border-gray-300 rounded-lg hover:border-indigo-600 transition">L</button> | |
| <button onclick="selectSize('Extra Large')" class="size-btn px-6 py-2 border-2 border-gray-300 rounded-lg hover:border-indigo-600 transition">XL</button> | |
| </div> | |
| </div> | |
| <!-- Quantity and Add to Cart --> | |
| <div class="flex items-center space-x-4 mb-8"> | |
| <div class="flex items-center border rounded-lg"> | |
| <button onclick="decreaseQuantity()" class="p-2 hover:bg-gray-100 transition"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <input type="number" id="quantity" value="1" min="1" class="w-16 text-center border-x py-2"> | |
| <button onclick="increaseQuantity()" class="p-2 hover:bg-gray-100 transition"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <button onclick="addToCart()" class="flex-1 bg-indigo-600 text-white py-3 px-6 rounded-lg hover:bg-indigo-700 transition font-semibold flex items-center justify-center space-x-2"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| <span>Add to Cart</span> | |
| </button> | |
| </div> | |
| <!-- Shipping Info --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i data-feather="truck" class="w-5 h-5 mr-2"></i> | |
| Shipping Information | |
| </h3> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> | |
| Free shipping on orders over $50 | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> | |
| 2-3 business days delivery | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> | |
| 30-day return policy | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> | |
| 1-year warranty included | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Product Features Grid --> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Key Features</h3> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> | |
| <i data-feather="volume-2" class="w-8 h-8 text-indigo-600 mb-3"></i> | |
| <h4 class="font-semibold mb-2">Premium Sound</h4> | |
| <p class="text-sm text-gray-600">High-fidelity audio with deep bass and crisp highs</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> | |
| <i data-feather="battery" class="w-8 h-8 text-indigo-600 mb-3"></i> | |
| <h4 class="font-semibold mb-2">30H Battery Life</h4> | |
| <p class="text-sm text-gray-600">Extended playtime for uninterrupted listening</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> | |
| <i data-feather="wifi-off" class="w-8 h-8 text-indigo-600 mb-3"></i> | |
| <h4 class="font-semibold mb-2">Noise Cancellation</h4> | |
| <p class="text-sm text-gray-600">Active noise cancellation for immersive experience</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> | |
| <i data-feather="bluetooth" class="w-8 h-8 text-indigo-600 mb-3"></i> | |
| <h4 class="font-semibold mb-2">Bluetooth 5.0</h4> | |
| <p class="text-sm text-gray-600">Stable connection with 33ft range</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customer Reviews Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-3xl font-bold text-center mb-8">Customer Reviews</h3> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/64x64/101" alt="Customer" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">Absolutely love these headphones! The sound quality is amazing and the noise cancellation is a game-changer.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/64x64/102" alt="Customer" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-semibold">Mike Chen</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">Great value for money. Comfortable for long listening sessions and the battery lasts forever!</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <img src="http://static.photos/people/64x64/103" alt="Customer" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-semibold">Emily Davis</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">Best headphones I've ever owned! The design is sleek and the sound quality is unparalleled.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Related Products Section --> | |
| <section class="container mx-auto px-4 py-12"> | |
| <h3 class="text-3xl font-bold text-center mb-8">You Might Also Like</h3> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition"> | |
| <img src="http://static.photos/technology/320x240/201" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-semibold mb-2">Wireless Earbuds Pro</h4> | |
| <p class="text-gray-600 text-sm mb-2">Premium true wireless earbuds</p> | |
| <p class="text-xl font-bold text-indigo-600">$149.99</p> | |
| <button class="mt-3 w-full bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200 transition">View Details</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition"> | |
| <img src="http://static.photos/technology/320x240/202" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-semibold mb-2">Gaming Headset</h4> | |
| <p class="text-gray-600 text-sm mb-2">RGB gaming headphones with mic</p> | |
| <p class="text-xl font-bold text-indigo-600">$199.99</p> | |
| <button class="mt-3 w-full bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200 transition">View Details</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition"> | |
| <img src="http://static.photos/technology/320x240/203" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-semibold mb-2">Portable Speaker</h4> | |
| <p class="text-gray-600 text-sm mb-2">Waterproof bluetooth speaker</p> | |
| <p class="text-xl font-bold text-indigo-600">$79.99</p> | |
| <button class="mt-3 w-full bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200 transition">View Details</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition"> | |
| <img src="http://static.photos/technology/320x240/204" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-semibold mb-2">Studio Monitors</h4> | |
| <p class="text-gray-600 text-sm mb-2">Professional audio monitors</p> | |
| <p class="text-xl font-bold text-indigo-600">$399.99</p> | |
| <button class="mt-3 w-full bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200 transition">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ShopSparkle</h3> | |
| <p class="text-gray-400">Your premium destination for quality tech products.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition">FAQs</a></li> | |
| <li><a href="#" class="hover:text-white transition">Shipping Info</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Customer Service</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Returns</a></li> | |
| <li><a href="#" class="hover:text-white transition">Warranty</a></li> | |
| <li><a href="#" class="hover:text-white transition">Size Guide</a></li> | |
| <li><a href="#" class="hover:text-white transition">Track Order</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="youtube" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> | |
| <p>© 2024 ShopSparkle. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |