| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Act Now | Nareto Conservancy</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <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> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | .hero-gradient { |
| | background: linear-gradient(135deg, rgba(16, 124, 16, 0.9) 0%, rgba(5, 78, 55, 0.9) 100%); |
| | } |
| | .btn-hover-effect:hover { |
| | transform: translateY(-3px); |
| | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| | } |
| | .btn-hover-effect { |
| | transition: all 0.3s ease; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans antialiased"> |
| | |
| | <nav class="bg-white shadow-md sticky top-0 z-50"> |
| | <div class="container mx-auto px-6 py-3"> |
| | <div class="flex justify-between items-center"> |
| | <a href="#" class="flex items-center space-x-2"> |
| | <img src="http://static.photos/nature/200x200/42" alt="Nareto Conservancy Logo" class="h-12 w-12 rounded-full"> |
| | <span class="text-xl font-bold text-green-800">Nareto Conservancy</span> |
| | </a> |
| | <div class="hidden md:flex items-center space-x-8"> |
| | <a href="#" class="text-green-800 hover:text-green-600">Home</a> |
| | <a href="#" class="text-green-800 hover:text-green-600">About</a> |
| | <a href="#" class="text-green-800 hover:text-green-600">Programs</a> |
| | <a href="#" class="text-green-800 hover:text-green-600">Impact</a> |
| | <a href="#" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 btn-hover-effect">Donate</a> |
| | </div> |
| | <button class="md:hidden focus:outline-none"> |
| | <i data-feather="menu" class="text-green-800 w-6 h-6"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="hero-gradient text-white py-20"> |
| | <div class="container mx-auto px-6 text-center" data-aos="fade-up"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-6">Act Now for Kenya's Future</h1> |
| | <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto"> |
| | Join Nareto Conservancy in our mission to protect Kenya's environment and empower communities through sustainable solutions. |
| | </p> |
| | <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
| | <a href="#" class="bg-white text-green-700 px-8 py-4 rounded-md font-bold hover:bg-gray-100 btn-hover-effect">Donate Now</a> |
| | <a href="#" class="border-2 border-white text-white px-8 py-4 rounded-md font-bold hover:bg-white hover:text-green-700 btn-hover-effect">Join Our Cause</a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-12" data-aos="fade-up"> |
| | <h2 class="text-3xl font-bold text-green-800 mb-4">Your Action Makes a Difference</h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto"> |
| | Every contribution helps us protect Kenya's biodiversity and support local communities through education, sustainable agriculture, and wildlife conservation. |
| | </p> |
| | </div> |
| | <div class="grid md:grid-cols-3 gap-8" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="bg-white p-8 rounded-lg shadow-md text-center"> |
| | <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| | <i data-feather="droplet" class="text-green-600 w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-green-800 mb-3">Water Conservation</h3> |
| | <p class="text-gray-600"> |
| | Help us implement sustainable water solutions for communities and wildlife in arid regions of Kenya. |
| | </p> |
| | <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a> |
| | </div> |
| | <div class="bg-white p-8 rounded-lg shadow-md text-center"> |
| | <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| | <i data-feather="users" class="text-green-600 w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-green-800 mb-3">Community Empowerment</h3> |
| | <p class="text-gray-600"> |
| | Support our programs that educate and equip local communities with sustainable livelihood skills. |
| | </p> |
| | <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a> |
| | </div> |
| | <div class="bg-white p-8 rounded-lg shadow-md text-center"> |
| | <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| | <i data-feather="tree" class="text-green-600 w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-green-800 mb-3">Reforestation</h3> |
| | <p class="text-gray-600"> |
| | Contribute to our tree-planting initiatives that restore Kenya's forests and combat climate change. |
| | </p> |
| | <a href="#" class="mt-4 inline-block text-green-600 hover:text-green-800 font-medium">Learn More →</a> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-12" data-aos="fade-up"> |
| | <h2 class="text-3xl font-bold text-green-800 mb-4">Our Impact in Kenya</h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto"> |
| | See how your support is transforming lives and landscapes across Kenya. |
| | </p> |
| | </div> |
| | <div class="grid md:grid-cols-2 gap-8 items-center mb-12"> |
| | <div class="order-2 md:order-1" data-aos="fade-right"> |
| | <img src="http://static.photos/people/1024x576/23" alt="Community members" class="rounded-lg shadow-lg w-full"> |
| | </div> |
| | <div class="order-1 md:order-2" data-aos="fade-left"> |
| | <h3 class="text-2xl font-bold text-green-800 mb-4">Empowering Maasai Women</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Through our beadwork cooperative, we've helped 150 Maasai women gain financial independence while preserving their cultural heritage. |
| | </p> |
| | <ul class="space-y-3 mb-6"> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>150% increase in household income</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>Education for 75 children sponsored</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>Preservation of traditional crafts</span> |
| | </li> |
| | </ul> |
| | <a href="#" class="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 btn-hover-effect">Read More Stories</a> |
| | </div> |
| | </div> |
| | <div class="grid md:grid-cols-2 gap-8 items-center"> |
| | <div data-aos="fade-right"> |
| | <h3 class="text-2xl font-bold text-green-800 mb-4">Wildlife Corridors Restored</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Our collaboration with local communities has created safe passages for elephants and other wildlife between protected areas. |
| | </p> |
| | <ul class="space-y-3 mb-6"> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>35km of wildlife corridors established</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>80% reduction in human-wildlife conflict</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i data-feather="check-circle" class="text-green-600 mr-2 mt-1"></i> |
| | <span>15 new conservation jobs created</span> |
| | </li> |
| | </ul> |
| | <a href="#" class="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 btn-hover-effect">Our Conservation Work</a> |
| | </div> |
| | <div data-aos="fade-left"> |
| | <img src="http://static.photos/nature/1024x576/45" alt="Wildlife corridor" class="rounded-lg shadow-lg w-full"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-green-700 text-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="max-w-4xl mx-auto text-center" data-aos="fade-up"> |
| | <h2 class="text-3xl font-bold mb-6">Join Our Movement</h2> |
| | <p class="text-xl mb-8"> |
| | Your donation directly supports our environmental conservation and community empowerment programs across Kenya. |
| | </p> |
| | <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
| | <button class="bg-white text-green-700 px-8 py-4 rounded-md font-bold hover:bg-gray-100 btn-hover-effect">Donate Monthly</button> |
| | <button class="bg-green-800 text-white px-8 py-4 rounded-md font-bold hover:bg-green-900 btn-hover-effect">One-Time Donation</button> |
| | </div> |
| | <div class="mt-8 grid md:grid-cols-3 gap-6"> |
| | <div class="bg-green-600 p-4 rounded-lg"> |
| | <div class="text-2xl font-bold mb-2">$25</div> |
| | <p>Provides school supplies for a child</p> |
| | </div> |
| | <div class="bg-green-600 p-4 rounded-lg"> |
| | <div class="text-2xl font-bold mb-2">$50</div> |
| | <p>Plants 10 native tree seedlings</p> |
| | </div> |
| | <div class="bg-green-600 p-4 rounded-lg"> |
| | <div class="text-2xl font-bold mb-2">$100</div> |
| | <p>Supports a woman's business startup</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gray-50"> |
| | <div class="container mx-auto px-6 max-w-4xl text-center" data-aos="fade-up"> |
| | <h2 class="text-3xl font-bold text-green-800 mb-4">Stay Connected</h2> |
| | <p class="text-gray-600 mb-8"> |
| | Subscribe to our newsletter for updates on our projects, success stories, and how you can get involved. |
| | </p> |
| | <form class="flex flex-col md:flex-row gap-4"> |
| | <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"> |
| | <button type="submit" class="bg-green-600 text-white px-6 py-3 rounded-md font-bold hover:bg-green-700 btn-hover-effect">Subscribe</button> |
| | </form> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Nareto Conservancy</h3> |
| | <p class="text-gray-400"> |
| | Protecting Kenya's environment and empowering communities through sustainable solutions since 2010. |
| | </p> |
| | <div class="flex space-x-4 mt-4"> |
| | <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a> |
| | </div> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Quick Links</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Our Programs</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Get Involved</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Contact</h3> |
| | <address class="not-italic text-gray-400"> |
| | <p class="mb-2">P.O. Box 12345</p> |
| | <p class="mb-2">Nairobi, Kenya</p> |
| | <p class="mb-2">Email: info@naretoconservancy.org</p> |
| | <p>Phone: +254 700 123 456</p> |
| | </address> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Legal</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white">Financial Reports</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| | <p>© 2023 Nareto Conservancy. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | AOS.init({ |
| | duration: 800, |
| | easing: 'ease-in-out', |
| | once: true |
| | }); |
| | </script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
