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

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

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

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

<!-- Right Icons -->
<div class="flex items-center space-x-4">
    <!-- Search Icon with Dropdown -->
    <div class="relative group">
        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <i class="fas fa-search text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
        </button>
        <!-- Search Dropdown -->
        <div class="absolute right-0 top-full mt-2 w-72 bg-white shadow-lg rounded-lg p-4 hidden group-hover:block">
            <form class="flex items-center">
                <input type="text" 
                    placeholder="Search here..." 
                    class="w-full px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:border-green-500">
                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-r-lg hover:bg-green-600 transition-colors">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>

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

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

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

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

    <!-- About Hero Section -->
    <section class="relative py-20 bg-gradient-to-b from-gray-50 to-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <!-- Text Content - Make it full width -->
                <div class="w-full space-y-6" data-aos="fade-up">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight text-center">
                        <span class="text-green-500">Organic Food</span> 
                        <span class="block">For Your Healthy Life</span>
                    </h1>
                    <p class="text-gray-600 text-lg text-center max-w-3xl mx-auto">We believe in providing the freshest, most nutritious organic food while supporting sustainable farming practices and local communities.</p>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-3xl font-bold text-green-500 mb-2">15+</div>
                            <p class="text-gray-600">Years Experience</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-3xl font-bold text-green-500 mb-2">100%</div>
                            <p class="text-gray-600">Organic Products</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-3xl font-bold text-green-500 mb-2">24/7</div>
                            <p class="text-gray-600">Support Team</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-3xl font-bold text-green-500 mb-2">50k+</div>
                            <p class="text-gray-600">Happy Clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Vision -->
                <div class="bg-white p-8 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-eye text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Our Vision</h3>
                    <p class="text-gray-600">To be the leading provider of organic food, making healthy living accessible to everyone while preserving our planet.</p>
                </div>

                <!-- Mission -->
                <div class="bg-white p-8 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-bullseye text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Our Mission</h3>
                    <p class="text-gray-600">To deliver the highest quality organic products while promoting sustainable farming and supporting local communities.</p>
                </div>

                <!-- Values -->
                <div class="bg-white p-8 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-heart text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Our Values</h3>
                    <p class="text-gray-600">Quality, sustainability, transparency, and community are at the heart of everything we do.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold">Why Choose Us</h2>
                <div class="w-24 h-1 bg-green-500 mx-auto mt-4"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
                <!-- Feature 1 -->
                <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-leaf text-green-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">100% Organic</h3>
                    <p class="text-gray-600">All our products are certified organic, ensuring the highest quality.</p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-truck text-green-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Fast Delivery</h3>
                    <p class="text-gray-600">Quick and reliable delivery to maintain product freshness.</p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-award text-green-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Best Quality</h3>
                    <p class="text-gray-600">Strict quality control measures for all products.</p>
                </div>

                <!-- Feature 4 -->
                <div class="bg-white p-6 rounded-lg shadow-lg" data-aos="fade-up" data-aos-delay="400">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-headset text-green-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">24/7 Support</h3>
                    <p class="text-gray-600">Dedicated support team always ready to help you.</p>
                </div>
            </div>
        </div>
    </section>

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

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

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

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

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

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

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

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