<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foody - Organic Food Store</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            /* Adjust spacing without top bar */
            #mainNav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            
            /* Adjust content spacing */
            main {
                padding-top: 4rem;
            }
            
            /* Adjust search bar spacing */
            .container {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            
            /* Make nav items more compact on mobile */
            #mainNav .flex {
                gap: 0.5rem;
            }
            
            /* Adjust logo size for mobile */
            #mainNav .text-3xl {
                font-size: 1.5rem;
            }
        }

        /* Fade In Up Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Fade In Animation */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Scale In Animation */
        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Animation Classes */
        .animate-on-scroll {
            opacity: 0;
            transition: all 0.6s ease-out;
        }

        .fade-in-up {
            transform: translateY(20px);
        }

        .fade-in {
            opacity: 0;
        }

        .scale-in {
            transform: scale(0.9);
            opacity: 0;
        }

        /* Active Animation Classes */
        .animate-active {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Hover Transitions */
        .feature-card {
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .team-member {
            transition: all 0.3s ease;
        }

        .team-member:hover {
            transform: translateY(-5px);
        }

        /* Stagger Delay Classes */
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

        /* Small devices (phones, 640px and down) */
        @media (max-width: 640px) {
            /* Hero Section */
            .hero-section h1 {
                font-size: 2.5rem !important;
            }
            
            .hero-section p {
                font-size: 1rem !important;
            }
            
            /* Stats */
            .flex.justify-center.gap-8 {
                gap: 1rem !important;
                flex-wrap: wrap;
            }
            
            .text-4xl {
                font-size: 1.875rem !important;
            }
            
            /* Story Section */
            .grid.md\:grid-cols-2 {
                gap: 2rem !important;
            }
            
            .space-y-4 > div {
                padding: 1.5rem !important;
            }
            
            .text-5xl {
                font-size: 2.5rem !important;
            }
            
            /* Team Section */
            .grid.md\:grid-cols-4 {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem !important;
            }
            
            .team-member .w-24 {
                width: 4rem !important;
                height: 4rem !important;
            }
        }
        
        /* Extra small devices (small phones, 375px and down) */
        @media (max-width: 375px) {
            /* Hero Section */
            .hero-section {
                padding: 4rem 1rem !important;
            }
            
            .hero-section h1 {
                font-size: 2rem !important;
            }
            
            /* Stats */
            .flex.justify-center.gap-8 {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            /* Story Section */
            .grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
            }
            
            .space-y-4.mt-8 {
                margin-top: 1rem !important;
            }
            
            /* Team Section */
            .grid.md\:grid-cols-4 {
                grid-template-columns: 1fr !important;
            }
        }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="bg-gray-100 py-2 transition-transform duration-300 hidden md:block" id="topBar">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <span class="text-gray-600"><i class="fas fa-map-marker-alt"></i> 123 Street, New York, USA</span>
                <span class="text-gray-600"><i class="fas fa-envelope"></i> info@example.com</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="text-gray-600">Follow us:</span>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>

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

                <!-- Search Bar for Mobile -->
                <div class="flex md:hidden flex-1 mx-4">
                    <div class="relative w-full">
                        <input type="text" 
                               placeholder="Search..." 
                               class="w-full px-4 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                        <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-green-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Navigation Links - Hidden on mobile -->
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-800 hover:text-green-500">Home</a>
                    <a href="about.html" class="text-gray-800 hover:text-green-500">About Us</a>
                    <a href="index.html#products" class="text-gray-800 hover:text-green-500">Products</a>
                    
                    <!-- Pages Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Pages
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
                            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
                            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">404 Page</a>
                        </div>
                    </div>

                    <!-- Services Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Services
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Food Delivery</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Organic Food</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Quality Control</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Storage Service</a>
                        </div>
                    </div>

                    <a href="index.html#contact" class="text-gray-800 hover:text-green-500">Contact Us</a>
                </div>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-4">
                    <!-- Search Dropdown - Hidden on mobile -->
                    <div class="relative group hidden md:block">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-search"></i>
                        </button>
                        <!-- Search Dropdown Content -->
                        <div class="absolute right-0 top-full w-72 bg-white shadow-lg rounded-lg py-4 px-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <form class="flex gap-2">
                                <input type="text" 
                                       placeholder="Search here..." 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- User Account Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-user"></i>
                        </button>
                        <!-- User Dropdown Content -->
                        <div class="absolute right-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="login.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-sign-in-alt mr-2"></i> Login
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-plus mr-2"></i> Register
                            </a>
                            <div class="border-t border-gray-100 my-2"></div>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-circle mr-2"></i> My Profile
                            </a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-box mr-2"></i> My Orders
                            </a>
                        </div>
                    </div>

                    <!-- Shopping Cart Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2 relative">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="absolute -top-2 -right-2 bg-green-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center">0</span>
                        </button>
                        <!-- Cart Dropdown Content -->
                        <div class="absolute right-0 top-full w-80 bg-white shadow-lg rounded-lg py-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <!-- Empty Cart State -->
                            <div class="px-4 py-2 text-center text-gray-500">
                                <i class="fas fa-shopping-basket text-4xl mb-2"></i>
                                <p>Your cart is empty</p>
                            </div>
                            
                            <!-- Cart Items (hidden by default) -->
                            <div class="hidden">
                                <!-- Cart Item -->
                                <div class="flex items-center gap-4 px-4 py-2 hover:bg-gray-50">
                                    <img src="assets/images/products/tomatoes.jpg" alt="Product" class="w-16 h-16 object-cover rounded">
                                    <div class="flex-1">
                                        <h4 class="text-sm font-semibold">Fresh Tomatoes</h4>
                                        <p class="text-sm text-gray-500">2 × $19.00</p>
                                    </div>
                                    <button class="text-red-500 hover:text-red-600">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Cart Footer -->
                            <div class="border-t border-gray-100 mt-2 px-4 py-3">
                                <div class="flex justify-between mb-3">
                                    <span class="font-semibold">Total:</span>
                                    <span class="font-bold">$0.00</span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="cart.html" class="flex-1 px-4 py-2 bg-gray-100 text-gray-800 rounded-lg text-center hover:bg-gray-200 text-sm">
                                        View Cart
                                    </a>
                                    <a href="checkout.html" class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg text-center hover:bg-green-600 text-sm">
                                        Checkout
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Add this right after the navigation section -->
    <div class="md:hidden fixed right-4 top-16 z-50" id="navToggle">
        <button class="bg-green-500 text-white p-2 rounded-full shadow-lg animate-pulse hover:bg-green-600 transition-colors">
            <i class="fas fa-chevron-down text-sm transition-transform duration-300" id="navArrow"></i>
        </button>
    </div>

    <!-- Add this dropdown menu -->
    <div class="md:hidden fixed right-4 top-24 z-50 bg-white rounded-lg shadow-xl w-48 transition-all duration-300 transform scale-95 opacity-0 invisible" id="mobileNav">
        <div class="py-2">
            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Home</a>
            <a href="about.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">About Us</a>
            <a href="index.html#products" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Products</a>
            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
            <a href="index.html#contact" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Contact Us</a>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-green-50 via-white to-orange-50 py-32 hero-section">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center animate-on-scroll fade-in-up">
                <h1 class="text-5xl md:text-6xl font-bold mb-6">
                    We're Passionate About <span class="text-green-500">Organic Food</span>
                </h1>
                <p class="text-xl text-gray-600 mb-8">Bringing fresh, organic produce from local farms to your table since 2010</p>
                <div class="flex justify-center gap-8">
                    <div class="text-center">
                        <div class="text-4xl font-bold text-green-500 mb-2">15+</div>
                        <div class="text-gray-600">Years Experience</div>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-green-500 mb-2">1000+</div>
                        <div class="text-gray-600">Happy Customers</div>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-green-500 mb-2">100%</div>
                        <div class="text-gray-600">Organic Products</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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>

    <!-- Our Story Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-16 items-center">
                <div class="animate-on-scroll fade-in-up">
                    <span class="text-green-500 font-semibold">Our Story</span>
                    <h2 class="text-4xl font-bold mb-6">A Journey of Fresh & Organic Excellence</h2>
                    <p class="text-gray-600 mb-6">Started with a simple mission to provide families with access to fresh, organic produce, we've grown into a community of passionate food lovers and health enthusiasts.</p>
                    <div class="space-y-4">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-leaf text-2xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">100% Organic Products</h3>
                                <p class="text-gray-600">We ensure all our products meet strict organic certification standards</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-truck text-2xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">Fast Delivery</h3>
                                <p class="text-gray-600">Same-day delivery to ensure maximum freshness</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-users text-2xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">Customer Satisfaction</h3>
                                <p class="text-gray-600">Dedicated to providing the best service to our customers</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4 sm:mt-0 mt-8">
                    <div class="space-y-4">
                        <div class="bg-green-100 p-8 rounded-2xl animate-on-scroll scale-in delay-1">
                            <i class="fas fa-seedling text-5xl text-green-500"></i>
                            <h3 class="text-xl font-bold mt-4">Fresh Products</h3>
                            <p class="text-gray-600">Directly from farms</p>
                        </div>
                        <div class="bg-orange-100 p-8 rounded-2xl animate-on-scroll scale-in delay-2">
                            <i class="fas fa-apple-alt text-5xl text-orange-500"></i>
                            <h3 class="text-xl font-bold mt-4">Healthy Food</h3>
                            <p class="text-gray-600">Rich in nutrients</p>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-yellow-100 p-8 rounded-2xl animate-on-scroll scale-in delay-3">
                            <i class="fas fa-truck-loading text-5xl text-yellow-500"></i>
                            <h3 class="text-xl font-bold mt-4">Quick Delivery</h3>
                            <p class="text-gray-600">To your doorstep</p>
                        </div>
                        <div class="bg-blue-100 p-8 rounded-2xl animate-on-scroll scale-in delay-4">
                            <i class="fas fa-hand-holding-heart text-5xl text-blue-500"></i>
                            <h3 class="text-xl font-bold mt-4">Customer Care</h3>
                            <p class="text-gray-600">24/7 support</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto mb-16 animate-on-scroll fade-in">
                <span class="text-green-500 font-semibold">Our Team</span>
                <h2 class="text-4xl font-bold mb-6">Meet Our Expert Team</h2>
                <p class="text-gray-600">Our dedicated team of professionals works tirelessly to bring you the best organic products while ensuring sustainable farming practices.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden group team-member animate-on-scroll scale-in delay-1">
                    <div class="p-6">
                        <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-user text-3xl text-green-500"></i>
                        </div>
                        <h3 class="text-xl font-bold text-center mb-2">John Doe</h3>
                        <p class="text-green-500 text-center mb-4">CEO & Founder</p>
                        <div class="flex justify-center gap-4">
                            <a href="#" class="text-gray-400 hover:text-green-500 transition-colors">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-green-500 transition-colors">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-green-500 transition-colors">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- Repeat for other team members -->
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-green-500 font-semibold">Why Choose Us</span>
                <h2 class="text-4xl font-bold mb-6">What Makes Us Different</h2>
                <p class="text-gray-600">We're committed to providing the highest quality organic products while supporting sustainable farming practices.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
                <div class="p-6 bg-gray-50 rounded-xl hover:shadow-lg transition-shadow">
                    <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-medal text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Premium Quality</h3>
                    <p class="text-gray-600">We source only the finest organic products from certified farms.</p>
                </div>
                <!-- Add more features -->
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400">
        <div class="container mx-auto px-4 py-16">
            <!-- Footer Content Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Company Info -->
                <div>
                    <a href="/" class="text-3xl font-bold inline-block mb-4">
                        <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                    </a>
                    <p class="mb-4">
                        Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita
                    </p>
                    <!-- Social Links -->
                    <div class="flex gap-2">
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>

                <!-- Address -->
                <div>
                    <h3 class="text-xl text-white font-semibold mb-4">Address</h3>
                    <p class="mb-2">
                        <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                        123 Street, New York, USA
                    </p>
                    <p class="mb-2">
                        <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
                        +012 345 67890
                    </p>
                    <p class="mb-2">
                        <i class="far fa-envelope text-gray-400 mr-2"></i>
                        info@example.com
                    </p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-xl text-white font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                About Us
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Contact Us
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Our Services
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Terms & Condition
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Support
                            </a>
                        </li>
                    </ul>
                </div>

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

            <!-- Copyright -->
            <div class="mt-8 pt-8 border-t border-gray-800">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p><a href="https://codecrafter.fun/" class="text-white hover:underline">
                        Foody
                    </a>All Right Reserved.</p>
                    <p>
                        Designed By 
                        <a href="https://codecrafter.fun/" class="text-white hover:underline">
                            MASHRUF
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <a href="#" 
       class="fixed bottom-8 right-8 w-10 h-10 bg-green-500 text-white rounded-full opacity-0 invisible transition-all duration-300 flex items-center justify-center hover:bg-green-600 hover:scale-110 group scroll-to-top"
       id="backToTop"
       aria-label="Back to top">
        <i class="fas fa-arrow-up text-sm group-hover:-translate-y-1 transition-transform"></i>
    </a>

    <!-- Custom JavaScript -->
    <script>
        // Back to Top Button
        const backToTop = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.classList.remove('opacity-0', 'invisible');
                backToTop.classList.add('opacity-100', 'visible');
            } else {
                backToTop.classList.add('opacity-0', 'invisible');
                backToTop.classList.remove('opacity-100', 'visible');
            }
        });

        backToTop.addEventListener('click', (e) => {
            e.preventDefault();
            
            const startPosition = window.pageYOffset;
            const duration = 1500; // Increased duration for more noticeable effect
            const startTime = performance.now();

            function easeOutExpo(t) {
                // This easing function starts very slow and then accelerates exponentially
                return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
            }

            function scrollAnimation(currentTime) {
                const timeElapsed = currentTime - startTime;
                const progress = Math.min(timeElapsed / duration, 1);
                
                // Calculate the new position using the easing function
                const easeProgress = easeOutExpo(progress);
                const newPosition = startPosition - (startPosition * easeProgress);
                
                window.scrollTo(0, newPosition);

                if (timeElapsed < duration) {
                    requestAnimationFrame(scrollAnimation);
                }
            }

            requestAnimationFrame(scrollAnimation);
        });

        // Remove mobile menu related JavaScript
        let lastScroll = 0;
        const topBar = document.getElementById('topBar');
        const mainNav = document.getElementById('mainNav');
        const topBarHeight = topBar ? topBar.offsetHeight : 0;

        window.addEventListener('scroll', () => {
            const currentScroll = window.pageYOffset;
            
            if (window.innerWidth >= 768) { // Only apply scroll behavior on medium and larger screens
                if (currentScroll <= 0) {
                    // At the very top
                    if (topBar) topBar.style.transform = 'translateY(0)';
                    mainNav.style.position = 'relative';
                    mainNav.style.transform = 'none';
                    mainNav.style.top = '0';
                } else if (currentScroll > lastScroll) {
                    // Scrolling down
                    if (topBar) topBar.style.transform = `translateY(-${topBarHeight}px)`;
                    mainNav.style.position = 'fixed';
                    mainNav.style.transform = 'translateY(0)';
                    mainNav.style.top = '0';
                    mainNav.style.width = '100%';
                } else {
                    // Scrolling up
                    if (topBar) {
                        topBar.style.transform = 'translateY(0)';
                        mainNav.style.transform = `translateY(${topBarHeight}px)`;
                        mainNav.style.top = '-' + topBarHeight + 'px';
                    } else {
                        mainNav.style.transform = 'translateY(0)';
                        mainNav.style.top = '0';
                    }
                    mainNav.style.position = 'fixed';
                    mainNav.style.width = '100%';
                }
            } else {
                // On mobile, keep nav fixed at top
                mainNav.style.position = 'fixed';
                mainNav.style.top = '0';
                mainNav.style.transform = 'none';
                mainNav.style.width = '100%';
            }
            
            lastScroll = currentScroll;
        });

        // Smooth scroll function
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                    return;
                }

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    const navHeight = document.getElementById('mainNav').offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Mobile Navigation Toggle
        const navToggle = document.getElementById('navToggle');
        const navArrow = document.getElementById('navArrow');
        const mobileNav = document.getElementById('mobileNav');
        let isNavOpen = false;

        navToggle.addEventListener('click', () => {
            isNavOpen = !isNavOpen;
            
            // Rotate arrow
            navArrow.style.transform = isNavOpen ? 'rotate(180deg)' : 'rotate(0)';
            
            // Show/hide menu
            if (isNavOpen) {
                mobileNav.classList.remove('opacity-0', 'invisible', 'scale-95');
                mobileNav.classList.add('opacity-100', 'visible', 'scale-100');
            } else {
                mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
                mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
            }
        });

        // Close menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!navToggle.contains(e.target) && !mobileNav.contains(e.target) && isNavOpen) {
                isNavOpen = false;
                navArrow.style.transform = 'rotate(0)';
                mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
                mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
            }
        });

        // Close menu when scrolling
        window.addEventListener('scroll', () => {
            if (isNavOpen) {
                isNavOpen = false;
                navArrow.style.transform = 'rotate(0)';
                mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
                mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
            }
        });
    </script>

    <script src="assets/js/main.js"></script>

    <!-- Add this modal for product details -->
    <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 max-w-2xl w-full relative">
                <!-- Close button -->
                <button onclick="closeProductModal()" 
                        class="absolute right-4 top-4 w-8 h-8 bg-gray-100 hover:bg-red-500 hover:text-white text-gray-600 rounded-full flex items-center justify-center transition-all duration-300">
                    <i class="fas fa-times"></i>
                </button>
                
                <!-- Product Details Content -->
                <div class="p-6" id="productDetails">
                    <div class="flex flex-col md:flex-row gap-6">
                        <!-- Product Image -->
                        <div class="w-full md:w-1/2">
                            <img id="modalProductImage" src="" alt="Product" class="w-full h-auto rounded-lg">
                        </div>
                        
                        <!-- Product Info -->
                        <div class="w-full md:w-1/2">
                            <h3 id="modalProductName" class="text-2xl font-bold mb-2"></h3>
                            <p id="modalProductPrice" class="text-green-500 text-xl font-semibold mb-4"></p>
                            <p id="modalProductDescription" class="text-gray-600 mb-4"></p>
                            
                            <!-- Additional Details -->
                            <div class="space-y-3 mb-6">
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-check-circle text-green-500"></i>
                                    <span>Fresh and Organic</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-truck text-green-500"></i>
                                    <span>Free Delivery</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-exchange-alt text-green-500"></i>
                                    <span>Easy Returns</span>
                                </div>
                            </div>
                            
                            <!-- Add to Cart Section -->
                            <div class="flex items-center gap-4">
                                <div class="flex items-center border rounded-lg">
                                    <button class="px-4 py-2 text-gray-600 hover:text-green-500" onclick="updateQuantity('decrease')">-</button>
                                    <input type="number" id="modalQuantity" value="1" min="1" class="w-16 text-center border-x py-2">
                                    <button class="px-4 py-2 text-gray-600 hover:text-green-500" onclick="updateQuantity('increase')">+</button>
                                </div>
                                <button class="flex-1 bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition-colors">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add this JavaScript -->
    <script>
        // Product Modal Functions
        function viewProductDetails(button) {
            const modal = document.getElementById('productModal');
            const name = button.getAttribute('data-name');
            const price = button.getAttribute('data-price');
            const description = button.getAttribute('data-description');
            const image = button.getAttribute('data-image');

            // Update modal content
            document.getElementById('modalProductName').textContent = name;
            document.getElementById('modalProductPrice').textContent = price;
            document.getElementById('modalProductDescription').textContent = description;
            document.getElementById('modalProductImage').src = image;
            document.getElementById('modalQuantity').value = 1;

            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // Prevent background scrolling
        }

        function closeProductModal() {
            const modal = document.getElementById('productModal');
            modal.classList.add('hidden');
            document.body.style.overflow = ''; // Restore scrolling
        }

        function updateQuantity(action) {
            const input = document.getElementById('modalQuantity');
            let value = parseInt(input.value);
            
            if (action === 'increase') {
                input.value = value + 1;
            } else if (action === 'decrease' && value > 1) {
                input.value = value - 1;
            }
        }

        // Close modal when clicking outside
        document.getElementById('productModal').addEventListener('click', (e) => {
            if (e.target === document.getElementById('productModal')) {
                closeProductModal();
            }
        });

        // Close modal with escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeProductModal();
            }
        });
    </script>

    <script>
        function filterProducts(category) {
            // Update active button state
            document.querySelectorAll('.filter-btn').forEach(btn => {
                // Reset all buttons to default state
                btn.classList.remove('bg-green-500', 'text-white');
                btn.classList.add('bg-white', 'text-green-500', 'border-2', 'border-green-500');
            });
            
            // Set active button state
            event.currentTarget.classList.remove('bg-white', 'text-green-500');
            event.currentTarget.classList.add('bg-green-500', 'text-white');

            // Filter products
            const products = document.querySelectorAll('[data-category]');
            products.forEach(product => {
                if (category === 'all' || product.dataset.category === category) {
                    // Show product with animation
                    product.style.opacity = '0';
                    product.style.display = 'block';
                    setTimeout(() => {
                        product.style.opacity = '1';
                    }, 50);
                } else {
                    // Hide product
                    product.style.display = 'none';
                }
            });
        }

        // Initialize with all products shown
        document.addEventListener('DOMContentLoaded', () => {
            filterProducts('all');
        });
    </script>

    <style>
        /* Update transition styles */
        [data-category] {
            transition: opacity 0.3s ease-in-out;
        }
        
        .filter-btn {
            transition: all 0.3s ease;
        }
        
        /* Add hover effect */
        .filter-btn:hover {
            transform: translateY(-2px);
        }
    </style>

    <!-- Add this JavaScript before the closing body tag -->
    <script>
        // Intersection Observer for scroll animations
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-active');
                    observer.unobserve(entry.target); // Stop observing once animated
                }
            });
        }, observerOptions);

        // Observe all elements with animate-on-scroll class
        document.addEventListener('DOMContentLoaded', () => {
            const animatedElements = document.querySelectorAll('.animate-on-scroll');
            animatedElements.forEach(el => observer.observe(el));
        });

        // Add smooth scroll behavior to all internal links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html> 