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

Refactor project structure: update Astro configuration, integrate Tailwind CSS, enhance ContactForm with validation, and improve layout for various pages. Add new Donate and Orphanage pages, and implement responsive design adjustments across components.

Browse Source
This commit is contained in:
Richard Bergsma
2025-06-27 22:49:11 +02:00
parent 81f637b317
commit 9f6fa46227
23 changed files with 2721 additions and 3058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/events.astro
View File

@@ -1,27 +1,33 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import EventFilterSearch from '../components/EventFilterSearch.jsx';
const events = await Astro.glob('../../content/events/*.md');
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
---
<BaseLayout>
<h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Events</h1>
<p class="mt-4 text-center">See our upcoming and past events below.</p>
<section class="max-w-5xl mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 gap-8 px-4">
{sortedEvents.map(event => (
<article class="card bg-base-100 shadow-lg">
<figure>
<img src={event.frontmatter.image} alt={event.frontmatter.title} class="w-full h-48 object-cover" />
</figure>
<div class="card-body">
<div class="flex items-center gap-2 mb-2">
<span class="badge badge-secondary">{event.frontmatter.category}</span>
<span class="text-xs text-gray-500">{new Date(event.frontmatter.date).toLocaleDateString()}</span>
</div>
<h2 class="card-title text-lg font-bold">{event.frontmatter.title}</h2>
<p class="text-sm mb-2">{event.frontmatter.description}</p>
<div class="text-xs text-gray-400">{event.compiledContent()}</div>
</div>
</article>
))}
<!-- Page Header -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden bg-gradient-to-br from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500" data-animate-on-scroll="fade-in">
<div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
<div class="relative z-10 max-w-4xl mx-auto">
<div class="flex items-center justify-center gap-2 mb-4 text-sm">
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
<span class="text-white/60">•</span>
<span>Events</span>
</div>
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-200 animate-text-shine">
Our Events
</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
Explore our upcoming and past events. Use the filters and search bar to find what're looking for!
</p>
</div>
</section>
</BaseLayout>
<section class="section" data-animate-on-scroll="fade-in">
<div class="container">
<EventFilterSearch events={sortedEvents} client:load />
</div>
</section>
</BaseLayout>