MAHANANI \u2014 Yayasan Mahanani<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#0F172A',\r\n secondary: '#10B981',\r\n accent: '#F59E0B'\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .wa-float {\r\n position: fixed;\r\n bottom: 24px;\r\n right: 24px;\r\n z-index: 999;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: linear-gradient(135deg, #10B981, #059669);\r\n color: white;\r\n padding: 14px 20px;\r\n border-radius: 999px;\r\n box-shadow: 0 15px 35px rgba(16,185,129,0.35);\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: all .3s ease;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n .wa-float:hover {\r\n transform: translateY(-4px) scale(1.02);\r\n box-shadow: 0 20px 45px rgba(16,185,129,0.45);\r\n }\r\n\r\n @keyframes pulse {\r\n 0% {\r\n box-shadow: 0 0 0 0 rgba(16,185,129,0.5);\r\n }\r\n 70% {\r\n box-shadow: 0 0 0 18px rgba(16,185,129,0);\r\n }\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(16,185,129,0);\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .wa-text {\r\n display: none;\r\n }\r\n\r\n .wa-float {\r\n width: 64px;\r\n height: 64px;\r\n justify-content: center;\r\n padding: 0;\r\n }\r\n }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #F8FAFC;\r\n }\r\n\r\n .glass {\r\n background: rgba(255,255,255,0.7);\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .hero-gradient {\r\n background:\r\n radial-gradient(circle at top left, rgba(16,185,129,0.15), transparent 30%),\r\n radial-gradient(circle at bottom right, rgba(245,158,11,0.15), transparent 30%),\r\n #ffffff;\r\n }\r\n\r\n .card-hover:hover {\r\n transform: translateY(-5px);\r\n transition: all .3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800\">\r\n\r\n \r\n <header class=\"sticky top-0 z-50 bg-white\/90 backdrop-blur border-b border-gray-100\">\r\n <div class=\"max-w-7xl mx-auto px-4 py-4 flex items-center justify-between gap-4\">\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-10 h-10 rounded-xl bg-secondary flex items-center justify-center text-white font-bold text-xl\">\r\n M\r\n <\/div>\r\n <div>\r\n <h1 class=\"font-extrabold text-lg text-primary\">mahanani.id<\/h1>\r\n <p class=\"text-xs text-gray-500\">Yayasan Mahanani<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex flex-1 max-w-xl\">\r\n <div class=\"w-full bg-gray-100 rounded-2xl px-4 py-3 flex items-center gap-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\r\n <\/svg>\r\n <input type=\"text\" placeholder=\"Cari info mahanani.id...\" class=\"bg-transparent w-full outline-none text-sm\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"hidden lg:flex items-center gap-8 text-sm font-medium\">\r\n <a href=\"#tentang\" class=\"hover:text-secondary\">Tentang<\/a>\r\n <a href=\"#visi\" class=\"hover:text-secondary\">Visi & Misi<\/a>\r\n <a href=\"#program\" class=\"hover:text-secondary\">Program<\/a>\r\n <a href=\"#kontak\" class=\"hover:text-secondary\">Kontak<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20bertanya%20dan%20mendukung%20program%20yayasan.\" target=\"_blank\" class=\"hidden md:flex bg-secondary hover:bg-emerald-600 text-white px-5 py-3 rounded-2xl text-sm font-semibold transition shadow-lg shadow-emerald-200\">\r\n \ud83d\udcac Hubungi Kami\r\n <\/a>\r\n\r\n <button id=\"mobile-menu-button\" class=\"lg:hidden\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-7 h-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"mobile-menu\" class=\"hidden lg:hidden border-t border-gray-100 bg-white px-4 py-5\">\r\n <div class=\"flex flex-col gap-4 text-sm font-semibold\">\r\n <a href=\"#tentang\" class=\"mobile-link hover:text-secondary\">Tentang<\/a>\r\n <a href=\"#visi\" class=\"mobile-link hover:text-secondary\">Visi & Misi<\/a>\r\n <a href=\"#program\" class=\"mobile-link hover:text-secondary\">Program<\/a>\r\n <a href=\"#kontak\" class=\"mobile-link hover:text-secondary\">Kontak<\/a>\r\n\r\n <a\r\n href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menghubungi%20yayasan.\"\r\n target=\"_blank\"\r\n class=\"bg-secondary text-white text-center py-3 rounded-2xl mt-2\"\r\n >\r\n \ud83d\udc9a Hubungi WhatsApp\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n\r\n \r\n <section id=\"tentang\" class=\"hero-gradient overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-4 py-16 lg:py-24 grid lg:grid-cols-2 gap-14 items-center\">\r\n\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 bg-emerald-50 border border-emerald-100 text-secondary px-4 py-2 rounded-full text-sm font-semibold mb-6\">\r\n \ud83c\udf31 Bersama Membangun Kesetaraan\r\n <\/div>\r\n\r\n <h2 class=\"text-4xl lg:text-6xl font-extrabold leading-tight text-primary mb-6\">\r\n Mewujudkan Impian\r\n <span class=\"text-secondary\">Bagi Penyandang Disabilitas<\/span>\r\n <\/h2>\r\n\r\n <p class=\"text-lg text-gray-600 leading-relaxed mb-8 max-w-xl\">\r\n MAHANANI hadir sebagai yayasan sosial yang bergerak untuk mendampingi, memberdayakan agar dapat hidup lebih mandiri, dihargai, dan memiliki masa depan yang lebih baik.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20mendapatkan%20informasi%20lebih%20lanjut.\" target=\"_blank\" class=\"bg-secondary hover:bg-emerald-600 text-white px-8 py-4 rounded-2xl font-semibold shadow-lg shadow-emerald-100 transition inline-flex items-center gap-3\">\r\n \ud83d\udc9a Hubungi Kami\r\n <\/a>\r\n\r\n <a href=\"#program\" class=\"bg-white border border-gray-200 hover:border-secondary hover:text-secondary px-8 py-4 rounded-2xl font-semibold transition inline-flex items-center gap-3\">\r\n \ud83d\udcda Program Kami\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mt-10 flex flex-wrap gap-8\">\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">100+<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Penerima Manfaat<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">Aktif<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Pendampingan Sosial<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">5 Program<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Pemberdayaan Utama<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative\">\r\n\r\n <div class=\"absolute -top-5 -left-5 bg-white rounded-3xl shadow-xl p-5 w-52 z-20\">\r\n <p class=\"text-sm text-gray-500 mb-1\">Gerakan Peduli<\/p>\r\n <h3 class=\"text-2xl font-extrabold text-secondary\">Mari Berdampak<\/h3>\r\n <p class=\"text-sm text-gray-500 mt-1\">Bersama membantu sesama<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-[32px] shadow-2xl p-6 relative z-10 border border-gray-100\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/www.image2url.com\/r2\/default\/files\/1778814598205-63f05c33-c6ec-44bb-af18-ba6def517326.jpg\"\r\n class=\"rounded-3xl w-full h-[500px] object-cover\"\r\n alt=\"Hero\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"absolute -bottom-5 right-0 bg-primary text-white rounded-3xl p-5 shadow-xl z-20\">\r\n <p class=\"text-sm text-gray-300\">Harapan Baru<\/p>\r\n <h3 class=\"text-3xl font-extrabold\">Untuk Semua<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-14 bg-white border-y border-gray-100\">\r\n <div class=\"max-w-7xl mx-auto px-4 grid grid-cols-2 lg:grid-cols-5 gap-6\">\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udee1\ufe0f<\/div>\r\n <h3 class=\"font-bold\">Pendampingan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\u26a1<\/div>\r\n <h3 class=\"font-bold\">Pendidikan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udcac<\/div>\r\n <h3 class=\"font-bold\">Bantuan Sosial<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udd12<\/div>\r\n <h3 class=\"font-bold\">Kesetaraan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\uded2<\/div>\r\n <h3 class=\"font-bold\">Kolaborasi<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section id=\"program\" class=\"py-20\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"flex items-center justify-between mb-10\">\r\n <div>\r\n <p class=\"text-secondary font-semibold mb-2\">Program Utama<\/p>\r\n <h2 class=\"text-3xl font-extrabold text-primary\">Program MAHANANI<\/h2>\r\n <\/div>\r\n\r\n <a href=\"#kontak\" class=\"hidden md:block text-secondary font-semibold hover:text-emerald-700 transition\">\r\n Lihat Semua Program \u2192\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-5\">\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf1f<\/div>\r\n <h3 class=\"font-bold\">Pendidikan & Pelatihan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\u2764\ufe0f<\/div>\r\n <h3 class=\"font-bold\">Pendampingan Sosial<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd1d<\/div>\r\n <h3 class=\"font-bold\">Bantuan Kemanusiaan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udfaf<\/div>\r\n <h3 class=\"font-bold\">Pengembangan Potensi<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf0d<\/div>\r\n <h3 class=\"font-bold\">Kampanye Kesetaraan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd32<\/div>\r\n <h3 class=\"font-bold\">Kolaborasi Sosial<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section id=\"visi\" class=\"py-20 bg-primary text-white overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"flex flex-wrap gap-6 items-center justify-between mb-10\">\r\n <div>\r\n <p class=\"text-accent font-semibold mb-2\">Visi MAHANANI<\/p>\r\n <h2 class=\"text-4xl font-extrabold\">Menjadi yayasan yang profesional, bermartabat, dan berintegritas dalam memberdayakan penyandang disabilitas guna mewujudkan masyarakat yang inklusif, setara dan mandiri.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"flex gap-4\">\r\n <div class=\"bg-white\/10 px-5 py-3 rounded-2xl text-center min-w-[90px]\">\r\n <h3 id=\"countdown-minutes\" class=\"text-3xl font-extrabold tracking-wide\">30<\/h3>\r\n <p class=\"text-xs text-gray-300 uppercase tracking-widest mt-1\">Menit<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-white\/10 px-5 py-3 rounded-2xl text-center min-w-[90px]\">\r\n <h3 id=\"countdown-seconds\" class=\"text-3xl font-extrabold tracking-wide\">00<\/h3>\r\n <p class=\"text-xs text-gray-300 uppercase tracking-widest mt-1\">Detik<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white text-gray-800 rounded-[32px] p-10 lg:p-14 max-w-5xl mx-auto\">\r\n <h3 class=\"text-3xl font-extrabold text-primary mb-6\">\r\n <\/h3>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8 mt-10\">\r\n <div class=\"bg-gray-50 rounded-3xl p-6\">\r\n <h4 class=\"font-bold text-xl mb-4 text-secondary\">Misi MAHANANI<\/h4>\r\n <ul class=\"space-y-3 text-gray-600 leading-relaxed\">\r\n <li>\u2022 Memberikan pendampingan kepada penyandang disabilitas.<\/li>\r\n <li>\u2022 Membuka akses pendidikan dan pelatihan keterampilan.<\/li>\r\n <li>\u2022 Mendukung kemandirian ekonomi penyandang disabilitas.<\/li>\r\n <li>\u2022 Menumbuhkan kepedulian sosial masyarakat.<\/li>\r\n <li>\u2022 Menjadi jembatan kolaborasi antara keluarga, relawan, sekolah, pemerintah, dan dunia usaha.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-3xl overflow-hidden shadow-xl\">\r\n <img decoding=\"async\" src=\"https:\/\/www.image2url.com\/r2\/default\/files\/1778814598205-63f05c33-c6ec-44bb-af18-ba6def517326.jpg\" class=\"w-full h-full object-cover\" alt=\"Mahanani Foundation\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-20\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"text-center mb-14\">\r\n <p class=\"text-secondary font-semibold mb-3\">Apa Kata Mereka?<\/p>\r\n <h2 class=\"text-4xl font-extrabold text-primary\">\r\n Harapan & Dukungan Untuk Sesama\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-3 gap-8\">\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center font-bold text-xl\">\r\n A\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Andini<\/h3>\r\n <p class=\"text-sm text-gray-500\">Orang Tua Anak Disabilitas<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cMAHANANI memberikan semangat baru bagi anak-anak disabilitas untuk terus percaya diri dan berkembang.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-accent text-white flex items-center justify-center font-bold text-xl\">\r\n R\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Rizky<\/h3>\r\n <p class=\"text-sm text-gray-500\">Relawan Sosial<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cProgram pendampingannya sangat membantu keluarga kami menghadapi tantangan sehari-hari.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl\">\r\n D\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Dewi<\/h3>\r\n <p class=\"text-sm text-gray-500\">Penerima Manfaat<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cKami merasa lebih diperhatikan dan tidak sendirian menghadapi keterbatasan.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-20\">\r\n <div class=\"max-w-6xl mx-auto px-4\">\r\n <div class=\"bg-gradient-to-r from-primary to-slate-800 rounded-[40px] p-10 lg:p-16 text-white relative overflow-hidden\">\r\n\r\n <div class=\"absolute top-0 right-0 w-72 h-72 bg-secondary\/20 blur-3xl rounded-full\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-3xl\">\r\n <p class=\"text-secondary font-semibold mb-4\">\r\n Mari Menjadi Bagian Dari Kebaikan\r\n <\/p>\r\n\r\n <h2 class=\"text-4xl lg:text-5xl font-extrabold leading-tight mb-6\">\r\n Bersama Kita Wujudkan Impian Penyandang Disabilitas\r\n <\/h2>\r\n\r\n <p class=\"text-gray-300 text-lg leading-relaxed mb-8\">\r\n Melalui dukungan, kepedulian, dan kolaborasi bersama, kita dapat menciptakan lingkungan yang lebih inklusif, ramah disabilitas, dan penuh empati.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menjadi%20donatur.\" target=\"_blank\" class=\"bg-secondary hover:bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold transition inline-flex items-center gap-3 shadow-xl shadow-emerald-500\/20\">\r\n \ud83e\udd1d Gabung Menjadi Donatur\r\n <\/a>\r\n\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menghubungi%20yayasan.\" target=\"_blank\" class=\"bg-white\/10 hover:bg-white\/20 border border-white\/10 px-8 py-4 rounded-2xl font-bold transition inline-flex items-center gap-3\">\r\n \ud83d\udcac Hubungi MAHANANI\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <footer id=\"kontak\" class=\"bg-primary text-white pt-20 pb-10\">\r\n <div class=\"max-w-7xl mx-auto px-4 grid lg:grid-cols-4 gap-10\">\r\n\r\n <div>\r\n <div class=\"flex items-center gap-3 mb-5\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-secondary flex items-center justify-center font-bold text-2xl\">\r\n M\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-xl\">mahanani.id<\/h3>\r\n <p class=\"text-sm text-gray-400\">Yayasan Mahanani<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-400 leading-relaxed\">\r\n Menjadi rumah harapan bagi penyandang disabilitas melalui pendidikan, pendampingan, dan pemberdayaan.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Kategori<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>Pendidikan<\/p>\r\n <p>Pendampingan<\/p>\r\n <p>Bantuan Sosial<\/p>\r\n <p>Kesetaraan<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Bantuan<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>FAQ<\/p>\r\n <p>Kebijakan Privasi<\/p>\r\n <p>Syarat Ketentuan<\/p>\r\n <p>Hubungi Kami<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Kontak<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>Website: mahanani.id<\/p>\r\n <p>Email: info@mahanani.id<\/p>\r\n <p>Instagram: @mahananifoundation<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto px-4 mt-16 pt-8 border-t border-white\/10 text-center text-gray-500 text-sm\">\r\n \u00a9 2026 mahanani.id \u2014 All Rights Reserved.\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <a\r\n href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20bertanya%20dan%20mendukung%20program%20yayasan.\"\r\n target=\"_blank\"\r\n class=\"wa-float\"\r\n >\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M20.52 3.48A11.78 11.78 0 0012.06 0C5.56 0 .27 5.29.27 11.79c0 2.08.54 4.11 1.57 5.9L0 24l6.49-1.7a11.73 11.73 0 005.57 1.42h.01c6.5 0 11.79-5.29 11.79-11.79 0-3.15-1.23-6.11-3.34-8.45zM12.07 21.6h-.01a9.8 9.8 0 01-4.99-1.36l-.36-.21-3.85 1.01 1.03-3.75-.24-.39a9.76 9.76 0 01-1.5-5.12c0-5.41 4.4-9.81 9.82-9.81 2.62 0 5.08 1.02 6.93 2.88a9.75 9.75 0 012.87 6.93c0 5.41-4.4 9.82-9.8 9.82zm5.38-7.35c-.29-.15-1.7-.84-1.96-.94-.26-.1-.45-.15-.64.15-.19.29-.74.94-.91 1.13-.17.19-.34.22-.63.08-.29-.15-1.23-.45-2.34-1.43-.86-.77-1.44-1.72-1.61-2.01-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.08-.15-.64-1.54-.88-2.1-.23-.56-.47-.48-.64-.49l-.55-.01c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.04 2.81 1.18 3 .14.19 2.03 3.1 4.91 4.35.69.3 1.23.48 1.65.61.69.22 1.32.19 1.81.12.55-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.34z\"\/>\r\n <\/svg>\r\n\r\n <span class=\"wa-text\">\r\n Hubungi MAHANANI\r\n <\/span>\r\n <\/a>\r\n <script>\r\n \/\/ MOBILE MENU\r\n const menuButton = document.getElementById('mobile-menu-button');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n menuButton.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n document.querySelectorAll('.mobile-link').forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileMenu.classList.add('hidden');\r\n });\r\n });\r\n\r\n \/\/ SMOOTH SCROLL\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const targetId = this.getAttribute('href');\r\n const target = document.querySelector(targetId);\r\n\r\n if(target) {\r\n e.preventDefault();\r\n target.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ REAL COUNTDOWN TIMER 30 MENIT\r\n const countdownDuration = 30 * 60;\r\n\r\n let remainingTime = localStorage.getItem('mahananiCountdown')\r\n ? parseInt(localStorage.getItem('mahananiCountdown'))\r\n : countdownDuration;\r\n\r\n const minuteEl = document.getElementById('countdown-minutes');\r\n const secondEl = document.getElementById('countdown-seconds');\r\n\r\n function updateCountdown() {\r\n const minutes = Math.floor(remainingTime \/ 60);\r\n const seconds = remainingTime % 60;\r\n\r\n minuteEl.innerText = String(minutes).padStart(2, '0');\r\n secondEl.innerText = String(seconds).padStart(2, '0');\r\n\r\n localStorage.setItem('mahananiCountdown', remainingTime);\r\n\r\n if (remainingTime > 0) {\r\n remainingTime--;\r\n } else {\r\n remainingTime = countdownDuration;\r\n }\r\n }\r\n\r\n updateCountdown();\r\n setInterval(updateCountdown, 1000);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MAHANANI \u2014 Yayasan Mahanani M mahanani.id Yayasan Mahanani Tentang Visi & Misi Program Kontak 💬 Hubungi Kami Tentang Visi & Misi Program Kontak 💚 Hubungi WhatsApp 🌱 Bersama Membangun Kesetaraan Mewujudkan Impian Bagi Penyandang Disabilitas MAHANANI hadir sebagai yayasan sosial yang bergerak untuk mendampingi, memberdayakan agar dapat hidup lebih mandiri, dihargai, dan memiliki masa depan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-268","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mahanani.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=268"}],"version-history":[{"count":23,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MAHANANI \u2014 Yayasan Mahanani<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#0F172A',\r\n secondary: '#10B981',\r\n accent: '#F59E0B'\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .wa-float {\r\n position: fixed;\r\n bottom: 24px;\r\n right: 24px;\r\n z-index: 999;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: linear-gradient(135deg, #10B981, #059669);\r\n color: white;\r\n padding: 14px 20px;\r\n border-radius: 999px;\r\n box-shadow: 0 15px 35px rgba(16,185,129,0.35);\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: all .3s ease;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n .wa-float:hover {\r\n transform: translateY(-4px) scale(1.02);\r\n box-shadow: 0 20px 45px rgba(16,185,129,0.45);\r\n }\r\n\r\n @keyframes pulse {\r\n 0% {\r\n box-shadow: 0 0 0 0 rgba(16,185,129,0.5);\r\n }\r\n 70% {\r\n box-shadow: 0 0 0 18px rgba(16,185,129,0);\r\n }\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(16,185,129,0);\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .wa-text {\r\n display: none;\r\n }\r\n\r\n .wa-float {\r\n width: 64px;\r\n height: 64px;\r\n justify-content: center;\r\n padding: 0;\r\n }\r\n }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #F8FAFC;\r\n }\r\n\r\n .glass {\r\n background: rgba(255,255,255,0.7);\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .hero-gradient {\r\n background:\r\n radial-gradient(circle at top left, rgba(16,185,129,0.15), transparent 30%),\r\n radial-gradient(circle at bottom right, rgba(245,158,11,0.15), transparent 30%),\r\n #ffffff;\r\n }\r\n\r\n .card-hover:hover {\r\n transform: translateY(-5px);\r\n transition: all .3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800\">\r\n\r\n \r\n <header class=\"sticky top-0 z-50 bg-white\/90 backdrop-blur border-b border-gray-100\">\r\n <div class=\"max-w-7xl mx-auto px-4 py-4 flex items-center justify-between gap-4\">\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-10 h-10 rounded-xl bg-secondary flex items-center justify-center text-white font-bold text-xl\">\r\n M\r\n <\/div>\r\n <div>\r\n <h1 class=\"font-extrabold text-lg text-primary\">mahanani.id<\/h1>\r\n <p class=\"text-xs text-gray-500\">Yayasan Mahanani<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex flex-1 max-w-xl\">\r\n <div class=\"w-full bg-gray-100 rounded-2xl px-4 py-3 flex items-center gap-3\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\r\n <\/svg>\r\n <input type=\"text\" placeholder=\"Cari info mahanani.id...\" class=\"bg-transparent w-full outline-none text-sm\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"hidden lg:flex items-center gap-8 text-sm font-medium\">\r\n <a href=\"#tentang\" class=\"hover:text-secondary\">Tentang<\/a>\r\n <a href=\"#visi\" class=\"hover:text-secondary\">Visi & Misi<\/a>\r\n <a href=\"#program\" class=\"hover:text-secondary\">Program<\/a>\r\n <a href=\"#kontak\" class=\"hover:text-secondary\">Kontak<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20bertanya%20dan%20mendukung%20program%20yayasan.\" target=\"_blank\" class=\"hidden md:flex bg-secondary hover:bg-emerald-600 text-white px-5 py-3 rounded-2xl text-sm font-semibold transition shadow-lg shadow-emerald-200\">\r\n \ud83d\udcac Hubungi Kami\r\n <\/a>\r\n\r\n <button id=\"mobile-menu-button\" class=\"lg:hidden\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-7 h-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"mobile-menu\" class=\"hidden lg:hidden border-t border-gray-100 bg-white px-4 py-5\">\r\n <div class=\"flex flex-col gap-4 text-sm font-semibold\">\r\n <a href=\"#tentang\" class=\"mobile-link hover:text-secondary\">Tentang<\/a>\r\n <a href=\"#visi\" class=\"mobile-link hover:text-secondary\">Visi & Misi<\/a>\r\n <a href=\"#program\" class=\"mobile-link hover:text-secondary\">Program<\/a>\r\n <a href=\"#kontak\" class=\"mobile-link hover:text-secondary\">Kontak<\/a>\r\n\r\n <a\r\n href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menghubungi%20yayasan.\"\r\n target=\"_blank\"\r\n class=\"bg-secondary text-white text-center py-3 rounded-2xl mt-2\"\r\n >\r\n \ud83d\udc9a Hubungi WhatsApp\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n\r\n \r\n <section id=\"tentang\" class=\"hero-gradient overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-4 py-16 lg:py-24 grid lg:grid-cols-2 gap-14 items-center\">\r\n\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 bg-emerald-50 border border-emerald-100 text-secondary px-4 py-2 rounded-full text-sm font-semibold mb-6\">\r\n \ud83c\udf31 Bersama Membangun Kesetaraan\r\n <\/div>\r\n\r\n <h2 class=\"text-4xl lg:text-6xl font-extrabold leading-tight text-primary mb-6\">\r\n Mewujudkan Impian\r\n <span class=\"text-secondary\">Bagi Penyandang Disabilitas<\/span>\r\n <\/h2>\r\n\r\n <p class=\"text-lg text-gray-600 leading-relaxed mb-8 max-w-xl\">\r\n MAHANANI hadir sebagai yayasan sosial yang bergerak untuk mendampingi, memberdayakan agar dapat hidup lebih mandiri, dihargai, dan memiliki masa depan yang lebih baik.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20mendapatkan%20informasi%20lebih%20lanjut.\" target=\"_blank\" class=\"bg-secondary hover:bg-emerald-600 text-white px-8 py-4 rounded-2xl font-semibold shadow-lg shadow-emerald-100 transition inline-flex items-center gap-3\">\r\n \ud83d\udc9a Hubungi Kami\r\n <\/a>\r\n\r\n <a href=\"#program\" class=\"bg-white border border-gray-200 hover:border-secondary hover:text-secondary px-8 py-4 rounded-2xl font-semibold transition inline-flex items-center gap-3\">\r\n \ud83d\udcda Program Kami\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mt-10 flex flex-wrap gap-8\">\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">100+<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Penerima Manfaat<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">Aktif<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Pendampingan Sosial<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-2xl text-primary\">5 Program<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Pemberdayaan Utama<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative\">\r\n\r\n <div class=\"absolute -top-5 -left-5 bg-white rounded-3xl shadow-xl p-5 w-52 z-20\">\r\n <p class=\"text-sm text-gray-500 mb-1\">Gerakan Peduli<\/p>\r\n <h3 class=\"text-2xl font-extrabold text-secondary\">Mari Berdampak<\/h3>\r\n <p class=\"text-sm text-gray-500 mt-1\">Bersama membantu sesama<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-[32px] shadow-2xl p-6 relative z-10 border border-gray-100\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/www.image2url.com\/r2\/default\/files\/1778814598205-63f05c33-c6ec-44bb-af18-ba6def517326.jpg\"\r\n class=\"rounded-3xl w-full h-[500px] object-cover\"\r\n alt=\"Hero\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"absolute -bottom-5 right-0 bg-primary text-white rounded-3xl p-5 shadow-xl z-20\">\r\n <p class=\"text-sm text-gray-300\">Harapan Baru<\/p>\r\n <h3 class=\"text-3xl font-extrabold\">Untuk Semua<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-14 bg-white border-y border-gray-100\">\r\n <div class=\"max-w-7xl mx-auto px-4 grid grid-cols-2 lg:grid-cols-5 gap-6\">\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udee1\ufe0f<\/div>\r\n <h3 class=\"font-bold\">Pendampingan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\u26a1<\/div>\r\n <h3 class=\"font-bold\">Pendidikan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udcac<\/div>\r\n <h3 class=\"font-bold\">Bantuan Sosial<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udd12<\/div>\r\n <h3 class=\"font-bold\">Kesetaraan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"text-center p-5 rounded-3xl bg-gray-50\">\r\n <div class=\"text-3xl mb-3\">\ud83d\uded2<\/div>\r\n <h3 class=\"font-bold\">Kolaborasi<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section id=\"program\" class=\"py-20\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"flex items-center justify-between mb-10\">\r\n <div>\r\n <p class=\"text-secondary font-semibold mb-2\">Program Utama<\/p>\r\n <h2 class=\"text-3xl font-extrabold text-primary\">Program MAHANANI<\/h2>\r\n <\/div>\r\n\r\n <a href=\"#kontak\" class=\"hidden md:block text-secondary font-semibold hover:text-emerald-700 transition\">\r\n Lihat Semua Program \u2192\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-5\">\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf1f<\/div>\r\n <h3 class=\"font-bold\">Pendidikan & Pelatihan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\u2764\ufe0f<\/div>\r\n <h3 class=\"font-bold\">Pendampingan Sosial<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd1d<\/div>\r\n <h3 class=\"font-bold\">Bantuan Kemanusiaan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udfaf<\/div>\r\n <h3 class=\"font-bold\">Pengembangan Potensi<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf0d<\/div>\r\n <h3 class=\"font-bold\">Kampanye Kesetaraan<\/h3>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-white rounded-3xl p-6 shadow-sm border border-gray-100 text-center cursor-pointer\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd32<\/div>\r\n <h3 class=\"font-bold\">Kolaborasi Sosial<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section id=\"visi\" class=\"py-20 bg-primary text-white overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"flex flex-wrap gap-6 items-center justify-between mb-10\">\r\n <div>\r\n <p class=\"text-accent font-semibold mb-2\">Visi MAHANANI<\/p>\r\n <h2 class=\"text-4xl font-extrabold\">Menjadi yayasan yang profesional, bermartabat, dan berintegritas dalam memberdayakan penyandang disabilitas guna mewujudkan masyarakat yang inklusif, setara dan mandiri.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"flex gap-4\">\r\n <div class=\"bg-white\/10 px-5 py-3 rounded-2xl text-center min-w-[90px]\">\r\n <h3 id=\"countdown-minutes\" class=\"text-3xl font-extrabold tracking-wide\">30<\/h3>\r\n <p class=\"text-xs text-gray-300 uppercase tracking-widest mt-1\">Menit<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-white\/10 px-5 py-3 rounded-2xl text-center min-w-[90px]\">\r\n <h3 id=\"countdown-seconds\" class=\"text-3xl font-extrabold tracking-wide\">00<\/h3>\r\n <p class=\"text-xs text-gray-300 uppercase tracking-widest mt-1\">Detik<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white text-gray-800 rounded-[32px] p-10 lg:p-14 max-w-5xl mx-auto\">\r\n <h3 class=\"text-3xl font-extrabold text-primary mb-6\">\r\n <\/h3>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8 mt-10\">\r\n <div class=\"bg-gray-50 rounded-3xl p-6\">\r\n <h4 class=\"font-bold text-xl mb-4 text-secondary\">Misi MAHANANI<\/h4>\r\n <ul class=\"space-y-3 text-gray-600 leading-relaxed\">\r\n <li>\u2022 Memberikan pendampingan kepada penyandang disabilitas.<\/li>\r\n <li>\u2022 Membuka akses pendidikan dan pelatihan keterampilan.<\/li>\r\n <li>\u2022 Mendukung kemandirian ekonomi penyandang disabilitas.<\/li>\r\n <li>\u2022 Menumbuhkan kepedulian sosial masyarakat.<\/li>\r\n <li>\u2022 Menjadi jembatan kolaborasi antara keluarga, relawan, sekolah, pemerintah, dan dunia usaha.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"rounded-3xl overflow-hidden shadow-xl\">\r\n <img decoding=\"async\" src=\"https:\/\/www.image2url.com\/r2\/default\/files\/1778814598205-63f05c33-c6ec-44bb-af18-ba6def517326.jpg\" class=\"w-full h-full object-cover\" alt=\"Mahanani Foundation\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-20\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n\r\n <div class=\"text-center mb-14\">\r\n <p class=\"text-secondary font-semibold mb-3\">Apa Kata Mereka?<\/p>\r\n <h2 class=\"text-4xl font-extrabold text-primary\">\r\n Harapan & Dukungan Untuk Sesama\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-3 gap-8\">\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center font-bold text-xl\">\r\n A\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Andini<\/h3>\r\n <p class=\"text-sm text-gray-500\">Orang Tua Anak Disabilitas<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cMAHANANI memberikan semangat baru bagi anak-anak disabilitas untuk terus percaya diri dan berkembang.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-accent text-white flex items-center justify-center font-bold text-xl\">\r\n R\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Rizky<\/h3>\r\n <p class=\"text-sm text-gray-500\">Relawan Sosial<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cProgram pendampingannya sangat membantu keluarga kami menghadapi tantangan sehari-hari.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass border border-white\/40 rounded-[28px] p-8 shadow-xl\">\r\n <div class=\"flex items-center gap-4 mb-5\">\r\n <div class=\"w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl\">\r\n D\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold\">Dewi<\/h3>\r\n <p class=\"text-sm text-gray-500\">Penerima Manfaat<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-600 leading-relaxed mb-4\">\r\n \u201cKami merasa lebih diperhatikan dan tidak sendirian menghadapi keterbatasan.\u201d\r\n <\/p>\r\n\r\n <div class=\"text-yellow-500\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <section class=\"py-20\">\r\n <div class=\"max-w-6xl mx-auto px-4\">\r\n <div class=\"bg-gradient-to-r from-primary to-slate-800 rounded-[40px] p-10 lg:p-16 text-white relative overflow-hidden\">\r\n\r\n <div class=\"absolute top-0 right-0 w-72 h-72 bg-secondary\/20 blur-3xl rounded-full\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-3xl\">\r\n <p class=\"text-secondary font-semibold mb-4\">\r\n Mari Menjadi Bagian Dari Kebaikan\r\n <\/p>\r\n\r\n <h2 class=\"text-4xl lg:text-5xl font-extrabold leading-tight mb-6\">\r\n Bersama Kita Wujudkan Impian Penyandang Disabilitas\r\n <\/h2>\r\n\r\n <p class=\"text-gray-300 text-lg leading-relaxed mb-8\">\r\n Melalui dukungan, kepedulian, dan kolaborasi bersama, kita dapat menciptakan lingkungan yang lebih inklusif, ramah disabilitas, dan penuh empati.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap gap-4\">\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menjadi%20donatur.\" target=\"_blank\" class=\"bg-secondary hover:bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold transition inline-flex items-center gap-3 shadow-xl shadow-emerald-500\/20\">\r\n \ud83e\udd1d Gabung Menjadi Donatur\r\n <\/a>\r\n\r\n <a href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20menghubungi%20yayasan.\" target=\"_blank\" class=\"bg-white\/10 hover:bg-white\/20 border border-white\/10 px-8 py-4 rounded-2xl font-bold transition inline-flex items-center gap-3\">\r\n \ud83d\udcac Hubungi MAHANANI\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n <footer id=\"kontak\" class=\"bg-primary text-white pt-20 pb-10\">\r\n <div class=\"max-w-7xl mx-auto px-4 grid lg:grid-cols-4 gap-10\">\r\n\r\n <div>\r\n <div class=\"flex items-center gap-3 mb-5\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-secondary flex items-center justify-center font-bold text-2xl\">\r\n M\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-xl\">mahanani.id<\/h3>\r\n <p class=\"text-sm text-gray-400\">Yayasan Mahanani<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-gray-400 leading-relaxed\">\r\n Menjadi rumah harapan bagi penyandang disabilitas melalui pendidikan, pendampingan, dan pemberdayaan.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Kategori<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>Pendidikan<\/p>\r\n <p>Pendampingan<\/p>\r\n <p>Bantuan Sosial<\/p>\r\n <p>Kesetaraan<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Bantuan<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>FAQ<\/p>\r\n <p>Kebijakan Privasi<\/p>\r\n <p>Syarat Ketentuan<\/p>\r\n <p>Hubungi Kami<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-lg mb-5\">Kontak<\/h3>\r\n\r\n <div class=\"space-y-3 text-gray-400\">\r\n <p>Website: mahanani.id<\/p>\r\n <p>Email: info@mahanani.id<\/p>\r\n <p>Instagram: @mahananifoundation<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto px-4 mt-16 pt-8 border-t border-white\/10 text-center text-gray-500 text-sm\">\r\n \u00a9 2026 mahanani.id \u2014 All Rights Reserved.\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <a\r\n href=\"https:\/\/wa.me\/6285188576565?text=Halo%20MAHANANI%2C%20saya%20ingin%20bertanya%20dan%20mendukung%20program%20yayasan.\"\r\n target=\"_blank\"\r\n class=\"wa-float\"\r\n >\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M20.52 3.48A11.78 11.78 0 0012.06 0C5.56 0 .27 5.29.27 11.79c0 2.08.54 4.11 1.57 5.9L0 24l6.49-1.7a11.73 11.73 0 005.57 1.42h.01c6.5 0 11.79-5.29 11.79-11.79 0-3.15-1.23-6.11-3.34-8.45zM12.07 21.6h-.01a9.8 9.8 0 01-4.99-1.36l-.36-.21-3.85 1.01 1.03-3.75-.24-.39a9.76 9.76 0 01-1.5-5.12c0-5.41 4.4-9.81 9.82-9.81 2.62 0 5.08 1.02 6.93 2.88a9.75 9.75 0 012.87 6.93c0 5.41-4.4 9.82-9.8 9.82zm5.38-7.35c-.29-.15-1.7-.84-1.96-.94-.26-.1-.45-.15-.64.15-.19.29-.74.94-.91 1.13-.17.19-.34.22-.63.08-.29-.15-1.23-.45-2.34-1.43-.86-.77-1.44-1.72-1.61-2.01-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.08-.15-.64-1.54-.88-2.1-.23-.56-.47-.48-.64-.49l-.55-.01c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.04 2.81 1.18 3 .14.19 2.03 3.1 4.91 4.35.69.3 1.23.48 1.65.61.69.22 1.32.19 1.81.12.55-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.34z\"\/>\r\n <\/svg>\r\n\r\n <span class=\"wa-text\">\r\n Hubungi MAHANANI\r\n <\/span>\r\n <\/a>\r\n <script>\r\n \/\/ MOBILE MENU\r\n const menuButton = document.getElementById('mobile-menu-button');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n menuButton.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n document.querySelectorAll('.mobile-link').forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileMenu.classList.add('hidden');\r\n });\r\n });\r\n\r\n \/\/ SMOOTH SCROLL\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const targetId = this.getAttribute('href');\r\n const target = document.querySelector(targetId);\r\n\r\n if(target) {\r\n e.preventDefault();\r\n target.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ REAL COUNTDOWN TIMER 30 MENIT\r\n const countdownDuration = 30 * 60;\r\n\r\n let remainingTime = localStorage.getItem('mahananiCountdown')\r\n ? parseInt(localStorage.getItem('mahananiCountdown'))\r\n : countdownDuration;\r\n\r\n const minuteEl = document.getElementById('countdown-minutes');\r\n const secondEl = document.getElementById('countdown-seconds');\r\n\r\n function updateCountdown() {\r\n const minutes = Math.floor(remainingTime \/ 60);\r\n const seconds = remainingTime % 60;\r\n\r\n minuteEl.innerText = String(minutes).padStart(2, '0');\r\n secondEl.innerText = String(seconds).padStart(2, '0');\r\n\r\n localStorage.setItem('mahananiCountdown', remainingTime);\r\n\r\n if (remainingTime > 0) {\r\n remainingTime--;\r\n } else {\r\n remainingTime = countdownDuration;\r\n }\r\n }\r\n\r\n updateCountdown();\r\n setInterval(updateCountdown, 1000);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MAHANANI \u2014 Yayasan Mahanani M mahanani.id Yayasan Mahanani Tentang Visi & Misi Program Kontak 💬 Hubungi Kami Tentang Visi & Misi Program Kontak 💚 Hubungi WhatsApp 🌱 Bersama Membangun Kesetaraan Mewujudkan Impian Bagi Penyandang Disabilitas MAHANANI hadir sebagai yayasan sosial yang bergerak untuk mendampingi, memberdayakan agar dapat hidup lebih mandiri, dihargai, dan memiliki masa depan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-268","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mahanani.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=268"}],"version-history":[{"count":23,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/mahanani.id\/index.php?rest_route=\/wp\/v2\/pages\/268\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/mahanani.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}