<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Products - Foody</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/styles.css" rel="stylesheet">
    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
    <!-- Top Bar - Hidden on mobile, visible on md and up -->
<div class="hidden md:block bg-gray-100 py-2 border-b border-gray-200">
    <div class="container mx-auto px-4">
        <!-- Desktop View (side by side) -->
        <div class="flex justify-between items-center">
            <!-- Contact Info -->
            <div class="flex items-center space-x-6">
                <a href="#" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-map-marker-alt text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">123 Street, New York, USA</span>
                </a>
                <a href="tel:+012345678" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-phone-alt text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">+012 345 6789</span>
                </a>
                <a href="mailto:info@example.com" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-envelope text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">info@example.com</span>
                </a>
            </div>

            <!-- Social Links -->
            <div class="flex items-center space-x-4">
                <span class="text-gray-600 text-sm">Follow us:</span>
                <div class="flex space-x-3">
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Main Navigation -->
    <nav class="bg-white py-4 shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="text-2xl md:text-3xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                </a>

                <!-- Navigation Links -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-green-500 transition-colors">Home</a>
                    <a href="about.html" class="text-gray-700 hover:text-green-500 transition-colors">About Us</a>
                    <a href="products.html" class="text-gray-700 hover:text-green-500 bg-green-50">Products</a>
                    <div class="relative group">
                        <button class="text-gray-700 hover:text-green-500 transition-colors flex items-center">
                            Pages
                            <i class="fas fa-chevron-down ml-2 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
                            <a href="products.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 bg-green-50">Shop Grid</a>
                            <a href="cart.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Shopping Cart</a>
                            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Sign In</a>
                        </div>
                    </div>
                    <a href="index.html#contact" class="text-gray-700 hover:text-green-500 transition-colors">Contact Us</a>
                </div>

                <script>
                    // Block keyboard shortcuts
                    document.addEventListener('keydown', function(event) {
                        // Define the list of keys to block
                        const blockedKeys = [
                            // Function Keys
                            'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
                            
                            // Common Shortcuts
                            'Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
                            'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen',
                
                            // Specific Developer Tools Shortcuts
                            'I', 'C', 'U', 'J', 'S', // Used in common DevTools shortcuts like Ctrl+Shift+I, etc.
                        ];
                
                        // Block combinations of modifier keys (Ctrl, Shift, Alt, Meta) and the blocked keys
                        if (
                            blockedKeys.includes(event.key) || 
                            (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
                        ) {
                            event.preventDefault();  // Block the default action
                            event.stopPropagation(); // Prevent further event propagation
                            console.log(`Blocked: ${event.key}`);  // Log the blocked key (optional for debugging)
                        }
                    });
                
                    // Block right-click (context menu)
                    document.addEventListener('contextmenu', function(event) {
                        event.preventDefault();  // Disable right-click
                        console.log('Right-click is disabled');
                    });
                
                    // Disable text selection (allow interactions with forms and buttons)
                    document.addEventListener('mousedown', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent mouse down selection
                        }
                    });
                
                    document.addEventListener('mouseup', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent mouse up selection
                        }
                    });
                
                    document.addEventListener('selectstart', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent selection start
                        }
                    });
                </script>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-4">
                    <!-- Search Icon -->
                    <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                        <i class="fas fa-search text-lg text-gray-700 hover:text-green-500 transition-colors"></i>
                    </button>

                    <!-- User Account Icon with Dropdown -->
                    <div class="relative group">
                        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                            <i class="fas fa-user text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
                        </button>
                        <!-- User Dropdown -->
                        <div class="absolute right-0 top-full mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
                            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign In</a>
                            <a href="signup.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign Up</a>
                        </div>
                    </div>

                    <!-- Shopping Cart Icon with Dropdown -->
                    <div class="relative group">
                        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                            <i class="fas fa-shopping-bag text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
                            <span class="absolute -top-1 -right-1 bg-green-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center cart-count">0</span>
                        </button>
                        <!-- Cart Dropdown -->
                        <div class="absolute right-0 top-full mt-2 w-80 bg-white shadow-lg rounded-lg hidden group-hover:block">
                            <div class="p-4 border-b">
                                <h3 class="font-medium">Shopping Cart (<span class="cart-count">0</span> items)</h3>
                            </div>
                            <div class="cart-items max-h-64 overflow-y-auto">
                                <!-- Cart items will be dynamically inserted here -->
                            </div>
                            <div class="p-4 border-t">
                                <a href="cart.html" class="block w-full bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors">
                                    View Cart
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Mobile Menu Button - Visible only on small devices -->
<div class="md:hidden">
    <button id="mobileMenuBtn" class="fixed top-20 right-4 w-12 h-12 bg-green-500 text-white rounded-full shadow-lg flex items-center justify-center animate-pulse z-50">
        <i class="fas fa-chevron-down text-xl transition-transform duration-300"></i>
    </button>

    <!-- Mobile Menu Popup -->
    <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden">
        <div class="absolute right-4 top-32 w-64 bg-white rounded-lg shadow-xl transform -translate-y-full opacity-0 transition-all duration-300">
            <div class="p-4 space-y-3">
                <a href="index.html" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-home text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Home</span>
                </a>
                <a href="#about" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-info-circle text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>About Us</span>
                </a>
                <a href="#products" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-shopping-basket text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Products</span>
                </a>
                <a href="#contact" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-envelope text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Contact Us</span>
                </a>
            </div>
        </div>
    </div>
</div>

    <!-- Products Header -->
    <section class="bg-gray-100 py-16">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <h1 class="text-4xl font-bold mb-4">Our Products</h1>
                <nav class="flex justify-center">
                    <ol class="flex items-center space-x-2">
                        <li><a href="index.html" class="text-green-500 hover:text-green-600">Home</a></li>
                        <li><span class="text-gray-500 mx-2">/</span></li>
                        <li class="text-gray-600">Products</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <!-- Filter and Sort Options -->
            <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                <!-- Categories -->
                <div class="flex flex-wrap items-center gap-4 mb-4 md:mb-0">
                    <button class="category-btn active px-6 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transition-colors" data-category="all">
                        All Products
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="vegetables">
                        Vegetables
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="fruits">
                        Fruits
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="meat">
                        Meat
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="dairy">
                        Dairy
                    </button>
                </div>

                <!-- Sort Dropdown -->
                <div class="relative">
                    <select class="px-4 py-2 border rounded-lg focus:outline-none focus:border-green-500 appearance-none bg-white pr-10">
                        <option>Sort by: Featured</option>
                        <option>Price: Low to High</option>
                        <option>Price: High to Low</option>
                        <option>Newest First</option>
                    </select>
                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                        <i class="fas fa-chevron-down text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Product Card 1 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="1" data-category="vegetables" data-aos="fade-up" data-aos-delay="100">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="2" data-category="fruits" data-aos="fade-up" data-aos-delay="200">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="3" data-category="meat" data-aos="fade-up" data-aos-delay="300">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="4" data-category="dairy" data-aos="fade-up" data-aos-delay="400">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 5 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="5" data-category="vegetables" data-aos="fade-up" data-aos-delay="500">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 6 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="6" data-category="fruits" data-aos="fade-up" data-aos-delay="600">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 7 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="7" data-category="meat" data-aos="fade-up" data-aos-delay="700">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 8 -->
                <div class="product-card bg-white rounded-lg shadow-md group hover:shadow-xl transition-shadow" data-product-id="8" data-category="dairy" data-aos="fade-up" data-aos-delay="800">
                    <div class="relative overflow-hidden">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full z-10">
                            New
                        </span>
                        <img src="images/tomatoes.jpg" alt="Fresh Tomato" class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomato</h3>
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <span class="text-green-500 font-bold text-xl">$19.00</span>
                                <span class="text-gray-400 line-through ml-2">$29.00</span>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="#" class="flex-1 bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to cart
                            </a>
                            <button class="px-4 py-2 border border-green-500 text-green-500 rounded hover:bg-green-50 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center mt-12 space-x-2">
                <button class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-green-500 hover:text-white hover:border-green-500 transition-colors">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white">1</button>
                <button class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-green-500 hover:text-white hover:border-green-500 transition-colors">2</button>
                <button class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-green-500 hover:text-white hover:border-green-500 transition-colors">3</button>
                <button class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-green-500 hover:text-white hover:border-green-500 transition-colors">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer class="bg-gray-900 text-gray-300">
        <div class="container mx-auto px-4 pt-16 pb-8">
            <!-- Footer Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <!-- About Section -->
                <div class="space-y-4">
                    <h3 class="text-2xl font-bold">
                        <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                    </h3>
                    <p class="text-gray-400">
                        Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet
                    </p>
                    <div class="flex space-x-3">
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-facebook-f text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-youtube text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-linkedin-in text-white"></i>
                        </a>
                    </div>
                </div>

                <!-- Address Section -->
                <div class="space-y-4">
                    <h4 class="text-xl font-semibold mb-3">Address</h4>
                    <p class="flex items-center">
                        <i class="fas fa-map-marker-alt text-green-500 mr-3"></i>
                        123 Street, New York, USA
                    </p>
                    <p class="flex items-center">
                        <i class="fas fa-phone-alt text-green-500 mr-3"></i>
                        +012 345 67890
                    </p>
                    <p class="flex items-center">
                        <i class="fas fa-envelope text-green-500 mr-3"></i>
                        info@example.com
                    </p>
                </div>

                <!-- Quick Links -->
                <div class="space-y-4">
                    <h4 class="text-xl font-semibold mb-3">Quick Links</h4>
                    <ul class="space-y-2">
                        <li>
                            <a href="about.html" class="hover:text-green-500 transition-colors flex items-center">
                                <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                                About Us
                            </a>
                        </li>
                        <li>
                            <a href="index.html#contact" class="hover:text-green-500 transition-colors flex items-center">
                                <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                                Contact Us
                            </a>
                        </li>
                        <li>
                            <a href="index.html#services" class="hover:text-green-500 transition-colors flex items-center">
                                <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                                Our Services
                            </a>
                        </li>
                        <li>
                            <a href="index.html#terms" class="hover:text-green-500 transition-colors flex items-center">
                                <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                                Terms & Condition
                            </a>
                        </li>
                        <li>
                            <a href="index.html#support" class="hover:text-green-500 transition-colors flex items-center">
                                <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                                Support
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Newsletter -->
                <div class="space-y-4">
                    <h4 class="text-xl font-semibold mb-3">Newsletter</h4>
                    <p class="text-gray-400">
                        Dolor amet sit justo amet elitr clita ipsum elitr est.
                    </p>
                    <div class="flex">
                        <input type="email" 
                            class="w-full px-4 py-3 bg-gray-800 text-white rounded-l focus:outline-none focus:ring-2 focus:ring-green-500" 
                            placeholder="Your email">
                        <button class="px-6 py-3 bg-green-500 text-white rounded-r hover:bg-green-600 transition-colors">
                            SignUp
                        </button>
                    </div>
                </div>
            </div>

            <!-- Copyright -->
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p>© <a href="#" class="text-green-500">CodeCrafter</a>. All Right Reserved.</p>
                    <p class="mt-2 md:mt-0">
                        Designed By <a href="#" class="text-green-500">MASHRUF</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Product Details Modal -->
    <div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 relative overflow-y-auto max-h-[90vh]">
                <!-- Close Button -->
                <button id="closeModal" class="absolute top-2 right-2 p-2 bg-white rounded-full shadow-lg text-gray-600 hover:text-red-500 hover:bg-red-50 transition-all duration-300 transform hover:scale-110 z-10">
                    <i class="fas fa-times text-xl"></i>
                </button>
                
                <!-- Modal Content -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-4 md:p-8">
                    <!-- Product Image -->
                    <div class="relative">
                        <img id="modalProductImage" src="" alt="Product" 
                            class="w-full h-48 sm:h-64 md:h-96 object-cover rounded-lg">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full">
                            New
                        </span>
                    </div>
                    
                    <!-- Product Details -->
                    <div class="space-y-4">
                        <h2 id="modalProductName" class="text-2xl md:text-3xl font-bold"></h2>
                        <div class="flex items-center space-x-2">
                            <span id="modalProductPrice" class="text-xl md:text-2xl font-bold text-green-500"></span>
                            <span id="modalProductOldPrice" class="text-base md:text-lg text-gray-400 line-through"></span>
                        </div>
                        
                        <p class="text-gray-600 text-sm md:text-base">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        
                        <div class="space-y-4">
                            <!-- Quantity -->
                            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
                                <span class="text-gray-600">Quantity:</span>
                                <div class="flex items-center border rounded max-w-[150px]">
                                    <button class="px-3 py-1 hover:bg-gray-100" id="decreaseQuantity">-</button>
                                    <span class="px-3 py-1 border-x min-w-[40px] text-center" id="modalQuantity">1</span>
                                    <button class="px-3 py-1 hover:bg-gray-100" id="increaseQuantity">+</button>
                                </div>
                            </div>
                            
                            <!-- Add to Cart Button -->
                            <button id="modalAddToCart" class="w-full bg-green-500 text-white py-3 rounded-full hover:bg-green-600 transition-colors">
                                Add to Cart
                            </button>
                        </div>
                        
                        <!-- Additional Info -->
                        <div class="border-t pt-4 mt-6">
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
                                <span class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-1"></i>
                                    In Stock
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-truck text-green-500 mr-1"></i>
                                    Free Delivery
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-undo text-green-500 mr-1"></i>
                                    30 Day Return
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll to Top Button -->
    <button id="scrollTopBtn" class="fixed bottom-8 right-8 bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-green-600 transition-all duration-300 opacity-0 invisible">
        <i class="fas fa-arrow-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/modal.js"></script>
    <script src="js/category.js"></script>
    <script src="js/cursor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            new CustomCursor();
            AOS.init({
                duration: 1000,
                once: true,
                offset: 100
            });
        });
    </script>
</body>
</html> 