Retizen Impact<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n forest: '#1B5E20',\n leaf: '#4CAF50',\n amber: '#FF8F00',\n cream: '#FFF8E1',\n charcoal: '#212121'\n },\n fontFamily: {\n display: ['Playfair Display', 'serif'],\n sans: ['DM Sans', 'sans-serif']\n }\n }\n }\n }\n <\/script>\n <style>\n html, body { height: 100%; margin: 0; }\n \n .app-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n\n \n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n \n @keyframes slideInLeft {\n from { opacity: 0; transform: translateX(-50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n \n @keyframes slideInRight {\n from { opacity: 0; transform: translateX(50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n \n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n \n .animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }\n .animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }\n .animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }\n .animate-slide-right { animation: slideInRight 0.8s ease-out forwards; }\n \n .delay-100 { animation-delay: 0.1s; }\n .delay-200 { animation-delay: 0.2s; }\n .delay-300 { animation-delay: 0.3s; }\n .delay-400 { animation-delay: 0.4s; }\n .delay-500 { animation-delay: 0.5s; }\n .delay-600 { animation-delay: 0.6s; }\n \n .stat-card:hover { transform: translateY(-8px); }\n .program-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); }\n \n .hero-pattern {\n background-image: \n radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.15) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 143, 0, 0.1) 0%, transparent 50%),\n linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%);\n }\n \n .map-container svg { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }\n \n .gallery-item { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .gallery-item:hover { transform: scale(1.05); z-index: 10; }\n \n .counter { font-variant-numeric: tabular-nums; }\n \n .quote-mark {\n font-family: Georgia, serif;\n font-size: 6rem;\n line-height: 1;\n opacity: 0.15;\n }.logo-slider {\n overflow: hidden;\n padding: 40px 0;\n background: #f8f6f3;\n}\n\n.logo-track {\n display: flex;\n width: calc(250px * 8);\n animation: scroll 25s linear infinite;\n}\n\n.logo-track img {\n width: 220px;\n margin: 0 20px;\n border-radius: 12px;\n}\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full bg-cream font-sans text-charcoal\">\n \n <section class=\"py-20 px-6 bg-cream\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\">\n <span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Visual Journey<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact in Action<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-3 gap-4\">\n \n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1561-scaled.jpg\" alt=\"Sports Empowerment\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Sports Empowerment<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_2558-scaled.jpg\" alt=\"Training Workshop at Joma Resort\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Training Workshop<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_2569-scaled.jpg\" alt=\"Women Empowerment Meeting\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Women Empowerment<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0028.jpg\" alt=\"Community Engagement\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Community Engagement<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2024\/12\/IMG20241211153128-300x225.jpg\" alt=\"Retizen Hub Usage\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Retizen Hub Usage<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2024\/09\/IMG-20241230-WA0221.jpg\" alt=\"Mpira na Retizen\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Mpira na Retizen<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div><div class=\"logo-slider\">\n <div class=\"logo-track\">\n\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_0378.jpg-300x200.jpeg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3528-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg\">\n\n \n\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_0378.jpg-300x200.jpeg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3528-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg\">\n\n\n <\/div>\n<\/div>\n <\/section>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Measurable Results<\/span>\n <h2 id=\"stats-headline\" class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact in Numbers<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6\">\n <div class=\"stat-card bg-gradient-to-br from-forest to-leaf p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"10000\">\n 10000\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Citizens Engaged\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-amber to-yellow-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"45\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Community Forums\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-emerald-600 to-teal-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"120\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Youth Leaders\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-blue-600 to-indigo-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"500\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Civic Reports\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-purple-600 to-pink-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"15\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Counties Reached\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-rose-500 to-red-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"30\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Partnerships\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-cream\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-amber\/20 text-amber px-4 py-2 rounded-full text-sm font-semibold mb-4\">What We Do<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Our Programs<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-amber to-yellow-500 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"bg-gradient-to-br from-forest to-emerald-600 p-8 md:p-12 flex items-center justify-center min-h-[300px]\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Civic Education<\/h3>\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Retizen has trained thousands of citizens on governance participation, constitutional rights, and accountability mechanisms, creating informed and engaged communities.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">3K+<\/span>\n <\/div><span class=\"text-charcoal\">Youth trained on civic rights<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">25<\/span>\n <\/div><span class=\"text-charcoal\">Civic education forums conducted<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">10<\/span>\n <\/div><span class=\"text-charcoal\">Policy dialogues facilitated<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"p-8 md:p-12 order-2 md:order-1\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Our youth programs equip young Kenyans with leadership skills, digital literacy, and the tools to become agents of change in their communities.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">120<\/span>\n <\/div><span class=\"text-charcoal\">Youth leaders mentored<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">15<\/span>\n <\/div><span class=\"text-charcoal\">Leadership bootcamps hosted<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">8<\/span>\n <\/div><span class=\"text-charcoal\">Youth-led community projects<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-amber to-orange-500 p-8 md:p-12 flex items-center justify-center min-h-[300px] order-1 md:order-2\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Youth Empowerment<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"bg-gradient-to-br from-blue-600 to-indigo-600 p-8 md:p-12 flex items-center justify-center min-h-[300px]\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Digital Democracy<\/h3>\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Leveraging technology to enhance civic participation, we’ve built digital platforms that connect citizens with their representatives and government services.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">5K+<\/span>\n <\/div><span class=\"text-charcoal\">Digital platform users<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">12<\/span>\n <\/div><span class=\"text-charcoal\">Digital literacy workshops<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">3<\/span>\n <\/div><span class=\"text-charcoal\">Civic tech tools developed<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"p-8 md:p-12 order-2 md:order-1\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">We amplify community voices through strategic advocacy, policy engagement, and grassroots mobilization to drive meaningful change at all levels of government.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">50+<\/span>\n <\/div><span class=\"text-charcoal\">Advocacy campaigns run<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">20<\/span>\n <\/div><span class=\"text-charcoal\">Policy submissions made<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">100+<\/span>\n <\/div><span class=\"text-charcoal\">Community meetings facilitated<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-purple-600 to-pink-600 p-8 md:p-12 flex items-center justify-center min-h-[300px] order-1 md:order-2\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Community Advocacy<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Community Voice<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">What People Are Saying<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"bg-cream rounded-3xl p-8 mb-12\">\n <h3 class=\"font-display text-2xl text-charcoal mb-6\">Share Your Thoughts<\/h3>\n <form id=\"comment-form\" class=\"space-y-4\">\n <div>\n <label for=\"commenter-name\" class=\"block text-sm font-semibold text-charcoal mb-2\">Your Name<\/label> <input type=\"text\" id=\"commenter-name\" placeholder=\"Enter your name\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all\" required>\n <\/div>\n <div>\n <label for=\"program-select\" class=\"block text-sm font-semibold text-charcoal mb-2\">Program<\/label> <select id=\"program-select\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all\" required> <option value=\"\">Select a program…<\/option> <option value=\"Civic Education\">Civic Education<\/option> <option value=\"Youth Empowerment\">Youth Empowerment<\/option> <option value=\"Digital Democracy\">Digital Democracy<\/option> <option value=\"Community Advocacy\">Community Advocacy<\/option> <\/select>\n <\/div>\n <div>\n <label for=\"comment-text\" class=\"block text-sm font-semibold text-charcoal mb-2\">Your Comment<\/label> <textarea id=\"comment-text\" placeholder=\"Share your experience or feedback...\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all resize-none\" rows=\"4\" required><\/textarea>\n <\/div><button type=\"submit\" class=\"w-full bg-forest hover:bg-forest\/90 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center justify-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg> Post Comment <\/button>\n <\/form>\n <div id=\"form-message\" class=\"mt-4 text-sm font-medium hidden\"><\/div>\n <\/div>\n <div id=\"comments-container\" class=\"space-y-4\">\n \n <\/div>\n <div id=\"no-comments\" class=\"text-center py-12 text-gray-500\">\n <svg class=\"w-12 h-12 mx-auto mb-4 opacity-50\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" \/>\n <\/svg>\n <p>No comments yet. Be the first to share your feedback!<\/p>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-forest\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Geographic Reach<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Where We Work<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"map-container flex justify-center\">\n <svg viewbox=\"0 0 400 500\" class=\"w-full max-w-md\"> <defs>\n <lineargradient id=\"mapGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#1B5E20\" \/>\n <stop offset=\"100%\" stop-color=\"#4CAF50\" \/>\n <\/lineargradient>\n <filter id=\"glow\">\n <fegaussianblur stddeviation=\"3\" result=\"coloredBlur\" \/>\n <femerge>\n <femergenode in=\"coloredBlur\" \/>\n <femergenode in=\"SourceGraphic\" \/>\n <\/femerge>\n <\/filter>\n <\/defs>  <path d=\"M80 100 L180 80 L250 120 L280 200 L270 300 L200 350 L120 340 L70 280 L60 180 Z\" fill=\"url(#mapGradient)\" stroke=\"#1B5E20\" stroke-width=\"2\" opacity=\"0.9\" \/>  <line x1=\"150\" y1=\"100\" x2=\"150\" y2=\"340\" stroke=\"#FFF8E1\" stroke-width=\"2\" stroke-dasharray=\"5,5\" opacity=\"0.6\" \/>  <g class=\"constituency-marker\" style=\"cursor: pointer;\">\n <circle cx=\"110\" cy=\"200\" r=\"14\" fill=\"#FF8F00\" filter=\"url(#glow)\">\n <animate attributename=\"r\" values=\"14;17;14\" dur=\"2s\" repeatcount=\"indefinite\" \/>\n <\/circle>\n <circle cx=\"110\" cy=\"200\" r=\"7\" fill=\"white\" \/>\n <text x=\"110\" y=\"245\" text-anchor=\"middle\" fill=\"#333\" font-size=\"13\" font-weight=\"600\">\n Emgwen\n <\/text>\n <text x=\"110\" y=\"262\" text-anchor=\"middle\" fill=\"#666\" font-size=\"11\">\n Constituency\n <\/text>\n <\/g>  <g class=\"constituency-marker\" style=\"cursor: pointer;\">\n <circle cx=\"200\" cy=\"240\" r=\"14\" fill=\"#FF8F00\" filter=\"url(#glow)\">\n <animate attributename=\"r\" values=\"14;17;14\" dur=\"2s\" repeatcount=\"indefinite\" begin=\"0.3s\" \/>\n <\/circle>\n <circle cx=\"200\" cy=\"240\" r=\"7\" fill=\"white\" \/>\n <text x=\"200\" y=\"285\" text-anchor=\"middle\" fill=\"#333\" font-size=\"13\" font-weight=\"600\">\n Chesumei\n <\/text>\n <text x=\"200\" y=\"302\" text-anchor=\"middle\" fill=\"#666\" font-size=\"11\">\n Constituency\n <\/text>\n <\/g>  <text x=\"200\" y=\"40\" text-anchor=\"middle\" fill=\"#1B5E20\" font-size=\"18\" font-weight=\"700\">\n Nandi County\n <\/text>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"font-display text-2xl text-charcoal mb-6\">Nandi County Focus Areas<\/h3>\n <div class=\"space-y-4\">\n <div class=\"bg-cream rounded-2xl p-6 border-l-4 border-forest hover:bg-forest\/5 transition-colors\">\n <h4 class=\"font-semibold text-forest mb-2 flex items-center gap-2\"><span class=\"w-4 h-4 bg-forest rounded-full\"><\/span> Emgwen Constituency<\/h4>\n <p class=\"text-gray-600 text-sm mb-3\">Western region of Nandi County<\/p>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Community forums established<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Youth leadership programs<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Civic engagement initiatives<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 border-l-4 border-amber hover:bg-amber\/5 transition-colors\">\n <h4 class=\"font-semibold text-amber mb-2 flex items-center gap-2\"><span class=\"w-4 h-4 bg-amber rounded-full\"><\/span> Chesumei Constituency<\/h4>\n <p class=\"text-gray-600 text-sm mb-3\">Eastern region of Nandi County<\/p>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Digital literacy programs<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Community advocacy campaigns<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Governance participation<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-3 mt-6\">\n <div class=\"bg-gradient-to-br from-forest to-leaf p-4 rounded-xl text-white text-center\">\n <div class=\"text-2xl font-bold\">\n 2,500+\n <\/div>\n <div class=\"text-xs font-medium opacity-90\">\n Citizens Engaged\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-amber to-yellow-500 p-4 rounded-xl text-white text-center\">\n <div class=\"text-2xl font-bold\">\n 12\n <\/div>\n <div class=\"text-xs font-medium opacity-90\">\n Active Programs\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-gradient-to-br from-forest to-emerald-700\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-white\/20 text-white px-4 py-2 rounded-full text-sm font-semibold mb-4\">Real Stories<\/span>\n <h2 id=\"stories-headline\" class=\"font-display text-4xl md:text-5xl text-white mb-4\">Success Stories<\/h2>\n <div class=\"w-24 h-1 bg-white\/50 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-forest absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-forest to-leaf rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n JM\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“Retizen helped our youth understand their civic rights and organize community forums. Today, we have young leaders actively participating in county governance.”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Jane Mwangi<\/p>\n <p class=\"text-sm text-gray-500\">Community Youth Leader, Nakuru<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-amber absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-amber to-orange-500 rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n PO\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“The digital democracy tools gave us a platform to voice our concerns directly to our representatives. Our petition for better roads reached 5,000 signatures!”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Peter Odhiambo<\/p>\n <p class=\"text-sm text-gray-500\">Community Organizer, Kisumu<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-blue-600 absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n AW\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“Through Retizen’s leadership program, I gained the confidence to run for student council president. Now I’m inspiring other young women to lead.”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Amina Wanjiku<\/p>\n <p class=\"text-sm text-gray-500\">Youth Leader, Nairobi<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-amber\/20 text-amber px-4 py-2 rounded-full text-sm font-semibold mb-4\">Resources<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact Reports<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-amber to-yellow-500 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"space-y-4\">\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-forest\/5 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-forest rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">2024 Annual Impact Report<\/h4>\n <p class=\"text-sm text-gray-500\">Comprehensive overview of our yearly achievements<\/p>\n <\/div>\n <\/div><button class=\"bg-forest text-white px-6 py-3 rounded-full font-medium hover:bg-forest\/90 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-amber\/10 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-amber rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Civic Engagement Report 2024<\/h4>\n <p class=\"text-sm text-gray-500\">Detailed analysis of citizen participation<\/p>\n <\/div>\n <\/div><button class=\"bg-amber text-white px-6 py-3 rounded-full font-medium hover:bg-amber\/90 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-blue-50 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Youth Program Results 2024<\/h4>\n <p class=\"text-sm text-gray-500\">Outcomes from our youth empowerment initiatives<\/p>\n <\/div>\n <\/div><button class=\"bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-purple-50 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-purple-600 rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Community Advocacy Impact<\/h4>\n <p class=\"text-sm text-gray-500\">Results from grassroots advocacy campaigns<\/p>\n <\/div>\n <\/div><button class=\"bg-purple-600 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-700 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <script>\n \/\/ Default configuration\n const defaultConfig = {\n hero_headline: 'Our Impact',\n hero_subtext: 'Empowering citizens, strengthening governance, and building resilient communities across Kenya.',\n stats_headline: 'Impact in Numbers',\n stories_headline: 'Success Stories',\n background_color: '#FFF8E1',\n primary_color: '#1B5E20',\n accent_color: '#FF8F00',\n text_color: '#212121',\n surface_color: '#FFFFFF',\n font_family: 'DM Sans',\n font_size: 16\n };\n\n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n \/\/ Update hero section\n const heroHeadline = document.getElementById('hero-headline');\n if (heroHeadline) heroHeadline.textContent = config.hero_headline || defaultConfig.hero_headline;\n \n const heroSubtext = document.getElementById('hero-subtext');\n if (heroSubtext) heroSubtext.textContent = config.hero_subtext || defaultConfig.hero_subtext;\n \n \/\/ Update stats section\n const statsHeadline = document.getElementById('stats-headline');\n if (statsHeadline) statsHeadline.textContent = config.stats_headline || defaultConfig.stats_headline;\n \n \/\/ Update stories section\n const storiesHeadline = document.getElementById('stories-headline');\n if (storiesHeadline) storiesHeadline.textContent = config.stories_headline || defaultConfig.stories_headline;\n \n \/\/ Apply colors\n const primaryColor = config.primary_color || defaultConfig.primary_color;\n const accentColor = config.accent_color || defaultConfig.accent_color;\n const bgColor = config.background_color || defaultConfig.background_color;\n const textColor = config.text_color || defaultConfig.text_color;\n \n document.body.style.backgroundColor = bgColor;\n document.body.style.color = textColor;\n \n \/\/ Apply font\n const fontFamily = config.font_family || defaultConfig.font_family;\n const baseFontStack = 'sans-serif';\n document.body.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\n \n \/\/ Apply font size scaling\n const baseSize = config.font_size || defaultConfig.font_size;\n document.documentElement.style.fontSize = `${baseSize}px`;\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => window.elementSdk.setConfig({ background_color: value })\n },\n {\n get: () => config.surface_color || defaultConfig.surface_color,\n set: (value) => window.elementSdk.setConfig({ surface_color: value })\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => window.elementSdk.setConfig({ text_color: value })\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => window.elementSdk.setConfig({ primary_color: value })\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => window.elementSdk.setConfig({ accent_color: value })\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => window.elementSdk.setConfig({ font_family: value })\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (value) => window.elementSdk.setConfig({ font_size: value })\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['hero_headline', config.hero_headline || defaultConfig.hero_headline],\n ['hero_subtext', config.hero_subtext || defaultConfig.hero_subtext],\n ['stats_headline', config.stats_headline || defaultConfig.stats_headline],\n ['stories_headline', config.stories_headline || defaultConfig.stories_headline]\n ])\n });\n }\n\n \/\/ Animated counter function\n function animateCounter(element, target, duration = 2000) {\n const start = 0;\n const startTime = performance.now();\n \n function update(currentTime) {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n \n \/\/ Easing function for smooth animation\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n const current = Math.floor(start + (target - start) * easeOutQuart);\n \n element.textContent = current.toLocaleString() + (target >= 1000 ? '+' : '');\n \n if (progress < 1) {\n requestAnimationFrame(update);\n }\n }\n \n requestAnimationFrame(update);\n }\n\n \/\/ Intersection Observer for counter animation\n const counterObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const counters = entry.target.querySelectorAll('.counter');\n counters.forEach((counter, index) => {\n const target = parseInt(counter.dataset.target);\n setTimeout(() => {\n animateCounter(counter, target);\n }, index * 200);\n });\n counterObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n\n \/\/ Observe the statistics section\n const statsSection = document.querySelector('.grid.grid-cols-2.md\\\\:grid-cols-3');\n if (statsSection) {\n counterObserver.observe(statsSection);\n }\n\n \/\/ Add scroll-triggered animations\n const animationObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-fade-up');\n entry.target.style.opacity = '1';\n }\n });\n }, { threshold: 0.1 });\n\n \/\/ Observe program cards\n document.querySelectorAll('.program-card').forEach(card => {\n card.style.opacity = '0';\n animationObserver.observe(card);\n });\n\n \/\/ Comment system functionality\n let comments = [];\n\n \/\/ Load comments from localStorage\n function loadComments() {\n const saved = localStorage.getItem('retizen_comments');\n if (saved) {\n comments = JSON.parse(saved);\n renderComments();\n }\n }\n\n \/\/ Save comments to localStorage\n function saveComments() {\n localStorage.setItem('retizen_comments', JSON.stringify(comments));\n }\n\n \/\/ Render comments\n function renderComments() {\n const container = document.getElementById('comments-container');\n const noComments = document.getElementById('no-comments');\n \n container.innerHTML = '';\n \n if (comments.length === 0) {\n noComments.classList.remove('hidden');\n return;\n }\n \n noComments.classList.add('hidden');\n \n comments.forEach((comment, index) => {\n const commentEl = document.createElement('div');\n commentEl.className = 'bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-md transition-all duration-300 animate-fade-up opacity-0';\n commentEl.style.animationDelay = `${index * 0.1}s`;\n commentEl.style.opacity = '1';\n \n const programColor = getProgramColor(comment.program);\n \n commentEl.innerHTML = `\n <div class=\"flex items-start justify-between mb-4\">\n <div>\n <h4 class=\"font-semibold text-charcoal\">${escapeHtml(comment.name)}<\/h4>\n <span class=\"inline-block mt-2 px-3 py-1 rounded-full text-xs font-medium\" style=\"background-color: ${programColor}20; color: ${programColor};\">\n ${escapeHtml(comment.program)}\n <\/span>\n <\/div>\n <button class=\"delete-comment text-gray-400 hover:text-red-500 transition-colors p-2\" data-index=\"${index}\" title=\"Delete comment\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <p class=\"text-gray-600 leading-relaxed mb-3\">${escapeHtml(comment.text)}<\/p>\n <p class=\"text-xs text-gray-400\">${formatDate(comment.date)}<\/p>\n `;\n \n container.appendChild(commentEl);\n });\n\n \/\/ Add delete handlers\n document.querySelectorAll('.delete-comment').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.preventDefault();\n const index = parseInt(btn.dataset.index);\n comments.splice(index, 1);\n saveComments();\n renderComments();\n });\n });\n }\n\n \/\/ Get color based on program\n function getProgramColor(program) {\n const colors = {\n 'Civic Education': '#1B5E20',\n 'Youth Empowerment': '#FF8F00',\n 'Digital Democracy': '#2563EB',\n 'Community Advocacy': '#9333EA'\n };\n return colors[program] || '#1B5E20';\n }\n\n \/\/ Escape HTML to prevent XSS\n function escapeHtml(text) {\n const map = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n return text.replace(\/[&<>\"']\/g, m => map[m]);\n }\n\n \/\/ Format date\n function formatDate(date) {\n const now = new Date();\n const commentDate = new Date(date);\n const diff = now - commentDate;\n const seconds = Math.floor(diff \/ 1000);\n const minutes = Math.floor(seconds \/ 60);\n const hours = Math.floor(minutes \/ 60);\n const days = Math.floor(hours \/ 24);\n\n if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;\n if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;\n if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;\n return 'Just now';\n }\n\n \/\/ Handle form submission\n document.getElementById('comment-form').addEventListener('submit', (e) => {\n e.preventDefault();\n\n const name = document.getElementById('commenter-name').value.trim();\n const program = document.getElementById('program-select').value;\n const text = document.getElementById('comment-text').value.trim();\n const formMessage = document.getElementById('form-message');\n\n \/\/ Validation\n if (!name || !program || !text) {\n formMessage.textContent = 'Please fill in all fields';\n formMessage.className = 'mt-4 text-sm font-medium text-red-600 hidden';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n return;\n }\n\n if (text.length < 10) {\n formMessage.textContent = 'Comment must be at least 10 characters';\n formMessage.className = 'mt-4 text-sm font-medium text-red-600 hidden';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n return;\n }\n\n \/\/ Add comment\n comments.unshift({\n name,\n program,\n text,\n date: new Date().toISOString()\n });\n\n saveComments();\n renderComments();\n\n \/\/ Reset form and show success message\n e.target.reset();\n formMessage.textContent = '\u2713 Comment posted successfully!';\n formMessage.className = 'mt-4 text-sm font-medium text-green-600';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n });\n\n \/\/ Load comments on page load\n loadComments();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d80b0e245c524fe',t:'MTc3Mjc5MzA4OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Retizen Impact Visual Journey Impact in Action Sports Empowerment Training Workshop Women Empowerment Community Engagement Retizen Hub Usage Mpira na Retizen Measurable Results Impact in Numbers 10000 Citizens Engaged 0 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-705","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=705"}],"version-history":[{"count":5,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":705,"date":"2026-03-06T13:38:47","date_gmt":"2026-03-06T10:38:47","guid":{"rendered":"https:\/\/retizen.org\/?page_id=705"},"modified":"2026-03-31T16:11:11","modified_gmt":"2026-03-31T13:11:11","slug":"impact","status":"publish","type":"page","link":"https:\/\/retizen.org\/?page_id=705","title":{"rendered":"Impact"},"content":{"rendered":"\n\n\n \n \n \n Retizen Impact<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n forest: '#1B5E20',\n leaf: '#4CAF50',\n amber: '#FF8F00',\n cream: '#FFF8E1',\n charcoal: '#212121'\n },\n fontFamily: {\n display: ['Playfair Display', 'serif'],\n sans: ['DM Sans', 'sans-serif']\n }\n }\n }\n }\n <\/script>\n <style>\n html, body { height: 100%; margin: 0; }\n \n .app-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n\n \n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n \n @keyframes slideInLeft {\n from { opacity: 0; transform: translateX(-50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n \n @keyframes slideInRight {\n from { opacity: 0; transform: translateX(50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n \n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n \n .animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }\n .animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }\n .animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }\n .animate-slide-right { animation: slideInRight 0.8s ease-out forwards; }\n \n .delay-100 { animation-delay: 0.1s; }\n .delay-200 { animation-delay: 0.2s; }\n .delay-300 { animation-delay: 0.3s; }\n .delay-400 { animation-delay: 0.4s; }\n .delay-500 { animation-delay: 0.5s; }\n .delay-600 { animation-delay: 0.6s; }\n \n .stat-card:hover { transform: translateY(-8px); }\n .program-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); }\n \n .hero-pattern {\n background-image: \n radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.15) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(255, 143, 0, 0.1) 0%, transparent 50%),\n linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%);\n }\n \n .map-container svg { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }\n \n .gallery-item { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .gallery-item:hover { transform: scale(1.05); z-index: 10; }\n \n .counter { font-variant-numeric: tabular-nums; }\n \n .quote-mark {\n font-family: Georgia, serif;\n font-size: 6rem;\n line-height: 1;\n opacity: 0.15;\n }.logo-slider {\n overflow: hidden;\n padding: 40px 0;\n background: #f8f6f3;\n}\n\n.logo-track {\n display: flex;\n width: calc(250px * 8);\n animation: scroll 25s linear infinite;\n}\n\n.logo-track img {\n width: 220px;\n margin: 0 20px;\n border-radius: 12px;\n}\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full bg-cream font-sans text-charcoal\">\n \n <section class=\"py-20 px-6 bg-cream\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\">\n <span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Visual Journey<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact in Action<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-3 gap-4\">\n \n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1561-scaled.jpg\" alt=\"Sports Empowerment\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Sports Empowerment<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_2558-scaled.jpg\" alt=\"Training Workshop at Joma Resort\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Training Workshop<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_2569-scaled.jpg\" alt=\"Women Empowerment Meeting\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Women Empowerment<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0028.jpg\" alt=\"Community Engagement\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Community Engagement<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2024\/12\/IMG20241211153128-300x225.jpg\" alt=\"Retizen Hub Usage\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Retizen Hub Usage<\/span>\n <\/div>\n <\/div>\n <div class=\"gallery-item rounded-2xl overflow-hidden aspect-square bg-gray-200 flex items-center justify-center relative group\"><img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2024\/09\/IMG-20241230-WA0221.jpg\" alt=\"Mpira na Retizen\" class=\"w-full h-full object-cover\" loading=\"lazy\" onerror=\"console.error('Image failed to load:', this.src); this.style.background='#e5e7eb'; this.alt='Image unavailable';\">\n <div class=\"absolute inset-0 bg-black\/40 group-hover:bg-black\/50 transition-colors flex items-end\"><span class=\"text-white text-sm font-medium p-4 w-full\">Mpira na Retizen<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div><div class=\"logo-slider\">\n <div class=\"logo-track\">\n\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_0378.jpg-300x200.jpeg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3528-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg\">\n\n \n\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_0378.jpg-300x200.jpeg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3528-300x200.jpg\">\n <img decoding=\"async\" src=\"https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg\">\n\n\n <\/div>\n<\/div>\n <\/section>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Measurable Results<\/span>\n <h2 id=\"stats-headline\" class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact in Numbers<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6\">\n <div class=\"stat-card bg-gradient-to-br from-forest to-leaf p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"10000\">\n 10000\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Citizens Engaged\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-amber to-yellow-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"45\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Community Forums\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-emerald-600 to-teal-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"120\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Youth Leaders\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-blue-600 to-indigo-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"500\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Civic Reports\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-purple-600 to-pink-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"15\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Counties Reached\n <\/div>\n <\/div>\n <div class=\"stat-card bg-gradient-to-br from-rose-500 to-red-500 p-6 rounded-2xl text-center text-white transition-all duration-300 cursor-default\">\n <div class=\"counter text-4xl md:text-5xl font-bold mb-2\" data-target=\"30\">\n 0\n <\/div>\n <div class=\"text-white\/90 text-sm font-medium\">\n Partnerships\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-cream\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-amber\/20 text-amber px-4 py-2 rounded-full text-sm font-semibold mb-4\">What We Do<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Our Programs<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-amber to-yellow-500 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"bg-gradient-to-br from-forest to-emerald-600 p-8 md:p-12 flex items-center justify-center min-h-[300px]\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Civic Education<\/h3>\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Retizen has trained thousands of citizens on governance participation, constitutional rights, and accountability mechanisms, creating informed and engaged communities.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">3K+<\/span>\n <\/div><span class=\"text-charcoal\">Youth trained on civic rights<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">25<\/span>\n <\/div><span class=\"text-charcoal\">Civic education forums conducted<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-forest\/10 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-forest font-bold\">10<\/span>\n <\/div><span class=\"text-charcoal\">Policy dialogues facilitated<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"p-8 md:p-12 order-2 md:order-1\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Our youth programs equip young Kenyans with leadership skills, digital literacy, and the tools to become agents of change in their communities.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">120<\/span>\n <\/div><span class=\"text-charcoal\">Youth leaders mentored<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">15<\/span>\n <\/div><span class=\"text-charcoal\">Leadership bootcamps hosted<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-amber\/20 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-amber font-bold\">8<\/span>\n <\/div><span class=\"text-charcoal\">Youth-led community projects<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-amber to-orange-500 p-8 md:p-12 flex items-center justify-center min-h-[300px] order-1 md:order-2\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Youth Empowerment<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden mb-12 transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"bg-gradient-to-br from-blue-600 to-indigo-600 p-8 md:p-12 flex items-center justify-center min-h-[300px]\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Digital Democracy<\/h3>\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">Leveraging technology to enhance civic participation, we’ve built digital platforms that connect citizens with their representatives and government services.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">5K+<\/span>\n <\/div><span class=\"text-charcoal\">Digital platform users<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">12<\/span>\n <\/div><span class=\"text-charcoal\">Digital literacy workshops<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-blue-600 font-bold\">3<\/span>\n <\/div><span class=\"text-charcoal\">Civic tech tools developed<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"program-card bg-white rounded-3xl overflow-hidden transition-all duration-500\">\n <div class=\"grid md:grid-cols-2\">\n <div class=\"p-8 md:p-12 order-2 md:order-1\">\n <p class=\"text-gray-600 text-lg mb-8 leading-relaxed\">We amplify community voices through strategic advocacy, policy engagement, and grassroots mobilization to drive meaningful change at all levels of government.<\/p>\n <div class=\"space-y-4\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">50+<\/span>\n <\/div><span class=\"text-charcoal\">Advocacy campaigns run<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">20<\/span>\n <\/div><span class=\"text-charcoal\">Policy submissions made<\/span>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0\"><span class=\"text-purple-600 font-bold\">100+<\/span>\n <\/div><span class=\"text-charcoal\">Community meetings facilitated<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-purple-600 to-pink-600 p-8 md:p-12 flex items-center justify-center min-h-[300px] order-1 md:order-2\">\n <div class=\"text-center\">\n <div class=\"w-24 h-24 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-6\">\n <svg class=\"w-12 h-12 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-white text-2xl font-display font-bold\">Community Advocacy<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-leaf\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Community Voice<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">What People Are Saying<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"bg-cream rounded-3xl p-8 mb-12\">\n <h3 class=\"font-display text-2xl text-charcoal mb-6\">Share Your Thoughts<\/h3>\n <form id=\"comment-form\" class=\"space-y-4\">\n <div>\n <label for=\"commenter-name\" class=\"block text-sm font-semibold text-charcoal mb-2\">Your Name<\/label> <input type=\"text\" id=\"commenter-name\" placeholder=\"Enter your name\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all\" required>\n <\/div>\n <div>\n <label for=\"program-select\" class=\"block text-sm font-semibold text-charcoal mb-2\">Program<\/label> <select id=\"program-select\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all\" required> <option value=\"\">Select a program…<\/option> <option value=\"Civic Education\">Civic Education<\/option> <option value=\"Youth Empowerment\">Youth Empowerment<\/option> <option value=\"Digital Democracy\">Digital Democracy<\/option> <option value=\"Community Advocacy\">Community Advocacy<\/option> <\/select>\n <\/div>\n <div>\n <label for=\"comment-text\" class=\"block text-sm font-semibold text-charcoal mb-2\">Your Comment<\/label> <textarea id=\"comment-text\" placeholder=\"Share your experience or feedback...\" class=\"w-full px-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-forest transition-all resize-none\" rows=\"4\" required><\/textarea>\n <\/div><button type=\"submit\" class=\"w-full bg-forest hover:bg-forest\/90 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center justify-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg> Post Comment <\/button>\n <\/form>\n <div id=\"form-message\" class=\"mt-4 text-sm font-medium hidden\"><\/div>\n <\/div>\n <div id=\"comments-container\" class=\"space-y-4\">\n \n <\/div>\n <div id=\"no-comments\" class=\"text-center py-12 text-gray-500\">\n <svg class=\"w-12 h-12 mx-auto mb-4 opacity-50\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" \/>\n <\/svg>\n <p>No comments yet. Be the first to share your feedback!<\/p>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-forest\/10 text-forest px-4 py-2 rounded-full text-sm font-semibold mb-4\">Geographic Reach<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Where We Work<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-forest to-leaf mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"map-container flex justify-center\">\n <svg viewbox=\"0 0 400 500\" class=\"w-full max-w-md\"> <defs>\n <lineargradient id=\"mapGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#1B5E20\" \/>\n <stop offset=\"100%\" stop-color=\"#4CAF50\" \/>\n <\/lineargradient>\n <filter id=\"glow\">\n <fegaussianblur stddeviation=\"3\" result=\"coloredBlur\" \/>\n <femerge>\n <femergenode in=\"coloredBlur\" \/>\n <femergenode in=\"SourceGraphic\" \/>\n <\/femerge>\n <\/filter>\n <\/defs>  <path d=\"M80 100 L180 80 L250 120 L280 200 L270 300 L200 350 L120 340 L70 280 L60 180 Z\" fill=\"url(#mapGradient)\" stroke=\"#1B5E20\" stroke-width=\"2\" opacity=\"0.9\" \/>  <line x1=\"150\" y1=\"100\" x2=\"150\" y2=\"340\" stroke=\"#FFF8E1\" stroke-width=\"2\" stroke-dasharray=\"5,5\" opacity=\"0.6\" \/>  <g class=\"constituency-marker\" style=\"cursor: pointer;\">\n <circle cx=\"110\" cy=\"200\" r=\"14\" fill=\"#FF8F00\" filter=\"url(#glow)\">\n <animate attributename=\"r\" values=\"14;17;14\" dur=\"2s\" repeatcount=\"indefinite\" \/>\n <\/circle>\n <circle cx=\"110\" cy=\"200\" r=\"7\" fill=\"white\" \/>\n <text x=\"110\" y=\"245\" text-anchor=\"middle\" fill=\"#333\" font-size=\"13\" font-weight=\"600\">\n Emgwen\n <\/text>\n <text x=\"110\" y=\"262\" text-anchor=\"middle\" fill=\"#666\" font-size=\"11\">\n Constituency\n <\/text>\n <\/g>  <g class=\"constituency-marker\" style=\"cursor: pointer;\">\n <circle cx=\"200\" cy=\"240\" r=\"14\" fill=\"#FF8F00\" filter=\"url(#glow)\">\n <animate attributename=\"r\" values=\"14;17;14\" dur=\"2s\" repeatcount=\"indefinite\" begin=\"0.3s\" \/>\n <\/circle>\n <circle cx=\"200\" cy=\"240\" r=\"7\" fill=\"white\" \/>\n <text x=\"200\" y=\"285\" text-anchor=\"middle\" fill=\"#333\" font-size=\"13\" font-weight=\"600\">\n Chesumei\n <\/text>\n <text x=\"200\" y=\"302\" text-anchor=\"middle\" fill=\"#666\" font-size=\"11\">\n Constituency\n <\/text>\n <\/g>  <text x=\"200\" y=\"40\" text-anchor=\"middle\" fill=\"#1B5E20\" font-size=\"18\" font-weight=\"700\">\n Nandi County\n <\/text>\n <\/svg>\n <\/div>\n <div>\n <h3 class=\"font-display text-2xl text-charcoal mb-6\">Nandi County Focus Areas<\/h3>\n <div class=\"space-y-4\">\n <div class=\"bg-cream rounded-2xl p-6 border-l-4 border-forest hover:bg-forest\/5 transition-colors\">\n <h4 class=\"font-semibold text-forest mb-2 flex items-center gap-2\"><span class=\"w-4 h-4 bg-forest rounded-full\"><\/span> Emgwen Constituency<\/h4>\n <p class=\"text-gray-600 text-sm mb-3\">Western region of Nandi County<\/p>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Community forums established<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Youth leadership programs<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-forest\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Civic engagement initiatives<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 border-l-4 border-amber hover:bg-amber\/5 transition-colors\">\n <h4 class=\"font-semibold text-amber mb-2 flex items-center gap-2\"><span class=\"w-4 h-4 bg-amber rounded-full\"><\/span> Chesumei Constituency<\/h4>\n <p class=\"text-gray-600 text-sm mb-3\">Eastern region of Nandi County<\/p>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Digital literacy programs<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Community advocacy campaigns<\/span>\n <\/div>\n <div class=\"flex items-center gap-2 text-sm text-charcoal\">\n <svg class=\"w-4 h-4 text-amber\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n <\/svg><span>Governance participation<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-3 mt-6\">\n <div class=\"bg-gradient-to-br from-forest to-leaf p-4 rounded-xl text-white text-center\">\n <div class=\"text-2xl font-bold\">\n 2,500+\n <\/div>\n <div class=\"text-xs font-medium opacity-90\">\n Citizens Engaged\n <\/div>\n <\/div>\n <div class=\"bg-gradient-to-br from-amber to-yellow-500 p-4 rounded-xl text-white text-center\">\n <div class=\"text-2xl font-bold\">\n 12\n <\/div>\n <div class=\"text-xs font-medium opacity-90\">\n Active Programs\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-gradient-to-br from-forest to-emerald-700\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-white\/20 text-white px-4 py-2 rounded-full text-sm font-semibold mb-4\">Real Stories<\/span>\n <h2 id=\"stories-headline\" class=\"font-display text-4xl md:text-5xl text-white mb-4\">Success Stories<\/h2>\n <div class=\"w-24 h-1 bg-white\/50 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-forest absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-forest to-leaf rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n JM\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“Retizen helped our youth understand their civic rights and organize community forums. Today, we have young leaders actively participating in county governance.”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Jane Mwangi<\/p>\n <p class=\"text-sm text-gray-500\">Community Youth Leader, Nakuru<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-amber absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-amber to-orange-500 rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n PO\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“The digital democracy tools gave us a platform to voice our concerns directly to our representatives. Our petition for better roads reached 5,000 signatures!”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Peter Odhiambo<\/p>\n <p class=\"text-sm text-gray-500\">Community Organizer, Kisumu<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-3xl p-8 relative overflow-hidden group hover:transform hover:-translate-y-2 transition-all duration-300\">\n <div class=\"quote-mark text-blue-600 absolute -top-4 -left-2\">\n ”\n <\/div>\n <div class=\"relative z-10\">\n <div class=\"w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-full flex items-center justify-center mb-6 text-white text-2xl font-bold\">\n AW\n <\/div>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">“Through Retizen’s leadership program, I gained the confidence to run for student council president. Now I’m inspiring other young women to lead.”<\/p>\n <div class=\"border-t pt-4\">\n <p class=\"font-semibold text-charcoal\">Amina Wanjiku<\/p>\n <p class=\"text-sm text-gray-500\">Youth Leader, Nairobi<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"py-20 px-6 bg-white\">\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"text-center mb-16\"><span class=\"inline-block bg-amber\/20 text-amber px-4 py-2 rounded-full text-sm font-semibold mb-4\">Resources<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl text-charcoal mb-4\">Impact Reports<\/h2>\n <div class=\"w-24 h-1 bg-gradient-to-r from-amber to-yellow-500 mx-auto rounded-full\"><\/div>\n <\/div>\n <div class=\"space-y-4\">\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-forest\/5 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-forest rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">2024 Annual Impact Report<\/h4>\n <p class=\"text-sm text-gray-500\">Comprehensive overview of our yearly achievements<\/p>\n <\/div>\n <\/div><button class=\"bg-forest text-white px-6 py-3 rounded-full font-medium hover:bg-forest\/90 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-amber\/10 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-amber rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Civic Engagement Report 2024<\/h4>\n <p class=\"text-sm text-gray-500\">Detailed analysis of citizen participation<\/p>\n <\/div>\n <\/div><button class=\"bg-amber text-white px-6 py-3 rounded-full font-medium hover:bg-amber\/90 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-blue-50 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Youth Program Results 2024<\/h4>\n <p class=\"text-sm text-gray-500\">Outcomes from our youth empowerment initiatives<\/p>\n <\/div>\n <\/div><button class=\"bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <div class=\"bg-cream rounded-2xl p-6 flex items-center justify-between hover:bg-purple-50 transition-colors group\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-14 h-14 bg-purple-600 rounded-xl flex items-center justify-center flex-shrink-0\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-charcoal\">Community Advocacy Impact<\/h4>\n <p class=\"text-sm text-gray-500\">Results from grassroots advocacy campaigns<\/p>\n <\/div>\n <\/div><button class=\"bg-purple-600 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-700 transition-colors flex items-center gap-2 group-hover:gap-3\"> Download \n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <script>\n \/\/ Default configuration\n const defaultConfig = {\n hero_headline: 'Our Impact',\n hero_subtext: 'Empowering citizens, strengthening governance, and building resilient communities across Kenya.',\n stats_headline: 'Impact in Numbers',\n stories_headline: 'Success Stories',\n background_color: '#FFF8E1',\n primary_color: '#1B5E20',\n accent_color: '#FF8F00',\n text_color: '#212121',\n surface_color: '#FFFFFF',\n font_family: 'DM Sans',\n font_size: 16\n };\n\n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n \/\/ Update hero section\n const heroHeadline = document.getElementById('hero-headline');\n if (heroHeadline) heroHeadline.textContent = config.hero_headline || defaultConfig.hero_headline;\n \n const heroSubtext = document.getElementById('hero-subtext');\n if (heroSubtext) heroSubtext.textContent = config.hero_subtext || defaultConfig.hero_subtext;\n \n \/\/ Update stats section\n const statsHeadline = document.getElementById('stats-headline');\n if (statsHeadline) statsHeadline.textContent = config.stats_headline || defaultConfig.stats_headline;\n \n \/\/ Update stories section\n const storiesHeadline = document.getElementById('stories-headline');\n if (storiesHeadline) storiesHeadline.textContent = config.stories_headline || defaultConfig.stories_headline;\n \n \/\/ Apply colors\n const primaryColor = config.primary_color || defaultConfig.primary_color;\n const accentColor = config.accent_color || defaultConfig.accent_color;\n const bgColor = config.background_color || defaultConfig.background_color;\n const textColor = config.text_color || defaultConfig.text_color;\n \n document.body.style.backgroundColor = bgColor;\n document.body.style.color = textColor;\n \n \/\/ Apply font\n const fontFamily = config.font_family || defaultConfig.font_family;\n const baseFontStack = 'sans-serif';\n document.body.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\n \n \/\/ Apply font size scaling\n const baseSize = config.font_size || defaultConfig.font_size;\n document.documentElement.style.fontSize = `${baseSize}px`;\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => window.elementSdk.setConfig({ background_color: value })\n },\n {\n get: () => config.surface_color || defaultConfig.surface_color,\n set: (value) => window.elementSdk.setConfig({ surface_color: value })\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => window.elementSdk.setConfig({ text_color: value })\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => window.elementSdk.setConfig({ primary_color: value })\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => window.elementSdk.setConfig({ accent_color: value })\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => window.elementSdk.setConfig({ font_family: value })\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (value) => window.elementSdk.setConfig({ font_size: value })\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['hero_headline', config.hero_headline || defaultConfig.hero_headline],\n ['hero_subtext', config.hero_subtext || defaultConfig.hero_subtext],\n ['stats_headline', config.stats_headline || defaultConfig.stats_headline],\n ['stories_headline', config.stories_headline || defaultConfig.stories_headline]\n ])\n });\n }\n\n \/\/ Animated counter function\n function animateCounter(element, target, duration = 2000) {\n const start = 0;\n const startTime = performance.now();\n \n function update(currentTime) {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n \n \/\/ Easing function for smooth animation\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n const current = Math.floor(start + (target - start) * easeOutQuart);\n \n element.textContent = current.toLocaleString() + (target >= 1000 ? '+' : '');\n \n if (progress < 1) {\n requestAnimationFrame(update);\n }\n }\n \n requestAnimationFrame(update);\n }\n\n \/\/ Intersection Observer for counter animation\n const counterObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const counters = entry.target.querySelectorAll('.counter');\n counters.forEach((counter, index) => {\n const target = parseInt(counter.dataset.target);\n setTimeout(() => {\n animateCounter(counter, target);\n }, index * 200);\n });\n counterObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n\n \/\/ Observe the statistics section\n const statsSection = document.querySelector('.grid.grid-cols-2.md\\\\:grid-cols-3');\n if (statsSection) {\n counterObserver.observe(statsSection);\n }\n\n \/\/ Add scroll-triggered animations\n const animationObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-fade-up');\n entry.target.style.opacity = '1';\n }\n });\n }, { threshold: 0.1 });\n\n \/\/ Observe program cards\n document.querySelectorAll('.program-card').forEach(card => {\n card.style.opacity = '0';\n animationObserver.observe(card);\n });\n\n \/\/ Comment system functionality\n let comments = [];\n\n \/\/ Load comments from localStorage\n function loadComments() {\n const saved = localStorage.getItem('retizen_comments');\n if (saved) {\n comments = JSON.parse(saved);\n renderComments();\n }\n }\n\n \/\/ Save comments to localStorage\n function saveComments() {\n localStorage.setItem('retizen_comments', JSON.stringify(comments));\n }\n\n \/\/ Render comments\n function renderComments() {\n const container = document.getElementById('comments-container');\n const noComments = document.getElementById('no-comments');\n \n container.innerHTML = '';\n \n if (comments.length === 0) {\n noComments.classList.remove('hidden');\n return;\n }\n \n noComments.classList.add('hidden');\n \n comments.forEach((comment, index) => {\n const commentEl = document.createElement('div');\n commentEl.className = 'bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-md transition-all duration-300 animate-fade-up opacity-0';\n commentEl.style.animationDelay = `${index * 0.1}s`;\n commentEl.style.opacity = '1';\n \n const programColor = getProgramColor(comment.program);\n \n commentEl.innerHTML = `\n <div class=\"flex items-start justify-between mb-4\">\n <div>\n <h4 class=\"font-semibold text-charcoal\">${escapeHtml(comment.name)}<\/h4>\n <span class=\"inline-block mt-2 px-3 py-1 rounded-full text-xs font-medium\" style=\"background-color: ${programColor}20; color: ${programColor};\">\n ${escapeHtml(comment.program)}\n <\/span>\n <\/div>\n <button class=\"delete-comment text-gray-400 hover:text-red-500 transition-colors p-2\" data-index=\"${index}\" title=\"Delete comment\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <p class=\"text-gray-600 leading-relaxed mb-3\">${escapeHtml(comment.text)}<\/p>\n <p class=\"text-xs text-gray-400\">${formatDate(comment.date)}<\/p>\n `;\n \n container.appendChild(commentEl);\n });\n\n \/\/ Add delete handlers\n document.querySelectorAll('.delete-comment').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.preventDefault();\n const index = parseInt(btn.dataset.index);\n comments.splice(index, 1);\n saveComments();\n renderComments();\n });\n });\n }\n\n \/\/ Get color based on program\n function getProgramColor(program) {\n const colors = {\n 'Civic Education': '#1B5E20',\n 'Youth Empowerment': '#FF8F00',\n 'Digital Democracy': '#2563EB',\n 'Community Advocacy': '#9333EA'\n };\n return colors[program] || '#1B5E20';\n }\n\n \/\/ Escape HTML to prevent XSS\n function escapeHtml(text) {\n const map = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n return text.replace(\/[&<>\"']\/g, m => map[m]);\n }\n\n \/\/ Format date\n function formatDate(date) {\n const now = new Date();\n const commentDate = new Date(date);\n const diff = now - commentDate;\n const seconds = Math.floor(diff \/ 1000);\n const minutes = Math.floor(seconds \/ 60);\n const hours = Math.floor(minutes \/ 60);\n const days = Math.floor(hours \/ 24);\n\n if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;\n if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;\n if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;\n return 'Just now';\n }\n\n \/\/ Handle form submission\n document.getElementById('comment-form').addEventListener('submit', (e) => {\n e.preventDefault();\n\n const name = document.getElementById('commenter-name').value.trim();\n const program = document.getElementById('program-select').value;\n const text = document.getElementById('comment-text').value.trim();\n const formMessage = document.getElementById('form-message');\n\n \/\/ Validation\n if (!name || !program || !text) {\n formMessage.textContent = 'Please fill in all fields';\n formMessage.className = 'mt-4 text-sm font-medium text-red-600 hidden';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n return;\n }\n\n if (text.length < 10) {\n formMessage.textContent = 'Comment must be at least 10 characters';\n formMessage.className = 'mt-4 text-sm font-medium text-red-600 hidden';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n return;\n }\n\n \/\/ Add comment\n comments.unshift({\n name,\n program,\n text,\n date: new Date().toISOString()\n });\n\n saveComments();\n renderComments();\n\n \/\/ Reset form and show success message\n e.target.reset();\n formMessage.textContent = '\u2713 Comment posted successfully!';\n formMessage.className = 'mt-4 text-sm font-medium text-green-600';\n formMessage.classList.remove('hidden');\n setTimeout(() => formMessage.classList.add('hidden'), 3000);\n });\n\n \/\/ Load comments on page load\n loadComments();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d80b0e245c524fe',t:'MTc3Mjc5MzA4OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Retizen Impact Visual Journey Impact in Action Sports Empowerment Training Workshop Women Empowerment Community Engagement Retizen Hub Usage Mpira na Retizen Measurable Results Impact in Numbers 10000 Citizens Engaged 0 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-705","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=705"}],"version-history":[{"count":5,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/705\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}