Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Workdo - Premium Ecommerce Store</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> | |
| /* Custom styles */ | |
| .hero-slide { | |
| background-size: cover; | |
| background-position: center; | |
| height: 500px; | |
| } | |
| .mobile-menu { | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| .testimonial-carousel { | |
| scroll-snap-type: x mandatory; | |
| } | |
| .testimonial-slide { | |
| scroll-snap-align: start; | |
| } | |
| .product-card:hover .product-actions { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .product-actions { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- 1. Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-gray-800"> | |
| <span class="text-blue-600">WORK</span>DO | |
| </a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex items-center space-x-8"> | |
| <div class="relative group"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Home</a> | |
| </div> | |
| <div class="relative group"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium flex items-center"> | |
| Shop <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">All Products</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">New Arrivals</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Featured</a> | |
| </div> | |
| </div> | |
| <div class="relative group"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium flex items-center"> | |
| Categories <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Electronics</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Fashion</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Home & Garden</a> | |
| </div> | |
| </div> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">About</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a> | |
| </nav> | |
| <!-- Search and Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block relative"> | |
| <input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 w-64 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 relative"> | |
| <i class="far fa-heart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span> | |
| </a> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <div class="relative group"> | |
| <button class="text-gray-700 hover:text-blue-600 font-medium flex items-center"> | |
| Account <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">My Account</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Orders</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Wishlist</a> | |
| <div class="border-t border-gray-200 my-1"></div> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Login</a> | |
| <a href="#" class="block px-4 py-2 text-blue-600 hover:bg-gray-100">Register</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 2. Mobile Navigation --> | |
| <div class="mobile-menu fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50 overflow-y-auto" id="mobile-menu"> | |
| <div class="flex items-center justify-between px-4 py-4 border-b"> | |
| <a href="#" class="text-xl font-bold text-gray-800"> | |
| <span class="text-blue-600">WORK</span>DO | |
| </a> | |
| <button class="text-gray-700 focus:outline-none" id="close-mobile-menu"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="px-4 py-6"> | |
| <div class="mb-4"> | |
| <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-6 top-[118px] text-gray-400"></i> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Home</a> | |
| <div class="accordion"> | |
| <button class="w-full flex justify-between items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"> | |
| <span>Shop</span> | |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> | |
| </button> | |
| <div class="hidden pl-4 mt-1 space-y-1"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">All Products</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">New Arrivals</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Featured</a> | |
| </div> | |
| </div> | |
| <div class="accordion"> | |
| <button class="w-full flex justify-between items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"> | |
| <span>Categories</span> | |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> | |
| </button> | |
| <div class="hidden pl-4 mt-1 space-y-1"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Electronics</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Fashion</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Home & Garden</a> | |
| </div> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">About</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Contact</a> | |
| <div class="border-t border-gray-200 my-2"></div> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">My Account</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Orders</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Wishlist</a> | |
| <div class="border-t border-gray-200 my-2"></div> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Login</a> | |
| <a href="#" class="block px-4 py-2 text-blue-600 hover:bg-gray-100 rounded-md">Register</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" id="mobile-menu-overlay"></div> | |
| <!-- 3. Hero Slider --> | |
| <section class="relative overflow-hidden"> | |
| <div class="hero-slider flex transition-transform duration-500 ease-in-out"> | |
| <!-- Slide 1 --> | |
| <div class="hero-slide min-w-full flex items-center" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1999&q=80')"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Summer Collection 2023</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl">Discover our premium selection of products designed for your lifestyle</p> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-md transition duration-300 inline-block">Shop Now</a> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="hero-slide min-w-full flex items-center" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Premium Audio Gear</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl">Experience sound like never before with our high-end audio equipment</p> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-md transition duration-300 inline-block">Explore</a> | |
| </div> | |
| </div> | |
| <!-- Slide 3 --> | |
| <div class="hero-slide min-w-full flex items-center" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80')"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Smart Home Essentials</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl">Upgrade your living space with our innovative smart home solutions</p> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-md transition duration-300 inline-block">Discover</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slider Controls --> | |
| <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md z-10" id="prev-slide"> | |
| <i class="fas fa-chevron-left text-gray-800"></i> | |
| </button> | |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md z-10" id="next-slide"> | |
| <i class="fas fa-chevron-right text-gray-800"></i> | |
| </button> | |
| <!-- Slider Indicators --> | |
| <div class="absolute bottom-6 left-0 right-0 flex justify-center space-x-2 z-10"> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator active"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator"></button> | |
| </div> | |
| </section> | |
| <!-- 4. Top Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-10">Shop by Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <!-- Category 1 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-mobile-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Electronics</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Category 2 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-tshirt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Fashion</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Category 3 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-home text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Home & Garden</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Category 4 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-dumbbell text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Sports</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Category 5 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-book text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Books</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Category 6 --> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden aspect-square flex items-center justify-center p-6 transition-all duration-300 group-hover:bg-blue-50 group-hover:shadow-md"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200"> | |
| <i class="fas fa-gamepad text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 group-hover:text-blue-600">Gaming</h3> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 5. Category-wise Product Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Featured Products</h2> | |
| <div class="flex space-x-2 mt-4 md:mt-0"> | |
| <button class="category-tab active px-4 py-2 bg-blue-600 text-white rounded-md" data-category="all">All</button> | |
| <button class="category-tab px-4 py-2 bg-white text-gray-700 hover:bg-gray-100 rounded-md" data-category="electronics">Electronics</button> | |
| <button class="category-tab px-4 py-2 bg-white text-gray-700 hover:bg-gray-100 rounded-md" data-category="fashion">Fashion</button> | |
| <button class="category-tab px-4 py-2 bg-white text-gray-700 hover:bg-gray-100 rounded-md" data-category="home">Home</button> | |
| </div> | |
| </div> | |
| <!-- All Products (default visible) --> | |
| <div class="category-products active" data-category="all"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1999&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="1"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(42)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Smart Watch Series 5</h3> | |
| <p class="text-gray-500 text-sm mb-2">Latest model with health tracking</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$299.99</span> | |
| <span class="text-sm text-gray-500 line-through">$349.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(28)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Running Shoes Pro</h3> | |
| <p class="text-gray-500 text-sm mb-2">Lightweight and comfortable</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$89.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="3"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(56)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Wireless Headphones</h3> | |
| <p class="text-gray-500 text-sm mb-2">Noise cancelling technology</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$179.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="4"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(34)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Vintage Camera</h3> | |
| <p class="text-gray-500 text-sm mb-2">Classic design, modern features</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$249.99</span> | |
| <span class="text-sm text-gray-500 line-through">$299.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Electronics Products (hidden by default) --> | |
| <div class="category-products hidden" data-category="electronics"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="5"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(47)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Ultra HD Smart TV</h3> | |
| <p class="text-gray-500 text-sm mb-2">55-inch 4K resolution</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$799.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="6"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(32)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Smart Home Hub</h3> | |
| <p class="text-gray-500 text-sm mb-2">Control your home with voice</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$129.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="7"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(89)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Gaming Laptop Pro</h3> | |
| <p class="text-gray-500 text-sm mb-2">High performance for gamers</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$1,299.99</span> | |
| <span class="text-sm text-gray-500 line-through">$1,499.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="8"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(41)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Wireless Earbuds</h3> | |
| <p class="text-gray-500 text-sm mb-2">Crystal clear sound quality</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$79.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fashion Products (hidden by default) --> | |
| <div class="category-products hidden" data-category="fashion"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="9"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(23)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Denim Jacket</h3> | |
| <p class="text-gray-500 text-sm mb-2">Classic style with modern fit</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$59.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="10"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(18)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Leather Handbag</h3> | |
| <p class="text-gray-500 text-sm mb-2">Premium quality genuine leather</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$129.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1539533018447-63fcce2678e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="11"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(42)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Casual Sneakers</h3> | |
| <p class="text-gray-500 text-sm mb-2">Comfortable for all-day wear</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$49.99</span> | |
| <span class="text-sm text-gray-500 line-through">$69.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="12"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(31)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Silk Scarf</h3> | |
| <p class="text-gray-500 text-sm mb-2">Elegant accessory for any outfit</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$34.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Home Products (hidden by default) --> | |
| <div class="category-products hidden" data-category="home"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="13"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(27)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Ceramic Dinner Set</h3> | |
| <p class="text-gray-500 text-sm mb-2">Elegant design for 4 people</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$89.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2127&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="14"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(19)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Wooden Coffee Table</h3> | |
| <p class="text-gray-500 text-sm mb-2">Solid oak with minimalist design</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$199.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1583845112208-9737fe233c2b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="15"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(38)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Memory Foam Pillow</h3> | |
| <p class="text-gray-500 text-sm mb-2">Orthopedic support for better sleep</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$39.99</span> | |
| <span class="text-sm text-gray-500 line-through">$49.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="16"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(25)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Indoor Plant Set</h3> | |
| <p class="text-gray-500 text-sm mb-2">3 easy-care plants with pots</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$59.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-300">View All Products</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 6. Best Selling Products --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-10">Best Selling Products</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-full">BEST SELLER</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="17"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(127)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Wireless Headphones Pro</h3> | |
| <p class="text-gray-500 text-sm mb-2">Premium sound with noise cancellation</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-gray-800">$199.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 product-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Product" class="w-full h-64 object-cover"> | |
| <span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-full">BEST SELLER</span> | |
| <div class="product-actions absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 flex justify-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 quick-view-btn" data-product-id="18"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-1"> | |
| <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-2">(98)</span> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Smart Home Hub</h3> | |
| <p class="text-gray-500 | |
| </html> |