| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Bayanihan Initiative - Addressing Rural Poverty in the Philippines</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/lucide@latest"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="css/style.css"> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | fontFamily: { |
| | sans: ['Inter', 'sans-serif'], |
| | serif: ['Merriweather', 'serif'], |
| | }, |
| | colors: { |
| | earth: { |
| | 50: '#faf6f1', |
| | 100: '#f3eadd', |
| | 200: '#e8d4b8', |
| | 300: '#dcb88a', |
| | 400: '#d0985e', |
| | 500: '#c67d3e', |
| | 600: '#ba6232', |
| | 700: '#9a4b2a', |
| | 800: '#7d3e28', |
| | 900: '#653324', |
| | }, |
| | forest: { |
| | 50: '#f0fdf4', |
| | 100: '#dcfce7', |
| | 200: '#bbf7d0', |
| | 300: '#86efac', |
| | 400: '#4ade80', |
| | 500: '#22c55e', |
| | 600: '#16a34a', |
| | 700: '#15803d', |
| | 800: '#166534', |
| | 900: '#14532d', |
| | }, |
| | ocean: { |
| | 50: '#f0f9ff', |
| | 100: '#e0f2fe', |
| | 200: '#bae6fd', |
| | 300: '#7dd3fc', |
| | 400: '#38bdf8', |
| | 500: '#0ea5e9', |
| | 600: '#0284c7', |
| | 700: '#0369a1', |
| | 800: '#075985', |
| | 900: '#0c4a6e', |
| | } |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | </head> |
| | <body class="font-sans bg-earth-50 text-gray-800 smooth-scroll"> |
| | |
| | <nav class="fixed w-full bg-white/95 backdrop-blur-sm shadow-md z-50 transition-all duration-300" id="navbar"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between items-center h-20"> |
| | <div class="flex items-center space-x-3"> |
| | <a href="index.html" class="flex items-center space-x-3"> |
| | <div class="bg-forest-700 p-2 rounded-lg"> |
| | <i data-lucide="heart-handshake" class="w-8 h-8 text-white"></i> |
| | </div> |
| | <div> |
| | <h1 class="text-2xl font-bold text-forest-900 font-serif">Bayanihan</h1> |
| | <p class="text-xs text-earth-600">Rural Poverty Initiative</p> |
| | </div> |
| | </a> |
| | </div> |
| | |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="about.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">About</a> |
| | <a href="statistics.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">Statistics</a> |
| | <a href="causes.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">Causes</a> |
| | <a href="effects.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">Effects</a> |
| | <a href="news.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">News</a> |
| | <a href="resources.html" class="nav-link text-gray-700 hover:text-forest-700 font-medium">Resources</a> |
| | </div> |
| |
|
| | <div class="hidden md:flex items-center space-x-4"> |
| | <a href="contact.html" class="bg-forest-700 text-white px-6 py-2 rounded-full hover:bg-forest-800 transition-colors font-medium flex items-center space-x-2"> |
| | <i data-lucide="heart" class="w-4 h-4"></i> |
| | <span>Donate</span> |
| | </a> |
| | </div> |
| |
|
| | <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()"> |
| | <i data-lucide="menu" class="w-6 h-6" id="menu-icon"></i> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="hidden md:hidden bg-white border-t" id="mobile-menu"> |
| | <div class="px-4 pt-2 pb-6 space-y-2"> |
| | <a href="about.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">About</a> |
| | <a href="statistics.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">Statistics</a> |
| | <a href="causes.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">Causes</a> |
| | <a href="effects.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">Effects</a> |
| | <a href="news.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">News</a> |
| | <a href="resources.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">Resources</a> |
| | <a href="contact.html" class="block px-3 py-2 text-gray-700 hover:bg-earth-100 rounded-md">Contact</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="relative h-screen flex items-center justify-center overflow-hidden"> |
| | <div class="absolute inset-0 z-0"> |
| | <img src="http://static.photos/rural/1024x576/101" alt="Rural Philippines Rice Terraces" class="w-full h-full object-cover"> |
| | <div class="absolute inset-0 gradient-overlay"></div> |
| | </div> |
| | |
| | <div class="relative z-10 max-w-5xl mx-auto px-4 text-center text-white"> |
| | <div class="mb-6 inline-block bg-white/20 backdrop-blur-md px-4 py-2 rounded-full"> |
| | <span class="text-sm font-medium tracking-wider uppercase">Philippines 2026</span> |
| | </div> |
| | <h1 class="text-5xl md:text-7xl font-bold font-serif mb-6 leading-tight"> |
| | Breaking the Cycle of<br> |
| | <span class="text-amber-400">Rural Poverty</span> |
| | </h1> |
| | <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-100 leading-relaxed"> |
| | Empowering farming communities, indigenous peoples, and rural families through education, sustainable development, and collective action. |
| | </p> |
| | <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| | <a href="statistics.html" class="bg-amber-500 text-white px-8 py-4 rounded-full font-semibold hover:bg-amber-600 transition-all transform hover:scale-105 flex items-center justify-center space-x-2"> |
| | <i data-lucide="bar-chart-3" class="w-5 h-5"></i> |
| | <span>Explore Data</span> |
| | </a> |
| | <a href="resources.html" class="bg-white/10 backdrop-blur-md border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white/20 transition-all flex items-center justify-center space-x-2"> |
| | <i data-lucide="book-open" class="w-5 h-5"></i> |
| | <span>Get Involved</span> |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
| | <i data-lucide="chevron-down" class="w-8 h-8 text-white"></i> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="grid md:grid-cols-4 gap-6"> |
| | <div class="text-center p-6 bg-earth-50 rounded-xl"> |
| | <i data-lucide="users" class="w-10 h-10 text-forest-600 mx-auto mb-3"></i> |
| | <h3 class="text-3xl font-bold text-gray-900">18.1M</h3> |
| | <p class="text-gray-600 text-sm">Rural Poor Population</p> |
| | </div> |
| | <div class="text-center p-6 bg-earth-50 rounded-xl"> |
| | <i data-lucide="wheat" class="w-10 h-10 text-amber-600 mx-auto mb-3"></i> |
| | <h3 class="text-3xl font-bold text-gray-900">30.5%</h3> |
| | <p class="text-gray-600 text-sm">Poverty Rate</p> |
| | </div> |
| | <div class="text-center p-6 bg-earth-50 rounded-xl"> |
| | <i data-lucide="graduation-cap" class="w-10 h-10 text-ocean-600 mx-auto mb-3"></i> |
| | <h3 class="text-3xl font-bold text-gray-900">12.8%</h3> |
| | <p class="text-gray-600 text-sm">Out-of-School Youth</p> |
| | </div> |
| | <div class="text-center p-6 bg-earth-50 rounded-xl"> |
| | <i data-lucide="heart-handshake" class="w-10 h-10 text-red-500 mx-auto mb-3"></i> |
| | <h3 class="text-3xl font-bold text-gray-900">40+</h3> |
| | <p class="text-gray-600 text-sm">Partner Communities</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-earth-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold text-gray-900 font-serif">Latest News</h2> |
| | <a href="news.html" class="text-forest-700 font-semibold flex items-center hover:text-forest-800"> |
| | View All <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i> |
| | </a> |
| | </div> |
| | <div class="grid md:grid-cols-3 gap-6"> |
| | <article class="bg-white rounded-xl overflow-hidden shadow-lg"> |
| | <img src="http://static.photos/agriculture/640x360/201" alt="Rice Farmers" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs font-semibold text-forest-700 bg-forest-50 px-2 py-1 rounded">Crop Production</span> |
| | <h3 class="font-bold text-gray-900 mt-2">New Rice Tariffication Law Impacts Smallholder Farmers</h3> |
| | </div> |
| | </article> |
| | <article class="bg-white rounded-xl overflow-hidden shadow-lg"> |
| | <img src="http://static.photos/rural/640x360/202" alt="Organic Farming" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded">Organic Farming</span> |
| | <h3 class="font-bold text-gray-900 mt-2">Organic Vegetable Adoption Rises in Benguet</h3> |
| | </div> |
| | </article> |
| | <article class="bg-white rounded-xl overflow-hidden shadow-lg"> |
| | <img src="http://static.photos/agriculture/640x360/203" alt="Coconut" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded">Coconut Industry</span> |
| | <h3 class="font-bold text-gray-900 mt-2">Intercropping Programs Boost Incomes in Quezon</h3> |
| | </div> |
| | </article> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gradient-to-br from-forest-800 to-forest-900 text-white text-center"> |
| | <div class="max-w-3xl mx-auto px-4"> |
| | <h2 class="text-3xl font-bold font-serif mb-4">Make a Difference Today</h2> |
| | <p class="text-forest-200 mb-8">Join thousands of supporters working to end rural poverty in the Philippines.</p> |
| | <a href="contact.html" class="inline-block bg-amber-500 text-white px-8 py-4 rounded-full font-bold hover:bg-amber-600 transition-all transform hover:scale-105"> |
| | Get Involved |
| | </a> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 text-gray-400 py-12"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| | <div class="col-span-2"> |
| | <div class="flex items-center space-x-3 mb-4"> |
| | <div class="bg-forest-700 p-2 rounded-lg"> |
| | <i data-lucide="heart-handshake" class="w-6 h-6 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-white font-serif">Bayanihan Initiative</h3> |
| | </div> |
| | <p class="text-sm leading-relaxed mb-4 max-w-md"> |
| | Dedicated to eradicating rural poverty in the Philippines through sustainable development, education, and community empowerment. |
| | </p> |
| | </div> |
| | <div> |
| | <h4 class="text-white font-semibold mb-4">Quick Links</h4> |
| | <ul class="space-y-2 text-sm"> |
| | <li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li> |
| | <li><a href="statistics.html" class="hover:text-white transition-colors">Statistics</a></li> |
| | <li><a href="news.html" class="hover:text-white transition-colors">News</a></li> |
| | <li><a href="contact.html" class="hover:text-white transition-colors">Donate</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h4 class="text-white font-semibold mb-4">Contact</h4> |
| | <ul class="space-y-2 text-sm"> |
| | <li>contact@bayanihan.org</li> |
| | <li>+63 2 8123 4567</li> |
| | <li>Quezon City, Philippines</li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-800 pt-8 text-center text-sm"> |
| | <p>© 2026 Bayanihan Rural Poverty Initiative. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script src="js/script.js"></script> |
| | <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
