| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Statistics - 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-forest-700 font-medium border-b-2 border-forest-700">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-forest-700 bg-earth-100 rounded-md font-medium">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="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">The Reality of Rural Poverty</h1> |
| | <p class="text-xl text-forest-200">Data-driven insights into the challenges facing rural Filipino communities</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-earth-50"> |
| | <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-4 gap-6 mb-12"> |
| | <div class="stat-card bg-white p-6 rounded-2xl shadow-lg border-l-4 border-forest-600"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <i data-lucide="users" class="w-10 h-10 text-forest-600"></i> |
| | <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">2026</span> |
| | </div> |
| | <h3 class="text-4xl font-bold text-gray-900 mb-2 counter" data-target="18.1">0</h3> |
| | <p class="text-gray-600">Million Rural Poor</p> |
| | <p class="text-sm text-red-500 mt-2 flex items-center"> |
| | <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i> |
| | +2.3% from 2023 |
| | </p> |
| | </div> |
| |
|
| | <div class="stat-card bg-white p-6 rounded-2xl shadow-lg border-l-4 border-amber-500"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <i data-lucide="wheat" class="w-10 h-10 text-amber-500"></i> |
| | <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">Agriculture</span> |
| | </div> |
| | <h3 class="text-4xl font-bold text-gray-900 mb-2 counter" data-target="25.4">0</h3> |
| | <p class="text-gray-600">% Income Share</p> |
| | <p class="text-sm text-gray-500 mt-2">Of rural households</p> |
| | </div> |
| |
|
| | <div class="stat-card bg-white p-6 rounded-2xl shadow-lg border-l-4 border-ocean-600"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <i data-lucide="graduation-cap" class="w-10 h-10 text-ocean-600"></i> |
| | <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">Education</span> |
| | </div> |
| | <h3 class="text-4xl font-bold text-gray-900 mb-2 counter" data-target="12.8">0</h3> |
| | <p class="text-gray-600">% Out-of-School Youth</p> |
| | <p class="text-sm text-red-500 mt-2 flex items-center"> |
| | <i data-lucide="alert-circle" class="w-4 h-4 mr-1"></i> |
| | Rural areas 3x higher |
| | </p> |
| | </div> |
| |
|
| | <div class="stat-card bg-white p-6 rounded-2xl shadow-lg border-l-4 border-red-500"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <i data-lucide="utensils" class="w-10 h-10 text-red-500"></i> |
| | <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">Food Security</span> |
| | </div> |
| | <h3 class="text-4xl font-bold text-gray-900 mb-2 counter" data-target="13.2">0</h3> |
| | <p class="text-gray-600">% Food Insecure</p> |
| | <p class="text-sm text-gray-500 mt-2">Rural households</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-2xl shadow-lg p-8 mb-8"> |
| | <h3 class="text-2xl font-bold text-gray-900 mb-6 font-serif">Poverty Incidence by Region (2024)</h3> |
| | <div class="space-y-4"> |
| | <div class="flex items-center justify-between"> |
| | <span class="w-32 text-gray-700 font-medium">BARMM</span> |
| | <div class="flex-1 mx-4 bg-gray-200 rounded-full h-4"> |
| | <div class="bg-red-500 h-4 rounded-full" style="width: 44.4%"></div> |
| | </div> |
| | <span class="w-16 text-right font-bold text-gray-900">44.4%</span> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <span class="w-32 text-gray-700 font-medium">Region 8</span> |
| | <div class="flex-1 mx-4 bg-gray-200 rounded-full h-4"> |
| | <div class="bg-amber-500 h-4 rounded-full" style="width: 38.2%"></div> |
| | </div> |
| | <span class="w-16 text-right font-bold text-gray-900">38.2%</span> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <span class="w-32 text-gray-700 font-medium">Region 5</span> |
| | <div class="flex-1 mx-4 bg-gray-200 rounded-full h-4"> |
| | <div class="bg-amber-500 h-4 rounded-full" style="width: 34.5%"></div> |
| | </div> |
| | <span class="w-16 text-right font-bold text-gray-900">34.5%</span> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <span class="w-32 text-gray-700 font-medium">Region 9</span> |
| | <div class="flex-1 mx-4 bg-gray-200 rounded-full h-4"> |
| | <div class="bg-yellow-500 h-4 rounded-full" style="width: 32.1%"></div> |
| | </div> |
| | <span class="w-16 text-right font-bold text-gray-900">32.1%</span> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <span class="w-32 text-gray-700 font-medium">National Avg</span> |
| | <div class="flex-1 mx-4 bg-gray-200 rounded-full h-4"> |
| | <div class="bg-forest-500 h-4 rounded-full" style="width: 22.4%"></div> |
| | </div> |
| | <span class="w-16 text-right font-bold text-gray-900">22.4%</span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="grid md:grid-cols-2 gap-8"> |
| | <div class="bg-white rounded-2xl shadow-lg p-8"> |
| | <h3 class="text-xl font-bold text-gray-900 mb-4 font-serif">Key Indicators</h3> |
| | <ul class="space-y-4"> |
| | <li class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
| | <span class="text-gray-700">Average Rural Income</span> |
| | <span class="font-bold text-forest-700">₱185,000/year</span> |
| | </li> |
| | <li class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
| | <span class="text-gray-700">Subsistence Incidence</span> |
| | <span class="font-bold text-forest-700">8.7%</span> |
| | </li> |
| | <li class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
| | <span class="text-gray-700">Agricultural Employment</span> |
| | <span class="font-bold text-forest-700">22.8%</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="bg-white rounded-2xl shadow-lg p-8"> |
| | <h3 class="text-xl font-bold text-gray-900 mb-4 font-serif">Data Sources</h3> |
| | <ul class="space-y-3 text-gray-600"> |
| | <li class="flex items-start space-x-2"> |
| | <i data-lucide="check-circle" class="w-5 h-5 text-forest-600 mt-0.5"></i> |
| | <span>Philippine Statistics Authority (PSA) - 2024</span> |
| | </li> |
| | <li class="flex items-start space-x-2"> |
| | <i data-lucide="check-circle" class="w-5 h-5 text-forest-600 mt-0.5"></i> |
| | <span>World Bank Philippines Poverty Assessment</span> |
| | </li> |
| | <li class="flex items-start space-x-2"> |
| | <i data-lucide="check-circle" class="w-5 h-5 text-forest-600 mt-0.5"></i> |
| | <span>Department of Agriculture Annual Report</span> |
| | </li> |
| | <li class="flex items-start space-x-2"> |
| | <i data-lucide="check-circle" class="w-5 h-5 text-forest-600 mt-0.5"></i> |
| | <span>Philippine Institute for Development Studies</span> |
| | </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> |
