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

feat: homepage dark-mode styling (body dark bg/text, cards/badges/headers), fix SVG attrs; type fixes in HomeGallery

Browse Source
This commit is contained in:
Richard Bergsma
2025-08-08 23:31:24 +02:00
parent c8c550a00b
commit ba9bb6dfe0
4 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/HeroCarousel.jsx
View File

@@ -136,10 +136,10 @@ export default function HeroCarousel() {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<button className="bg-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg"> <button className="bg-white dark:bg-gray-900 dark:text-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 transform hover:scale-105 shadow-lg">
{slide.cta} {slide.cta}
</button> </button>
<button className="border-2 border-white text-white px-8 py-4 rounded-xl font-bold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105"> <button className="border-2 border-white text-white px-8 py-4 rounded-xl font-bold hover:bg-white hover:text-gray-900 dark:hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
Learn More Learn More
</button> </button>
</div> </div>

8
src/components/HomeGallery.astro
View File

@@ -3,13 +3,13 @@ const gallery = await Astro.glob('../../content/gallery/gallery-sample.md');
const images = gallery[0]?.frontmatter.images || []; const images = gallery[0]?.frontmatter.images || [];
--- ---
<section class="max-w-6xl mx-auto my-20 px-4"> <section class="max-w-6xl mx-auto my-20 px-4">
<h2 class="text-3xl font-headline font-bold mb-6 text-primary text-center">Our Photo Gallery</h2> <h2 class="text-3xl font-headline font-bold mb-6 text-nigerian-green-700 dark:text-kente-gold-400 text-center">Our Photo Gallery</h2>
<p class="text-center text-lg text-gray-600 mb-10"> <p class="text-center text-lg text-gray-600 dark:text-gray-300 mb-10">
A glimpse into our vibrant community and cultural celebrations. A glimpse into our vibrant community and cultural celebrations.
</p> </p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
{images.slice(0, 4).map((img, idx) => ( {images.slice(0, 4).map((img: string, idx: number) => (
<div class="rounded-lg overflow-hidden shadow-md bg-base-100" key={idx}> <div class="rounded-lg overflow-hidden shadow-md bg-white dark:bg-gray-800">
<img src={img} alt={`Gallery photo ${idx + 1}`} class="w-full h-40 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer" /> <img src={img} alt={`Gallery photo ${idx + 1}`} class="w-full h-40 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer" />
</div> </div>
))} ))}

2
src/layouts/BaseLayout.astro
View File

@@ -26,7 +26,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
<link rel="alternate" hreflang="x-default" href="/" /> <link rel="alternate" hreflang="x-default" href="/" />
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-black focus:px-3 focus:py-2 focus:rounded"> <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-black focus:px-3 focus:py-2 focus:rounded">
Skip to main content Skip to main content
</a> </a>

46
src/pages/index.astro
View File

@@ -12,27 +12,27 @@ import HomeGallery from '../components/HomeGallery.astro';
<div class="container"> <div class="container">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="relative"> <div class="relative">
<div class="absolute inset-0 bg-gradient-to-br from-kente-gold-500 to-ankara-red-500 rounded-2xl transform rotate-2"></div> <div class="absolute inset-0 bg-gradient-to-br from-kente-gold-500 to-ankara-red-500 rounded-2xl transform rotate-2 opacity-90 dark:opacity-60"></div>
<div class="relative bg-white p-2 rounded-2xl shadow-xl transform -rotate-1"> <div class="relative bg-white dark:bg-gray-800 p-2 rounded-2xl shadow-xl transform -rotate-1">
<img src="/images/whoAreWe.webp" alt="About Omoluabi Association" class="w-full h-80 object-cover rounded-xl" /> <img src="/images/whoAreWe.webp" alt="About Omoluabi Association" class="w-full h-80 object-cover rounded-xl" />
<div class="absolute -top-4 -right-4 bg-nigerian-green-500 text-white px-4 py-2 rounded-full font-bold shadow-lg animate-bounce-gentle">Est. 2018</div> <div class="absolute -top-4 -right-4 bg-nigerian-green-500 text-white px-4 py-2 rounded-full font-bold shadow-lg animate-bounce-gentle">Est. 2018</div>
</div> </div>
</div> </div>
<div> <div>
<h2 class="font-headline text-4xl font-bold text-nigerian-green-700 mb-4 flex items-center gap-3"> <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 dark:text-kente-gold-400 mb-4 flex items-center gap-3">
<div class="w-2 h-10 bg-gradient-to-b from-nigerian-green-500 to-kente-gold-500 rounded-full"></div> <div class="w-2 h-10 bg-gradient-to-b from-nigerian-green-500 to-kente-gold-500 rounded-full"></div>
About Us About Us
</h2> </h2>
<h3 class="text-2xl font-semibold text-kente-gold-600 mb-4 flex items-center gap-2"> <h3 class="text-2xl font-semibold text-kente-gold-600 dark:text-kente-gold-400 mb-4 flex items-center gap-2">
<span class="text-3xl">🌟</span> <span class="text-3xl">🌟</span>
WHO ARE WE? WHO ARE WE?
</h3> </h3>
<div class="text-gray-700 leading-relaxed text-lg mb-6"> <div class="text-gray-700 dark:text-gray-200 leading-relaxed text-lg mb-6">
<p class="mb-4"> <p class="mb-4">
The <strong class="text-nigerian-green-600">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members. The <strong class="text-nigerian-green-600 dark:text-nigerian-green-400">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members.
</p> </p>
<p class="mb-4"> <p class="mb-4">
Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building. Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building.
@@ -43,25 +43,25 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow-md text-center"> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
<div class="text-2xl font-bold text-nigerian-green-600">2018</div> <div class="text-2xl font-bold text-nigerian-green-600">2018</div>
<div class="text-sm text-gray-600">Established</div> <div class="text-sm text-gray-600 dark:text-gray-300">Established</div>
</div> </div>
<div class="bg-white p-4 rounded-lg shadow-md text-center"> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
<div class="text-2xl font-bold text-kente-gold-600">500+</div> <div class="text-2xl font-bold text-kente-gold-600">500+</div>
<div class="text-sm text-gray-600">Members</div> <div class="text-sm text-gray-600 dark:text-gray-300">Members</div>
</div> </div>
<div class="bg-white p-4 rounded-lg shadow-md text-center"> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
<div class="text-2xl font-bold text-ankara-red-600">50+</div> <div class="text-2xl font-bold text-ankara-red-600">50+</div>
<div class="text-sm text-gray-600">Events</div> <div class="text-sm text-gray-600 dark:text-gray-300">Events</div>
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<span class="badge badge-lg bg-nigerian-green-100 text-nigerian-green-700">Non-Profit</span> <span class="badge badge-lg bg-nigerian-green-100 dark:bg-nigerian-green-600/20 text-nigerian-green-700 dark:text-nigerian-green-300">Non-Profit</span>
<span class="badge badge-lg bg-kente-gold-100 text-kente-gold-700">Cultural Heritage</span> <span class="badge badge-lg bg-kente-gold-100 dark:bg-kente-gold-600/20 text-kente-gold-700 dark:text-kente-gold-300">Cultural Heritage</span>
<span class="badge badge-lg bg-ankara-red-100 text-ankara-red-700">Community Focus</span> <span class="badge badge-lg bg-ankara-red-100 dark:bg-ankara-red-600/20 text-ankara-red-700 dark:text-ankara-red-300">Community Focus</span>
<span class="badge badge-lg bg-adire-blue-100 text-adire-blue-700">Inclusive</span> <span class="badge badge-lg bg-adire-blue-100 dark:bg-adire-blue-600/20 text-adire-blue-700 dark:text-adire-blue-300">Inclusive</span>
</div> </div>
</div> </div>
</div> </div>
@@ -69,13 +69,13 @@ import HomeGallery from '../components/HomeGallery.astro';
</section> </section>
<!-- Events Section --> <!-- Events 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-nigerian-green-700 mb-4"> <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 dark:text-kente-gold-400 mb-4">
Upcoming <span class="text-kente-gold-700">Events</span> Upcoming <span class="text-kente-gold-700 dark:text-kente-gold-300">Events</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">
Join us in celebrating our rich cultural heritage and building stronger community bonds. Join us in celebrating our rich cultural heritage and building stronger community bonds.
</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>
@@ -102,7 +102,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200"> <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
Details Details
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</a> </a>
</div> </div>
</div> </div>
@@ -128,7 +128,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200"> <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
Details Details
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</a> </a>
</div> </div>
</div> </div>
@@ -154,7 +154,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200"> <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
Details Details
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</a> </a>
</div> </div>
</div> </div>