Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dickson Okere Youths Foundation - Empowering African Youth</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"> | |
| <script src="https://checkout.flutterwave.com/v3.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(21,101,192,0.9) 0%, rgba(25,118,210,0.9) 50%, rgba(66,165,245,0.9) 100%); | |
| } | |
| .donate-btn { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .donate-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .impact-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .impact-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #1976D2; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .core-value-card { | |
| transition: all 0.3s ease; | |
| } | |
| .core-value-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| } | |
| .mission-statement { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| } | |
| .mission-statement::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0.5rem; | |
| height: 1rem; | |
| width: 1rem; | |
| background-color: #1976D2; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">DOYF</div> | |
| <h1 class="text-xl font-bold text-blue-800">Dickson Okere Youths Foundation</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Home</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-600">About</a> | |
| <a href="#programs" class="nav-link text-gray-700 hover:text-blue-600">Programs</a> | |
| <a href="#impact" class="nav-link text-gray-700 hover:text-blue-600">Impact</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu"> | |
| <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Home</a> | |
| <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600">About</a> | |
| <a href="#programs" class="block py-2 text-gray-700 hover:text-blue-600">Programs</a> | |
| <a href="#impact" class="block py-2 text-gray-700 hover:text-blue-600">Impact</a> | |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600">Contact</a> | |
| <button onclick="openDonationModal()" class="mt-3 w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition"> | |
| Donate Now | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-20"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Empowering the Next Generation of African Leaders</h1> | |
| <p class="text-xl mb-8">We advocate for and engage in youth capacity building projects that stimulate entrepreneurial skills, leadership development, and social emancipation.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="openDonationModal()" class="donate-btn bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100"> | |
| Donate Now <i class="fas fa-heart ml-2"></i> | |
| </button> | |
| <a href="#programs" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition"> | |
| Our Programs <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12 -mt-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 grid grid-cols-1 md:grid-cols-4 gap-6 divide-y md:divide-y-0 md:divide-x divide-gray-200"> | |
| <div class="text-center p-4"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">5,000+</div> | |
| <div class="text-gray-600">Youths Empowered</div> | |
| </div> | |
| <div class="text-center p-4"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">120+</div> | |
| <div class="text-gray-600">Communities Reached</div> | |
| </div> | |
| <div class="text-center p-4"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">15</div> | |
| <div class="text-gray-600">Training Programs</div> | |
| </div> | |
| <div class="text-center p-4"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">100%</div> | |
| <div class="text-gray-600">Transparent Operations</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Who We Are</h2> | |
| <p class="text-gray-600 max-w-4xl mx-auto">Dickson Okere Youths Foundation (DOYF) is a non-profit organization dedicated to advocating, pursuing and engaging in youth capacity building projects that will stimulate entrepreneurial skills, leadership development and social emancipation of young people in Nigeria and Africa.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Our Vision & Mission</h3> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-eye text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Our Vision</h4> | |
| <p class="text-gray-600">A Nigeria and Africa where youth are empowered as agents of positive social change.</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h4 class="font-bold text-gray-800">Mission Statements</h4> | |
| <ul class="space-y-4"> | |
| <li class="mission-statement text-gray-600">Redirecting and refocusing the interest and strength of young people on issues that build progressive society, national peace and unity.</li> | |
| <li class="mission-statement text-gray-600">Breeding trans generation of young social influencers across communities in Nigeria.</li> | |
| <li class="mission-statement text-gray-600">Promoting leadership and social skills that stimulate healthy societal behaviors among young people.</li> | |
| <li class="mission-statement text-gray-600">Having young people exhibit dexterity in securing advantages for the greater good of the majority.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Our Goals & Objectives</h3> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-gray-800 mb-2">Our Goal</h4> | |
| <p class="text-gray-600">To stimulate entrepreneurial skills, leadership development and social emancipation of young people in Nigeria and Africa.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Our Objectives</h4> | |
| <ol class="list-decimal list-inside space-y-2 text-gray-600"> | |
| <li>To breed trans generation of young social influencers</li> | |
| <li>To promote leadership and social skills that stimulate healthy societal behaviors</li> | |
| <li>To stimulate knowledge-based entrepreneurial skills acquisition and leadership development</li> | |
| <li>Getting young people actively involved in socio-civic activities</li> | |
| <li>Creating positive developmental platforms for young people to build networks and practice leadership</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Our Core Values</h3> | |
| <p class="text-gray-600 max-w-2xl mx-auto mb-8">These principles guide everything we do at DOYF</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-handshake text-blue-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Diplomacy</h4> | |
| <p class="text-gray-600 text-sm">We approach challenges with tact and thoughtful negotiation.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-comments text-green-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Dialogue</h4> | |
| <p class="text-gray-600 text-sm">We believe in open communication to resolve differences.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shield-alt text-purple-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Integrity</h4> | |
| <p class="text-gray-600 text-sm">We maintain honesty and strong moral principles in all we do.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-flag text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Leadership</h4> | |
| <p class="text-gray-600 text-sm">We cultivate and demonstrate exemplary leadership qualities.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-exchange-alt text-red-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Negotiation</h4> | |
| <p class="text-gray-600 text-sm">We seek mutually beneficial solutions through discussion.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-lightbulb text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Possibility Mindset</h4> | |
| <p class="text-gray-600 text-sm">We believe in the potential of every young person to create change.</p> | |
| </div> | |
| <div class="core-value-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-hands-helping text-teal-600 text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800 mb-2">Community Service</h4> | |
| <p class="text-gray-600 text-sm">We are committed to serving and uplifting our communities.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Our Belief</h3> | |
| <p class="text-gray-600 mb-6">We believe the youth are great agents of social change, and if well-built and empowered, would positively impact the narratives of both domestic and international social systems.</p> | |
| <p class="text-gray-600">Our team is passionately committed to creating positive change in the social spaces of Africa through entrepreneurial skills acquisition and empowerment programs, leadership development conferences, seminars, trainings, workshops, community services and advocacy campaigns/programs.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Youth empowerment" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programs Section --> | |
| <section id="programs" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Programs</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our programs anchor on three cardinal points: Entrepreneurial Skills Acquisition, Leadership Development, and Social Emancipation.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Program 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-blue-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Entrepreneurial Skills Acquisition</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive training programs that equip youth with practical business skills, financial literacy, and innovation techniques.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Program 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-flag text-green-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Leadership Development</h3> | |
| <p class="text-gray-600 mb-4">Workshops and mentorship programs that cultivate ethical leadership qualities in young people across Africa.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Program 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-users text-purple-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Social Emancipation</h3> | |
| <p class="text-gray-600 mb-4">Initiatives that empower youth to become active participants in shaping their communities and societies.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Program 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-yellow-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Youth Conferences</h3> | |
| <p class="text-gray-600 mb-4">Annual gatherings that bring together young leaders to discuss pressing issues and develop solutions.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Program 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-hands-helping text-red-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Community Advocacy</h3> | |
| <p class="text-gray-600 mb-4">Programs that engage youth in addressing community challenges through advocacy and service.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Program 6 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> | |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-network-wired text-indigo-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Professional Networking</h3> | |
| <p class="text-gray-600 mb-4">Platforms that connect young professionals with mentors and career opportunities.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Stories --> | |
| <section id="impact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Impact</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Real stories of transformation from the youth we've empowered through our programs.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600 text-3xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Amina Yusuf</h4> | |
| <p class="text-gray-600 text-sm">Entrepreneurship Program</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"The business skills I gained from DOYF helped me launch my fashion startup that now employs 8 other young people in my community."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-green-600 text-3xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Emeka Okafor</h4> | |
| <p class="text-gray-600 text-sm">Leadership Academy</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"DOYF's leadership training transformed my perspective. I now lead a community development initiative in my hometown."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-600 text-3xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Chioma Adeleke</h4> | |
| <p class="text-gray-600 text-sm">Social Advocacy</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4 italic">"Through DOYF, I found my voice in advocating for girls' education in northern Nigeria. We've helped 50 girls return to school."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button onclick="openDonationModal()" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition donate-btn"> | |
| Support Our Work <i class="fas fa-hands-helping ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sponsors Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Our Trusted Partners</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We collaborate with organizations that share our vision for youth empowerment.</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> | |
| <i class="fas fa-building text-gray-500 text-3xl"></i> | |
| </div> | |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> | |
| <i class="fas fa-university text-gray-500 text-3xl"></i> | |
| </div> | |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> | |
| <i class="fas fa-globe-africa text-gray-500 text-3xl"></i> | |
| </div> | |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> | |
| <i class="fas fa-handshake text-gray-500 text-3xl"></i> | |
| </div> | |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> | |
| <i class="fas fa-leaf text-gray-500 text-3xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-20 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Join Us in Making a Difference</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Your support helps us reach more young people with life-changing opportunities. Every contribution makes an impact.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button onclick="openDonationModal()" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition donate-btn"> | |
| Donate Now <i class="fas fa-donate ml-2"></i> | |
| </button> | |
| <a href="#contact" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition"> | |
| Become a Partner <i class="fas fa-handshake ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Get In Touch</h2> | |
| <p class="text-gray-600 mb-6">We'd love to hear from you! Whether you have questions about our programs, want to volunteer, or explore partnership opportunities.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Our Office</h4> | |
| <p class="text-gray-600">123 Empowerment Avenue, Ikeja, Lagos, Nigeria</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Email Us</h4> | |
| <p class="text-gray-600">info@doyf.org</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Call Us</h4> | |
| <p class="text-gray-600">+234 812 345 6789</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-gray-800 mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-blue-700 text-white p-3 rounded-full hover:bg-blue-800 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-2">DOYF</div> | |
| <h3 class="text-lg font-bold">Dickson Okere Youths Foundation</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Empowering young Nigerians through entrepreneurial skills, leadership development, and social emancipation since 2010.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#programs" class="text-gray-400 hover:text-white transition">Our Programs</a></li> | |
| <li><a href="#impact" class="text-gray-400 hover:text-white transition">Impact Stories</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Our Programs</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Entrepreneurial Skills</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Leadership Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Social Emancipation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Youth Conferences</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community Advocacy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter to receive updates on our programs and impact.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <p class="text-gray-400 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Dickson Okere Youths Foundation. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Financial Reports</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Donate Button --> | |
| <button onclick="openDonationModal()" class="fixed bottom-6 right-6 bg-blue-600 text-white p-4 rounded-full shadow-xl hover:bg-blue-700 transition floating-btn"> | |
| <i class="fas fa-donate text-xl"></i> | |
| </button> | |
| <!-- Donation Modal --> | |
| <div id="donation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 overflow-hidden"> | |
| <div class="bg-blue-600 text-white p-6"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Support Our Cause</h3> | |
| <button onclick="closeDonationModal()" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="mt-2 opacity-90">Your donation helps empower African youth</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Donation Amount (NGN)</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button onclick="setDonationAmount(5000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦5,000</button> | |
| <button onclick="setDonationAmount(10000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦10,000</button> | |
| <button onclick="setDonationAmount(25000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦25,000</button> | |
| <button onclick="setDonationAmount(50000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦50,000</button> | |
| <button onclick="setDonationAmount(100000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦100,000</button> | |
| <button onclick="setDonationAmount(0)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">Custom</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="custom-amount" class="block text-gray-700 font-medium mb-2">Or Enter Custom Amount</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">₦</span> | |
| <input type="number" id="custom-amount" placeholder="Enter amount" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Donation Type</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="donation-type" value="one-time" checked class="mr-2"> | |
| <span>One-time Donation</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="donation-type" value="monthly" class="mr-2"> | |
| <span>Monthly Recurring Donation</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="full-name" class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="full-name" placeholder="Your name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" placeholder="Your email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <button onclick="processDonation()" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| Proceed to Payment <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <div class="mt-4 text-center text-sm text-gray-500"> | |
| <p>Secure payment processed by Flutterwave</p> | |
| <div class="flex justify-center mt-2"> | |
| <img src="https://flutterwave.com/images/logo/full.svg" alt="Flutterwave" class="h-6"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-8 text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-green-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Thank You!</h3> | |
| <p class="text-gray-600 mb-6">Your donation has been successfully processed. You'll receive a receipt via email shortly.</p> | |
| <button onclick="closeSuccessModal()" class="bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 transition"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Donation modal functions | |
| function openDonationModal() { | |
| document.getElementById('donation-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeDonationModal() { | |
| document.getElementById('donation-modal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function setDonationAmount(amount) { | |
| const customAmountInput = document.getElementById('custom-amount'); | |
| if (amount > 0) { | |
| customAmountInput.value = amount; | |
| } else { | |
| customAmountInput.value = ''; | |
| customAmountInput.focus(); | |
| } | |
| // Highlight selected option | |
| const options = document.querySelectorAll('.donation-option'); | |
| options.forEach(option => { | |
| if (parseInt(option.textContent.replace(/[^0-9]/g, '')) === amount || | |
| (amount === 0 && option.textContent.trim() === 'Custom')) { | |
| option.classList.add('bg-blue-100', 'border-blue-500'); | |
| option.classList.remove('bg-gray-100', 'border-gray-300'); | |
| } else { | |
| option.classList.remove('bg-blue-100', 'border-blue-500'); | |
| option.classList.add('bg-gray-100', 'border-gray-300'); | |
| } | |
| }); | |
| } | |
| function processDonation() { | |
| const amount = document.getElementById('custom-amount').value; | |
| const name = document.getElementById('full-name').value; | |
| const email = document.getElementById('email').value; | |
| const donationType = document.querySelector('input[name="donation-type"]:checked').value; | |
| if (!amount || amount <= 0) { | |
| alert('Please enter a valid donation amount'); | |
| return; | |
| } | |
| if (!name || !email) { | |
| alert('Please fill in your name and email'); | |
| return; | |
| } | |
| // Process payment with Flutterwave | |
| makeFlutterwavePayment(amount, name, email, donationType); | |
| } | |
| function makeFlutterwavePayment(amount, name, email, donationType) { | |
| FlutterwaveCheckout({ | |
| public_key: "FLWPUBK_TEST-XXXXXXXXXXXXXXXX-X", // Replace with your Flutterwave public key | |
| tx_ref: "DOYF_" + Date.now(), | |
| amount: amount, | |
| currency: "NGN", | |
| payment_options: "card, banktransfer, ussd", | |
| customer: { | |
| email: email, | |
| name: name | |
| }, | |
| customizations: { | |
| title: "Dickson Okere Youths Foundation", | |
| description: donationType === 'one-time' ? 'One-time Donation' : 'Monthly Recurring Donation', | |
| logo: "https://example.com/logo.png" // Replace with your logo URL | |
| }, | |
| callback: function(response) { | |
| // Handle successful payment | |
| console.log(response); | |
| closeDonationModal(); | |
| showSuccessModal(); | |
| // Here you would typically send the transaction details to your server | |
| // for verification and record keeping | |
| }, | |
| onclose: function() { | |
| // Handle when modal is closed | |
| console.log("Payment modal closed"); | |
| } | |
| }); | |
| } | |
| function showSuccessModal() { | |
| document.getElementById('success-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeSuccessModal() { | |
| document.getElementById('success-modal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // 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' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=Onyeka1187/doyf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |