rebuild

components/footer.js

@@ -0,0 +1,130 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: auto;
+        }
+        footer {
+          background: #111827;
+          color: white;
+          padding: 3rem 1.5rem;
+        }
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+        }
+        .grid {
+          display: grid;
+          gap: 2rem;
+          margin-bottom: 2rem;
+        }
+        @media (min-width: 768px) {
+            .grid {
+              grid-template-columns: repeat(4, 1fr);
+          }
+        }
+        h3, h4 {
+          font-weight: 600;
+        }
+        h3 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+        }
+        h4 {
+          font-size: 1rem;
+          margin-bottom: 1rem;
+        }
+        a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s;
+        }
+        a:hover {
+          color: white;
+        }
+        .social-icons {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-icons a {
+          display: grid;
+          place-items: center;
+          width: 2.5rem;
+          height: 2.5rem;
+          background: #1f2937;
+          border-radius: 50%;
+        }
+        .social-icons a:hover {
+          background: #374151;
+        }
+        .border-t {
+          border-top: 1px solid #374151;
+        }
+        .text-center {
+          text-align: center;
+        }
+        .text-gray-400 {
+          color: #9ca3af;
+        }
+        .py-8 {
+          padding-top: 2rem;
+          padding-bottom: 2rem;
+        }
+        .pt-8 {
+          padding-top: 2rem;
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="grid">
+            <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="/about.html">About Us</a></li>
+                <li><a href="/contact.html">Contact</a></li>
+                <li><a href="/faqs.html">FAQs</a></li>
+                <li><a href="/shipping.html">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="/returns.html">Returns</a></li>
+                <li><a href="/warranty.html">Warranty</a></li>
+                <li><a href="/size-guide.html">Size Guide</a></li>
+                <li><a href="/track-order.html">Track Order</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-4">Follow Us</h4>
+              <div class="social-icons">
+                <a href="#"><i data-feather="facebook" class="w-5 h-5"></i></a>
+              <a href="#"><i data-feather="twitter" class="w-5 h-5"></i></a>
+              <a href="#"><i data-feather="instagram" class="w-5 h-5"></i></a>
+              <a href="#"><i data-feather="youtube" class="w-5 h-5"></i></a>
+            </div>
+          </div>
+          <div class="border-t pt-8 text-center text-gray-400">
+            <p>&copy; 2024 ShopSparkle. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+
+    // Initialize feather icons
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,218 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: 0;
+          z-index: 40;
+        }
+        header {
+          background: white;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        font-family: system-ui, -apple-system, sans-serif;
+        }
+        nav {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 1rem 1.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: #4f46e5;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .logo-icon {
+          color: #8b5cf6;
+        font-size: 1.8rem;
+        animation: float 4s ease-in-out infinite;
+        }
+        .nav-links {
+          display: none;
+          gap: 1.5rem;
+        }
+        .nav-links a {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s;
+        }
+        .nav-links a:hover {
+          color: #4f46e5;
+        }
+        .nav-actions {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .nav-button {
+          background: transparent;
+          border: none;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          transition: background 0.3s;
+          cursor: pointer;
+          position: relative;
+          display: grid;
+          place-items: center;
+        }
+        .nav-button:hover {
+          background: #f3f4f6;
+        }
+        .cart-badge {
+          position: absolute;
+          top: -2px;
+          right: -2px;
+          background: #4f46e5;
+          color: white;
+          font-size: 0.75rem;
+          border-radius: 9999px;
+          width: 1.25rem;
+          height: 1.25rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+        }
+        .mobile-menu-btn {
+          display: block;
+          background: transparent;
+          border: none;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          transition: background 0.3s;
+          cursor: pointer;
+        }
+        .mobile-menu {
+          display: none;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1.5rem;
+          background: white;
+          border-top: 1px solid #e5e7eb;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          width: 100%;
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+          z-index: 30;
+        }
+        .mobile-menu.open {
+          display: flex;
+        }
+        .mobile-menu a {
+          color: #374151;
+          text-decoration: none;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          transition: background 0.3s;
+        }
+        .mobile-menu a:hover {
+          background: #f9fafb;
+        }
+        @media (min-width: 768px) {
+          .nav-links {
+            display: flex;
+          }
+          .mobile-menu-btn {
+            display: none;
+          }
+        }
+        @keyframes float {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-8px); }
+        }
+      </style>
+      <header>
+        <nav>
+          <div style="display: flex; align-items: center; gap: 2rem;">
+            <a href="/" class="logo">
+              <i class="fas fa-gem logo-icon"></i>
+              ShopSparkle
+            </a>
+            <div class="nav-links">
+              <a href="/">Home</a>
+              <a href="/shop.html">Shop</a>
+              <a href="/new-arrivals.html">New Arrivals</a>
+              <a href="/sale.html">Sale</a>
+              <a href="/about.html">About</a>
+              <a href="/contact.html">Contact</a>
+            </div>
+          </div>
+          <div class="nav-actions">
+            <button class="nav-button search-btn" title="Search">
+              <i data-feather="search" class="w-5 h-5"></i>
+            </button>
+            <button class="nav-button cart-btn" title="Cart">
+              <i data-feather="shopping-cart" class="w-5 h-5"></i>
+              <span class="cart-badge">0</span>
+            </button>
+            <button class="nav-button user-btn" title="Account">
+              <i data-feather="user" class="w-5 h-5"></i>
+            </button>
+            <button class="mobile-menu-btn" id="mobile-menu-toggle">
+              <i data-feather="menu" class="w-5 h-5"></i>
+            </button>
+          </div>
+        </nav>
+        <div class="mobile-menu" id="mobile-menu">
+          <a href="/">Home</a>
+          <a href="/shop.html">Shop</a>
+          <a href="/new-arrivals.html">New Arrivals</a>
+          <a href="/sale.html">Sale</a>
+          <a href="/about.html">About</a>
+          <a href="/contact.html">Contact</a>
+        </div>
+      </header>
+    `;
+
+    // Initialize feather icons after DOM is ready
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+
+    // Mobile menu toggle
+    const toggleBtn = this.shadowRoot.getElementById('mobile-menu-toggle');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+
+    toggleBtn.addEventListener('click', () => {
+      mobileMenu.classList.toggle('open');
+      // Update icon
+      const icon = toggleBtn.querySelector('i');
+      if (mobileMenu.classList.contains('open')) {
+        icon.setAttribute('data-feather', 'x');
+      } else {
+        icon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+
+    // Cart interaction
+    const cartBtn = this.shadowRoot.querySelector('.cart-btn');
+    cartBtn.addEventListener('click', () => {
+      // Dispatch event to open cart drawer (handled by main script)
+      document.dispatchEvent(new CustomEvent('open-cart'));
+    });
+
+    // Search interaction
+    const searchBtn = this.shadowRoot.querySelector('.search-btn');
+    searchBtn.addEventListener('click', () => {
+      // Show search modal
+      document.dispatchEvent(new CustomEvent('open-search'));
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,36 +10,12 @@
     <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">
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-40">
-        <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
-            <div class="flex items-center space-x-8">
-                <h1 class="text-2xl font-bold text-indigo-600">ShopSparkle</h1>
-                <div class="hidden md:flex space-x-6">
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Shop</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">New Arrivals</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Sale</a>
-                    <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
-                </div>
-            </div>
-            <div class="flex items-center space-x-4">
-                <button class="p-2 hover:bg-gray-100 rounded-lg transition">
-                    <i data-feather="search" class="w-5 h-5"></i>
-                </button>
-                <button class="p-2 hover:bg-gray-100 rounded-lg transition relative">
-                    <i data-feather="shopping-cart" class="w-5 h-5"></i>
-                    <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                </button>
-                <button class="p-2 hover:bg-gray-100 rounded-lg transition">
-                    <i data-feather="user" class="w-5 h-5"></i>
-                </button>
-            </div>
-        </nav>
-    </header>
-
-    <!-- Hero Carousel Section -->
+    <!-- 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">
@@ -332,9 +309,8 @@
             </div>
         </div>
     </footer>
-
+    <script src="components/navbar.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,160 +1,177 @@
-// Carousel functionality
-let currentSlide = 0;
-const slides = document.querySelectorAll('.carousel-slide');
-const totalSlides = slides.length;
-const track = document.getElementById('carousel-track');
-
-function updateCarousel() {
-    track.style.transform = `translateX(-${currentSlide * 100}%)`;
-    
-    // Update dots
-    document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
-        if (index === currentSlide) {
-            dot.classList.add('bg-white');
-            dot.classList.remove('bg-white/50');
-        } else {
-            dot.classList.remove('bg-white');
-            dot.classList.add('bg-white/50');
-        }
-    });
-}
 
-function nextSlide() {
-    currentSlide = (currentSlide + 1) % totalSlides;
-    updateCarousel();
-}
-
-function prevSlide() {
-    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
-    updateCarousel();
-}
+// Global state
+let currentSlide = 0;
+let cartCount = 0;
+let selectedColor = 'Midnight Black';
+let selectedSize = 'Medium';
 
-function goToSlide(index) {
-    currentSlide = index;
-    updateCarousel();
-}
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    // Feather icons
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
 
-// Auto-play carousel
-setInterval(nextSlide, 5000);
+    // Carousel
+    const track = document.getElementById('carousel-track');
+    if (track) {
+        const slides = document.querySelectorAll('.carousel-slide');
+        const totalSlides = slides.length;
 
-// Color selector
-let selectedColor = 'Midnight Black';
-function selectColor(color, className) {
-    selectedColor = color;
-    document.getElementById('selected-color').textContent = color;
-    
-    // Update border colors
-    document.querySelectorAll('.color-btn').forEach(btn => {
-        btn.classList.remove('border-indigo-600');
-        btn.classList.add('border-gray-300');
-    });
-    event.target.classList.remove('border-gray-300');
-    event.target.classList.add('border-indigo-600');
-}
+        function updateCarousel() {
+            track.style.transform = `translateX(-${currentSlide * 100}%)`;
+        
+            // Update dots
+            document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
+                if (index === currentSlide) {
+                    dot.classList.add('bg-white');
+                    dot.classList.remove('bg-white/50');
+            } else {
+                dot.classList.remove('bg-white');
+                dot.classList.add('bg-white/50');
+            }
+        });
+        }
 
-// Size selector
-let selectedSize = 'Medium';
-function selectSize(size) {
-    selectedSize = size;
-    
-    // Update button styles
-    document.querySelectorAll('.size-btn').forEach(btn => {
-        btn.classList.remove('border-indigo-600', 'bg-indigo-50');
-        btn.classList.add('border-gray-300');
-    });
-    event.target.classList.remove('border-gray-300');
-    event.target.classList.add('border-indigo-600', 'bg-indigo-50');
-}
-
-// Quantity controls
-function increaseQuantity() {
-    const input = document.getElementById('quantity');
-    input.value = parseInt(input.value) + 1;
-}
-
-function decreaseQuantity() {
-    const input = document.getElementById('quantity');
-    if (parseInt(input.value) > 1) {
-        input.value = parseInt(input.value) - 1;
-    }
-}
+        function nextSlide() {
+            const slides = document.querySelectorAll('.carousel-slide');
+            const totalSlides = slides.length;
+            currentSlide = (currentSlide + 1) % totalSlides;
+            updateCarousel();
+        }
 
-// Cart functionality
-let cartCount = 0;
-function addToCart() {
-    const quantity = document.getElementById('quantity').value;
-    cartCount += parseInt(quantity);
-    document.getElementById('cart-count').textContent = cartCount;
-    
-    // Show toast notification
-    showToast(`Added ${quantity} item(s) to cart!`);
-    
-    // Add pulse animation to cart icon
-    const cartIcon = document.querySelector('[data-feather="shopping-cart"]').parentElement;
-    cartIcon.classList.add('animate-pulse');
-    setTimeout(() => {
-        cartIcon.classList.remove('animate-pulse');
-    }, 1000);
-}
-
-// Toast notification
-function showToast(message) {
-    const toast = document.createElement('div');
-    toast.className = 'toast';
-    toast.textContent = message;
-    document.body.appendChild(toast);
-    
-    setTimeout(() => {
-        toast.style.animation = 'slideOut 0.3s ease-in forwards';
-        setTimeout(() => {
-            document.body.removeChild(toast);
-        }, 300);
-    }, 3000);
-}
-
-// Add slide out animation
-const style = document.createElement('style');
-style.textContent = `
-    @keyframes slideOut {
-        from {
-            transform: translateX(0);
-            opacity: 1;
+        function prevSlide() {
+            const slides = document.querySelectorAll('.carousel-slide');
+            const totalSlides = slides.length;
+            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
+            updateCarousel();
         }
-        to {
-            transform: translateX(100%);
-            opacity: 0;
+
+        function goToSlide(index) {
+            currentSlide = index;
+            updateCarousel();
         }
+
+        // Auto-play
+        setInterval(nextSlide, 5000);
+
+        // Expose functions globally
+        window.nextSlide = nextSlide;
+        window.prevSlide = prevSlide;
+        window.goToSlide = goToSlide;
     }
-`;
-document.head.appendChild(style);
-
-// Smooth scroll for anchor links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start'
+
+    // Color selector
+    window.selectColor = (color, className) => {
+        selectedColor = color;
+        const el = document.getElementById('selected-color');
+        if (el) el.textContent = color;
+        
+            // Update border colors
+            document.querySelectorAll('.color-btn').forEach(btn => {
+                btn.classList.remove('border-indigo-600');
+                btn.classList.add('border-gray-300');
             });
+            event.target.classList.remove('border-gray-300');
+            event.target.classList.add('border-indigo-600');
+    };
+
+    // Size selector
+    window.selectSize = (size) => {
+        selectedSize = size;
+        
+            // Update button styles
+            document.querySelectorAll('.size-btn').forEach(btn => {
+                btn.classList.remove('border-indigo-600', 'bg-indigo-50');
+            btn.classList.add('border-gray-300');
+        });
+        event.target.classList.remove('border-gray-300');
+        event.target.classList.add('border-indigo-600', 'bg-indigo-50');
+    };
+
+    // Quantity
+    window.increaseQuantity = () => {
+        const input = document.getElementById('quantity');
+        if (input) input.value = parseInt(input.value) + 1;
+    };
+
+    window.decreaseQuantity = () => {
+        const input = document.getElementById('quantity');
+        if (input && parseInt(input.value) > 1) {
+            input.value = parseInt(input.value) - 1;
         }
+    };
+
+    // Cart
+    window.addToCart = (productName, price) => {
+        let quantity = 1;
+        const qtyInput = document.getElementById('quantity');
+        if (qtyInput) quantity = parseInt(qtyInput.value);
+        cartCount += quantity;
+        
+            // Update cart badge in navbar component
+            const badge = document.querySelector('custom-navbar')?.shadowRoot?.querySelector('.cart-badge');
+            if (badge) badge.textContent = cartCount;
+        
+            // Also update in header if present
+            const headerBadge = document.getElementById('cart-count');
+            if (headerBadge) headerBadge.textContent = cartCount;
+        
+            // Toast
+            showToast(`Added ${quantity} × ${productName || 'item'} to cart!`);
+    };
+
+    // Toast
+    window.showToast = (message) => {
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        
+            setTimeout(() => {
+                toast.style.animation = 'slideOut 0.3s ease-in forwards';
+                setTimeout(() => {
+                    document.body.removeChild(toast);
+                }, 300);
+            }, 3000);
+    };
+
+    // Event listeners for custom components
+    document.addEventListener('open-cart', () => {
+        // Open cart drawer (simulate)
+        showToast('Cart opened!');
     });
-});
 
-// Lazy loading for images (if needed)
-const imageObserver = new IntersectionObserver((entries, observer) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            const img = entry.target;
-            img.src = img.dataset.src;
-            img.classList.remove('loading');
-            observer.unobserve(img);
-        }
+    document.addEventListener('open-search', () => {
+        // Open search modal
+        const modal = document.createElement('div');
+        modal.className = 'fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+            <div class="bg-white p-8 rounded-2xl max-w-2xl w-full mx-4">
+                <h3 class="text-2xl font-bold mb-4">Search Products</h3>
+                <input type="text" class="w-full border p-4 rounded-lg" placeholder="Type product name...">
+            </div>
+        );
+        document.body.appendChild(modal);
+        modal.querySelector('input').focus();
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                document.body.removeChild(modal);
+            }
+        });
     });
-});
 
-// Initialize feather icons after DOM loads
-document.addEventListener('DOMContentLoaded', () => {
-    feather.replace();
-});
+    // Lazy load images
+    const lazyImages = document.querySelectorAll('img[data-src]');
+    if (lazyImages.length > 0) {
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                img.classList.remove('loading');
+                imageObserver.unobserve(img);
+            }
+        });
+        lazyImages.forEach(img => imageObserver.observe(img));
+    }
+});

shop.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - ShopSparkle</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></custom-navbar>
+
+    <main class="container mx-auto px-4 py-12">
+        <div class="mb-12">
+            <h1 class="text-4xl font-bold text-gray-900 mb-6">Shop All Products</h1>
+            <div class="flex flex-wrap gap-4 items-center justify-between">
+                <div class="text-gray-600">Explore our curated collection of premium tech products.</div>
+            <div class="flex gap-3">
+                <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Filter <i class="fas fa-sliders-h ml-2"></i></button>
+                <button class="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 transition">Sort by: Featured <i class="fas fa-chevron-down ml-2"></i></button>
+            </div>
+        </div>
+
+        <!-- Product Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            <!-- Product 1 -->
+            <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg">
+                <div class="relative">
+                    <img src="http://static.photos/technology/320x240/301" alt="Wireless Headphones" class="w-full h-64 object-cover">
+                    <span class="absolute top-4 left-4 bg-red-500 text-white text-xs px-3 py-1 rounded-full">SALE</span>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Wireless Headphones Pro</h3>
+                    <p class="text-gray-500 text-sm mb-4">Noise cancelling, 30h battery</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-2xl font-bold text-indigo-600">$299.99</span>
+                        <button onclick="addToCart('Wireless Headphones Pro', 299.99)" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Add to Cart</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Product 2 -->
+            <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg">
+                <img src="http://static.photos/technology/320x240/302" alt="Smart Watch" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Smart Watch Ultra</h3>
+                    <p class="text-gray-500 text-sm mb-4">Fitness tracking, heart rate monitor</p>
+                    <div class="flex items-center justify-between">
+                    <span class="text-2xl font-bold text-indigo-600">$249.99</span>
+                    <button onclick="addToCart('Smart Watch Ultra', 249.99)" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Add to Cart</button>
+                </div>
+            </div>
+            <!-- Product 3 -->
+            <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg">
+                <img src="http://static.photos/technology/320x240/303" alt="Portable Speaker" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">Bluetooth Speaker Max</h3>
+                    <p class="text-gray-500 text-sm mb-4">360° sound, waterproof</p>
+                    <div class="flex items-center justify-between">
+                    <span class="text-2xl font-bold text-indigo-600">$89.99</span>
+                    <button onclick="addToCart('Bluetooth Speaker Max', 89.99)" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Add to Cart</button>
+                </div>
+            </div>
+            <!-- Product 4 -->
+            <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg">
+                <img src="http://static.photos/technology/320x240/304" alt="Gaming Mouse" class="w-full h-64 object-cover">
+                <div class="p-6">
+                    <h3 class="text-xl font-bold mb-2">RGB Gaming Mouse</h3>
+                    <p class="text-gray-500 text-sm mb-4">16,000 DPI, programmable buttons</p>
+                    <div class="flex items-center justify-between">
+                    <span class="text-2xl font-bold text-indigo-600">$59.99</span>
+                    <button onclick="addToCart('RGB Gaming Mouse', 59.99)" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Add to Cart</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pagination -->
+        <div class="mt-16 flex justify-center">
+            <nav class="flex space-x-2">
+                <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">1</a>
+                <a href="#" class="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 transition">2</a>
+                <a href="#" class="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 transition">3</a>
+                <a href="#" class="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 transition">Next →</a>
+            </nav>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

style.css

@@ -1,33 +1,12 @@
-/* Custom animations and transitions */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.carousel-slide {
-    animation: fadeIn 0.5s ease-in-out;
-}
 
-.color-btn, .size-btn {
-    transition: all 0.3s ease;
-}
-
-.color-btn:hover {
-    transform: scale(1.1);
-}
-
-.size-btn:hover {
-    background-color: rgb(238 242 255);
-}
-
-/* Smooth scroll behavior */
+/* Base */
 html {
     scroll-behavior: smooth;
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-track {
@@ -35,36 +14,18 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #6366f1;
-    border-radius: 5px;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #4f46e5;
-}
-
-/* Loading animation */
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.loading {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    background: linear-gradient(45deg, #5a67d8, #6b46c1);
 }
 
-/* Toast notification styles */
-.toast {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: #10b981;
-    color: white;
-    padding: 16px 24px;
-    border-radius: 8px;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    animation: slideIn 0.3s ease-out;
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes slideIn {
@@ -78,18 +39,78 @@ html {
     }
 }
 
-/* Hover effects for product cards */
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes shimmer {
+    0% { background-position: -200px 0; }
+    100% { background-position: 200px 0; }
+}
+
+/* Components */
+.carousel-slide {
+    animation: fadeIn 0.8s ease-out;
+}
+
+.color-btn, .size-btn {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.color-btn:hover {
+    transform: scale(1.15);
+}
+
+.size-btn:hover {
+    background-color: rgb(238 242 255);
+}
+
+/* Toast */
+.toast {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    background: linear-gradient(90deg, #10b981, #34d399);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 12px;
+    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.25);
+    z-index: 1000;
+    animation: slideIn 0.4s ease-out;
+    font-weight: 500;
+    backdrop-filter: blur(8px);
+}
+
+/* Cards */
 .product-card {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 
 .product-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    transform: translateY(-12px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
 }
 
-/* Button hover effects */
+/* Buttons */
 .btn-primary {
+    background: linear-gradient(90deg, #667eea, #764ba2);
     position: relative;
     overflow: hidden;
 }
@@ -102,7 +123,7 @@ html {
     width: 0;
     height: 0;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.2);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
 }
@@ -112,9 +133,31 @@ html {
     height: 300px;
 }
 
-/* Responsive adjustments */
+/* Responsive */
 @media (max-width: 768px) {
     .carousel-track {
         height: 400px;
     }
-}
+}
+
+/* New */
+.shimmer {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200px 100%;
+    animation: shimmer 1.5s infinite linear;
+}
+
+.float {
+    animation: float 3s ease-in-out infinite;
+}
+
+.glass {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Navbar adjustments */
+custom-navbar {
+    display: block;
+}