feat: dark-mode styling across pages (about, events, members, orphanage, contact, gallery); adjust cards, headings, copy colors
This commit is contained in:
@@ -27,21 +27,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</section>
|
||||
|
||||
<!-- Main About Section -->
|
||||
<section class="section" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-white dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="relative lg:order-2">
|
||||
<img src="/images/whoAreWe.webp" alt="Omoluabi Association Members" class="w-full h-96 object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
<div class="lg:order-1">
|
||||
<h2 class="font-headline text-3xl md:text-4xl font-bold text-gray-900 mb-4">Omoluabi Association in the Netherlands (OAN)</h2>
|
||||
<p class="text-gray-700 leading-relaxed text-lg mb-4">The <strong class="text-nigerian-green-600">Omoluabi Association</strong> is a pan‑Yoruba, community‑led organization welcoming everyone who shares our values.</p>
|
||||
<p class="text-gray-700 leading-relaxed text-lg mb-4">Founded on <strong class="text-kente-gold-600">May 1, 2018</strong>, we preserve culture, support families, and build bridges with Dutch institutions.</p>
|
||||
<h2 class="font-headline text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Omoluabi Association in the Netherlands (OAN)</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg mb-4">The <strong class="text-nigerian-green-600 dark:text-nigerian-green-400">Omoluabi Association</strong> is a pan‑Yoruba, community‑led organization welcoming everyone who shares our values.</p>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg mb-4">Founded on <strong class="text-kente-gold-600 dark:text-kente-gold-300">May 1, 2018</strong>, we preserve culture, support families, and build bridges with Dutch institutions.</p>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6">
|
||||
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-nigerian-green-600">2018</div><div class="text-sm text-gray-600">Established</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-kente-gold-600">500+</div><div class="text-sm text-gray-600">Members</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-ankara-red-600">50+</div><div class="text-sm text-gray-600">Events</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-adire-blue-600">€50K+</div><div class="text-sm text-gray-600">Raised</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><div class="text-2xl font-bold text-nigerian-green-600">2018</div><div class="text-sm text-gray-600 dark:text-gray-300">Established</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><div class="text-2xl font-bold text-kente-gold-600">500+</div><div class="text-sm text-gray-600 dark:text-gray-300">Members</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><div class="text-2xl font-bold text-ankara-red-600">50+</div><div class="text-sm text-gray-600 dark:text-gray-300">Events</div></div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><div class="text-2xl font-bold text-adire-blue-600">€50K+</div><div class="text-sm text-gray-600 dark:text-gray-300">Raised</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,30 +49,30 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</section>
|
||||
|
||||
<!-- WHO ARE WE Section -->
|
||||
<section class="section bg-white" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-white dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Who are we?</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">The meaning and values behind the name “Omoluabi”.</p>
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 dark:text-white mb-3">Who are we?</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">The meaning and values behind the name “Omoluabi”.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-nigerian-green-50 via-kente-gold-50 to-ankara-red-50 p-8 rounded-2xl mb-12 shadow-inner">
|
||||
<div class="bg-gradient-to-r from-nigerian-green-50 via-kente-gold-50 to-ankara-red-50 dark:from-gray-800 dark:via-gray-800 dark:to-gray-800 p-8 rounded-2xl mb-12 shadow-inner">
|
||||
<div class="text-center mb-6">
|
||||
<h3 class="font-headline text-2xl font-bold text-nigerian-green-700 mb-4">
|
||||
<h3 class="font-headline text-2xl font-bold text-nigerian-green-700 dark:text-nigerian-green-400 mb-4">
|
||||
🌟 The Meaning of "Omoluabi"
|
||||
</h3>
|
||||
<p class="text-xl text-gray-800 leading-relaxed">
|
||||
Omoluabi is a Yoruba word that signifies <strong class="text-kente-gold-600">"WELL BRED INDIVIDUAL"</strong> (Omtrent het gedrag)
|
||||
<p class="text-xl text-gray-800 dark:text-gray-200 leading-relaxed">
|
||||
Omoluabi is a Yoruba word that signifies <strong class="text-kente-gold-600 dark:text-kente-gold-300">"WELL BRED INDIVIDUAL"</strong> (Omtrent het gedrag)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 leading-relaxed text-lg text-center">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-center">
|
||||
This choice of name was unilaterally agreed upon by all our members to bear as an association. The attributes associated with this dignifying name represent the core values we uphold and embody in our daily lives.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-headline text-2xl font-bold text-gray-900 mb-6 text-center">Our values</h3>
|
||||
<h3 class="font-headline text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">Our values</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[
|
||||
['Ọ̀rọ̀ sísọ','Careful spoken words'],
|
||||
@@ -85,9 +85,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
['Isẹ́ sísẹ','Hard working'],
|
||||
['Ọpọlọ pípé','Highly intelligent']
|
||||
].map(([title,subtitle]) => (
|
||||
<div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
|
||||
<div class="font-semibold text-gray-900">{title}</div>
|
||||
<div class="text-gray-600 text-sm">({subtitle})</div>
|
||||
<div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
|
||||
<div class="font-semibold text-gray-900 dark:text-white">{title}</div>
|
||||
<div class="text-gray-600 dark:text-gray-300 text-sm">({subtitle})</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -95,57 +95,57 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</section>
|
||||
|
||||
<!-- Mission & Vision Section -->
|
||||
<section class="section bg-gray-50" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-gray-50 dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Mission & Vision</h2>
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 dark:text-white mb-3">Mission & Vision</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-nigerian-green-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-nigerian-green-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">🎯</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Motto</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Motto</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
To promote, enhance and exhibit the Yoruba cultural heritage globally with a starting point in The Netherlands.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-kente-gold-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-kente-gold-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">🤝</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Aims and Objectives</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Aims and Objectives</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
To promote and defend our traditions, values, norms and culture in the western world.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-ankara-red-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-ankara-red-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">❤️</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Our Mission</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Mission</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
To cherish, uphold, and project the honor and dignity of Yoruba culture, language and tradition in Africa and Diaspora.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-adire-blue-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-adire-blue-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">💡</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Our Vision</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Vision</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
To harmonize all resources and strength of our people towards development (cultural, social and economical).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-nigerian-green-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-nigerian-green-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">🎭</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Activities</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Activities</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
Promoting cultural heritage, cultural development of Yoruba land, and teaching our children local languages (Yoruba).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-kente-gold-500 hover:shadow-lg transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border-l-4 border-kente-gold-500 hover:shadow-lg transition-all duration-200">
|
||||
<span class="text-3xl mb-3 block">🗣️</span>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Slogan</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Slogan</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
"ASA WAA! TIWA N TIWA A WA GAN GAN LAWA, WON KO NI FI ELO MIRAN SE WA"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -17,40 +17,40 @@ import ContactForm from '../components/ContactForm.jsx';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-white dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<ContactForm client:load />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-gray-50" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-gray-50 dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Our <span class="text-nigerian-green-700">Contact</span> Details
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Feel free to reach out to us through any of the following channels.
|
||||
</p>
|
||||
<div class="w-24 h-1 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 mx-auto rounded-full mt-6"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up">
|
||||
<div class="text-4xl text-nigerian-green-500 mb-4">📍</div>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Our Location</h3>
|
||||
<p class="text-gray-700">Amsterdam, Netherlands</p>
|
||||
<p class="text-gray-700">Various locations across NL</p>
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Location</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">Amsterdam, Netherlands</p>
|
||||
<p class="text-gray-700 dark:text-gray-300">Various locations across NL</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up" style="transition-delay: 0.1s;">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up" style="transition-delay: 0.1s;">
|
||||
<div class="text-4xl text-kente-gold-500 mb-4">📞</div>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Phone Number</h3>
|
||||
<p class="text-gray-700">+31 (0) 123 456 789</p>
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Phone Number</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">+31 (0) 123 456 789</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up" style="transition-delay: 0.2s;">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up" style="transition-delay: 0.2s;">
|
||||
<div class="text-4xl text-ankara-red-500 mb-4">📧</div>
|
||||
<h3 class="font-semibold text-xl text-gray-900 mb-2">Email Address</h3>
|
||||
<p class="text-gray-700">info@omoluabi.nl</p>
|
||||
<h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Email Address</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">info@omoluabi.nl</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0).ge
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-white dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<EventFilterSearch events={sortedEvents} client:load />
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ const images = galleryFiles[0]?.frontmatter?.images || [];
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Moments of culture, community, and celebration.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="max-w-6xl mx-auto py-12 px-4">
|
||||
<section class="max-w-6xl mx-auto py-12 px-4 bg-white dark:bg-gray-900">
|
||||
<ImageGallery images={images} client:load />
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@@ -19,18 +19,18 @@ const members = memberFiles[0]?.frontmatter?.members || [];
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="max-w-3xl mx-auto mt-8 mb-12 bg-base-100 rounded-xl shadow p-6" data-animate-on-scroll="fade-in">
|
||||
<h2 class="text-xl font-bold mb-4 text-accent">Membership Benefits/Welfare Packages</h2>
|
||||
<div class="text-gray-700 whitespace-pre-line">{intro}</div>
|
||||
<section class="max-w-3xl mx-auto mt-8 mb-12 bg-white dark:bg-gray-800 rounded-xl shadow p-6" data-animate-on-scroll="fade-in">
|
||||
<h2 class="text-xl font-bold mb-4 text-nigerian-green-700 dark:text-kente-gold-400">Membership Benefits/Welfare Packages</h2>
|
||||
<div class="text-gray-700 dark:text-gray-300 whitespace-pre-line">{intro}</div>
|
||||
</section>
|
||||
|
||||
<section class="max-w-6xl mx-auto mb-20" data-animate-on-scroll="fade-in">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4">
|
||||
{Array.isArray(members) && members.map((member: any) => (
|
||||
<div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
|
||||
<div class="card bg-white dark:bg-gray-800 shadow-lg rounded-xl flex flex-col items-center p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
|
||||
<img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
|
||||
<h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
|
||||
<p class="text-sm text-gray-600">{member.role}</p>
|
||||
<h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{member.name}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">{member.role}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -16,15 +16,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-white dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div data-animate-on-scroll="slide-up">
|
||||
<h2 class="font-headline text-3xl font-bold text-nigerian-green-700 mb-4">About the Orphanage</h2>
|
||||
<p class="text-gray-700 leading-relaxed mb-4">
|
||||
<h2 class="font-headline text-3xl font-bold text-nigerian-green-700 dark:text-kente-gold-400 mb-4">About the Orphanage</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
|
||||
The Omoluabi Foundation is proud to support [Orphanage Name], a safe haven for orphaned and vulnerable children in Nigeria. Our partnership ensures that these children receive the care, education, and support they need to thrive.
|
||||
</p>
|
||||
<p class="text-gray-700 leading-relaxed mb-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
|
||||
At [Orphanage Name], children are provided with nutritious meals, comfortable shelter, access to quality education, and essential healthcare. Beyond basic needs, we strive to create a loving and nurturing environment where each child can develop their potential and build a hopeful future.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2">
|
||||
@@ -42,43 +42,43 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-gray-50" data-animate-on-scroll="fade-in">
|
||||
<section class="section bg-gray-50 dark:bg-gray-900" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
How You Can <span class="text-kente-gold-700">Help</span>
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Your support makes a direct and meaningful impact on the lives of these children.
|
||||
</p>
|
||||
<div class="w-24 h-1 bg-gradient-to-r from-kente-gold-500 to-nigerian-green-500 mx-auto rounded-full mt-6"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up">
|
||||
<h3 class="font-semibold text-xl text-nigerian-green-700 mb-3">Make a Donation</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
Financial contributions are crucial for covering daily operational costs, food, education, and medical expenses.
|
||||
</p>
|
||||
<a href="/donate" class="text-nigerian-green-500 hover:underline font-medium">Donate Now →</a>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up" style="transition-delay: 0.1s;">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up" style="transition-delay: 0.1s;">
|
||||
<h3 class="font-semibold text-xl text-kente-gold-700 mb-3">Sponsor a Child</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
Provide ongoing support for a child's specific needs, including education and personal development.
|
||||
</p>
|
||||
<a href="/contact" class="text-kente-gold-500 hover:underline font-medium">Learn About Sponsorship →</a>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up" style="transition-delay: 0.2s;">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up" style="transition-delay: 0.2s;">
|
||||
<h3 class="font-semibold text-xl text-ankara-red-700 mb-3">Volunteer Your Time</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
If you are in Nigeria, consider volunteering directly at the orphanage to assist with daily activities.
|
||||
</p>
|
||||
<a href="/contact" class="text-ankara-red-500 hover:underline font-medium">Volunteer Today →</a>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200" data-animate-on-scroll="slide-up" style="transition-delay: 0.3s;">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-gray-700" data-animate-on-scroll="slide-up" style="transition-delay: 0.3s;">
|
||||
<h3 class="font-semibold text-xl text-adire-blue-700 mb-3">Spread the Word</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
Share our mission with your friends, family, and social networks to help us reach more supporters.
|
||||
</p>
|
||||
<a href="#" class="text-adire-blue-500 hover:underline font-medium">Share Now →</a>
|
||||
|
||||
Reference in New Issue
Block a user