<!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;
            }
        }
    </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="#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="#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
                            <a href="#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
                            <a href="#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>

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

                    <!-- 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="#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 cart-count">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"
                             onmouseover="this.classList.remove('invisible', 'opacity-0')" 
                             onmouseout="this.classList.add('invisible', 'opacity-0')">
                            <!-- Empty Cart State -->
                            <div class="px-4 py-2 text-center text-gray-500 empty-cart-message">
                                <i class="fas fa-shopping-basket text-4xl mb-2"></i>
                                <p>Your cart is empty</p>
                            </div>
                            
                            <!-- Cart Items -->
                            <div class="cart-items hidden">
                                <!-- Items will be dynamically inserted here -->
                            </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 cart-total">$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-btn">
                                        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="#products" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Products</a>
            <a href="#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
            <a href="#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
            <a href="#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
            <a href="#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-b from-gray-50 to-white overflow-hidden">
        <!-- Background Pattern & Vegetables -->
        <div class="absolute inset-0">
            <!-- Gradient Overlay -->
            <div class="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-transparent z-10"></div>
            
            <!-- Vegetables Background -->
            <div class="absolute inset-0 opacity-90">
                <img src="assets/images/farmer.jpg" 
                     class="w-full h-full object-cover object-center" 
                     alt="Background Vegetables">
            </div>
            
            <!-- Decorative Elements -->
            <div class="absolute inset-0 z-20">
                <div class="absolute -top-20 -left-20 w-64 h-64 bg-green-200 rounded-full filter blur-3xl opacity-30 animate-pulse"></div>
                <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-orange-200 rounded-full filter blur-3xl opacity-30 animate-pulse-delay"></div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="container mx-auto px-4 py-32 relative z-30">
            <div class="max-w-2xl">
                <!-- Hero Content -->
                <div class="space-y-8">
                    <div class="space-y-4">
                        <span class="inline-block px-4 py-2 bg-green-100 text-green-600 rounded-full text-sm font-medium backdrop-blur-sm bg-opacity-90">
                            100% Organic Food
                        </span>
                        <h1 class="text-5xl md:text-6xl font-bold leading-tight">
                            Organic Food Is
                            <span class="text-green-500">Good For Health</span>
                        </h1>
                        <p class="text-gray-600 text-lg max-w-xl">
                            Fresh, organic ingredients handpicked by experts. Enjoy natural and healthy food for your family.
                        </p>
                    </div>
                    
                    <div class="flex flex-wrap gap-4">
                        <a href="#products" class="px-8 py-4 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all transform hover:scale-105 hover:shadow-lg flex items-center group">
                            <span>Shop Now</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </a>
                        <a href="about.html" class="px-8 py-4 bg-white bg-opacity-90 backdrop-blur-sm border-2 border-green-500 text-green-500 rounded-full hover:bg-green-50 transition-all transform hover:scale-105 flex items-center">
                            Learn More
                        </a>
                    </div>

                    <!-- Stats -->
                    <div class="flex gap-8 pt-8">
                        <div class="bg-white bg-opacity-90 backdrop-blur-sm px-6 py-4 rounded-xl">
                            <h3 class="text-3xl font-bold text-green-500">10k+</h3>
                            <p class="text-gray-600">Happy Customers</p>
                        </div>
                        <div class="bg-white bg-opacity-90 backdrop-blur-sm px-6 py-4 rounded-xl">
                            <h3 class="text-3xl font-bold text-green-500">100%</h3>
                            <p class="text-gray-600">Organic Products</p>
                        </div>
                        <div class="bg-white bg-opacity-90 backdrop-blur-sm px-6 py-4 rounded-xl">
                            <h3 class="text-3xl font-bold text-green-500">24/7</h3>
                            <p class="text-gray-600">Support</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Floating Elements -->
        <div class="absolute inset-0 pointer-events-none z-20">
            <img src="assets/images/leaf-1.png" class="absolute top-20 left-10 w-16 animate-float opacity-80" alt="">
            <img src="assets/images/leaf-2.png" class="absolute bottom-20 right-10 w-16 animate-float-delay opacity-80" alt="">
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 bg-white relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute inset-0 bg-gradient-to-br from-green-50/50 to-white"></div>
            <div class="absolute top-0 left-0 w-full h-full" style="background-image: url('assets/images/pattern-bg.png'); opacity: 0.05;"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-20">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase mb-2 block">Why Choose Us</span>
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Our Features</h2>
                <div class="w-24 h-1.5 bg-green-500 mx-auto rounded-full mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.
                </p>
            </div>

            <!-- Features Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 - Natural Process -->
                <div class="group relative">
                    <div class="absolute inset-0.5 bg-gradient-to-br from-green-500 to-green-600 rounded-3xl opacity-0 group-hover:opacity-100 blur transition duration-500"></div>
                    <div class="relative bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                        <div class="text-center">
                            <!-- Icon Container -->
                            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-green-100 to-green-200 mb-6 group-hover:scale-110 transition-transform duration-300">
                                <svg class="w-10 h-10 text-green-500" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M7 21q-.825 0-1.413-.588T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.588 1.413T17 21H7Zm2-4h2V8H9v9Zm4 0h2V8h-2v9Z"/>
                                </svg>
                            </div>
                            
                            <!-- Content -->
                            <h3 class="text-2xl font-bold mb-4 text-gray-800 group-hover:text-green-500 transition-colors">Natural Process</h3>
                            <p class="text-gray-600 mb-6 leading-relaxed">
                                Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.
                            </p>
                            
                            <!-- Read More Button -->
                            <a href="#" class="inline-flex items-center text-green-500 font-semibold hover:text-green-600 transition-colors group/btn">
                                <span class="mr-2">Read More</span>
                                <span class="group-hover/btn:translate-x-1 transition-transform">
                                    <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Feature 2 - Organic Products -->
                <div class="group relative">
                    <div class="absolute inset-0.5 bg-gradient-to-br from-green-500 to-green-600 rounded-3xl opacity-0 group-hover:opacity-100 blur transition duration-500"></div>
                    <div class="relative bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                        <div class="text-center">
                            <!-- Icon Container -->
                            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-green-100 to-green-200 mb-6 group-hover:scale-110 transition-transform duration-300">
                                <svg class="w-10 h-10 text-green-500" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 5.5A8.5 8.5 0 0 1 20.5 14a8.5 8.5 0 0 1-8.5 8.5A8.5 8.5 0 0 1 3.5 14a8.5 8.5 0 0 1 8.5-8.5m0 2a6.5 6.5 0 0 0-6.5 6.5a6.5 6.5 0 0 0 6.5 6.5a6.5 6.5 0 0 0 6.5-6.5a6.5 6.5 0 0 0-6.5-6.5m0 2a4.5 4.5 0 0 1 4.5 4.5a4.5 4.5 0 0 1-4.5 4.5A4.5 4.5 0 0 1 7.5 14A4.5 4.5 0 0 1 12 9.5"/>
                                </svg>
                            </div>
                            
                            <!-- Content -->
                            <h3 class="text-2xl font-bold mb-4 text-gray-800 group-hover:text-green-500 transition-colors">Organic Products</h3>
                            <p class="text-gray-600 mb-6 leading-relaxed">
                                Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.
                            </p>
                            
                            <!-- Read More Button -->
                            <a href="#" class="inline-flex items-center text-green-500 font-semibold hover:text-green-600 transition-colors group/btn">
                                <span class="mr-2">Read More</span>
                                <span class="group-hover/btn:translate-x-1 transition-transform">
                                    <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Feature 3 - Biologically Safe -->
                <div class="group relative">
                    <div class="absolute inset-0.5 bg-gradient-to-br from-green-500 to-green-600 rounded-3xl opacity-0 group-hover:opacity-100 blur transition duration-500"></div>
                    <div class="relative bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                        <div class="text-center">
                            <!-- Icon Container -->
                            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-green-100 to-green-200 mb-6 group-hover:scale-110 transition-transform duration-300">
                                <svg class="w-10 h-10 text-green-500" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91c4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83c-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25l6 2.25v4.7z"/>
                                </svg>
                            </div>
                            
                            <!-- Content -->
                            <h3 class="text-2xl font-bold mb-4 text-gray-800 group-hover:text-green-500 transition-colors">Biologically Safe</h3>
                            <p class="text-gray-600 mb-6 leading-relaxed">
                                Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.
                            </p>
                            
                            <!-- Read More Button -->
                            <a href="#" class="inline-flex items-center text-green-500 font-semibold hover:text-green-600 transition-colors group/btn">
                                <span class="mr-2">Read More</span>
                                <span class="group-hover/btn:translate-x-1 transition-transform">
                                    <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute -top-40 -right-40 w-80 h-80 bg-green-200 rounded-full filter blur-3xl"></div>
            <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-orange-200 rounded-full filter blur-3xl"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header with Filter Buttons -->
            <div class="flex flex-col md:flex-row justify-between items-center mb-16">
                <!-- Left side - Section Title -->
                <div class="mb-8 md:mb-0">
                    <span class="text-green-500 text-sm font-semibold tracking-wider uppercase mb-2 block">
                        Fresh From Our Farm
                    </span>
                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Our Organic Products</h2>
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                        <div class="w-3 h-1 bg-green-300 rounded-full"></div>
                        <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                    </div>
                    <p class="text-gray-600 max-w-xl text-lg">
                        Discover nature's finest selection of fresh, organic produce.
                    </p>
                </div>

                <!-- Right side - Filter Buttons -->
                <div class="flex flex-wrap justify-center gap-4 mb-12">
                    <button onclick="filterProducts('all')" 
                            class="filter-btn px-6 py-2.5 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all transform hover:scale-105 shadow-md">
                        All Products
                    </button>
                    <button onclick="filterProducts('vegetables')" 
                            class="filter-btn px-6 py-2.5 bg-white text-green-500 rounded-full hover:bg-green-50 transition-all transform hover:scale-105 shadow-md border-2 border-green-500">
                        Vegetables
                    </button>
                    <button onclick="filterProducts('fruits')" 
                            class="filter-btn px-6 py-2.5 bg-white text-green-500 rounded-full hover:bg-green-50 transition-all transform hover:scale-105 shadow-md border-2 border-green-500">
                        Fruits
                    </button>
                </div>
            </div>

            <!-- Products Grid - First Row -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                <!-- First Product Card (Tomatoes) -->
                <div class="group" data-category="vegetables">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <div class="relative">
                            <!-- Badge -->
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-3 py-1.5 bg-orange-500 text-white rounded-full text-sm font-medium">New</span>
                            </div>
                            <!-- Discount Badge -->
                            <div class="absolute top-4 right-4 z-10">
                                <span class="px-3 py-1.5 bg-green-500 text-white rounded-full text-sm font-medium">-35%</span>
                            </div>
                            <!-- Image -->
                            <div class="overflow-hidden aspect-square">
                                <img src="assets/images/tomatoes.jpg" alt="Fresh Tomato" 
                                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <!-- Quick Actions -->
                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                                    <button class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button onclick="cart.addItem({
                                        id: 'tomatoes',
                                        name: 'Fresh Tomatoes',
                                        price: '$19.00',
                                        image: 'assets/images/tomatoes.jpg',
                                        quantity: 1
                                    }); event.stopPropagation();" 
                                    class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-shopping-cart"></i>
                                    </button>
                                    <button onclick="viewProductDetails(this)" 
                                            data-name="Fresh Tomatoes"
                                            data-price="$19.00"
                                            data-description="Fresh, ripe tomatoes sourced directly from organic farms. Perfect for salads and cooking."
                                            data-image="assets/images/tomatoes.jpg"
                                            class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-150 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Content -->
                        <div class="p-6">
                            <!-- Category -->
                            <span class="text-green-500 text-sm font-medium">Vegetables</span>
                            <!-- Title -->
                            <h3 class="text-xl font-semibold mb-2 group-hover:text-green-500 transition-colors">Fresh Tomato</h3>
                            <!-- Rating -->
                            <div class="flex items-center mb-2">
                                <div class="flex text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="ml-2 text-gray-600 text-sm">(4.5)</span>
                            </div>
                            <!-- Price -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-green-500">$19.00</span>
                                    <span class="text-gray-400 line-through">$29.00</span>
                                </div>
                                <span class="text-sm text-green-500 font-medium">In Stock</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Second Product Card (Pineapple) -->
                <div class="group" data-category="fruits">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <div class="relative">
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-3 py-1.5 bg-orange-500 text-white rounded-full text-sm font-medium">New</span>
                            </div>
                            <div class="absolute top-4 right-4 z-10">
                                <span class="px-3 py-1.5 bg-green-500 text-white rounded-full text-sm font-medium">-20%</span>
                            </div>
                            <div class="overflow-hidden aspect-square">
                                <img src="assets/images/tomatoes.jpg" alt="Fresh Pineapple" 
                                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                                    <button class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button onclick="cart.addItem({
                                        id: 'pineapple',
                                        name: 'Fresh Pineapple',
                                        price: '$24.00',
                                        image: 'assets/images/tomatoes.jpg',
                                        quantity: 1
                                    }); event.stopPropagation();" 
                                    class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-shopping-cart"></i>
                                    </button>
                                    <button onclick="viewProductDetails(this)" 
                                            data-name="Fresh Pineapple"
                                            data-price="$24.00"
                                            data-description="Sweet and juicy pineapple freshly harvested from organic farms. Rich in vitamins and perfect for healthy snacking."
                                            data-image="assets/images/pineapple.jpg"
                                            class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-150 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <span class="text-green-500 text-sm font-medium">Fruits</span>
                            <h3 class="text-xl font-semibold mb-2 group-hover:text-green-500 transition-colors">Fresh Pineapple</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="ml-2 text-gray-600 text-sm">(5.0)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-green-500">$24.00</span>
                                    <span class="text-gray-400 line-through">$30.00</span>
                                </div>
                                <span class="text-sm text-green-500 font-medium">In Stock</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Third Product Card (Bell Peppers) -->
                <div class="group" data-category="vegetables">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <div class="relative">
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-3 py-1.5 bg-orange-500 text-white rounded-full text-sm font-medium">Hot</span>
                            </div>
                            <div class="absolute top-4 right-4 z-10">
                                <span class="px-3 py-1.5 bg-green-500 text-white rounded-full text-sm font-medium">-15%</span>
                            </div>
                            <div class="overflow-hidden aspect-square">
                                <img src="assets/images/tomatoes.jpg" alt="Bell Peppers" 
                                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                                    <button class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button onclick="cart.addItem({
                                        id: 'bell-peppers',
                                        name: 'Bell Peppers',
                                        price: '$15.00',
                                        image: 'assets/images/tomatoes.jpg',
                                        quantity: 1
                                    }); event.stopPropagation();" 
                                    class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-shopping-cart"></i>
                                    </button>
                                    <button onclick="viewProductDetails(this)" 
                                            data-name="Bell Peppers"
                                            data-price="$15.00"
                                            data-description="Colorful, crisp bell peppers perfect for salads and cooking. Grown in organic farms with natural methods."
                                            data-image="assets/images/peppers.jpg"
                                            class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-150 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <span class="text-green-500 text-sm font-medium">Vegetables</span>
                            <h3 class="text-xl font-semibold mb-2 group-hover:text-green-500 transition-colors">Bell Peppers</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="ml-2 text-gray-600 text-sm">(4.0)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-green-500">$17.00</span>
                                    <span class="text-gray-400 line-through">$20.00</span>
                                </div>
                                <span class="text-sm text-green-500 font-medium">In Stock</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fourth Product Card (Strawberries) -->
                <div class="group" data-category="fruits">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <div class="relative">
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-3 py-1.5 bg-orange-500 text-white rounded-full text-sm font-medium">Fresh</span>
                            </div>
                            <div class="absolute top-4 right-4 z-10">
                                <span class="px-3 py-1.5 bg-green-500 text-white rounded-full text-sm font-medium">-25%</span>
                            </div>
                            <div class="overflow-hidden aspect-square">
                                <img src="assets/images/tomatoes.jpg" alt="Fresh Strawberries" 
                                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                                    <button class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button onclick="cart.addItem({
                                        id: 'strawberries',
                                        name: 'Fresh Strawberries',
                                        price: '$21.00',
                                        image: 'assets/images/tomatoes.jpg',
                                        quantity: 1
                                    }); event.stopPropagation();" 
                                    class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-shopping-cart"></i>
                                    </button>
                                    <button onclick="viewProductDetails(this)" 
                                            data-name="Fresh Strawberries"
                                            data-price="$21.00"
                                            data-description="Sweet and succulent strawberries handpicked at peak ripeness. Perfect for desserts or healthy snacking."
                                            data-image="assets/images/strawberries.jpg"
                                            class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-150 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <span class="text-green-500 text-sm font-medium">Fruits</span>
                            <h3 class="text-xl font-semibold mb-2 group-hover:text-green-500 transition-colors">Fresh Strawberries</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span class="ml-2 text-gray-600 text-sm">(4.7)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-green-500">$21.00</span>
                                    <span class="text-gray-400 line-through">$28.00</span>
                                </div>
                                <span class="text-sm text-green-500 font-medium">In Stock</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products Grid - Second Row -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                <!-- Fifth Product Card (Carrots) -->
                <div class="group" data-category="vegetables">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <!-- Same structure but with carrot content -->
                        <!-- ... Copy the structure and change image/content ... -->
                    </div>
                </div>

                <!-- Sixth Product Card (Apples) -->
                <div class="group" data-category="fruits">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <!-- Same structure but with apple content -->
                        <!-- ... Copy the structure and change image/content ... -->
                    </div>
                </div>

                <!-- Seventh Product Card (Broccoli) -->
                <div class="group" data-category="vegetables">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <!-- Same structure but with broccoli content -->
                        <!-- ... Copy the structure and change image/content ... -->
                    </div>
                </div>

                <!-- Eighth Product Card (Oranges) -->
                <div class="group" data-category="fruits">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <!-- Same structure but with orange content -->
                        <!-- ... Copy the structure and change image/content ... -->
                    </div>
                </div>
            </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>

            <!-- View All Button -->
            <div class="text-center mt-16">
                <a href="products.html" class="group inline-flex items-center gap-2 px-8 py-4 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all transform hover:scale-105 hover:shadow-lg">
                    <span>View All Products</span>
                    <span class="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors">
                        <i class="fas fa-arrow-right text-sm"></i>
                    </span>
                </a>
            </div>
        </div>
    </section>

    <!-- Visit Our Firm Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-green-600 to-green-500 py-16">
        <!-- Pattern Overlay -->
        <div class="absolute inset-0 opacity-10 bg-pattern"></div>

        <!-- Decorative Circles -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="absolute top-0 right-0 w-72 h-72 bg-white opacity-5 rounded-full transform translate-x-1/2 -translate-y-1/2"></div>
            <div class="absolute -bottom-20 -left-20 w-72 h-72 bg-white opacity-5 rounded-full"></div>
        </div>

        <!-- Main Content -->
        <div class="container mx-auto px-4 relative">
            <div class="flex flex-col md:flex-row items-center justify-between gap-8">
                <!-- Left Content -->
                <div class="md:w-2/3">
                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                        Visit Our Firm & Get
                        <span class="block text-white/90">Premium Quality Products</span>
                    </h2>
                    <p class="text-white/80 text-lg mb-8">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos.
                    </p>
                    <!-- Quick Stats -->
                    <div class="flex flex-wrap gap-8">
                        <div class="text-white text-center">
                            <div class="text-2xl font-bold">1.5K+</div>
                            <div class="text-white/70 text-sm">Daily Visitors</div>
                        </div>
                        <div class="text-white text-center">
                            <div class="text-2xl font-bold">100%</div>
                            <div class="text-white/70 text-sm">Satisfaction</div>
                        </div>
                        <div class="text-white text-center">
                            <div class="text-2xl font-bold">15+</div>
                            <div class="text-white/70 text-sm">Years Experience</div>
                        </div>
                    </div>
                </div>

                <!-- Right Button -->
                <div class="md:w-auto">
                    <a href="#contact" 
                       class="inline-flex items-center px-6 py-3 bg-white text-green-600 rounded-full hover:bg-green-50 transition-all transform hover:scale-105 hover:shadow-lg group">
                        <span class="font-semibold">Visit Now</span>
                        <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Customer Review Section -->
    <section id="testimonials" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute top-0 right-0 w-96 h-96 bg-green-100 rounded-full filter blur-3xl opacity-20"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100 rounded-full filter blur-3xl opacity-20"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase mb-2 block">Testimonials</span>
                <h2 class="text-4xl md:text-5xl font-bold mb-4">What Our Clients Say</h2>
                <div class="flex justify-center items-center gap-2 mb-4">
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                    <div class="w-3 h-1 bg-green-300 rounded-full"></div>
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                </div>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Discover what our satisfied customers have to say about their experience with our organic products
                </p>
            </div>

            <!-- Reviews Slider -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Review Card 1 -->
                <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 relative group">
                    <!-- Quote Icon -->
                    <div class="absolute -top-5 right-8">
                        <span class="text-7xl text-green-500/10 leading-none font-serif group-hover:text-green-500/20 transition-colors">"</span>
                    </div>
                    
                    <!-- Rating Stars -->
                    <div class="flex text-yellow-400 mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>

                    <!-- Review Text -->
                    <p class="text-gray-600 mb-6 relative z-10">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.
                    </p>

                    <!-- Reviewer -->
                    <div class="flex items-center">
                        <div class="relative">
                            <img src="assets/images/farming.jpg" alt="Client" 
                                 class="w-14 h-14 rounded-full object-cover ring-4 ring-green-50">
                            <span class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold text-gray-800">Sarah Johnson</h4>
                            <p class="text-green-500 text-sm">Regular Customer</p>
                        </div>
                    </div>
                </div>

                <!-- Review Card 2 (Featured) -->
                <div class="bg-gradient-to-br from-green-500 to-green-600 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 relative group transform hover:-translate-y-1">
                    <!-- Quote Icon -->
                    <div class="absolute -top-5 right-8">
                        <span class="text-7xl text-white/10 leading-none font-serif group-hover:text-white/20 transition-colors">"</span>
                    </div>

                    <!-- Rating Stars -->
                    <div class="flex text-yellow-300 mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>

                    <!-- Review Text -->
                    <p class="text-white/90 mb-6 relative z-10">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.
                    </p>

                    <!-- Reviewer -->
                    <div class="flex items-center">
                        <div class="relative">
                            <img src="assets/images/farming.jpg" alt="Client" 
                                 class="w-14 h-14 rounded-full object-cover ring-4 ring-green-400/30">
                            <span class="absolute bottom-0 right-0 w-4 h-4 bg-white rounded-full border-2 border-green-500"></span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold text-white">Michael Chen</h4>
                            <p class="text-white/70 text-sm">Food Enthusiast</p>
                        </div>
                    </div>
                </div>

                <!-- Review Card 3 -->
                <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 relative group">
                    <!-- Quote Icon -->
                    <div class="absolute -top-5 right-8">
                        <span class="text-7xl text-green-500/10 leading-none font-serif group-hover:text-green-500/20 transition-colors">"</span>
                    </div>

                    <!-- Rating Stars -->
                    <div class="flex text-yellow-400 mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>

                    <!-- Review Text -->
                    <p class="text-gray-600 mb-6 relative z-10">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.
                    </p>

                    <!-- Reviewer -->
                    <div class="flex items-center">
                        <div class="relative">
                            <img src="assets/images/farming.jpg" alt="Client" 
                                 class="w-14 h-14 rounded-full object-cover ring-4 ring-green-50">
                            <span class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold text-gray-800">Emily Davis</h4>
                            <p class="text-green-500 text-sm">Health Coach</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navigation Buttons -->
            <div class="flex justify-center mt-12 gap-4">
                <button class="w-12 h-12 rounded-full border-2 border-green-500 text-green-500 flex items-center justify-center hover:bg-green-500 hover:text-white transition-all duration-300 transform hover:scale-105 group">
                    <i class="fas fa-arrow-left group-hover:-translate-x-1 transition-transform"></i>
                </button>
                <button class="w-12 h-12 rounded-full border-2 border-green-500 text-green-500 flex items-center justify-center hover:bg-green-500 hover:text-white transition-all duration-300 transform hover:scale-105 group">
                    <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Latest Blog Section -->
    <section id="blog" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute top-0 right-0 w-96 h-96 bg-green-100 rounded-full filter blur-3xl opacity-20"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100 rounded-full filter blur-3xl opacity-20"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase mb-2 block">Latest Updates</span>
                <h2 class="text-4xl md:text-5xl font-bold mb-4">From Our Blog</h2>
                <div class="flex justify-center items-center gap-2 mb-4">
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                    <div class="w-3 h-1 bg-green-300 rounded-full"></div>
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                </div>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Stay updated with our latest farming tips and organic food insights
                </p>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Blog Card 1 -->
                <div class="group">
                    <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 relative">
                        <!-- Image Container -->
                        <div class="relative h-64 overflow-hidden">
                            <img src="assets/images/farming.jpg" alt="Organic Farming" 
                                 class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <!-- Overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <!-- Category Badge -->
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-4 py-2 bg-green-500 text-white text-sm font-medium rounded-full shadow-lg">
                                    Farming Tips
                                </span>
                            </div>
                            <!-- Quick Read Button -->
                            <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                <span class="text-white text-sm flex items-center">
                                    <i class="far fa-clock mr-2"></i>
                                    5 min read
                                </span>
                                <a href="#" class="text-white hover:text-green-300 transition-colors">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- Content -->
                        <div class="p-6">
                            <!-- Meta Info -->
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <img src="assets/images/farming.jpg" alt="Author" 
                                         class="w-8 h-8 rounded-full object-cover ring-2 ring-green-500">
                                    <span class="text-sm text-gray-600">By Admin</span>
                                </div>
                                <span class="text-sm text-gray-500">
                                    <i class="far fa-calendar-alt text-green-500 mr-2"></i>
                                    01 Jan, 2045
                                </span>
                            </div>
                            <!-- Title -->
                            <h3 class="text-xl font-bold mb-3 group-hover:text-green-500 transition-colors line-clamp-2">
                                How to cultivate organic fruits and vegetables in own firm
                            </h3>
                            <!-- Description -->
                            <p class="text-gray-600 mb-4 line-clamp-2">
                                Learn the best practices for growing organic produce in your own garden with our comprehensive guide.
                            </p>
                            <!-- Footer -->
                            <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                                <div class="flex items-center gap-3">
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-eye text-green-500 mr-1"></i> 1.5k
                                    </span>
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-comment text-green-500 mr-1"></i> 3
                                    </span>
                                </div>
                                <a href="#" class="inline-flex items-center text-green-500 font-semibold hover:text-green-600 transition-colors group/link">
                                    Read More
                                    <i class="fas fa-arrow-right ml-2 transform group-hover/link:translate-x-1 transition-transform"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Blog Card 2 -->
                <div class="group">
                    <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 relative">
                        <!-- Image Container -->
                        <div class="relative h-64 overflow-hidden">
                            <img src="assets/images/farming.jpg" alt="Organic Wheat" 
                                 class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <!-- Overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <!-- Category Badge -->
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-4 py-2 bg-orange-500 text-white text-sm font-medium rounded-full shadow-lg">
                                    Harvesting
                                </span>
                            </div>
                            <!-- Quick Read Button -->
                            <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                <span class="text-white text-sm flex items-center">
                                    <i class="far fa-clock mr-2"></i>
                                    3 min read
                                </span>
                                <a href="#" class="text-white hover:text-orange-300 transition-colors">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- Content -->
                        <div class="p-6">
                            <!-- Meta Info -->
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <img src="assets/images/farming.jpg" alt="Author" 
                                         class="w-8 h-8 rounded-full object-cover ring-2 ring-orange-500">
                                    <span class="text-sm text-gray-600">By John Smith</span>
                                </div>
                                <span class="text-sm text-gray-500">
                                    <i class="far fa-calendar-alt text-orange-500 mr-2"></i>
                                    15 Jan, 2045
                                </span>
                            </div>
                            <!-- Title -->
                            <h3 class="text-xl font-bold mb-3 group-hover:text-orange-500 transition-colors line-clamp-2">
                                The Best Time to Harvest Your Organic Wheat Crop
                            </h3>
                            <!-- Description -->
                            <p class="text-gray-600 mb-4 line-clamp-2">
                                Discover the optimal timing and techniques for harvesting your organic wheat to ensure the highest quality yield.
                            </p>
                            <!-- Footer -->
                            <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                                <div class="flex items-center gap-3">
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-eye text-orange-500 mr-1"></i> 2.3k
                                    </span>
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-comment text-orange-500 mr-1"></i> 5
                                    </span>
                                </div>
                                <a href="#" class="inline-flex items-center text-orange-500 font-semibold hover:text-orange-600 transition-colors group/link">
                                    Read More
                                    <i class="fas fa-arrow-right ml-2 transform group-hover/link:translate-x-1 transition-transform"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Blog Card 3 -->
                <div class="group">
                    <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 relative">
                        <!-- Image Container -->
                        <div class="relative h-64 overflow-hidden">
                            <img src="assets/images/farming.jpg" alt="Fresh Carrots" 
                                 class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <!-- Overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <!-- Category Badge -->
                            <div class="absolute top-4 left-4 z-10">
                                <span class="px-4 py-2 bg-green-500 text-white text-sm font-medium rounded-full shadow-lg">
                                    Growing Tips
                                </span>
                            </div>
                            <!-- Quick Read Button -->
                            <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                <span class="text-white text-sm flex items-center">
                                    <i class="far fa-clock mr-2"></i>
                                    4 min read
                                </span>
                                <a href="#" class="text-white hover:text-green-300 transition-colors">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- Content -->
                        <div class="p-6">
                            <!-- Meta Info -->
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <img src="assets/images/farming.jpg" alt="Author" 
                                         class="w-8 h-8 rounded-full object-cover ring-2 ring-green-500">
                                    <span class="text-sm text-gray-600">By Sarah Wilson</span>
                                </div>
                                <span class="text-sm text-gray-500">
                                    <i class="far fa-calendar-alt text-green-500 mr-2"></i>
                                    28 Jan, 2045
                                </span>
                            </div>
                            <!-- Title -->
                            <h3 class="text-xl font-bold mb-3 group-hover:text-green-500 transition-colors line-clamp-2">
                                Growing Perfect Carrots: A Complete Guide
                            </h3>
                            <!-- Description -->
                            <p class="text-gray-600 mb-4 line-clamp-2">
                                Master the art of growing sweet, crunchy carrots with our expert tips on soil preparation, watering, and care.
                            </p>
                            <!-- Footer -->
                            <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                                <div class="flex items-center gap-3">
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-eye text-green-500 mr-1"></i> 1.8k
                                    </span>
                                    <span class="text-sm text-gray-500">
                                        <i class="far fa-comment text-green-500 mr-1"></i> 7
                                    </span>
                                </div>
                                <a href="#" class="inline-flex items-center text-green-500 font-semibold hover:text-green-600 transition-colors group/link">
                                    Read More
                                    <i class="fas fa-arrow-right ml-2 transform group-hover/link:translate-x-1 transition-transform"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- View All Button -->
            <div class="text-center mt-12">
                <a href="#blog" class="inline-flex items-center px-8 py-4 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all transform hover:scale-105 hover:shadow-lg group">
                    <span class="font-medium">View All Articles</span>
                    <span class="w-6 h-6 ml-2 rounded-full bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors">
                        <i class="fas fa-arrow-right text-sm"></i>
                    </span>
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Us Section -->
    <section id="contact" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute top-0 right-0 w-96 h-96 bg-green-100 rounded-full filter blur-3xl opacity-20"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100 rounded-full filter blur-3xl opacity-20"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase mb-2 block">Contact Us</span>
                <h2 class="text-4xl md:text-5xl font-bold mb-4">Get In Touch</h2>
                <div class="flex justify-center items-center gap-2 mb-4">
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                    <div class="w-3 h-1 bg-green-300 rounded-full"></div>
                    <div class="w-8 h-1 bg-green-500 rounded-full"></div>
                </div>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Have questions? We'd love to hear from you. Send us a message and we'll get back to you shortly.
                </p>
            </div>

            <!-- Contact Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Contact Info -->
                <div class="space-y-6">
                    <!-- Location -->
                    <div class="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all group">
                        <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-500 transition-colors">
                            <i class="fas fa-map-marker-alt text-2xl text-green-500 group-hover:text-white transition-colors"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Our Location</h3>
                        <p class="text-gray-600">123 Street, New York, USA</p>
                    </div>

                    <!-- Phone -->
                    <div class="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all group">
                        <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-500 transition-colors">
                            <i class="fas fa-phone-alt text-2xl text-green-500 group-hover:text-white transition-colors"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Phone Number</h3>
                        <p class="text-gray-600">+012 345 67890</p>
                    </div>

                    <!-- Email -->
                    <div class="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all group">
                        <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-500 transition-colors">
                            <i class="far fa-envelope text-2xl text-green-500 group-hover:text-white transition-colors"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Email Address</h3>
                        <p class="text-gray-600">info@example.com</p>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="md:col-span-2">
                    <div class="bg-white rounded-2xl shadow-lg p-8">
                        <form class="space-y-6">
                            <!-- Name & Email Row -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-gray-700 mb-2" for="name">Your Name</label>
                                    <input type="text" id="name" 
                                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none transition-colors"
                                           placeholder="John Doe">
                                </div>
                                <div>
                                    <label class="block text-gray-700 mb-2" for="email">Your Email</label>
                                    <input type="email" id="email" 
                                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none transition-colors"
                                           placeholder="john@example.com">
                                </div>
                            </div>

                            <!-- Subject -->
                            <div>
                                <label class="block text-gray-700 mb-2" for="subject">Subject</label>
                                <input type="text" id="subject" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none transition-colors"
                                       placeholder="How can we help?">
                            </div>

                            <!-- Message -->
                            <div>
                                <label class="block text-gray-700 mb-2" for="message">Message</label>
                                <textarea id="message" rows="5" 
                                          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none transition-colors resize-none"
                                          placeholder="Write your message here..."></textarea>
                            </div>

                            <!-- Submit Button -->
                            <div class="text-center">
                                <button type="submit" 
                                        class="px-8 py-4 bg-green-500 text-white rounded-full hover:bg-green-600 transition-all transform hover:scale-105 hover:shadow-lg inline-flex items-center gap-2">
                                    <span>Send Message</span>
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </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 onclick="addToCartFromModal()" 
                                        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();
            }
        });

        function addToCartFromModal() {
            const name = document.getElementById('modalProductName').textContent;
            const price = document.getElementById('modalProductPrice').textContent;
            const image = document.getElementById('modalProductImage').src;
            const quantity = parseInt(document.getElementById('modalQuantity').value);
            
            cart.addItem({
                id: name.toLowerCase().replace(/\s+/g, '-'),
                name: name,
                price: price,
                image: image,
                quantity: quantity
            });
            
            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 before closing body tag, before other scripts -->
    <script src="assets/js/cart.js"></script>
</body>
</html> 