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

This commit is contained in:
2025-08-08 23:31:24 +02:00
parent c8c550a00b
commit ba9bb6dfe0
4 changed files with 30 additions and 30 deletions

View File

@@ -3,13 +3,13 @@ const gallery = await Astro.glob('../../content/gallery/gallery-sample.md');
const images = gallery[0]?.frontmatter.images || [];
---
<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>
<p class="text-center text-lg text-gray-600 mb-10">
<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 dark:text-gray-300 mb-10">
A glimpse into our vibrant community and cultural celebrations.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
{images.slice(0, 4).map((img, idx) => (
<div class="rounded-lg overflow-hidden shadow-md bg-base-100" key={idx}>
{images.slice(0, 4).map((img: string, idx: number) => (
<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" />
</div>
))}