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

style: modernize headers for About/Events/Members/Orphanage/Contact/Gallery using brand-surface; simplify copy; fix date sort; unify CTA

Browse Source
This commit is contained in:
Richard Bergsma
2025-08-08 23:21:55 +02:00
parent 3c74d71e22
commit a0ab66189a
10 changed files with 145 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/events.astro
View File

@@ -4,26 +4,20 @@ import EventFilterSearch from '../components/EventFilterSearch.jsx';
const eventFiles = Object.values(await import.meta.glob('../../content/events/*.md', { eager: true })) as any[];
const events = eventFiles;
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0) - new Date(a.frontmatter?.date || 0));
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0).getTime() - new Date(a.frontmatter?.date || 0).getTime());
---
<BaseLayout>
<!-- Page Header -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" 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>
<!-- Page Header (modern) -->
<section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
<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>
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<a href="/" class="hover:underline">Home</a>
<span class="opacity-60">/</span>
<span>Events</span>
<span class="ml-4"><span class="dutch-flag-badge"><span class="stripe red"></span><span class="stripe white"></span><span class="stripe blue"></span></span></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 you're looking for!
</p>
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Events</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Find community gatherings, cultural celebrations, and programs across the Netherlands.</p>
</div>
</section>