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

191
src/layouts/BaseLayout.astro
View File

@@ -1,41 +1,170 @@
---
// Base layout for all pages
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
// src/layouts/BaseLayout.astro
import '../styles/global.css';
export interface Props {
title?: string;
description?: string;
}
const { title = "Omoluabi Association Netherlands", description = "Preserving Nigerian culture and heritage in the Netherlands" } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omoluabi Foundation</title>
<meta name="description" content="Supporting Nigerians in the Netherlands" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<slot name="head" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body style="
font-family: 'Inter', system-ui, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #fafafa 0%, #f0fdf4 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 80px;
">
<Header />
<main style="flex: 1;">
<body class="bg-gray-50">
<!-- Navigation Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center space-x-2">
<div class="w-10 h-10 bg-gradient-to-br from-nigerian-green-500 to-kente-gold-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold text-lg">O</span>
</div>
<div>
<div class="font-headline font-bold text-xl text-nigerian-green-700">Omoluabi</div>
<div class="text-sm text-gray-600">Foundation</div>
</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="/" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Home</a>
<a href="/about" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">About</a>
<a href="/events" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Events</a>
<a href="/members" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Members</a>
<a href="/orphanage" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Orphanage</a>
<a href="/gallery" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Gallery</a>
<a href="/contact" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Contact</a>
</div>
<!-- CTA Buttons -->
<div class="hidden md:flex items-center space-x-4">
<a href="/donate" class="btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white hover:shadow-lg">
❤️ Donate
</a>
<a href="/join" class="btn bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white hover:shadow-lg">
⭐ Join Us
</a>
</div>
<!-- Mobile menu button -->
<button class="md:hidden" id="mobile-menu-button">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="pt-4 pb-2 space-y-2">
<a href="/" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Home</a>
<a href="/about" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">About</a>
<a href="/events" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Events</a>
<a href="/members" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Members</a>
<a href="/orphanage" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Orphanage</a>
<a href="/gallery" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Gallery</a>
<a href="/contact" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Contact</a>
<div class="pt-4 space-y-2">
<a href="/donate" class="block btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white text-center">❤️ Donate</a>
<a href="/join" class="block btn bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white text-center">⭐ Join Us</a>
</div>
</div>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<slot />
</main>
<Footer />
</body>
</html>
<style>
@media (min-width: 768px) {
body {
padding-top: 120px !important;
}
}
</style>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<div class="flex items-center space-x-2 mb-4">
<div class="w-10 h-10 bg-gradient-to-br from-nigerian-green-500 to-kente-gold-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold text-lg">O</span>
</div>
<div>
<div class="font-headline font-bold text-xl">Omoluabi Foundation</div>
<div class="text-sm text-gray-400">Netherlands</div>
</div>
</div>
<p class="text-gray-300 mb-4">
Preserving Nigerian culture and heritage while building stronger communities in the Netherlands.
</p>
</div>
<div>
<h3 class="font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2 text-sm">
<li><a href="/about" class="text-gray-300 hover:text-white transition-colors">About Us</a></li>
<li><a href="/events" class="text-gray-300 hover:text-white transition-colors">Events</a></li>
<li><a href="/members" class="text-gray-300 hover:text-white transition-colors">Members</a></li>
<li><a href="/orphanage" class="text-gray-300 hover:text-white transition-colors">Orphanage</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold mb-4">Contact Info</h3>
<ul class="space-y-2 text-sm text-gray-300">
<li>📍 Amsterdam, Netherlands</li>
<li>📞 +31 (0) 123 456 789</li>
<li>📧 info@omoluabi.nl</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
<p>&copy; 2024 Omoluabi Association Netherlands. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all elements with animation attributes
const animatedElements = document.querySelectorAll('[data-animate-on-scroll]');
animatedElements.forEach(el => observer.observe(el));
});
</script>
</body>
</html>