Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Market - Discover Unique Finds</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .category-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .category-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .search-bar:focus { | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); | |
| } | |
| .animated-bg { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .cart-badge { | |
| top: -8px; | |
| right: -8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <i class="fas fa-store text-2xl"></i> | |
| <span class="text-xl font-bold">Nexus Market</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#" class="hover:text-gray-200 transition">Categories</a> | |
| <a href="#" class="hover:text-gray-200 transition">Sellers</a> | |
| <a href="#" class="hover:text-gray-200 transition">About</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search products..." class="search-bar px-4 py-2 rounded-full text-gray-800 focus:outline-none w-64"> | |
| <button class="absolute right-3 top-2 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button id="cart-btn" class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="cart-badge absolute bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden pt-4 pb-2" id="mobile-menu"> | |
| <a href="#" class="block py-2 hover:bg-white hover:bg-opacity-10 px-4 rounded">Home</a> | |
| <a href="#" class="block py-2 hover:bg-white hover:bg-opacity-10 px-4 rounded">Categories</a> | |
| <a href="#" class="block py-2 hover:bg-white hover:bg-opacity-10 px-4 rounded">Sellers</a> | |
| <a href="#" class="block py-2 hover:bg-white hover:bg-opacity-10 px-4 rounded">About</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Discover Unique Finds</h1> | |
| <p class="text-xl mb-6">Shop from thousands of independent sellers and artisans worldwide.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Shop Now</button> | |
| <button class="border border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition">Become a Seller</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Marketplace items" class="rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-semibold text-gray-800">4.9/5</p> | |
| <p class="text-sm text-gray-600">Customer Rating</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Shop by Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <div class="category-chip bg-indigo-50 rounded-lg p-4 text-center cursor-pointer hover:bg-indigo-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-indigo-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Fashion</p> | |
| </div> | |
| <div class="category-chip bg-pink-50 rounded-lg p-4 text-center cursor-pointer hover:bg-pink-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-pink-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-home text-pink-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Home</p> | |
| </div> | |
| <div class="category-chip bg-green-50 rounded-lg p-4 text-center cursor-pointer hover:bg-green-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-laptop text-green-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Electronics</p> | |
| </div> | |
| <div class="category-chip bg-yellow-50 rounded-lg p-4 text-center cursor-pointer hover:bg-yellow-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-book text-yellow-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Books</p> | |
| </div> | |
| <div class="category-chip bg-purple-50 rounded-lg p-4 text-center cursor-pointer hover:bg-purple-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-heart text-purple-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Health</p> | |
| </div> | |
| <div class="category-chip bg-blue-50 rounded-lg p-4 text-center cursor-pointer hover:bg-blue-100"> | |
| <div class="h-16 w-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-gamepad text-blue-600 text-xl"></i> | |
| </div> | |
| <p class="font-medium">Games</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Featured Products</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| -20% | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Wireless Headphones</h3> | |
| <p class="text-gray-600 text-sm mb-2">Premium noise cancellation</p> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(128)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-gray-500 line-through text-sm">$129.99</span> | |
| <span class="text-indigo-600 font-bold ml-2">$99.99</span> | |
| </div> | |
| <button class="bg-indigo-100 text-indigo-800 p-2 rounded-full hover:bg-indigo-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Smart Watch</h3> | |
| <p class="text-gray-600 text-sm mb-2">Fitness tracker & notifications</p> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(89)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-indigo-600 font-bold">$149.99</span> | |
| </div> | |
| <button class="bg-indigo-100 text-indigo-800 p-2 rounded-full hover:bg-indigo-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Ceramic Mug</h3> | |
| <p class="text-gray-600 text-sm mb-2">Handcrafted artisan mug</p> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(42)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-indigo-600 font-bold">$24.99</span> | |
| </div> | |
| <button class="bg-indigo-100 text-indigo-800 p-2 rounded-full hover:bg-indigo-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md"> | |
| <i class="fas fa-heart text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Leather Wallet</h3> | |
| <p class="text-gray-600 text-sm mb-2">Genuine leather, RFID protection</p> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(256)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-indigo-600 font-bold">$49.99</span> | |
| </div> | |
| <button class="bg-indigo-100 text-indigo-800 p-2 rounded-full hover:bg-indigo-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Top Sellers --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Top Sellers</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Seller 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 flex flex-col items-center text-center hover:shadow-md transition"> | |
| <div class="h-20 w-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-md"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Seller" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-semibold text-lg">Sarah Johnson</h3> | |
| <p class="text-gray-600 text-sm mb-3">Handmade Jewelry</p> | |
| <div class="flex mb-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition">Visit Store</button> | |
| </div> | |
| <!-- Seller 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 flex flex-col items-center text-center hover:shadow-md transition"> | |
| <div class="h-20 w-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-md"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Seller" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-semibold text-lg">Michael Chen</h3> | |
| <p class="text-gray-600 text-sm mb-3">Tech Gadgets</p> | |
| <div class="flex mb-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition">Visit Store</button> | |
| </div> | |
| <!-- Seller 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 flex flex-col items-center text-center hover:shadow-md transition"> | |
| <div class="h-20 w-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-md"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Seller" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-semibold text-lg">Emma Rodriguez</h3> | |
| <p class="text-gray-600 text-sm mb-3">Home Decor</p> | |
| <div class="flex mb-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition">Visit Store</button> | |
| </div> | |
| <!-- Seller 4 --> | |
| <div class="bg-gray-50 rounded-lg p-6 flex flex-col items-center text-center hover:shadow-md transition"> | |
| <div class="h-20 w-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-md"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Seller" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-semibold text-lg">David Wilson</h3> | |
| <p class="text-gray-600 text-sm mb-3">Vintage Collectibles</p> | |
| <div class="flex mb-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition">Visit Store</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-12 w-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Jennifer Parker</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I absolutely love the handmade necklace I purchased from Sarah's store. The quality is exceptional and it arrived beautifully packaged. Will definitely shop here again!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-12 w-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Robert Taylor</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The wireless headphones I bought exceeded my expectations. Great sound quality and battery life. Nexus Market makes it easy to find unique tech products from trusted sellers."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-12 w-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Amanda Smith</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I've purchased several home decor items from different sellers on Nexus Market and have been impressed every time. The customer service is excellent and shipping is always fast."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Updated</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for the latest products, exclusive deals, and seller spotlights.</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-indigo-800 px-6 py-3 rounded-r-lg font-semibold hover:bg-indigo-900 transition">Subscribe</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-store mr-2"></i> Nexus Market | |
| </h3> | |
| <p class="text-gray-400 mb-4">Connecting buyers with unique products from independent sellers worldwide.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Featured</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">On Sale</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Gift Cards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Sellers</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Become a Seller</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Seller Handbook</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Seller Fees</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Seller Success</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Seller Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Refunds</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Nexus Market. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Cart Modal --> | |
| <div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="flex justify-between items-center border-b pb-4 mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Your Cart (3)</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4 max-h-96 overflow-y-auto"> | |
| <!-- Cart Item 1 --> | |
| <div class="flex items-center border-b pb-4"> | |
| <div class="flex-shrink-0 h-16 w-16 rounded-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h4 class="text-sm font-medium">Wireless Headphones</h4> | |
| <p class="text-gray-500 text-sm">Premium noise cancellation</p> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-indigo-600 font-medium">$99.99</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$129.99</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 hover:text-indigo-600 p-1"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <span class="mx-2 text-sm">1</span> | |
| <button class="text-gray-500 hover:text-indigo-600 p-1"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="ml-4 text-red-500 hover:text-red-700"> | |
| <i class="far fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Cart Item 2 --> | |
| <div class="flex items-center border-b pb-4"> | |
| <div class="flex-shrink-0 h-16 w-16 rounded-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h4 class="text-sm font-medium">Ceramic Mug</h4> | |
| <p class="text-gray-500 text-sm">Handcrafted artisan mug</p> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-indigo-600 font-medium">$24.99</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 hover:text-indigo-600 p-1"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <span class="mx-2 text-sm">2</span> | |
| <button class="text-gray-500 hover:text-indigo-600 p-1"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="ml-4 text-red-500 hover:text-red-700"> | |
| <i class="far fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 border-t pt-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span class="font-medium">$149.97</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Shipping</span> | |
| <span class="font-medium">$5.99</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-600">Tax</span> | |
| <span class="font-medium">$12.75</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold border-t pt-2"> | |
| <span>Total</span> | |
| <span>$168.71</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Checkout | |
| </button> | |
| <button type="button" id="continue-shopping" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Continue Shopping | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Cart modal functionality | |
| const cartButton = document.getElementById('cart-btn'); | |
| const cartModal = document.getElementById('cart-modal'); | |
| const closeCart = document.getElementById('close-cart'); | |
| const continueShopping = document.getElementById('continue-shopping'); | |
| cartButton.addEventListener('click', () => { | |
| cartModal.classList.remove('hidden'); | |
| }); | |
| closeCart.addEventListener('click', () => { | |
| cartModal.classList.add('hidden'); | |
| }); | |
| continueShopping.addEventListener('click', () => { | |
| cartModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === cartModal) { | |
| cartModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Product wishlist toggle | |
| document.querySelectorAll('.fa-heart').forEach(heart => { | |
| heart.addEventListener('click', function() { | |
| if (this.classList.contains('far')) { | |
| this.classList.remove('far'); | |
| this.classList.add('fas'); | |
| this.classList.add('text-red-500'); | |
| this.classList.remove('text-gray-400'); | |
| } else { | |
| this.classList.add('far'); | |
| this.classList.remove('fas'); | |
| this.classList.remove('text-red-500'); | |
| this.classList.add('text-gray-400'); | |
| } | |
| }); | |
| }); | |
| // Simulate loading for product cards | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach((card, index) => { | |
| // Add slight delay to each card's appearance | |
| setTimeout(() => { | |
| card.classList.remove('opacity-0'); | |
| }, 100 * index); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hithouse/my-awesome-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |