Refactor multiple pages to enhance structure and styling: update About, Contact, Events, Home, Members, Orphanage pages with improved meta descriptions, layout changes, and consistent use of global styles. Replace BaseLayout with Header and Footer components for better modularity and maintainability.
This commit is contained in:
becarta
@@ -9,10 +9,7 @@ import Footer from '../components/Footer.astro';
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>About - Omoluabi Association</title>
|
<title>About - Omoluabi Association</title>
|
||||||
<meta name="description" content="Learn about the Omoluabi Association in the Netherlands - promoting Yoruba culture and supporting our community since 2018" />
|
<meta name="description" content="Learn about Omoluabi Association, our mission, values, and the dedicated team behind our community initiatives." />
|
||||||
<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">
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -60,17 +57,12 @@ import Footer from '../components/Footer.astro';
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.about-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
|
position: relative;
|
||||||
background-size: 300% auto;
|
z-index: 1;
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
animation: textShine 20s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-subtitle {
|
.page-subtitle {
|
||||||
@@ -78,6 +70,8 @@ import Footer from '../components/Footer.astro';
|
|||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textShine {
|
@keyframes textShine {
|
||||||
@@ -96,7 +90,6 @@ import Footer from '../components/Footer.astro';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -155,7 +148,6 @@ import Footer from '../components/Footer.astro';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -195,7 +187,6 @@ import Footer from '../components/Footer.astro';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.value-title {
|
.value-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
@@ -239,7 +230,6 @@ import Footer from '../components/Footer.astro';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.member-name {
|
.member-name {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@@ -279,7 +269,6 @@ import Footer from '../components/Footer.astro';
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-number {
|
.stat-number {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@@ -408,7 +397,7 @@ import Footer from '../components/Footer.astro';
|
|||||||
<!-- Page Header -->
|
<!-- Page Header -->
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
<div class="page-header-content">
|
<div class="page-header-content">
|
||||||
<h1 class="page-title">About Omoluabi</h1>
|
<h1 class="about-title">About Omoluabi</h1>
|
||||||
<p class="page-subtitle">Discover our story, mission, and the values that drive our community forward</p>
|
<p class="page-subtitle">Discover our story, mission, and the values that drive our community forward</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -1,9 +1,485 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
import ContactForm from '../components/ContactForm.astro';
|
import ContactForm from '../components/ContactForm.astro';
|
||||||
|
import '../styles/main.css';
|
||||||
---
|
---
|
||||||
<BaseLayout>
|
|
||||||
<h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Contact Us</h1>
|
<html lang="en">
|
||||||
<p class="mt-4 text-center">We'd love to hear from you! Please use the form below or reach out via our contact details.</p>
|
<head>
|
||||||
<ContactForm />
|
<meta charset="utf-8" />
|
||||||
</BaseLayout>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Contact Us - Omoluabi Association</title>
|
||||||
|
<meta name="description" content="Get in touch with Omoluabi Association. We'd love to hear from you and answer any questions you may have." />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main class="contact-page">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="contact-hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="contact-title">Get in Touch</h1>
|
||||||
|
<p class="contact-subtitle">We'd love to hear from you! Reach out to us for any questions, support, or to get involved with our community.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Information Section -->
|
||||||
|
<section class="contact-info-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-info-grid">
|
||||||
|
<div class="contact-info-card">
|
||||||
|
<div class="contact-icon">📍</div>
|
||||||
|
<h3>Visit Us</h3>
|
||||||
|
<p>Amsterdam, Netherlands</p>
|
||||||
|
<p>We're located in the heart of Amsterdam, serving the Nigerian community and beyond.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info-card">
|
||||||
|
<div class="contact-icon">📞</div>
|
||||||
|
<h3>Call Us</h3>
|
||||||
|
<p>+31 (0) 123 456 789</p>
|
||||||
|
<p>Available Monday to Friday, 9:00 AM - 6:00 PM CET</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info-card">
|
||||||
|
<div class="contact-icon">✉️</div>
|
||||||
|
<h3>Email Us</h3>
|
||||||
|
<p>info@omoluabi-association.nl</p>
|
||||||
|
<p>We typically respond within 24 hours during business days.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info-card">
|
||||||
|
<div class="contact-icon">🕒</div>
|
||||||
|
<h3>Office Hours</h3>
|
||||||
|
<p>Monday - Friday</p>
|
||||||
|
<p>9:00 AM - 6:00 PM CET</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Form Section -->
|
||||||
|
<section class="contact-form-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-form-container">
|
||||||
|
<div class="form-intro">
|
||||||
|
<h2 class="form-title">Send Us a Message</h2>
|
||||||
|
<p class="form-subtitle">Fill out the form below and we'll get back to you as soon as possible. All fields marked with * are required.</p>
|
||||||
|
</div>
|
||||||
|
<ContactForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ Section -->
|
||||||
|
<section class="faq-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Frequently Asked Questions</h2>
|
||||||
|
<div class="faq-grid">
|
||||||
|
<div class="faq-item">
|
||||||
|
<h3 class="faq-question">How can I become a member?</h3>
|
||||||
|
<p class="faq-answer">You can become a member by filling out our membership application form and paying the annual membership fee. Contact us for more details about the application process.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<h3 class="faq-question">How can I donate to the orphanage?</h3>
|
||||||
|
<p class="faq-answer">You can donate through our secure online donation system, bank transfer, or by contacting us directly. All donations go directly to supporting the children in our care.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<h3 class="faq-question">Can I volunteer with the association?</h3>
|
||||||
|
<p class="faq-answer">Yes! We welcome volunteers for various activities including events, fundraising, and orphanage support. Please contact us to discuss available opportunities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<h3 class="faq-question">Do you organize cultural events?</h3>
|
||||||
|
<p class="faq-answer">Yes, we regularly organize cultural events, celebrations, and community gatherings to promote Nigerian heritage and bring our community together.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Map Section -->
|
||||||
|
<section class="map-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Find Us</h2>
|
||||||
|
<div class="map-container">
|
||||||
|
<div class="map-placeholder">
|
||||||
|
<span>Interactive Map</span>
|
||||||
|
<p>Amsterdam, Netherlands</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Social Media Section -->
|
||||||
|
<section class="social-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Connect With Us</h2>
|
||||||
|
<p class="social-subtitle">Follow us on social media to stay updated with our latest news, events, and community activities.</p>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" class="social-link">
|
||||||
|
<span class="social-icon">📘</span>
|
||||||
|
<span>Facebook</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-link">
|
||||||
|
<span class="social-icon">📷</span>
|
||||||
|
<span>Instagram</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-link">
|
||||||
|
<span class="social-icon">🐦</span>
|
||||||
|
<span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-link">
|
||||||
|
<span class="social-icon">💼</span>
|
||||||
|
<span>LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Contact Page Styles */
|
||||||
|
.contact-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.contact-hero {
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 6rem 0 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Info Section */
|
||||||
|
.contact-info-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card {
|
||||||
|
background: white;
|
||||||
|
padding: 2.5rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card p {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Form Section */
|
||||||
|
.contact-form-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-intro {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #6b7280;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAQ Section */
|
||||||
|
.faq-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item {
|
||||||
|
background: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-question {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Map Section */
|
||||||
|
.map-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-section .section-title {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #6b7280;
|
||||||
|
border: 2px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder span {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social Section */
|
||||||
|
.social-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-section .section-title {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link span:last-child {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.contact-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hero {
|
||||||
|
padding: 4rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -19,10 +19,7 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Events - Omoluabi Association</title>
|
<title>Events - Omoluabi Association</title>
|
||||||
<meta name="description" content="Join us for cultural events, celebrations, and community gatherings organized by the Omoluabi Association in the Netherlands" />
|
<meta name="description" content="See our upcoming and past events at Omoluabi Association." />
|
||||||
<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">
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -66,7 +63,6 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -101,7 +97,6 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -203,7 +198,6 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
}
|
}
|
||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
@@ -267,7 +261,6 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-title {
|
.empty-title {
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@@ -313,6 +306,14 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.events-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -424,7 +425,7 @@ const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatte
|
|||||||
<!-- Call to Action -->
|
<!-- Call to Action -->
|
||||||
<section class="content-section" style="background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%); color: white; text-align: center;">
|
<section class="content-section" style="background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%); color: white; text-align: center;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;">
|
<h2 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;">
|
||||||
Want to Stay Updated?
|
Want to Stay Updated?
|
||||||
</h2>
|
</h2>
|
||||||
<p style="font-size: 1.125rem; margin-bottom: 2rem; opacity: 0.9;">
|
<p style="font-size: 1.125rem; margin-bottom: 2rem; opacity: 0.9;">
|
||||||
|
|||||||
@@ -13,24 +13,8 @@ import EventsSection from '../components/EventsSection.astro';
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Omoluabi Association</title>
|
<title>Omoluabi Association</title>
|
||||||
<meta name="description" content="Supporting Nigerians in the Netherlands" />
|
<meta name="description" content="Welcome to Omoluabi Association - Promoting Nigerian heritage and supporting our community in the Netherlands." />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<!-- Removed font imports, now handled globally -->
|
||||||
<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">
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', system-ui, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #fafafa 0%, #f0fdf4 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Header />
|
<Header />
|
||||||
|
|||||||
@@ -1,22 +1,410 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import '../styles/main.css';
|
||||||
|
|
||||||
const membersData = await Astro.glob('../../content/members/members-sample.md');
|
const membersData = await Astro.glob('../../content/members/members-sample.md');
|
||||||
const intro = membersData[0]?.frontmatter.intro || '';
|
const intro = membersData[0]?.frontmatter.intro || '';
|
||||||
const members = membersData[0]?.frontmatter.members || [];
|
const members = membersData[0]?.frontmatter.members || [];
|
||||||
---
|
---
|
||||||
<BaseLayout>
|
|
||||||
<h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Meet Our Members</h1>
|
<html lang="en">
|
||||||
<section class="max-w-3xl mx-auto mt-8 mb-12 bg-base-100 rounded-xl shadow p-6">
|
<head>
|
||||||
<h2 class="text-xl font-bold mb-4 text-accent">Membership Benefits/Welfare Packages</h2>
|
<meta charset="utf-8" />
|
||||||
<div class="text-gray-700 whitespace-pre-line">{intro}</div>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
</section>
|
<meta name="viewport" content="width=device-width" />
|
||||||
<section class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4 mb-20">
|
<meta name="generator" content={Astro.generator} />
|
||||||
{members.map(member => (
|
<title>Members - Omoluabi Association</title>
|
||||||
<div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4">
|
<meta name="description" content="Meet our dedicated members and learn about membership benefits at Omoluabi Association." />
|
||||||
<img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
|
</head>
|
||||||
<h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
|
<body>
|
||||||
<p class="text-sm text-gray-600">{member.role}</p>
|
<Header />
|
||||||
|
|
||||||
|
<main class="members-page">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="members-hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="members-title">Meet Our Members</h1>
|
||||||
|
<p class="members-subtitle">Dedicated individuals working together to promote Nigerian heritage and community welfare</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</section>
|
||||||
</section>
|
|
||||||
</BaseLayout>
|
<!-- Benefits Section -->
|
||||||
|
<section class="benefits-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="benefits-card">
|
||||||
|
<h2 class="benefits-title">Membership Benefits & Welfare Packages</h2>
|
||||||
|
<div class="benefits-content">
|
||||||
|
{intro.split('\n').map((line: string, index: number) => {
|
||||||
|
if (line.trim()) {
|
||||||
|
return <p class="benefit-item">{line.trim()}</p>;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Members Grid -->
|
||||||
|
<section class="members-grid-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="members-grid-title">Our Leadership Team</h2>
|
||||||
|
<div class="members-grid">
|
||||||
|
{members.map((member: any) => (
|
||||||
|
<div class="member-card">
|
||||||
|
<div class="member-image-container">
|
||||||
|
<img src={member.image} alt={member.name} class="member-image" />
|
||||||
|
<div class="member-overlay">
|
||||||
|
<div class="member-role">{member.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h3 class="member-name">{member.name}</h3>
|
||||||
|
<p class="member-role-text">{member.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Join CTA Section -->
|
||||||
|
<section class="join-cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="join-cta-card">
|
||||||
|
<h2 class="join-cta-title">Join Our Community</h2>
|
||||||
|
<p class="join-cta-text">Become a member and enjoy exclusive benefits while contributing to our mission of promoting Nigerian heritage and community welfare.</p>
|
||||||
|
<div class="join-cta-buttons">
|
||||||
|
<a href="/join" class="btn btn-primary">Join Us</a>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Members Page Styles */
|
||||||
|
.members-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.members-hero {
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 6rem 0 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Benefits Section */
|
||||||
|
.benefits-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-item {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #374151;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-radius: 12px;
|
||||||
|
border-left: 4px solid #16a34a;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-item:hover {
|
||||||
|
background: #f0f9ff;
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Members Grid Section */
|
||||||
|
.members-grid-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-grid-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-image-container {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card:hover .member-image {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-overlay {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||||
|
padding: 1rem;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card:hover .member-overlay {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-role {
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
padding: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-role-text {
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Join CTA Section */
|
||||||
|
.join-cta-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(45deg, #16a34a, #15803d);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: white;
|
||||||
|
color: #16a34a;
|
||||||
|
border: 2px solid #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #16a34a;
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.members-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-card {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-grid-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 250px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-hero {
|
||||||
|
padding: 4rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-cta-card {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,8 +1,626 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import '../styles/main.css';
|
||||||
---
|
---
|
||||||
<BaseLayout>
|
|
||||||
<h1 class="text-3xl font-headline font-bold text-nigerian-green mt-12 text-center">Orphanage</h1>
|
<html lang="en">
|
||||||
<p class="mt-4 text-center">Learn more about our affiliated orphanage and how you can help.</p>
|
<head>
|
||||||
<!-- Orphanage info, gallery, and donation details will go here -->
|
<meta charset="utf-8" />
|
||||||
</BaseLayout>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Orphanage Project - Omoluabi Association</title>
|
||||||
|
<meta name="description" content="Learn about our orphanage project and how you can help support vulnerable children in Nigeria." />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main class="orphanage-page">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="orphanage-hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="orphanage-title">Our Orphanage Project</h1>
|
||||||
|
<p class="orphanage-subtitle">Providing hope, care, and education to vulnerable children in Nigeria</p>
|
||||||
|
<div class="hero-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">50+</span>
|
||||||
|
<span class="stat-label">Children Cared For</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">5</span>
|
||||||
|
<span class="stat-label">Years of Service</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">100%</span>
|
||||||
|
<span class="stat-label">Education Funded</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mission Section -->
|
||||||
|
<section class="mission-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="mission-content">
|
||||||
|
<div class="mission-text">
|
||||||
|
<h2 class="section-title">Our Mission</h2>
|
||||||
|
<p class="mission-description">
|
||||||
|
Through our orphanage project, we provide a safe haven for vulnerable children who have lost their parents or been abandoned.
|
||||||
|
Our goal is to give these children not just shelter and food, but also love, education, and the opportunity to build a better future.
|
||||||
|
</p>
|
||||||
|
<div class="mission-features">
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">🏠</div>
|
||||||
|
<h3>Safe Shelter</h3>
|
||||||
|
<p>Providing a secure and nurturing environment for children to grow and thrive.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">📚</div>
|
||||||
|
<h3>Quality Education</h3>
|
||||||
|
<p>Ensuring every child has access to proper education and learning opportunities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">❤️</div>
|
||||||
|
<h3>Loving Care</h3>
|
||||||
|
<p>Surrounding children with love, support, and positive role models.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mission-image">
|
||||||
|
<div class="image-placeholder">
|
||||||
|
<span>Orphanage Image</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Impact Section -->
|
||||||
|
<section class="impact-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Our Impact</h2>
|
||||||
|
<div class="impact-grid">
|
||||||
|
<div class="impact-card">
|
||||||
|
<div class="impact-icon">🎓</div>
|
||||||
|
<h3>Education Success</h3>
|
||||||
|
<p>15 children have successfully completed their primary education and are now in secondary school.</p>
|
||||||
|
</div>
|
||||||
|
<div class="impact-card">
|
||||||
|
<div class="impact-icon">🏥</div>
|
||||||
|
<h3>Healthcare Access</h3>
|
||||||
|
<p>All children receive regular medical check-ups and access to healthcare when needed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="impact-card">
|
||||||
|
<div class="impact-icon">👨👩👧👦</div>
|
||||||
|
<h3>Family Reunification</h3>
|
||||||
|
<p>8 children have been successfully reunited with extended family members.</p>
|
||||||
|
</div>
|
||||||
|
<div class="impact-card">
|
||||||
|
<div class="impact-icon">🌟</div>
|
||||||
|
<h3>Life Skills</h3>
|
||||||
|
<p>Children learn essential life skills including cooking, cleaning, and personal responsibility.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How to Help Section -->
|
||||||
|
<section class="help-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">How You Can Help</h2>
|
||||||
|
<div class="help-options">
|
||||||
|
<div class="help-card">
|
||||||
|
<div class="help-icon">💰</div>
|
||||||
|
<h3>Financial Donations</h3>
|
||||||
|
<p>Your monetary contributions help us provide food, shelter, education, and healthcare for the children.</p>
|
||||||
|
<a href="/donate" class="help-btn">Donate Now</a>
|
||||||
|
</div>
|
||||||
|
<div class="help-card">
|
||||||
|
<div class="help-icon">📦</div>
|
||||||
|
<h3>Material Donations</h3>
|
||||||
|
<p>We accept clothing, books, toys, and other essential items for the children.</p>
|
||||||
|
<a href="/contact" class="help-btn">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
<div class="help-card">
|
||||||
|
<div class="help-icon">🤝</div>
|
||||||
|
<h3>Volunteer</h3>
|
||||||
|
<p>Share your time and skills by volunteering at our orphanage or helping with fundraising events.</p>
|
||||||
|
<a href="/contact" class="help-btn">Get Involved</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gallery Section -->
|
||||||
|
<section class="gallery-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Life at Our Orphanage</h2>
|
||||||
|
<div class="gallery-grid">
|
||||||
|
<div class="gallery-item">
|
||||||
|
<div class="gallery-placeholder">
|
||||||
|
<span>Children Learning</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<div class="gallery-placeholder">
|
||||||
|
<span>Play Time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<div class="gallery-placeholder">
|
||||||
|
<span>Meal Time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<div class="gallery-placeholder">
|
||||||
|
<span>Study Time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-card">
|
||||||
|
<h2 class="cta-title">Make a Difference Today</h2>
|
||||||
|
<p class="cta-text">Every donation, no matter how small, makes a real difference in the lives of these children. Join us in our mission to provide hope and opportunity.</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="/donate" class="btn btn-primary">Donate Now</a>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Orphanage Page Styles */
|
||||||
|
.orphanage-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.orphanage-hero {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 6rem 0 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 3rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
display: block;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mission Section */
|
||||||
|
.mission-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-description {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #374151;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item p {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
border: 2px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Impact Section */
|
||||||
|
.impact-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-section .section-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-card {
|
||||||
|
background: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-card h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-card p {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Help Section */
|
||||||
|
.help-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-section .section-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-options {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-card {
|
||||||
|
background: white;
|
||||||
|
padding: 2.5rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(22, 163, 74, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-card p {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
background: linear-gradient(45deg, #16a34a, #15803d);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gallery Section */
|
||||||
|
.gallery-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-section .section-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 2px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA Section */
|
||||||
|
.cta-section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #16a34a;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(45deg, #16a34a, #15803d);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: white;
|
||||||
|
color: #16a34a;
|
||||||
|
border: 2px solid #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #16a34a;
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.orphanage-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-options {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 250px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-hero {
|
||||||
|
padding: 4rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orphanage-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-card {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-card {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,13 @@
|
|||||||
/* Custom CSS for Omoluabi Foundation */
|
/* Custom CSS for Omoluabi Foundation */
|
||||||
|
|
||||||
|
/* Import Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
/* Global Font Settings */
|
||||||
|
* {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
.hero {
|
.hero {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|||||||
Reference in New Issue
Block a user