Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Uganda Agro Products | Fresh Farm Produce</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2e7d32', | |
| secondary: '#689f38', | |
| accent: '#8bc34a', | |
| dark: '#1b5e20', | |
| light: '#dcedc8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1500382016479-814c9c3b1e0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-leaf text-primary text-3xl mr-2"></i> | |
| <h1 class="text-2xl font-bold text-primary">Uganda<span class="text-secondary">Agro</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-800 hover:text-primary font-medium">Home</a> | |
| <a href="#products" class="text-gray-800 hover:text-primary font-medium">Products</a> | |
| <a href="#about" class="text-gray-800 hover:text-primary font-medium">About Us</a> | |
| <a href="#testimonials" class="text-gray-800 hover:text-primary font-medium">Testimonials</a> | |
| <a href="#contact" class="text-gray-800 hover:text-primary font-medium">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-800" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <button class="hidden md:block bg-primary text-white px-4 py-2 rounded-full hover:bg-dark transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> Order Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="text-gray-800 hover:text-primary font-medium">Home</a> | |
| <a href="#products" class="text-gray-800 hover:text-primary font-medium">Products</a> | |
| <a href="#about" class="text-gray-800 hover:text-primary fontmedium">About Us</a> | |
| <a href="#testimonials" class="text-gray-800 hover:text-primary font-medium">Testimonials</a> | |
| <a href="#contact" class="text-gray-800 hover:text-primary font-medium">Contact</a> | |
| <button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-dark transition w-full"> | |
| <i class="fas fa-phone-alt mr-2"></i> Order Now | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero min-h-screen flex items-center text-white"> | |
| <div class="container mx-auto px-4 text-center fade-in"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Agricultural Products From Uganda</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Direct from our farms to your table. Fresh, organic, and sustainably grown.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#products" class="bg-primary hover:bg-dark text-white px-8 py-3 rounded-full text-lg font-semibold transition"> | |
| Explore Products | |
| </a> | |
| <a href="#contact" class="bg-white hover:bg-gray-100 text-primary px-8 py-3 rounded-full text-lg font-semibold transition"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section id="products" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our Featured Products</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We specialize in high-quality agricultural products grown in the fertile soils of Uganda.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Organic Coffee Beans</h3> | |
| <p class="text-gray-600 mb-4">Premium Arabica coffee grown in the highlands of Uganda, known for its rich flavor and aroma.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$12.99/kg</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Fresh Bananas</h3> | |
| <p class="text-gray-600 mb-4">Sweet and nutritious bananas, harvested at peak ripeness from our organic farms.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$3.50/kg</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1603569283847-aa6f0c5d9b5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Vanilla Beans</h3> | |
| <p class="text-gray-600 mb-4">Premium Ugandan vanilla with intense aroma and flavor, perfect for gourmet cooking.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$25.00/100g</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button id="view-more-btn" class="bg-primary hover:bg-dark text-white px-8 py-3 rounded-full text-lg font-semibold transition"> | |
| View All Products | |
| </button> | |
| </div> | |
| <!-- More Products (Hidden by default) --> | |
| <div id="more-products" class="hidden mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Pineapples</h3> | |
| <p class="text-gray-600 mb-4">Sweet and juicy pineapples grown in the tropical climate of Uganda.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$2.80/kg</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 5 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Cocoa Beans</h3> | |
| <p class="text-gray-600 mb-4">High-quality cocoa beans with rich flavor profile, perfect for chocolate production.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$8.50/kg</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 6 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Mangoes</h3> | |
| <p class="text-gray-600 mb-4">Sweet and fiber-rich mangoes, available in multiple varieties.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold text-lg">$2.20/kg</span> | |
| <button class="bg-accent hover:bg-secondary text-white px-4 py-2 rounded-full transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Us --> | |
| <section id="about" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-6">About Uganda Agro</h2> | |
| <p class="text-gray-600 mb-4">Founded in 2010, Uganda Agro is a family-owned agricultural business dedicated to bringing the finest Ugandan produce to local and international markets.</p> | |
| <p class="text-gray-600 mb-4">We practice sustainable farming methods that respect the environment while delivering exceptional quality products.</p> | |
| <p class="text-gray-600 mb-6">Our farms are located across Uganda's most fertile regions, allowing us to grow a diverse range of crops in ideal conditions.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Organic Certified</span> | |
| </div> | |
| <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Fair Trade</span> | |
| </div> | |
| <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Sustainable</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1500382016479-814c9c3b1e0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div> | |
| <div class="h-64 bg-cover bg-center rounded-lg, background-image: url('https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');"></div> | |
| <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> | |
| <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1603569283847-aa6f0c5d9b5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2> | |
| <p class="max-w-2xl mx-auto opacity-90">Hear from businesses and individuals who trust Uganda Agro for their agricultural needs.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <p class="text-sm opacity-80">Restaurant Owner, Kampala</p> | |
| </div> | |
| </div> | |
| <p class="opacity-90">"The quality of Uganda Agro's produce is consistently excellent. Their bananas and pineapples have become staples in our restaurant's menu."</p> | |
| <div class="flex mt-4 text-yellow-300"> | |
| <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> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">James M.</h4> | |
| <p class="text-sm opacity-80">Coffee Shop, Nairobi</p> | |
| </div> | |
| </div> | |
| <p class="opacity-90">"We've been sourcing our coffee beans from Uganda Agro for 3 years now. Their Arabica beans produce the most flavorful coffee our customers love."</p> | |
| <div class="flex mt-4 text-yellow-300"> | |
| <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> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Amina N.</h4> | |
| <p class="text-sm opacity-80">Food Distributor, Dubai</p> | |
| </div> | |
| </div> | |
| <p class="opacity-90">"Working with Uganda Agro has been a game-changer for our business. Their reliable supply chain and premium quality products stand out in the market."</p> | |
| <div class="flex mt-4 text-yellow-300"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Get In Touch</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you! Contact us for orders, partnerships, or any inquiries.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <form id="contact-form" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-gray-700 mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit, class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-lg text-lg font-semibold transition w-full"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Our Location</h4> | |
| <p class="text-gray-600">Plot 42, Industrial Area<br>Kampala, Uganda</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Phone Numbers</h4> | |
| <p class="text-gray-600">+256 750 644855<br>+256 784 112382</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Email Address</h4> | |
| <p class="text-gray-600">info@ugandaagro.com<br>sales@ugandaagro.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Working Hours</h4> | |
| <p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM<br>Saturday: 9:00 AM - 2:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-gray-800 mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-primary bg-opacity-10 p-3 rounded-full text-primary hover:bg-opacity-20 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-primary bg-opacity-10 p-3 rounded-full text-primary hover:bg-opacity-20 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-primary bg-opacity-10 p-3 rounded-full text-primary hover:bg-opacity-20 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-primary bg-opacity-10 p-3 rounded-full text-primary hover:bg-opacity-20 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">Subscribe to Our Newsletter</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mb-6">Stay updated with our latest products, offers, and agricultural insights.</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <button type="submit" class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-r-lg font-semibold transition"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-leaf text-primary text-3xl mr-2"></i> | |
| <h3 class="text-2xl font-bold">Uganda<span class="text-secondary">Agro</span></h3> | |
| </div> | |
| <p class="text-gray-300 mb-4">Bringing Uganda's finest agricultural products to the world.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-300 hover:text-white transition">Home</a></li> | |
| <li><a href="#products" class="text-gray-300 hover:text-white transition">Products</a></li> | |
| <li><a href="#about" class="text-gray-300 hover:text-white transition">About Us</a></li> | |
| <li><a href="#testimonials, class="text-gray-300 hover:text-white transition">Testimonials</a></li> | |
| <li><a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Coffee Beans</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Bananas</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Vanilla</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Pineapples</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Cocoa Beans</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-primary mr-2 mt-1"></i> | |
| <span class="text-gray-300">Plot 42, Industrial Area, Kampala</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-primary mr-2"></i> | |
| <span class="text-gray-300">+256 750 644855</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-primary mr-2"></i> | |
| <span class="text-gray-300">info@ugandaagro.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Uganda Agro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // View more products toggle | |
| const viewMoreBtn = document.getElementById('view-more-btn'); | |
| const moreProducts = document.getElementById('more-products'); | |
| viewMoreBtn.addEventListener('click', () => { | |
| moreProducts.classList.toggle('hidden'); | |
| viewMoreBtn.textContent = moreProducts.classList.contains('hidden') ? 'View All Products' : 'Show Less'; | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.getElementById('contact-form'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const subject = document.getElementById('subject').value; | |
| const message = document.getElementById('message').value; | |
| // Here you would typically send the data to a server | |
| // For this example, we'll just show an alert | |
| alert(`Thank you, ${name}! Your message has been received. We'll contact you at ${email} soon.`); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Add animation when scrolling | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| fadeElements.forEach(element => { | |
| observer.observe(element); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alfredwandy/wandy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |