<?php
/* Template Name: Home Page */
get_header();
?>
<section class="hero">
<div class="container">
<h1>Welcome to Munaadaa Welfare Foundation</h1>
<p>Empowering communities, transforming lives. Join us in our mission to support those in need.</p>
<a class="main-cta" href="<?php echo esc_url(home_url('/donate')); ?>">Donate Now</a>
</div>
</section>
<div class="container">
<section class="section">
<h2>Our Mission</h2>
<p>[Insert your mission statement here]</p>
</section>
<section class="section">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Munaadaa Welfare Foundation - Home</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Use Inter font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f8fbfd;
}
.text-primary { color: #007bff; } /* Blue from Logo */
.text-secondary { color: #28a745; } /* Green from Logo */
.bg-primary { background-color: #007bff; }
.bg-secondary { background-color: #28a745; }
.btn-donate {
background-color: #ffc107; /* Orange/Yellow highlight */
color: #1f2937;
transition: all 0.3s ease;
}
.btn-donate:hover {
background-color: #e0a800;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
/* Custom styles for Welfare Pillars */
.pillar-card {
min-height: 280px;
transition: transform 0.3s ease;
}
.pillar-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.logo-placeholder {
width: 50px;
height: 50px;
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- Header & Navigation -->
<header class="bg-white shadow-md sticky top-0 z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<!-- Logo/Branding -->
<a href="#" class="flex items-center space-x-3 text-2xl font-bold text-gray-800" onclick="showPage('home')">
<!-- Using a placeholder for the uploaded logo image -->
<!-- Placeholder image URL using the provided colors (Blue/Green/Orange/Purple) -->
<img src="https://placehold.co/60x60/007bff/ffffff?text=MWF" onerror="this.onerror=null; this.src='https://placehold.co/60x60/007bff/ffffff?text=MWF';" alt="Munaadaa Welfare Foundation Logo" class="w-12 h-12 rounded-full">
<span class="hidden md:inline">Munaadaa Foundation</span>
</a>
<!-- Navigation Links -->
<nav class="hidden md:flex space-x-6 text-lg font-medium">
<a href="#" class="text-gray-600 hover:text-primary transition duration-150" onclick="showPage('home')">Home</a>
<a href="#" class="text-gray-600 hover:text-primary transition duration-150" onclick="showPage('contact')">Contact Us</a>
<a href="#" class="btn-donate px-6 py-2 rounded-full shadow-lg font-semibold" onclick="showPage('donate')">DONATE NOW</a>
</nav>
<!-- Mobile Menu Button (Hamburger) -->
<button class="md:hidden text-gray-600 hover:text-primary p-2 rounded-md" onclick="toggleMobileMenu()">
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Mobile Menu (Hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg border-t border-gray-100">
<a href="#" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 font-medium" onclick="showPage('home'); toggleMobileMenu()">Home</a>
<a href="#" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 font-medium" onclick="showPage('contact'); toggleMobileMenu()">Contact Us</a>
<a href="#" class="block px-4 py-3 text-center btn-donate font-semibold" onclick="showPage('donate'); toggleMobileMenu()">DONATE NOW</a>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow">
<!-- Home Page Content -->
<section id="page-home" class="page-content active">
<!-- Hero Section -->
<div class="bg-gray-50 pt-16 pb-24 lg:pt-24 lg:pb-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-4">
Empowering Futures Through <span class="text-primary">Health</span>, <span class="text-secondary">Wealth</span>, and <span class="text-yellow-600">Welfare</span>.
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Join us in creating sustainable change for vulnerable communities around the world. Your support is the foundation of a brighter tomorrow.
</p>
<a href="#" class="btn-donate text-xl px-10 py-4 rounded-full shadow-2xl font-bold uppercase tracking-wider hover:ring-4 ring-yellow-300 ring-opacity-50" onclick="showPage('donate')">
Make a Difference Today
</a>
</div>
</div>
<!-- Vision & Mission -->
<div class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-10 items-start">
<!-- Mission Card -->
<div class="bg-blue-50 border-l-4 border-primary p-6 rounded-xl shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 mb-3 flex items-center">
<span class="text-primary mr-3">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</span>
Our Mission
</h2>
<p class="text-gray-700 text-lg">
Munaadaa Welfare Foundation is dedicated to delivering targeted programs across **Health, Wealth, and Welfare**. We strive to empower vulnerable populations by providing comprehensive healthcare access, driving economic self-sufficiency, and ensuring holistic community support to break cycles of poverty and build resilient futures.
</p>
</div>
<!-- Vision Card -->
<div class="bg-green-50 border-l-4 border-secondary p-6 rounded-xl shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 mb-3 flex items-center">
<span class="text-secondary mr-3">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.103A.999.999 0 0119 5h-1v-1a1 1 0 00-1-1H7a1 1 0 00-1 1v1H5a.999.999 0 01-.618-.103L2 9.475V19a2 2 0 002 2h16a2 2 0 002-2V9.475l-2.382-3.084z"></path></svg>
</span>
Our Vision
</h2>
<p class="text-gray-700 text-lg">
To create a world where **every individual has sustainable access to essential resources, opportunities for prosperity, and the foundational support necessary to thrive**—fostering communities defined by health, wealth, and universal welfare.
</p>
</div>
</div>
</div>
</div>
<!-- Pillars of Change Section -->
<div class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-extrabold text-gray-900 mb-12">Our Three Pillars of Change</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pillar 1: Health -->
<div class="pillar-card bg-white p-8 rounded-2xl shadow-xl text-left">
<div class="text-primary mb-4">
<!-- Icon: Heart/Medical -->
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Nourishing Healthy Communities</h3>
<p class="text-gray-600">
Providing access to primary care, emergency medical aid, essential nutrition, and clean water programs to ensure every life is protected.
</p>
</div>
<!-- Pillar 2: Wealth -->
<div class="pillar-card bg-white p-8 rounded-2xl shadow-xl text-left">
<div class="text-secondary mb-4">
<!-- Icon: Money/Growth -->
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2a2 2 0 01-2-2c0-1.105.895-2 2-2zM9 20a6 6 0 009.61-3.66l-1.635-1.15A4 4 0 0112 16a4 4 0 01-3.975-3.65L7 13.91l2 2V20zM3 4h18M3 4l-1 5m19-5l1 5M6 15h12"></path></svg>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Fostering Economic Self-Reliance</h3>
<p class="text-gray-600">
Implementing sustainable livelihood projects, vocational training, micro-finance initiatives, and education to break free from poverty.
</p>
</div>
<!-- Pillar 3: Welfare -->
<div class="pillar-card bg-white p-8 rounded-2xl shadow-xl text-left">
<div class="text-yellow-600 mb-4">
<!-- Icon: Shelter/Protection -->
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2v-11z"></path></svg>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Building Stronger Foundations</h3>
<p class="text-gray-600">
Offering holistic support including shelter, educational sponsorship, disaster relief, and psychological support to uplift the most vulnerable.
</p>
</div>
</div>
<a href="#" class="mt-12 inline-flex items-center text-lg font-semibold text-primary hover:text-blue-700" onclick="showPage('contact')">
See All Our Programs →
</a>
</div>
</div>
<!-- Secondary CTA Block -->
<div class="bg-primary py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-6">
The Journey of Change Starts With You.
</h2>
<p class="text-xl text-blue-100 max-w-4xl mx-auto mb-10">
Whether you can offer your skills, your time, or a financial contribution, every act of kindness fuels our mission. Partnership is the key to creating sustainable and lasting change.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<a href="#" class="bg-white text-primary text-xl font-bold px-10 py-4 rounded-full shadow-lg hover:bg-gray-100 transition" onclick="showPage('donate')">
DONATE NOW
</a>
<a href="#" class="bg-secondary text-white text-xl font-bold px-10 py-4 rounded-full shadow-lg hover:bg-green-700 transition" onclick="showPage('contact')">
BECOME A VOLUNTEER
</a>
</div>
</div>
</div>
</section>
<!-- Contact Us Page Content -->
<section id="page-contact" class="page-content hidden py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-5xl font-extrabold text-gray-900 text-center mb-12">Get In Touch</h2>
<div class="grid md:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-white p-8 rounded-2xl shadow-xl">
<h3 class="text-2xl font-bold text-primary mb-6">Send Us a Message</h3>
<form onsubmit="return handleFormSubmit(event, 'contact')">
<div class="mb-4">
<label for="contact-name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" id="contact-name" name="name" class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm p-3 focus:ring-primary focus:border-primary" required>
</div>
<div class="mb-4">
<label for="contact-email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="contact-email" name="email" class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm p-3 focus:ring-primary focus:border-primary" required>
</div>
<div class="mb-6">
<label for="contact-message" class="block text-sm font-medium text-gray-700">Message / Inquiry</label>
<textarea id="contact-message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-lg shadow-sm p-3 focus:ring-primary focus:border-primary" required></textarea>
</div>
<button type="submit" class="w-full bg-primary text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition">
Submit Inquiry
</button>
<p id="contact-message-box" class="mt-4 text-center text-sm hidden text-secondary font-semibold">Thank you for reaching out! We will be in touch shortly.</p>
</form>
</div>
<!-- Contact Details & Info -->
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Our Contact Details</h3>
<div class="space-y-6 text-lg text-gray-600">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-2 4v7a2 2 0 01-2 2H5a2 2 0 01-2-2v-7"></path></svg>
<span>**Email:** info@munaadaawelfarefoundation.com</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-secondary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span>**Address:** [Street Address, City, Country] - *Contact for specific location.*</span>
</div>
<h4 class="text-xl font-bold text-gray-800 pt-4">Connect with Us</h4>
<div class="flex space-x-4">
<a href="https://twitter.com/munaadawelfarefonadtion" target="_blank" class="text-primary hover:text-blue-700 transition" aria-label="Twitter">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M22.254 5.922c-.676.3-1.408.532-2.176.61a4.234 4.234 0 001.854-2.071 8.428 8.428 0 01-2.43.922 4.215 4.215 0 00-7.18 3.843A11.97 11.97 0 013.79 4.6c-.395.7-1.01 1.34-1.748 1.764a4.217 4.217 0 001.272 5.618 4.198 4.198 0 01-1.908-.528c0 .017 0 .034 0 .052a4.21 4.21 0 003.38 4.12 4.21 4.21 0 01-1.897.072 4.21 4.21 0 003.93 2.924 8.44 8.44 0 01-5.232 1.808c-.34 0-.675-.02-1.01-.06A11.986 11.986 0 0010.51 20c4.14 0 6.39-3.42 6.39-6.38v-.292c.435-.314.813-.7 1.116-1.127a.267.267 0 00.08-.135z"/></svg>
</a>
<!-- Using a generic globe icon for other social media as the handle is generic -->
<a href="https://www.instagram.com/munaadawelfarefonadtion" target="_blank" class="text-primary hover:text-blue-700 transition" aria-label="Instagram/Facebook">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2.5-7.5l5 3-5 3v-6z"/></svg>
</a>
</div>
<p class="text-sm italic pt-6">**Note:** We commit to a swift response, typically within 48 hours for general inquiries.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Donate Page Content -->
<section id="page-donate" class="page-content hidden py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-5xl font-extrabold text-gray-900 text-center mb-6">Your Generosity Changes Lives</h2>
<p class="text-xl text-gray-600 text-center max-w-3xl mx-auto mb-12">
Every contribution directly supports our programs in **Health, Wealth, and Welfare**. Choose a fund or contribution level that resonates with your heart.
</p>
<div class="bg-white p-8 md:p-12 rounded-2xl shadow-2xl border-t-8 border-yellow-500">
<h3 class="text-3xl font-bold text-gray-800 mb-6">Select Your Donation Amount</h3>
<div id="donation-buttons" class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<!-- Quick Donation Buttons -->
<button class="donation-btn bg-gray-100 text-gray-800 text-xl font-semibold py-3 rounded-xl border border-gray-200 hover:bg-yellow-50 hover:border-yellow-500 transition" data-amount="25">
$25
</button>
<button class="donation-btn bg-gray-100 text-gray-800 text-xl font-semibold py-3 rounded-xl border border-gray-200 hover:bg-yellow-50 hover:border-yellow-500 transition" data-amount="50">
$50
</button>
<button class="donation-btn bg-gray-100 text-gray-800 text-xl font-semibold py-3 rounded-xl border border-gray-200 hover:bg-yellow-50 hover:border-yellow-500 transition" data-amount="100">
$100
</button>
<button class="donation-btn bg-gray-100 text-gray-800 text-xl font-semibold py-3 rounded-xl border border-gray-200 hover:bg-yellow-50 hover:border-yellow-500 transition" data-amount="0">
Custom
</button>
</div>
<!-- Custom Amount Input -->
<div class="mb-6">
<label for="custom-amount" class="block text-lg font-medium text-gray-700 mb-2">Selected Amount (USD)</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-2xl font-bold text-gray-500">$</span>
<input type="number" id="custom-amount" value="50" min="5" class="block w-full border-2 border-gray-300 rounded-xl shadow-lg p-3 pl-10 text-2xl font-bold focus:ring-yellow-500 focus:border-yellow-500" placeholder="e.g., 75">
</div>
</div>
<!-- Fund Allocation -->
<div class="mb-8">
<label for="fund-allocation" class="block text-lg font-medium text-gray-700 mb-2">Allocate Your Donation</label>
<select id="fund-allocation" class="mt-1 block w-full border border-gray-300 rounded-xl shadow-sm p-3 bg-white focus:ring-primary focus:border-primary">
<option value="general">General Fund (Greatest Need)</option>
<option value="health">Health Programs (Medical Aid & Nutrition)</option>
<option value="wealth">Wealth Programs (Vocational Training & Micro-Finance)</option>
<option value="welfare">Welfare Programs (Shelter & Education)</option>
</select>
</div>
<!-- Action Button - Placeholder for Payment Gateway -->
<button class="w-full btn-donate text-2xl font-bold py-4 rounded-xl shadow-2xl uppercase tracking-widest" onclick="processDonation()">
Proceed to Payment
</button>
<p id="donate-message-box" class="mt-4 text-center text-lg hidden text-secondary font-bold">
Thank you for your generosity! You are making a powerful difference.
</p>
</div>
<p class="text-sm text-center text-gray-500 mt-8">
*Munaadaa Welfare Foundation is committed to transparency. All donations are tax-deductible to the fullest extent of the law.
</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white mt-12 pt-12 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 border-b border-gray-700 pb-8 mb-8">
<!-- Column 1: Mission Summary -->
<div>
<a href="#" class="flex items-center space-x-2 text-xl font-bold mb-4" onclick="showPage('home')">
<span class="text-yellow-500">MWF</span>
</a>
<p class="text-gray-400 text-sm">
Building a better world through Health, Wealth, and Welfare.
</p>
</div>
<!-- Column 2: Quick Links -->
<div>
<h4 class="text-lg font-semibold mb-4 text-primary">Quick Links</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showPage('home')">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showPage('contact')">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showPage('contact')">Our Work</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" onclick="showPage('donate')">Donate Now</a></li>
</ul>
</div>
<!-- Column 3: Contact -->
<div>
<h4 class="text-lg font-semibold mb-4 text-primary">Contact</h4>
<ul class="space-y-2 text-sm">
<li class="flex items-center space-x-2">
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-2 4v7a2 2 0 01-2 2H5a2 2 0 01-2-2v-7"></path></svg>
<a href="mailto:info@munaadaawelfarefoundation.com" class="text-gray-400 hover:text-white transition">info@munaadaawelfarefoundation.com</a>
</li>
<li class="flex items-center space-x-2">
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"></path></svg>
<span class="text-gray-400">Find Us: [Local Address]</span>
</li>
</ul>
</div>
<!-- Column 4: Social Media -->
<div>
<h4 class="text-lg font-semibold mb-4 text-primary">Connect</h4>
<div class="flex space-x-4">
<a href="https://twitter.com/munaadawelfarefonadtion" target="_blank" class="text-gray-400 hover:text-blue-400 transition" aria-label="Twitter">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.254 5.922c-.676.3-1.408.532-2.176.61a4.234 4.234 0 001.854-2.071 8.428 8.428 0 01-2.43.922 4.215 4.215 0 00-7.18 3.843A11.97 11.97 0 013.79 4.6c-.395.7-1.01 1.34-1.748 1.764a4.217 4.217 0 001.272 5.618 4.198 4.198 0 01-1.908-.528c0 .017 0 .034 0 .052a4.21 4.21 0 003.38 4.12 4.21 4.21 0 01-1.897.072 4.21 4.21 0 003.93 2.924 8.44 8.44 0 01-5.232 1.808c-.34 0-.675-.02-1.01-.06A11.986 11.986 0 0010.51 20c4.14 0 6.39-3.42 6.39-6.38v-.292c.435-.314.813-.7 1.116-1.127a.267.267 0 00.08-.135z"/></svg>
</a>
<a href="https://www.instagram.com/munaadawelfarefonadtion" target="_blank" class="text-gray-400 hover:text-pink-400 transition" aria-label="Instagram">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.013 4.85.07c.803.036 1.488.163 2.049.387.65.253 1.19.646 1.748 1.205s.952 1.098 1.205 1.748c.224.56.35 1.246.387 2.049.057 1.266.07 1.646.07 4.85s-.013 3.584-.07 4.85c-.036.803-.163 1.488-.387 2.049-.253.65-.646 1.19-1.205 1.748s-1.098.952-1.748 1.205c-.56.224-1.246.35-2.049.387-1.266.057-1.646.07-4.85.07s-3.584-.013-4.85-.07c-.803-.036-1.488-.163-2.049-.387-.65-.253-1.19-.646-1.748-1.205s-.952-1.098-1.205-1.748c-.224-.56-.35-1.246-.387-2.049-.057-1.266-.07-1.646-.07-4.85s.013-3.584.07-4.85c.036-.803.163-1.488.387-2.049.253-.65.646-1.19 1.205-1.748s1.098-.952 1.748-1.205c.56-.224 1.246-.35 2.049-.387 1.266-.057 1.646-.07 4.85-.07zm0 1.844c-3.155 0-3.535.012-4.78.068-.756.035-1.246.155-1.57.284-.4.159-.686.384-.997.695-.31.31-.536.597-.695.997-.129.324-.249.814-.284 1.57-.056 1.245-.068 1.625-.068 4.78s.012 3.535.068 4.78c.035.756.155 1.246.284 1.57.159.4.384.686.695.997.31.31.597.536.997.695.324.129.814.249 1.57.284 1.245.056 1.625.068 4.78.068s3.535-.012 4.78-.068c.756-.035 1.246-.155 1.57-.284.4-.159.686-.384.997-.695.31-.31.536-.597.695-.997.129-.324.249-.814.284-1.57.056-1.245.068-1.625.068-4.78s-.012-3.535-.068-4.78c-.035-.756-.155-1.246-.284-1.57-.159-.4-.384-.686-.695-.997-.31-.31-.597-.536-.997-.695-.324-.129-.814-.249-1.57-.284-1.245-.056-1.625-.068-4.78-.068zm0 2.214c2.56 0 4.637 2.077 4.637 4.637s-2.077 4.637-4.637 4.637-4.637-2.077-4.637-4.637 2.077-4.637 4.637-4.637zm0 1.844c-1.54 0-2.793 1.253-2.793 2.793s1.253 2.793 2.793 2.793 2.793-1.253 2.793-2.793-1.253-2.793-2.793-2.793zm4.637-3.837c0-.528.43-.958.958-.958s.958.43.958.958-.43.958-.958.958-.958-.43-.958-.958z"/></svg>
</a>
</div>
</div>
</div>
<!-- Copyright -->
<div class="text-center text-gray-500 text-sm mt-4">
© <span id="current-year"></span> Munaadaa Welfare Foundation. All Rights Reserved.
</div>
</div>
</footer>
<script>
// --- Single Page Application (SPA) Logic ---
// Get the current year for the footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// Function to show the selected page and hide others
function showPage(pageId) {
document.querySelectorAll('.page-content').forEach(page => {
page.classList.add('hidden');
});
const targetPage = document.getElementById(`page-${pageId}`);
if (targetPage) {
targetPage.classList.remove('hidden');
window.scrollTo({ top: 0, behavior: 'smooth' });
document.title = `Munaadaa Welfare Foundation - ${pageId.charAt(0).toUpperCase() + pageId.slice(1)}`;
} else {
console.error(`Page ID 'page-${pageId}' not found.`);
}
}
// Initialize the page to 'home' when the script runs
document.addEventListener('DOMContentLoaded', () => {
showPage('home');
});
// --- Contact Form Submission Handler ---
function handleFormSubmit(event, formType) {
event.preventDefault();
const messageBox = document.getElementById(`${formType}-message-box`);
// In a real application, you would send this data to a backend server (e.g., Firebase, an email service, etc.)
console.log(`Submitting ${formType} form...`);
// Simulate successful submission
messageBox.classList.remove('hidden');
// Clear the form fields (optional)
event.target.reset();
// Hide the success message after 5 seconds
setTimeout(() => {
messageBox.classList.add('hidden');
}, 5000);
return false; // Prevent traditional form submission
}
// --- Donate Page Logic ---
const amountInput = document.getElementById('custom-amount');
const donationButtons = document.querySelectorAll('.donation-btn');
donationButtons.forEach(button => {
button.addEventListener('click', () => {
const amount = button.getAttribute('data-amount');
// Remove active styling from all buttons
donationButtons.forEach(btn => {
btn.classList.remove('bg-yellow-500', 'text-white', 'border-yellow-500');
btn.classList.add('bg-gray-100', 'text-gray-800', 'border-gray-200');
});
// Add active styling to the clicked button
button.classList.add('bg-yellow-500', 'text-white', 'border-yellow-500');
button.classList.remove('bg-gray-100', 'text-gray-800', 'border-gray-200');
if (amount === '0') {
// Set custom input to 5 (or leave it as is) and let user type
amountInput.value = '';
amountInput.focus();
} else {
amountInput.value = amount;
}
});
});
// Function to simulate donation processing
function processDonation() {
const amount = parseFloat(amountInput.value);
const allocation = document.getElementById('fund-allocation').value;
const donateMessageBox = document.getElementById('donate-message-box');
if (isNaN(amount) || amount <= 0) {
// Using an inline message box instead of alert()
alert("Please enter a valid donation amount greater than $0.");
return;
}
// In a real app, this would redirect to a payment processor (e.g., PayPal, Stripe)
console.log(`Processing donation of $${amount.toFixed(2)} allocated to ${allocation}.`);
// Simulate redirect and success message
donateMessageBox.classList.remove('hidden');
donateMessageBox.textContent = `Processing $${amount.toFixed(2)} for the ${allocation.toUpperCase()} fund. Thank you!`;
setTimeout(() => {
donateMessageBox.classList.add('hidden');
// Optional: reset form after a few seconds
amountInput.value = '50';
document.getElementById('fund-allocation').value = 'general';
}, 7000);
}
// --- Mobile Menu Logic ---
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-icon-open');
const closeIcon = document.getElementById('menu-icon-close');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
openIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
} else {
menu.classList.add('hidden');
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
}
</script>
</body>
</html>
