170 lines
7.9 KiB
Plaintext
170 lines
7.9 KiB
Plaintext
---
|
|
// src/layouts/BaseLayout.astro
|
|
import '../styles/global.css';
|
|
import '../styles/main.css';
|
|
import ThemeToggle from '../components/ThemeToggle.jsx';
|
|
|
|
export interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
lang?: string;
|
|
}
|
|
|
|
const { title = "Omoluabi Association Netherlands", description = "Preserving Nigerian culture and heritage in the Netherlands" } = Astro.props;
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html lang={Astro.props.lang ?? 'en'}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{title}</title>
|
|
<meta name="description" content={description} />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="alternate" hreflang="en" href="/en/" />
|
|
<link rel="alternate" hreflang="nl" href="/nl/" />
|
|
<link rel="alternate" hreflang="x-default" href="/" />
|
|
</head>
|
|
|
|
<body class="bg-gray-50">
|
|
<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
|
|
</a>
|
|
<!-- 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>
|
|
|
|
<!-- Right side controls -->
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
<astro-island>
|
|
<ThemeToggle client:load />
|
|
</astro-island>
|
|
<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" aria-controls="mobile-menu" aria-expanded="false">
|
|
<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 id="main" tabindex="-1">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- 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>© 2024 Omoluabi Association Netherlands. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
const isHidden = mobileMenu.classList.toggle('hidden');
|
|
mobileMenuButton.setAttribute('aria-expanded', String(!isHidden));
|
|
});
|
|
}
|
|
|
|
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);
|
|
document.querySelectorAll('[data-animate-on-scroll]').forEach(el => observer.observe(el));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |