365DevNet/Omoluabi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark-mode styling across pages (about, events, members, orphanage, contact, gallery); adjust cards, headings, copy colors

Browse Source
This commit is contained in:
Richard Bergsma
2025-08-08 23:41:53 +02:00
parent 0f86f8f615
commit 99f92eaa7b
6 changed files with 77 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/about.astro
View File

@@ -27,21 +27,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</section> </section>
<!-- Main About 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="container">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="relative lg:order-2"> <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" /> <img src="/images/whoAreWe.webp" alt="Omoluabi Association Members" class="w-full h-96 object-cover rounded-2xl shadow-xl" />
</div> </div>
<div class="lg:order-1"> <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> <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 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 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 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> <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="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 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 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 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 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 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 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-adire-blue-600">€50K+</div><div class="text-sm text-gray-600 dark:text-gray-300">Raised</div></div>
</div> </div>
</div> </div>
</div> </div>
@@ -49,30 +49,30 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</section> </section>
<!-- WHO ARE WE 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="container">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Who are we?</h2> <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 max-w-2xl mx-auto">The meaning and values behind the name “Omoluabi”.</p> <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>
<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"> <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" 🌟 The Meaning of "Omoluabi"
</h3> </h3>
<p class="text-xl text-gray-800 leading-relaxed"> <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">"WELL BRED INDIVIDUAL"</strong> (Omtrent het gedrag) 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> </p>
</div> </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. 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> </p>
</div> </div>
<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"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[ {[
['Ọ̀rọ̀ sísọ','Careful spoken words'], ['Ọ̀rọ̀ sísọ','Careful spoken words'],
@@ -85,9 +85,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
['Isẹ́ sísẹ','Hard working'], ['Isẹ́ sísẹ','Hard working'],
['Ọpọlọ pípé','Highly intelligent'] ['Ọpọlọ pípé','Highly intelligent']
].map(([title,subtitle]) => ( ].map(([title,subtitle]) => (
<div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm"> <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">{title}</div> <div class="font-semibold text-gray-900 dark:text-white">{title}</div>
<div class="text-gray-600 text-sm">({subtitle})</div> <div class="text-gray-600 dark:text-gray-300 text-sm">({subtitle})</div>
</div> </div>
))} ))}
</div> </div>
@@ -95,57 +95,57 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</section> </section>
<!-- Mission & Vision 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="container">
<div class="text-center mb-12"> <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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <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> <span class="text-3xl mb-3 block">🎯</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Motto</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Motto</h3>
<p class="text-gray-700 leading-relaxed"> <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. To promote, enhance and exhibit the Yoruba cultural heritage globally with a starting point in The Netherlands.
</p> </p>
</div> </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> <span class="text-3xl mb-3 block">🤝</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Aims and Objectives</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Aims and Objectives</h3>
<p class="text-gray-700 leading-relaxed"> <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. To promote and defend our traditions, values, norms and culture in the western world.
</p> </p>
</div> </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> <span class="text-3xl mb-3 block">❤️</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Our Mission</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Mission</h3>
<p class="text-gray-700 leading-relaxed"> <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. To cherish, uphold, and project the honor and dignity of Yoruba culture, language and tradition in Africa and Diaspora.
</p> </p>
</div> </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> <span class="text-3xl mb-3 block">💡</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Our Vision</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Vision</h3>
<p class="text-gray-700 leading-relaxed"> <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). To harmonize all resources and strength of our people towards development (cultural, social and economical).
</p> </p>
</div> </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> <span class="text-3xl mb-3 block">🎭</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Activities</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Activities</h3>
<p class="text-gray-700 leading-relaxed"> <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). Promoting cultural heritage, cultural development of Yoruba land, and teaching our children local languages (Yoruba).
</p> </p>
</div> </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> <span class="text-3xl mb-3 block">🗣️</span>
<h3 class="font-semibold text-xl text-gray-900 mb-2">Slogan</h3> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Slogan</h3>
<p class="text-gray-700 leading-relaxed"> <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" "ASA WAA! TIWA N TIWA A WA GAN GAN LAWA, WON KO NI FI ELO MIRAN SE WA"
</p> </p>
</div> </div>

28
src/pages/contact.astro
View File

@@ -17,40 +17,40 @@ import ContactForm from '../components/ContactForm.jsx';
</div> </div>
</section> </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="container">
<ContactForm client:load /> <ContactForm client:load />
</div> </div>
</section> </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="container">
<div class="text-center mb-12"> <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 Our <span class="text-nigerian-green-700">Contact</span> Details
</h2> </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. Feel free to reach out to us through any of the following channels.
</p> </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 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>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> <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> <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> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Our Location</h3>
<p class="text-gray-700">Amsterdam, Netherlands</p> <p class="text-gray-700 dark:text-gray-300">Amsterdam, Netherlands</p>
<p class="text-gray-700">Various locations across NL</p> <p class="text-gray-700 dark:text-gray-300">Various locations across NL</p>
</div> </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> <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> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Phone Number</h3>
<p class="text-gray-700">+31 (0) 123 456 789</p> <p class="text-gray-700 dark:text-gray-300">+31 (0) 123 456 789</p>
</div> </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> <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> <h3 class="font-semibold text-xl text-gray-900 dark:text-white mb-2">Email Address</h3>
<p class="text-gray-700">info@omoluabi.nl</p> <p class="text-gray-700 dark:text-gray-300">info@omoluabi.nl</p>
</div> </div>
</div> </div>
</div> </div>

2
src/pages/events.astro
View File

@@ -21,7 +21,7 @@ const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0).ge
</div> </div>
</section> </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="container">
<EventFilterSearch events={sortedEvents} client:load /> <EventFilterSearch events={sortedEvents} client:load />
</div> </div>

2
src/pages/gallery.astro
View File

@@ -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> <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Moments of culture, community, and celebration.</p>
</div> </div>
</section> </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 /> <ImageGallery images={images} client:load />
</section> </section>
</BaseLayout> </BaseLayout>

12
src/pages/members.astro
View File

@@ -19,18 +19,18 @@ const members = memberFiles[0]?.frontmatter?.members || [];
</div> </div>
</section> </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"> <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-accent">Membership Benefits/Welfare Packages</h2> <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 whitespace-pre-line">{intro}</div> <div class="text-gray-700 dark:text-gray-300 whitespace-pre-line">{intro}</div>
</section> </section>
<section class="max-w-6xl mx-auto mb-20" data-animate-on-scroll="fade-in"> <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"> <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) => ( {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" /> <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> <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{member.name}</h3>
<p class="text-sm text-gray-600">{member.role}</p> <p class="text-sm text-gray-600 dark:text-gray-300">{member.role}</p>
</div> </div>
))} ))}
</div> </div>

30
src/pages/orphanage.astro
View File

@@ -16,15 +16,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div> </div>
</section> </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="container">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div data-animate-on-scroll="slide-up"> <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> <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 leading-relaxed mb-4"> <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. 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>
<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. 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> </p>
<ul class="list-disc list-inside text-gray-700 space-y-2"> <ul class="list-disc list-inside text-gray-700 space-y-2">
@@ -42,43 +42,43 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div> </div>
</section> </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="container">
<div class="text-center mb-12"> <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> How You Can <span class="text-kente-gold-700">Help</span>
</h2> </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. Your support makes a direct and meaningful impact on the lives of these children.
</p> </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 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>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <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> <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. Financial contributions are crucial for covering daily operational costs, food, education, and medical expenses.
</p> </p>
<a href="/donate" class="text-nigerian-green-500 hover:underline font-medium">Donate Now →</a> <a href="/donate" class="text-nigerian-green-500 hover:underline font-medium">Donate Now →</a>
</div> </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> <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. Provide ongoing support for a child's specific needs, including education and personal development.
</p> </p>
<a href="/contact" class="text-kente-gold-500 hover:underline font-medium">Learn About Sponsorship →</a> <a href="/contact" class="text-kente-gold-500 hover:underline font-medium">Learn About Sponsorship →</a>
</div> </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> <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. If you are in Nigeria, consider volunteering directly at the orphanage to assist with daily activities.
</p> </p>
<a href="/contact" class="text-ankara-red-500 hover:underline font-medium">Volunteer Today →</a> <a href="/contact" class="text-ankara-red-500 hover:underline font-medium">Volunteer Today →</a>
</div> </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> <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. Share our mission with your friends, family, and social networks to help us reach more supporters.
</p> </p>
<a href="#" class="text-adire-blue-500 hover:underline font-medium">Share Now →</a> <a href="#" class="text-adire-blue-500 hover:underline font-medium">Share Now →</a>