Hugging Face's logo

Spaces:
Perf3ctFx
/
youcan
Running

App Files Community
youcan / index.html
Perf3ctFx's picture
Perf3ctFx
### YouCan (Youth Care Network) Website Prompt **Organization**: YouCan (Youth Care Network) **Slogan**: Building Futures Together **Core Pillars**: - 🧠 Mental Health & Well-being - 🌱 Sexual & Reproductive Health Rights (SRHR) - 📚 Education & Learning - 💪 Youth Empowerment **Primary Goal**: Create a donor-centric experience with seamless sponsorship pathways. --- ### 🚀 Key Features & Structure #### **1. Modern Homepage** - **Dynamic Hero**: - Tagline: "YouCan Change Futures" with animated youth mosaic - Video backdrop: Quick cuts of programs in action (counseling sessions, workshops, etc.) - **Smart CTAs**: - "Fund a Future" (donation hub) - "Partner With Us" (sponsorship portal) - **Impact Dashboard**: - Live counters: "X youths mentored this month", "Y SRHR kits distributed" - Interactive map showing program locations #### **2. Donor Nexus** - **AI-Powered Giving Assistant** (chatbot): - "Hi, I'm YouCan! Help me match your passion to impact:" - "I care about mental health" → Therapy session sponsorships - "I want to fund education" → Scholarship options - "My company seeks partnerships" → Corporate portal - **Giving Matrix**: | Pillar | $25 Gift | $100 Gift | Custom Impact | |------------------|-----------------|-----------------|---------------| | **Mental Health**| 1 Wellness Kit | Counseling Week | Fund a Clinic | | **SRHR** | 5 Test Kits | Workshop Series | Mobile Unit | | **Education** | Digital Access | Scholarship | Tech Lab | #### **3. Pillar Microsites** Each pillar has a dedicated landing page with: - **Problem Statement**: "Why This Matters" stats (e.g., "1 in 4 youth lack SRHR access") - **YouCan Solutions**: Program visuals + infographics - **Impact Calculator**: "Your $50 = 10 mental health first aid trainings" - **Stories Hub**: "Meet Amina - From Dropout to Tech Leader" #### **4. Corporate Gateway** - **Sponsorship Tiers**: ```markdown [YouCan Catalyst] $10k+ • Branded program (e.g., "Microsoft Mental Health Hub") • Annual impact report with ROI metrics [Future Builder] $5k • Employee volunteer opportunities • Featured in "Impact Partner" newsletter ``` - **ESG Dashboard**: Real-time impact metrics for sponsors #### **5. Transparency Engine** - **Fund Flow Visualizer**: - Animated journey: "Your $100 → $85 programs → 1 student's semester supplies" - **Live Project Tracker**: - "Currently funding: Nairobi Tech Hub (82% funded)" with progress bar - **Digital Annual Report**: Filter by pillar/year --- ### 🎨 Design & UX - **Vibrant Minimalism**: - Color Palette: Electric blue (#2962FF) + growth green (#00C853) + sunrise gradient accents - **Youth-Centric Illustrations**: - Abstract human figures forming "YC" monogram - Animated pathway graphics symbolizing growth - **Smart Navigation**: - Persistent "Donate" pill button (color-shifts on scroll) - "Pillar Jump" sidebar for instant section access --- ### 💡 Conversion Boosters - **Urgency Features**: - "Double your impact until [date]" countdown timers - "5 others viewing this scholarship option" social proof - **Post-Donation Experience**: - Digital "Future Builder" certificate + shareable badge - Option to join youth mentorship video calls --- **Example Wireframe: Donor Nexus** ``` [ AI CHAT HEAD: "What future will you build?" ] │ ├── PILLAR SELECTOR (4 animated icons) │ [🧠] [🌱] [📚] [💪] → Deep dive into specific programs │ ├── IMPACT SLIDER │ "I want to help: [10] youths → $250" → Auto-generates project │ └── SPONSOR MATRIX [Quick Gifts] [Recurring] [Corporate] • $25 = Mental Health Kit • $100 = Tech Scholarship • [Custom Amount] ``` ### 🌐 Tech Stack Recommendation - **CMS**: WordPress + GiveWP (donation management) - **Interactivity**: Vue.js components for impact calculators - **Security**: PCI-compliant payment gateways with cryptocurrency options This structure transforms YouCan's digital presence into an immersive donor journey, blending emotional storytelling with transactional clarity. The AI assistant and impact matrix create personalized pathways while maintaining focus on the four empowerment pillars. - Initial Deployment
71336c9 verified
Raw History Blame Contribute Delete
68.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouCan - Youth Care Network | Building Futures Together</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.gradient-bg {
background: linear-gradient(135deg, #2962FF 0%, #00C853 100%);
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.15;
}
.pillar-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.counter-number {
font-size: 3.5rem;
background: linear-gradient(135deg, #2962FF 0%, #00C853 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.impact-pathway {
position: relative;
}
.impact-pathway::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #2962FF, #00C853);
transform: translateX(-50%);
}
@media (max-width: 768px) {
.impact-pathway::after {
left: 20px;
}
}
.chat-bubble {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.progress-ring__circle {
transition: stroke-dashoffset 0.5s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed w-full bg-white shadow-md z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">YC</div>
<span class="ml-3 text-xl font-bold text-gray-900">YouCan</span>
</div>
<div class="hidden md:ml-10 md:flex md:space-x-8">
<a href="#home" class="text-blue-600 border-blue-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<a href="#pillars" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Our Pillars</a>
<a href="#impact" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Impact</a>
<a href="#donate" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Donate</a>
<a href="#partners" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Partners</a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center">
<button class="ml-4 gradient-bg text-white px-4 py-2 rounded-full text-sm font-medium hover:opacity-90 transition duration-300">Donate Now</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden md:hidden" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="#home" class="bg-blue-50 border-blue-500 text-blue-600 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<a href="#pillars" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Our Pillars</a>
<a href="#impact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Impact</a>
<a href="#donate" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Donate</a>
<a href="#partners" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Partners</a>
<div class="mt-4 pl-3">
<button class="gradient-bg text-white px-4 py-2 rounded-full text-sm font-medium hover:opacity-90 transition duration-300">Donate Now</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative pt-24 pb-20 md:pt-32 md:pb-28 overflow-hidden">
<video autoplay muted loop class="hero-video">
<source src="https://assets.mixkit.co/videos/preview/mixkit-group-of-people-volunteering-at-a-soup-kitchen-46511-large.mp4" type="video/mp4">
</video>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">YouCan Change</span>
<span class="block text-blue-600">Futures</span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Building futures together through mental health support, education, and youth empowerment.
</p>
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<div class="grid grid-cols-2 gap-4">
<a href="#donate" class="gradient-bg text-white px-6 py-3 rounded-lg text-sm font-medium hover:opacity-90 transition duration-300 flex items-center justify-center">
<i class="fas fa-hand-holding-heart mr-2"></i> Fund a Future
</a>
<a href="#partners" class="bg-white text-blue-600 px-6 py-3 rounded-lg text-sm font-medium hover:bg-gray-100 transition duration-300 border border-blue-600 flex items-center justify-center">
<i class="fas fa-handshake mr-2"></i> Partner With Us
</a>
</div>
</div>
</div>
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<div class="relative bg-white rounded-lg p-6">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">YC</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">YouCan Assistant</p>
<p class="text-xs text-gray-500">Online</p>
</div>
</div>
<div class="mt-4 chat-bubble bg-blue-50 rounded-lg p-4">
<p class="text-sm text-gray-700">Hi there! I'm YouCan. How would you like to help build futures today?</p>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-blue-100 text-blue-800 px-3 py-2 rounded-lg text-xs font-medium hover:bg-blue-200 transition duration-300">Mental Health</button>
<button class="bg-green-100 text-green-800 px-3 py-2 rounded-lg text-xs font-medium hover:bg-green-200 transition duration-300">Education</button>
<button class="bg-purple-100 text-purple-800 px-3 py-2 rounded-lg text-xs font-medium hover:bg-purple-200 transition duration-300">SRHR</button>
<button class="bg-yellow-100 text-yellow-800 px-3 py-2 rounded-lg text-xs font-medium hover:bg-yellow-200 transition duration-300">Empowerment</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Impact Dashboard -->
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Impact</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Changing Lives Every Day
</p>
</div>
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="text-center">
<div class="counter-number font-bold">12,345</div>
<p class="mt-2 text-sm font-medium text-gray-500">Youths Mentored</p>
</div>
<div class="text-center">
<div class="counter-number font-bold">8,765</div>
<p class="mt-2 text-sm font-medium text-gray-500">SRHR Kits Distributed</p>
</div>
<div class="text-center">
<div class="counter-number font-bold">5,678</div>
<p class="mt-2 text-sm font-medium text-gray-500">Scholarships Awarded</p>
</div>
<div class="text-center">
<div class="counter-number font-bold">23</div>
<p class="mt-2 text-sm font-medium text-gray-500">Communities Reached</p>
</div>
</div>
<div class="mt-12">
<div class="bg-gray-100 rounded-xl p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i class="fas fa-map-marked-alt text-white text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Our Global Reach</h3>
<p class="mt-1 text-sm text-gray-500">See where we're making an impact around the world</p>
</div>
</div>
<div class="mt-6">
<img src="https://mapsvg.com/static/maps/geo-calibrated/world.svg" alt="World map with YouCan locations" class="w-full h-auto rounded-lg border border-gray-200">
<div class="mt-4 flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Kenya</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Uganda</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Tanzania</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Rwanda</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">South Africa</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Our Pillars -->
<section id="pillars" class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Approach</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Building Futures Through Four Pillars
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
We address the most critical needs of youth through comprehensive programs.
</p>
</div>
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<!-- Mental Health -->
<div class="pillar-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 text-blue-600 mx-auto">
<i class="fas fa-brain text-2xl"></i>
</div>
<div class="mt-4 text-center">
<h3 class="text-lg font-medium text-gray-900">Mental Health</h3>
<p class="mt-2 text-sm text-gray-500">
Providing counseling, therapy, and mental health resources to youth in need.
</p>
</div>
<div class="mt-6">
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-500 flex items-center justify-center">
Learn more <i class="fas fa-chevron-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- SRHR -->
<div class="pillar-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-600 mx-auto">
<i class="fas fa-heartbeat text-2xl"></i>
</div>
<div class="mt-4 text-center">
<h3 class="text-lg font-medium text-gray-900">SRHR</h3>
<p class="mt-2 text-sm text-gray-500">
Sexual and reproductive health education, resources, and rights advocacy.
</p>
</div>
<div class="mt-6">
<a href="#" class="text-green-600 text-sm font-medium hover:text-green-500 flex items-center justify-center">
Learn more <i class="fas fa-chevron-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Education -->
<div class="pillar-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 text-purple-600 mx-auto">
<i class="fas fa-graduation-cap text-2xl"></i>
</div>
<div class="mt-4 text-center">
<h3 class="text-lg font-medium text-gray-900">Education</h3>
<p class="mt-2 text-sm text-gray-500">
Scholarships, digital learning tools, and vocational training programs.
</p>
</div>
<div class="mt-6">
<a href="#" class="text-purple-600 text-sm font-medium hover:text-purple-500 flex items-center justify-center">
Learn more <i class="fas fa-chevron-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Empowerment -->
<div class="pillar-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 rounded-full bg-yellow-100 text-yellow-600 mx-auto">
<i class="fas fa-hands-helping text-2xl"></i>
</div>
<div class="mt-4 text-center">
<h3 class="text-lg font-medium text-gray-900">Empowerment</h3>
<p class="mt-2 text-sm text-gray-500">
Leadership training, entrepreneurship programs, and community building.
</p>
</div>
<div class="mt-6">
<a href="#" class="text-yellow-600 text-sm font-medium hover:text-yellow-500 flex items-center justify-center">
Learn more <i class="fas fa-chevron-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Donation Section -->
<section id="donate" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Make an Impact</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Your Support Changes Lives
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Every contribution helps us build brighter futures for youth in need.
</p>
</div>
<div class="mt-12">
<div class="bg-gradient-to-r from-blue-500 to-green-500 rounded-xl shadow-xl overflow-hidden">
<div class="p-6 text-white">
<div class="flex items-center">
<i class="fas fa-bolt text-2xl mr-3"></i>
<h3 class="text-xl font-bold">Double Your Impact!</h3>
</div>
<p class="mt-2">All donations matched until <span class="font-bold">June 30th</span> (up to $50,000)</p>
<div class="mt-4 flex items-center">
<div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
<div class="bg-white h-2.5 rounded-full" style="width: 75%"></div>
</div>
<span class="ml-3 text-sm">$37,500 of $50,000</span>
</div>
<div class="mt-4 flex justify-between text-sm">
<span>12 days left</span>
<span>5 donors giving now</span>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Quick Gifts -->
<div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900 text-center">Quick Gifts</h3>
<p class="mt-2 text-sm text-gray-500 text-center">Make an immediate impact with these options</p>
<div class="mt-6 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
<i class="fas fa-heart text-blue-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Mental Health Kit</p>
<p class="mt-1 text-sm text-gray-500">Provides resources for 1 youth</p>
<p class="mt-1 text-sm font-bold text-blue-600">$25</p>
<button class="mt-2 text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Select</button>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-green-100 rounded-md p-2">
<i class="fas fa-book text-green-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Education Package</p>
<p class="mt-1 text-sm text-gray-500">Supplies for 1 student</p>
<p class="mt-1 text-sm font-bold text-green-600">$50</p>
<button class="mt-2 text-xs bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700">Select</button>
</div>
</div>
</div>
</div>
</div>
<!-- Recurring Support -->
<div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900 text-center">Monthly Support</h3>
<p class="mt-2 text-sm text-gray-500 text-center">Sustained change through recurring gifts</p>
<div class="mt-6 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
<i class="fas fa-user-graduate text-purple-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Scholarship Sponsor</p>
<p class="mt-1 text-sm text-gray-500">Monthly support for education</p>
<p class="mt-1 text-sm font-bold text-purple-600">$30/month</p>
<button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700">Select</button>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-yellow-100 rounded-md p-2">
<i class="fas fa-hand-holding-medical text-yellow-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Health Champion</p>
<p class="mt-1 text-sm text-gray-500">Monthly SRHR support</p>
<p class="mt-1 text-sm font-bold text-yellow-600">$20/month</p>
<button class="mt-2 text-xs bg-yellow-600 text-white px-3 py-1 rounded hover:bg-yellow-700">Select</button>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Donation -->
<div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900 text-center">Custom Impact</h3>
<p class="mt-2 text-sm text-gray-500 text-center">Choose your amount and designation</p>
<div class="mt-6">
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">$</span>
</div>
<input type="text" name="price" id="price" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
<div class="absolute inset-y-0 right-0 flex items-center">
<label for="currency" class="sr-only">Currency</label>
<select id="currency" name="currency" class="focus:ring-blue-500 focus:border-blue-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
<option>USD</option>
<option>EUR</option>
<option>GBP</option>
</select>
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700">Designate your gift (optional)</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
<option>Where most needed</option>
<option>Mental Health Programs</option>
<option>SRHR Initiatives</option>
<option>Education Scholarships</option>
<option>Youth Empowerment</option>
</select>
</div>
<button class="mt-6 w-full gradient-bg text-white px-4 py-3 rounded-md text-sm font-medium hover:opacity-90 transition duration-300">Continue to Payment</button>
</div>
</div>
</div>
</div>
<!-- Impact Calculator -->
<div class="mt-12 bg-gray-50 rounded-xl p-6">
<h3 class="text-lg font-medium text-gray-900">See Your Impact</h3>
<p class="mt-1 text-sm text-gray-500">Use our calculator to understand how your donation makes a difference</p>
<div class="mt-6">
<div class="flex items-center justify-between">
<label for="donation-amount" class="block text-sm font-medium text-gray-700">Donation Amount ($)</label>
<span id="amount-value" class="text-sm font-medium text-blue-600">50</span>
</div>
<input type="range" id="donation-amount" name="donation-amount" min="10" max="500" value="50" class="mt-2 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<p class="text-sm text-gray-500">Your <span class="font-bold">$<span id="calculated-amount">50</span></span> could provide:</p>
<ul class="mt-2 space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span><span id="therapy-sessions">2</span> therapy sessions</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span><span id="school-supplies">5</span> sets of school supplies</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span><span id="health-kits">3</span> SRHR health kits</span>
</li>
</ul>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<p class="text-sm text-gray-500">With monthly giving:</p>
<ul class="mt-2 space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Sponsor <span id="monthly-students">1</span> student's education</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Fund <span id="monthly-workshops">1</span> empowerment workshop</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Support <span id="monthly-counseling">10</span> counseling hours</span>
</li>
</ul>
<button class="mt-3 text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Learn About Monthly Giving</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Transparency Section -->
<section id="impact" class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Transparency</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Your Donation at Work
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
We believe in complete transparency about how funds are used.
</p>
</div>
<div class="mt-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900">Fund Flow Visualizer</h3>
<p class="mt-1 text-sm text-gray-500">See how your donation makes an impact</p>
<div class="mt-6 impact-pathway space-y-8">
<!-- Step 1 -->
<div class="relative pl-12">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
<span>1</span>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-medium text-blue-800">Your Donation</h4>
<p class="mt-1 text-sm text-gray-600">$100 contribution received</p>
</div>
</div>
<!-- Step 2 -->
<div class="relative pl-12">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
<span>2</span>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-medium text-blue-800">Fund Allocation</h4>
<p class="mt-1 text-sm text-gray-600">$85 goes directly to programs</p>
<p class="mt-1 text-xs text-gray-500">$10 to admin, $5 to fundraising</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative pl-12">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
<span>3</span>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-medium text-blue-800">Impact Created</h4>
<p class="mt-1 text-sm text-gray-600">Provides 1 student's semester supplies</p>
<p class="mt-1 text-xs text-gray-500">Including books, uniforms, and materials</p>
</div>
</div>
<!-- Step 4 -->
<div class="relative pl-12">
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
<span>4</span>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-medium text-blue-800">Outcome</h4>
<p class="mt-1 text-sm text-gray-600">Student completes semester with improved grades</p>
<p class="mt-1 text-xs text-gray-500">90% of sponsored students show academic improvement</p>
</div>
</div>
</div>
</div>
</div>
<!-- Current Projects -->
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900">Live Project Tracker</h3>
<p class="mt-1 text-sm text-gray-500">See what we're currently funding</p>
<div class="mt-6 space-y-6">
<!-- Project 1 -->
<div>
<div class="flex items-center justify-between">
<h4 class="font-medium text-gray-900">Nairobi Tech Hub</h4>
<span class="text-sm font-medium text-blue-600">82% funded</span>
</div>
<div class="mt-2 w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 82%"></div>
</div>
<div class="mt-2 flex justify-between text-xs text-gray-500">
<span>$41,000 raised</span>
<span>$50,000 goal</span>
</div>
<p class="mt-2 text-sm text-gray-600">Providing digital skills training to 200 youth in Nairobi's underserved communities.</p>
<button class="mt-3 text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Support This Project</button>
</div>
<!-- Project 2 -->
<div>
<div class="flex items-center justify-between">
<h4 class="font-medium text-gray-900">Mental Health First Aid</h4>
<span class="text-sm font-medium text-green-600">45% funded</span>
</div>
<div class="mt-2 w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="mt-2 flex justify-between text-xs text-gray-500">
<span>$22,500 raised</span>
<span>$50,000 goal</span>
</div>
<p class="mt-2 text-sm text-gray-600">Training 100 youth as mental health first responders in their communities.</p>
<button class="mt-3 text-xs bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700">Support This Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Corporate Partners -->
<section id="partners" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Partnerships</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Corporate & Institutional Partners
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Join leading organizations in creating sustainable impact.
</p>
</div>
<div class="mt-12">
<div class="bg-gray-50 rounded-xl p-6">
<h3 class="text-lg font-medium text-gray-900">Sponsorship Tiers</h3>
<p class="mt-1 text-sm text-gray-500">Choose the level that matches your organization's goals</p>
<div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
<!-- Tier 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden border border-blue-200">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
<i class="fas fa-star text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">YouCan Catalyst</h4>
<p class="mt-1 text-sm text-gray-500">$10,000+ annually</p>
</div>
</div>
<div class="mt-6">
<ul class="space-y-3 text-sm">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Branded program (e.g., "Microsoft Mental Health Hub")</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Annual impact report with ROI metrics</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Executive-level advisory seat</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Featured in all marketing materials</span>
</li>
</ul>
<button class="mt-6 w-full gradient-bg text-white px-4 py-3 rounded-md text-sm font-medium hover:opacity-90 transition duration-300">Become a Catalyst</button>
</div>
</div>
</div>
<!-- Tier 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden border border-green-200">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-md p-3">
<i class="fas fa-building text-green-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Future Builder</h4>
<p class="mt-1 text-sm text-gray-500">$5,000+ annually</p>
</div>
</div>
<div class="mt-6">
<ul class="space-y-3 text-sm">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Employee volunteer opportunities</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Featured in "Impact Partner" newsletter</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Quarterly impact reports</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Recognition on website and social media</span>
</li>
</ul>
<button class="mt-6 w-full gradient-bg text-white px-4 py-3 rounded-md text-sm font-medium hover:opacity-90 transition duration-300">Become a Builder</button>
</div>
</div>
</div>
</div>
</div>
<!-- ESG Dashboard -->
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900">ESG Impact Dashboard</h3>
<p class="mt-1 text-sm text-gray-500">Real-time metrics for corporate partners</p>
<div class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4">
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-blue-600">17</div>
<div class="text-xs text-gray-500">SDGs Supported</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-green-600">92%</div>
<div class="text-xs text-gray-500">Program Efficiency</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-purple-600">1.2M</div>
<div class="text-xs text-gray-500">Lives Impacted</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-yellow-600">$3.2M</div>
<div class="text-xs text-gray-500">Total Investment</div>
</div>
</div>
<div class="mt-6">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-700">Your Company's Impact</h4>
<button class="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Request Access</button>
</div>
<div class="mt-2 bg-gray-200 rounded-full h-2.5">
<div class="gradient-bg h-2.5 rounded-full" style="width: 65%"></div>
</div>
<p class="mt-2 text-xs text-gray-500">Complete partnership setup to unlock your customized ESG dashboard</p>
</div>
</div>
</div>
<!-- Partner Logos -->
<div class="mt-12">
<h3 class="text-lg font-medium text-gray-900 text-center">Our Valued Partners</h3>
<div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-4">
<div class="flex items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=Microsoft" alt="Microsoft" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=Google" alt="Google" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=Safaricom" alt="Safaricom" class="h-12 object-contain">
</div>
<div class="flex items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=UNICEF" alt="UNICEF" class="h-12 object-contain">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Success Stories -->
<section class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Success Stories</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Lives Transformed
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Hear from the youth whose futures we've built together.
</p>
</div>
<div class="mt-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="md:flex">
<div class="md:flex-shrink-0 md:w-1/3">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Amina's story">
</div>
<div class="p-8 md:w-2/3">
<div class="uppercase tracking-wide text-sm text-blue-600 font-semibold">Education Pillar</div>
<h3 class="mt-2 text-xl font-medium text-gray-900">From Dropout to Tech Leader</h3>
<p class="mt-3 text-gray-600">
"At 16, I had to drop out of school to help my family. YouCan's scholarship program changed everything. They not only paid my fees but provided mentorship and computer training. Today, I lead a team of developers at a Nairobi tech startup and mentor other girls in coding."
</p>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Amina">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Amina W.</p>
<p class="text-sm text-gray-500">YouCan Scholar, Class of 2018</p>
</div>
</div>
<div class="mt-6">
<button class="text-blue-600 text-sm font-medium hover:text-blue-500 flex items-center">
Watch Amina's Story <i class="fas fa-play-circle ml-2 text-lg"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
<!-- Story 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
<i class="fas fa-heart text-blue-600"></i>
</div>
<div class="ml-3">
<h4 class="text-lg font-medium text-gray-900">Finding Hope Again</h4>
<p class="mt-1 text-sm text-gray-500">Mental Health Program</p>
</div>
</div>
<p class="mt-4 text-sm text-gray-600">
"After losing both parents, I fell into deep depression. YouCan's counseling program gave me tools to cope and a community that cared. I'm now training to be a peer counselor."
</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="David">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">David K.</p>
<p class="text-xs text-gray-500">Nairobi, Kenya</p>
</div>
</div>
</div>
</div>
<!-- Story 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-md p-2">
<i class="fas fa-heartbeat text-green-600"></i>
</div>
<div class="ml-3">
<h4 class="text-lg font-medium text-gray-900">Breaking the Silence</h4>
<p class="mt-1 text-sm text-gray-500">SRHR Initiative</p>
</div>
</div>
<p class="mt-4 text-sm text-gray-600">
"In my village, no one talked about reproductive health. YouCan's workshop gave me knowledge to protect myself and courage to educate others. I've since trained 50+ girls."
</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Grace">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Grace M.</p>
<p class="text-xs text-gray-500">Kampala, Uganda</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
View More Stories <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="gradient-bg py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="lg:w-1/2">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">
Stay Connected
</h2>
<p class="mt-3 max-w-3xl text-lg leading-6 text-blue-100">
Join our newsletter to receive updates on our programs and impact.
</p>
</div>
<div class="mt-8 lg:mt-0 lg:w-1/2">
<form class="sm:flex">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:outline-none sm:max-w-xs rounded-md" placeholder="Enter your email">
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
Subscribe
</button>
</div>
</form>
<p class="mt-3 text-sm text-blue-100">
We care about your data. Read our <a href="#" class="text-white font-medium underline">Privacy Policy</a>.
</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">YC</div>
<span class="ml-3 text-xl font-bold text-white">YouCan</span>
</div>
<p class="mt-4 text-sm text-gray-300">
Building futures together through mental health support, education, and youth empowerment across Africa.
</p>
<div class="mt-4 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">About</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">Our Story</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Team</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Financials</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">Donate</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Fundraise</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Corporate Giving</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Planned Giving</a></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
<p class="text-base text-gray-400">
&copy; 2023 YouCan (Youth Care Network). All rights reserved.
</p>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a>
<a href="#" class="text-base text-gray-400 hover:text-white">Terms</a>
<a href="#" class="text-base text-gray-400 hover:text-white">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Floating Donate Button -->
<div class="fixed bottom-6 right-6 z-50">
<button class="gradient-bg text-white p-4 rounded-full shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110">
<i class="fas fa-hand-holding-heart text-xl"></i>
<span class="sr-only">Donate</span>
</button>
</div>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
menu.classList.add('block');
} else {
menu.classList.remove('block');
menu.classList.add('hidden');
}
});
// Impact calculator
const donationSlider = document.getElementById('donation-amount');
const amountValue = document.getElementById('amount-value');
const calculatedAmount = document.getElementById('calculated-amount');
const therapySessions = document.getElementById('therapy-sessions');
const schoolSupplies = document.getElementById('school-supplies');
const healthKits = document.getElementById('health-kits');
const monthlyStudents = document.getElementById('monthly-students');
const monthlyWorkshops = document.getElementById('monthly-workshops');
const monthlyCounseling = document.getElementById('monthly-counseling');
donationSlider.addEventListener('input', function() {
const value = this.value;
amountValue.textContent = value;
calculatedAmount.textContent = value;
// Update impact metrics
therapySessions.textContent = Math.floor(value / 25);
schoolSupplies.textContent = Math.floor(value / 10);
healthKits.textContent = Math.floor(value / 15);
// Monthly impact
monthlyStudents.textContent = value >= 30 ? 1 : 0;
monthlyWorkshops.textContent = value >= 50 ? 1 : 0;
monthlyCounseling.textContent = Math.floor(value / 5);
});
// Counter animation
function animateCounters() {
const counters = document.querySelectorAll('.counter-number');
const speed = 200;
counters.forEach(counter => {
const target = +counter.textContent;
const count = +counter.textContent;
const increment = target / speed;
if (count < target) {
counter.textContent = Math.ceil(count + increment);
setTimeout(animateCounters, 1);
} else {
counter.textContent = target;
}
});
}
// Intersection Observer for counter animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCounters();
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
const impactSection = document.querySelector('.bg-white.py-12');
if (impactSection) {
observer.observe(impactSection);
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Perf3ctFx/youcan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>