| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Causes - Bayanihan Initiative</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-forest-700 font-medium border-b-2 border-forest-700">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-forest-700 bg-earth-100 rounded-md font-medium">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="pt-32 pb-12 bg-forest-900 text-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| | <h1 class="text-4xl md:text-5xl font-bold font-serif mb-4">Root Causes of Rural Poverty</h1> |
| | <p class="text-xl text-forest-200">Understanding the systemic challenges that perpetuate poverty in rural Philippines</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-amber-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="cloud-lightning" class="w-8 h-8 text-amber-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Climate Vulnerability</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | The Philippines faces an average of 20 typhoons annually, disproportionately affecting rural agricultural communities. Changing weather patterns destroy crops and livelihoods. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Crop destruction</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Livestock loss</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Infrastructure damage</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-ocean-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="road" class="w-8 h-8 text-ocean-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Limited Infrastructure</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | Many rural areas lack paved roads, reliable electricity, and internet connectivity. This isolation limits access to markets, education, and healthcare services. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Market access</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Digital divide</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Transport costs</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-red-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="file-x" class="w-8 h-8 text-red-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Land Ownership Issues</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | Agrarian reform remains incomplete. Many farmers are tenant farmers or landless agricultural workers, receiving minimal shares of harvest profits. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Tenancy systems</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Land conversion</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Legal disputes</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-purple-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="book-x" class="w-8 h-8 text-purple-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Educational Barriers</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | Schools in remote areas often lack qualified teachers, books, and facilities. Children frequently drop out to help with farming or due to distance. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Teacher shortage</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Distance barriers</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Child labor</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-green-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="trending-down" class="w-8 h-8 text-green-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Low Agricultural Income</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | Middlemen often capture profits while farmers receive minimal compensation. Fluctuating prices and high input costs squeeze profit margins. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Price volatility</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>High input costs</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Market exploitation</li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-earth-50 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 border border-earth-200"> |
| | <div class="bg-indigo-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6"> |
| | <i data-lucide="shield-alert" class="w-8 h-8 text-indigo-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-900 mb-3">Limited Healthcare</h3> |
| | <p class="text-gray-600 leading-relaxed mb-4"> |
| | Rural health units are understaffed and underequipped. Travel to hospitals is expensive and time-consuming, leading to untreated illnesses. |
| | </p> |
| | <ul class="text-sm text-gray-500 space-y-2"> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Facility gaps</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Doctor shortage</li> |
| | <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-forest-600"></i>Transport costs</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </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> |
| | </body> |
| | </html> |
