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

101
package-lock.json generated
View File

@@ -12,7 +12,7 @@
"@tailwindcss/vite": "^4.1.10", "@tailwindcss/vite": "^4.1.10",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
"astro": "^5.9.4", "astro": "^5.12.9",
"keen-slider": "^6.8.6", "keen-slider": "^6.8.6",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
@@ -54,18 +54,18 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@astrojs/internal-helpers": { "node_modules/@astrojs/internal-helpers": {
"version": "0.6.1", "version": "0.7.1",
"resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.6.1.tgz", "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.7.1.tgz",
"integrity": "sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A==", "integrity": "sha512-7dwEVigz9vUWDw3nRwLQ/yH/xYovlUA0ZD86xoeKEBmkz9O6iELG1yri67PgAPW6VLL/xInA4t7H0CK6VmtkKQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@astrojs/markdown-remark": { "node_modules/@astrojs/markdown-remark": {
"version": "6.3.2", "version": "6.3.5",
"resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.2.tgz", "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.5.tgz",
"integrity": "sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==", "integrity": "sha512-MiR92CkE2BcyWf3b86cBBw/1dKiOH0qhLgXH2OXA6cScrrmmks1Rr4Tl0p/lFpvmgQQrP54Pd1uidJfmxGrpWQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@astrojs/internal-helpers": "0.6.1", "@astrojs/internal-helpers": "0.7.1",
"@astrojs/prism": "3.3.0", "@astrojs/prism": "3.3.0",
"github-slugger": "^2.0.0", "github-slugger": "^2.0.0",
"hast-util-from-html": "^2.0.3", "hast-util-from-html": "^2.0.3",
@@ -80,7 +80,7 @@
"remark-rehype": "^11.1.2", "remark-rehype": "^11.1.2",
"remark-smartypants": "^3.0.2", "remark-smartypants": "^3.0.2",
"shiki": "^3.2.1", "shiki": "^3.2.1",
"smol-toml": "^1.3.1", "smol-toml": "^1.3.4",
"unified": "^11.0.5", "unified": "^11.0.5",
"unist-util-remove-position": "^5.0.0", "unist-util-remove-position": "^5.0.0",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
@@ -1686,60 +1686,60 @@
] ]
}, },
"node_modules/@shikijs/core": { "node_modules/@shikijs/core": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.9.2.tgz",
"integrity": "sha512-9By7Xb3olEX0o6UeJyPLI1PE1scC4d3wcVepvtv2xbuN9/IThYN4Wcwh24rcFeASzPam11MCq8yQpwwzCgSBRw==", "integrity": "sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/types": "3.6.0", "@shikijs/types": "3.9.2",
"@shikijs/vscode-textmate": "^10.0.2", "@shikijs/vscode-textmate": "^10.0.2",
"@types/hast": "^3.0.4", "@types/hast": "^3.0.4",
"hast-util-to-html": "^9.0.5" "hast-util-to-html": "^9.0.5"
} }
}, },
"node_modules/@shikijs/engine-javascript": { "node_modules/@shikijs/engine-javascript": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.9.2.tgz",
"integrity": "sha512-7YnLhZG/TU05IHMG14QaLvTW/9WiK8SEYafceccHUSXs2Qr5vJibUwsDfXDLmRi0zHdzsxrGKpSX6hnqe0k8nA==", "integrity": "sha512-kUTRVKPsB/28H5Ko6qEsyudBiWEDLst+Sfi+hwr59E0GLHV0h8RfgbQU7fdN5Lt9A8R1ulRiZyTvAizkROjwDA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/types": "3.6.0", "@shikijs/types": "3.9.2",
"@shikijs/vscode-textmate": "^10.0.2", "@shikijs/vscode-textmate": "^10.0.2",
"oniguruma-to-es": "^4.3.3" "oniguruma-to-es": "^4.3.3"
} }
}, },
"node_modules/@shikijs/engine-oniguruma": { "node_modules/@shikijs/engine-oniguruma": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.9.2.tgz",
"integrity": "sha512-nmOhIZ9yT3Grd+2plmW/d8+vZ2pcQmo/UnVwXMUXAKTXdi+LK0S08Ancrz5tQQPkxvjBalpMW2aKvwXfelauvA==", "integrity": "sha512-Vn/w5oyQ6TUgTVDIC/BrpXwIlfK6V6kGWDVVz2eRkF2v13YoENUvaNwxMsQU/t6oCuZKzqp9vqtEtEzKl9VegA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/types": "3.6.0", "@shikijs/types": "3.9.2",
"@shikijs/vscode-textmate": "^10.0.2" "@shikijs/vscode-textmate": "^10.0.2"
} }
}, },
"node_modules/@shikijs/langs": { "node_modules/@shikijs/langs": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.9.2.tgz",
"integrity": "sha512-IdZkQJaLBu1LCYCwkr30hNuSDfllOT8RWYVZK1tD2J03DkiagYKRxj/pDSl8Didml3xxuyzUjgtioInwEQM/TA==", "integrity": "sha512-X1Q6wRRQXY7HqAuX3I8WjMscjeGjqXCg/Sve7J2GWFORXkSrXud23UECqTBIdCSNKJioFtmUGJQNKtlMMZMn0w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/types": "3.6.0" "@shikijs/types": "3.9.2"
} }
}, },
"node_modules/@shikijs/themes": { "node_modules/@shikijs/themes": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.9.2.tgz",
"integrity": "sha512-Fq2j4nWr1DF4drvmhqKq8x5vVQ27VncF8XZMBuHuQMZvUSS3NBgpqfwz/FoGe36+W6PvniZ1yDlg2d4kmYDU6w==", "integrity": "sha512-6z5lBPBMRfLyyEsgf6uJDHPa6NAGVzFJqH4EAZ+03+7sedYir2yJBRu2uPZOKmj43GyhVHWHvyduLDAwJQfDjA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/types": "3.6.0" "@shikijs/types": "3.9.2"
} }
}, },
"node_modules/@shikijs/types": { "node_modules/@shikijs/types": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.6.0.tgz", "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.9.2.tgz",
"integrity": "sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==", "integrity": "sha512-/M5L0Uc2ljyn2jKvj4Yiah7ow/W+DJSglVafvWAJ/b8AZDeeRAdMu3c2riDzB7N42VD+jSnWxeP9AKtd4TfYVw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/vscode-textmate": "^10.0.2", "@shikijs/vscode-textmate": "^10.0.2",
@@ -2341,14 +2341,14 @@
} }
}, },
"node_modules/astro": { "node_modules/astro": {
"version": "5.9.4", "version": "5.12.9",
"resolved": "https://registry.npmjs.org/astro/-/astro-5.9.4.tgz", "resolved": "https://registry.npmjs.org/astro/-/astro-5.12.9.tgz",
"integrity": "sha512-AEulm16C9IijMYrFb3VIFx9z17p/wfDSHUHdbbvSEX+rBca64xV+f67tnsql3s4CE8u2cwYpdX+5yH7l53W4iA==", "integrity": "sha512-cZ7kZ61jyE5nwSrFKSRyf5Gds+uJELqQxJFqMkcgiWQvhWZJUSShn8Uz3yc9WLyLw5Kim5P5un9SkJSGogfEZQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@astrojs/compiler": "^2.12.2", "@astrojs/compiler": "^2.12.2",
"@astrojs/internal-helpers": "0.6.1", "@astrojs/internal-helpers": "0.7.1",
"@astrojs/markdown-remark": "6.3.2", "@astrojs/markdown-remark": "6.3.5",
"@astrojs/telemetry": "3.3.0", "@astrojs/telemetry": "3.3.0",
"@capsizecss/unpack": "^2.4.0", "@capsizecss/unpack": "^2.4.0",
"@oslojs/encoding": "^1.1.0", "@oslojs/encoding": "^1.1.0",
@@ -2391,6 +2391,7 @@
"rehype": "^13.0.2", "rehype": "^13.0.2",
"semver": "^7.7.1", "semver": "^7.7.1",
"shiki": "^3.2.1", "shiki": "^3.2.1",
"smol-toml": "^1.3.4",
"tinyexec": "^0.3.2", "tinyexec": "^0.3.2",
"tinyglobby": "^0.2.12", "tinyglobby": "^0.2.12",
"tsconfck": "^3.1.5", "tsconfck": "^3.1.5",
@@ -2404,7 +2405,7 @@
"xxhash-wasm": "^1.1.0", "xxhash-wasm": "^1.1.0",
"yargs-parser": "^21.1.1", "yargs-parser": "^21.1.1",
"yocto-spinner": "^0.2.1", "yocto-spinner": "^0.2.1",
"zod": "^3.24.2", "zod": "^3.24.4",
"zod-to-json-schema": "^3.24.5", "zod-to-json-schema": "^3.24.5",
"zod-to-ts": "^1.2.0" "zod-to-ts": "^1.2.0"
}, },
@@ -6087,17 +6088,17 @@
} }
}, },
"node_modules/shiki": { "node_modules/shiki": {
"version": "3.6.0", "version": "3.9.2",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-3.6.0.tgz", "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.9.2.tgz",
"integrity": "sha512-tKn/Y0MGBTffQoklaATXmTqDU02zx8NYBGQ+F6gy87/YjKbizcLd+Cybh/0ZtOBX9r1NEnAy/GTRDKtOsc1L9w==", "integrity": "sha512-t6NKl5e/zGTvw/IyftLcumolgOczhuroqwXngDeMqJ3h3EQiTY/7wmfgPlsmloD8oYfqkEDqxiaH37Pjm1zUhQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@shikijs/core": "3.6.0", "@shikijs/core": "3.9.2",
"@shikijs/engine-javascript": "3.6.0", "@shikijs/engine-javascript": "3.9.2",
"@shikijs/engine-oniguruma": "3.6.0", "@shikijs/engine-oniguruma": "3.9.2",
"@shikijs/langs": "3.6.0", "@shikijs/langs": "3.9.2",
"@shikijs/themes": "3.6.0", "@shikijs/themes": "3.9.2",
"@shikijs/types": "3.6.0", "@shikijs/types": "3.9.2",
"@shikijs/vscode-textmate": "^10.0.2", "@shikijs/vscode-textmate": "^10.0.2",
"@types/hast": "^3.0.4" "@types/hast": "^3.0.4"
} }
@@ -6131,9 +6132,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/smol-toml": { "node_modules/smol-toml": {
"version": "1.3.4", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.4.tgz", "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.4.1.tgz",
"integrity": "sha512-UOPtVuYkzYGee0Bd2Szz8d2G3RfMfJ2t3qVdZUAozZyAk+a0Sxa+QKix0YCwjL/A1RR0ar44nCxaoN9FxdJGwA==", "integrity": "sha512-CxdwHXyYTONGHThDbq5XdwbFsuY4wlClRGejfE2NtwUtiHYsP1QtNsHb/hnj31jKYSchztJsaA8pSQoVzkfCFg==",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"engines": { "engines": {
"node": ">= 18" "node": ">= 18"

2
package.json
View File

@@ -13,7 +13,7 @@
"@tailwindcss/vite": "^4.1.10", "@tailwindcss/vite": "^4.1.10",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
"astro": "^5.9.4", "astro": "^5.12.9",
"keen-slider": "^6.8.6", "keen-slider": "^6.8.6",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",

217
src/pages/about.astro
View File

@@ -3,92 +3,25 @@ import BaseLayout from '../layouts/BaseLayout.astro';
--- ---
<BaseLayout> <BaseLayout>
<!-- Page Header with Flag Integration --> <!-- Clean header -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden" style=" <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
background:
linear-gradient(90deg, var(--nigerian-green) 0%, var(--nigerian-green) 33.33%, #fff 33.33%, #fff 66.66%, var(--nigerian-green) 66.66%, var(--nigerian-green) 100%),
linear-gradient(180deg, var(--dutch-red) 0%, var(--dutch-red) 33.33%, #fff 33.33%, #fff 66.66%, var(--dutch-blue) 66.66%, var(--dutch-blue) 100%);
background-size: 40% 100%, 40% 100%;
background-position: left, right;
background-repeat: no-repeat;
" data-animate-on-scroll="fade-in">
<!-- Flag Icons -->
<div class="absolute top-8 left-8 flex items-center gap-4 z-20">
<!-- Nigerian Flag -->
<div class="flex shadow-lg rounded-lg overflow-hidden border-2 border-white/20">
<div class="w-6 h-4 bg-nigerian-green-500"></div>
<div class="w-6 h-4 bg-white"></div>
<div class="w-6 h-4 bg-nigerian-green-500"></div>
</div>
<!-- Connection Symbol -->
<div class="text-white/80 text-sm font-bold">🤝</div>
<!-- Dutch Flag -->
<div class="flex flex-col shadow-lg rounded-lg overflow-hidden border-2 border-white/20">
<div class="w-18 h-2 bg-dutch-red-500"></div>
<div class="w-18 h-2 bg-white"></div>
<div class="w-18 h-2 bg-dutch-blue-500"></div>
</div>
</div>
<!-- Decorative Flag Elements -->
<div class="absolute top-8 right-8 flex items-center gap-2 z-20">
<div class="text-white/60 text-xs uppercase tracking-wider font-semibold">Nigeria 🇳🇬 • Netherlands 🇳🇱</div>
</div>
<!-- Subtle Pattern Overlay -->
<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>
<!-- Main Content -->
<div class="relative z-10 max-w-4xl mx-auto"> <div class="relative z-10 max-w-4xl mx-auto">
<!-- Breadcrumb with Flag Accents --> <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<div class="flex items-center justify-center gap-2 mb-6 text-sm"> <a href="/" class="hover:underline">Home</a>
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a> <span class="opacity-60">/</span>
<span class="text-white/60">•</span>
<span>About</span> <span>About</span>
</div> </div>
<!-- Title with Flag Integration --> <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">About Us</h1>
<div class="mb-6">
<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">
About Us
</h1>
<!-- Flag Strip Under Title -->
<div class="flex items-center justify-center gap-1 mb-4">
<div class="flex rounded-sm overflow-hidden shadow-md">
<div class="h-1 w-12 bg-nigerian-green-500"></div>
<div class="h-1 w-12 bg-white"></div>
<div class="h-1 w-12 bg-nigerian-green-500"></div>
</div>
<div class="w-4 h-px bg-gradient-to-r from-white/60 to-transparent"></div>
<div class="text-white/60 text-xs">🤝</div>
<div class="w-4 h-px bg-gradient-to-l from-white/60 to-transparent"></div>
<div class="flex flex-col rounded-sm overflow-hidden shadow-md">
<div class="w-12 h-px bg-dutch-red-500"></div>
<div class="w-12 h-px bg-white"></div>
<div class="w-12 h-px bg-dutch-blue-500"></div>
</div>
</div>
</div>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto leading-relaxed"> <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto leading-relaxed">
Discover the rich heritage and noble mission of the Omoluabi Association bridging We connect <span class="font-semibold">Nigerian culture</span> with
<span class="font-semibold text-nigerian-green-200">Nigerian culture</span> with <span class="font-semibold">Dutch society</span>—supporting families
<span class="font-semibold text-dutch-blue-200">Dutch hospitality</span> in the Netherlands. and building opportunities across the Netherlands.
</p> </p>
<!-- Cultural Bridge Visual --> <div class="mt-6 flex items-center justify-center gap-3">
<div class="mt-8 flex items-center justify-center gap-6"> <span class="inline-flex items-center gap-2 text-sm bg-white/10 px-3 py-1 rounded-full border border-white/20">🇳🇬 Nigeria</span>
<div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full backdrop-blur-sm border border-white/20"> <span class="inline-flex items-center gap-2 text-sm bg-white/10 px-3 py-1 rounded-full border border-white/20">🇳🇱 Netherlands</span>
<div class="w-6 h-4 bg-nigerian-green-500 rounded-sm shadow-sm"></div>
<span class="text-sm font-medium">Nigerian Heritage</span>
</div>
<div class="text-2xl animate-pulse">🌉</div>
<div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full backdrop-blur-sm border border-white/20">
<div class="w-6 h-4 bg-dutch-red-500 rounded-sm shadow-sm"></div>
<span class="text-sm font-medium">Dutch Integration</span>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -97,58 +30,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<section class="section" data-animate-on-scroll="fade-in"> <section class="section" data-animate-on-scroll="fade-in">
<div class="container"> <div class="container">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-200 relative"> <div class="relative lg:order-2">
<div class="absolute -inset-0.5 bg-gradient-to-br from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500 rounded-2xl blur opacity-75 animate-pulse"></div>
<div class="relative bg-white p-8 rounded-2xl">
<h2 class="font-headline text-3xl md:text-4xl font-bold text-nigerian-green-700 mb-6 flex items-center gap-4">
<div class="w-2 h-10 bg-gradient-to-b from-nigerian-green-500 to-kente-gold-500 rounded-full"></div>
OMOLUABI ASSOCIATION IN THE NETHERLANDS (OAN)
</h2>
<div class="text-gray-700 leading-relaxed text-lg">
<p class="mb-4 font-medium">
The <strong class="text-nigerian-green-600">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members.
</p>
<p class="mb-4">
It is worthy to note that our association is not solely focused on Yorubas or Nigerians only, but we extend our membership to culturally motivated Netherlanders who share our values and vision.
</p>
<p class="mb-6">
The OMOLUABI association of The Netherlands was established on <strong class="text-kente-gold-600">May 1st, 2018</strong> by well-bred, dignifying, and unique personalities that live across the Royal Kingdom of The Netherlands.
</p>
<div class="bg-gradient-to-r from-nigerian-green-50 via-kente-gold-50 to-ankara-red-50 p-6 rounded-xl border-l-4 border-nigerian-green-500 shadow-inner">
<p class="italic text-gray-800">
"Our association is a <strong>non-profit, non-religious, non-partisan, non-ethnic</strong> and socio-cultural organization that focuses on showcasing the Yoruba cultural heritages, norms, values and traditions to the western world, most especially in Holland."
</p>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-8">
<div class="text-center p-4 bg-gray-50 rounded-lg shadow-sm">
<div class="text-2xl font-bold text-nigerian-green-600">2018</div>
<div class="text-sm text-gray-600">Established</div>
</div>
<div class="text-center p-4 bg-gray-50 rounded-lg shadow-sm">
<div class="text-2xl font-bold text-kente-gold-600">500+</div>
<div class="text-sm text-gray-600">Members</div>
</div>
<div class="text-center p-4 bg-gray-50 rounded-lg shadow-sm">
<div class="text-2xl font-bold text-ankara-red-600">50+</div>
<div class="text-sm text-gray-600">Events Held</div>
</div>
<div class="text-center p-4 bg-gray-50 rounded-lg shadow-sm">
<div class="text-2xl font-bold text-adire-blue-600">€50K+</div>
<div class="text-sm text-gray-600">Raised for Charity</div>
</div>
</div>
</div>
</div>
<div class="relative lg:pl-12">
<img src="/images/whoAreWe.webp" alt="Omoluabi Association Members" class="w-full h-96 object-cover rounded-2xl shadow-xl" /> <img src="/images/whoAreWe.webp" alt="Omoluabi Association Members" class="w-full h-96 object-cover rounded-2xl shadow-xl" />
<div class="absolute -top-4 -right-4 bg-nigerian-green-500 text-white px-4 py-2 rounded-full font-bold shadow-lg animate-bounce-gentle">Est. 2018</div> </div>
<div class="lg:order-1">
<h2 class="font-headline text-3xl md:text-4xl font-bold text-gray-900 mb-4">Omoluabi Association in the Netherlands (OAN)</h2>
<p class="text-gray-700 leading-relaxed text-lg mb-4">The <strong class="text-nigerian-green-600">Omoluabi Association</strong> is a pan‑Yoruba, community‑led organization welcoming everyone who shares our values.</p>
<p class="text-gray-700 leading-relaxed text-lg mb-4">Founded on <strong class="text-kente-gold-600">May 1, 2018</strong>, we preserve culture, support families, and build bridges with Dutch institutions.</p>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6">
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-nigerian-green-600">2018</div><div class="text-sm text-gray-600">Established</div></div>
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-kente-gold-600">500+</div><div class="text-sm text-gray-600">Members</div></div>
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-ankara-red-600">50+</div><div class="text-sm text-gray-600">Events</div></div>
<div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-200"><div class="text-2xl font-bold text-adire-blue-600">€50K+</div><div class="text-sm text-gray-600">Raised</div></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -158,13 +52,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<section class="section bg-white" data-animate-on-scroll="fade-in"> <section class="section bg-white" data-animate-on-scroll="fade-in">
<div class="container"> <div class="container">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4"> <h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Who are we?</h2>
<span class="text-nigerian-green-700">Who</span> Are We? <p class="text-lg text-gray-600 max-w-2xl mx-auto">The meaning and values behind the name “Omoluabi”.</p>
</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Understanding the meaning and values behind the name "Omoluabi"
</p>
<div class="w-24 h-1 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 mx-auto rounded-full mt-6"></div>
</div> </div>
<div class="bg-gradient-to-r from-nigerian-green-50 via-kente-gold-50 to-ankara-red-50 p-8 rounded-2xl mb-12 shadow-inner"> <div class="bg-gradient-to-r from-nigerian-green-50 via-kente-gold-50 to-ankara-red-50 p-8 rounded-2xl mb-12 shadow-inner">
@@ -183,37 +72,24 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div> </div>
<div> <div>
<h3 class="font-headline text-2xl font-bold text-nigerian-green-700 mb-8 text-center"> <h3 class="font-headline text-2xl font-bold text-gray-900 mb-6 text-center">Our values</h3>
Our Fundamental Identities
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-nigerian-green-50 p-4 rounded-lg border-l-4 border-nigerian-green-500 shadow-sm hover:shadow-md transition-all duration-200"> {[
<strong class="text-gray-900">Ọ̀rọ̀ sísọ</strong> <span class="text-gray-600 text-sm">(Careful spoken words)</span> ['Ọ̀rọ̀ sísọ','Careful spoken words'],
</div> ['Ìtẹríba','Respect'],
<div class="bg-kente-gold-50 p-4 rounded-lg border-l-4 border-kente-gold-500 shadow-sm hover:shadow-md transition-all duration-200"> ['Irera eni sile','Humility'],
<strong class="text-gray-900">Ìtẹríba</strong> <span class="text-gray-600 text-sm">(Respect)</span> ['Inú rere','Think good about others'],
</div> ['Òtítọ́','Truth'],
<div class="bg-ankara-red-50 p-4 rounded-lg border-l-4 border-ankara-red-500 shadow-sm hover:shadow-md transition-all duration-200"> ['Ìwà','Good character'],
<strong class="text-gray-900">Irera eni sile</strong> <span class="text-gray-600 text-sm">(Humility)</span> ['Akínkanjú','Bravery'],
</div> ['Isẹ́ sísẹ','Hard working'],
<div class="bg-adire-blue-50 p-4 rounded-lg border-l-4 border-adire-blue-500 shadow-sm hover:shadow-md transition-all duration-200"> ['Ọpọlọ pípé','Highly intelligent']
<strong class="text-gray-900">Inú rere</strong> <span class="text-gray-600 text-sm">(Think good about others)</span> ].map(([title,subtitle]) => (
</div> <div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
<div class="bg-nigerian-green-50 p-4 rounded-lg border-l-4 border-nigerian-green-500 shadow-sm hover:shadow-md transition-all duration-200"> <div class="font-semibold text-gray-900">{title}</div>
<strong class="text-gray-900">Òtítọ́</strong> <span class="text-gray-600 text-sm">(Truth)</span> <div class="text-gray-600 text-sm">({subtitle})</div>
</div>
<div class="bg-kente-gold-50 p-4 rounded-lg border-l-4 border-kente-gold-500 shadow-sm hover:shadow-md transition-all duration-200">
<strong class="text-gray-900">Ìwà</strong> <span class="text-gray-600 text-sm">(Good character)</span>
</div>
<div class="bg-ankara-red-50 p-4 rounded-lg border-l-4 border-ankara-red-500 shadow-sm hover:shadow-md transition-all duration-200">
<strong class="text-gray-900">Akínkanjú</strong> <span class="text-gray-600 text-sm">(Bravery)</span>
</div>
<div class="bg-adire-blue-50 p-4 rounded-lg border-l-4 border-adire-blue-500 shadow-sm hover:shadow-md transition-all duration-200">
<strong class="text-gray-900">Isẹ́ sísẹ</strong> <span class="text-gray-600 text-sm">(Hard working)</span>
</div>
<div class="bg-nigerian-green-50 p-4 rounded-lg border-l-4 border-nigerian-green-500 shadow-sm hover:shadow-md transition-all duration-200">
<strong class="text-gray-900">Ọpọlọ pípé</strong> <span class="text-gray-600 text-sm">(Highly intelligent)</span>
</div> </div>
))}
</div> </div>
</div> </div>
</section> </section>
@@ -222,10 +98,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<section class="section bg-gray-50" data-animate-on-scroll="fade-in"> <section class="section bg-gray-50" data-animate-on-scroll="fade-in">
<div class="container"> <div class="container">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4"> <h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Mission & Vision</h2>
Our <span class="text-nigerian-green-700">Mission</span> & <span class="text-kente-gold-700">Vision</span>
</h2>
<div class="w-24 h-1 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 mx-auto rounded-full mt-6"></div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -355,13 +228,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</section> </section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="section combined-flag-gradient text-white text-center relative overflow-hidden" data-animate-on-scroll="fade-in"> <section class="section brand-surface text-white text-center relative overflow-hidden" data-animate-on-scroll="fade-in">
<div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full animate-float"></div> <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full animate-float"></div>
<div class="absolute bottom-10 right-10 w-24 h-24 bg-white/10 rounded-full animate-float animation-delay-1s"></div> <div class="absolute bottom-10 right-10 w-24 h-24 bg-white/10 rounded-full animate-float animation-delay-1s"></div>
<div class="container relative z-10"> <div class="container relative z-10">
<h2 class="font-headline text-4xl md:text-5xl font-bold mb-6 leading-tight"> <h2 class="font-headline text-4xl md:text-5xl font-bold mb-6 leading-tight">
Ready to Join Our <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-200">Community</span>? Ready to join our community?
</h2> </h2>
<p class="text-lg md:text-xl opacity-90 max-w-3xl mx-auto mb-8"> <p class="text-lg md:text-xl opacity-90 max-w-3xl mx-auto mb-8">

20
src/pages/contact.astro
View File

@@ -4,22 +4,16 @@ import ContactForm from '../components/ContactForm.jsx';
--- ---
<BaseLayout> <BaseLayout>
<!-- Page Header --> <!-- Page Header (modern) -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in"> <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" 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="relative z-10 max-w-4xl mx-auto">
<div class="flex items-center justify-center gap-2 mb-4 text-sm"> <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a> <a href="/" class="hover:underline">Home</a>
<span class="text-white/60">•</span> <span class="opacity-60">/</span>
<span>Contact</span> <span>Contact</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> </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"> <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Contact Us</h1>
Contact Us <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">We’d love to hear from you. Use the form or our details below.</p>
</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
We'd love to hear from you! Please use the form below or reach out via our contact details.
</p>
</div> </div>
</section> </section>

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 eventFiles = Object.values(await import.meta.glob('../../content/events/*.md', { eager: true })) as any[];
const events = eventFiles; 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> <BaseLayout>
<!-- Page Header --> <!-- Page Header (modern) -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in"> <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" 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="relative z-10 max-w-4xl mx-auto">
<div class="flex items-center justify-center gap-2 mb-4 text-sm"> <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a> <a href="/" class="hover:underline">Home</a>
<span class="text-white/60">•</span> <span class="opacity-60">/</span>
<span>Events</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> </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"> <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Events</h1>
Our Events <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>
</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>
</div> </div>
</section> </section>

10
src/pages/gallery.astro
View File

@@ -7,11 +7,13 @@ const images = galleryFiles[0]?.frontmatter?.images || [];
--- ---
<BaseLayout> <BaseLayout>
<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">
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Gallery</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Moments of culture, community, and celebration.</p>
</div>
</section>
<section class="max-w-6xl mx-auto py-12 px-4"> <section class="max-w-6xl mx-auto py-12 px-4">
<h1 class="text-4xl font-headline font-bold text-center text-nigerian-green-700 mb-6">Our Photo Gallery</h1>
<p class="text-center text-lg text-gray-600 mb-10">
Explore moments of joy, culture, and community from our past events and activities.
</p>
<ImageGallery images={images} client:load /> <ImageGallery images={images} client:load />
</section> </section>
</BaseLayout> </BaseLayout>

7
src/pages/index.astro
View File

@@ -173,7 +173,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</section> </section>
<!-- Donation Section --> <!-- Donation Section -->
<section class="section combined-flag-gradient text-white text-center relative overflow-hidden" data-animate-on-scroll="fade-in"> <section class="section brand-surface text-white text-center relative overflow-hidden" data-animate-on-scroll="fade-in">
<div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full animate-float"></div> <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full animate-float"></div>
<div class="absolute bottom-10 right-10 w-24 h-24 bg-white/10 rounded-full animate-float animation-delay-1s"></div> <div class="absolute bottom-10 right-10 w-24 h-24 bg-white/10 rounded-full animate-float animation-delay-1s"></div>
@@ -187,8 +187,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<h2 class="font-headline text-5xl font-bold mb-6 leading-tight"> <h2 class="font-headline text-5xl font-bold mb-6 leading-tight">
Make A Donation For Our Various Support Our <span class="text-kente-gold-200">Community Programs</span>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-kente-gold-200">Projects</span>
</h2> </h2>
<p class="text-lg opacity-90 leading-relaxed max-w-3xl mx-auto mb-8"> <p class="text-lg opacity-90 leading-relaxed max-w-3xl mx-auto mb-8">
@@ -207,7 +206,7 @@ import HomeGallery from '../components/HomeGallery.astro';
</div> </div>
<a href="/donate" class="btn btn-lg bg-white text-ankara-red-600 hover:bg-gray-100 shadow-xl hover:shadow-2xl"> <a href="/donate" class="btn btn-lg bg-white text-ankara-red-600 hover:bg-gray-100 shadow-xl hover:shadow-2xl">
❤️ DONATE NOW ✈️ ❤️ Donate now
</a> </a>
</div> </div>
</section> </section>

20
src/pages/members.astro
View File

@@ -6,22 +6,16 @@ const members = memberFiles[0]?.frontmatter?.members || [];
--- ---
<BaseLayout> <BaseLayout>
<!-- Page Header --> <!-- Page Header (modern) -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in"> <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" 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="relative z-10 max-w-4xl mx-auto">
<div class="flex items-center justify-center gap-2 mb-4 text-sm"> <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a> <a href="/" class="hover:underline">Home</a>
<span class="text-white/60">•</span> <span class="opacity-60">/</span>
<span>Members</span> <span>Members</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> </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"> <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Our Members</h1>
Meet Our Members <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Dedicated people at the heart of Omoluabi.</p>
</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
Discover the dedicated individuals who form the heart of the Omoluabi Association.
</p>
</div> </div>
</section> </section>

20
src/pages/orphanage.astro
View File

@@ -3,22 +3,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
--- ---
<BaseLayout> <BaseLayout>
<!-- Page Header --> <!-- Page Header (modern) -->
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in"> <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" 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="relative z-10 max-w-4xl mx-auto">
<div class="flex items-center justify-center gap-2 mb-4 text-sm"> <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a> <a href="/" class="hover:underline">Home</a>
<span class="text-white/60">•</span> <span class="opacity-60">/</span>
<span>Orphanage</span> <span>Orphanage</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> </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"> <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Our Orphanage Program</h1>
Our Orphanage Program <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">How we support children with care, education, and hope.</p>
</h1>
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
Learn more about our affiliated orphanage and how you can help us provide a brighter future for children in need.
</p>
</div> </div>
</section> </section>

7
src/styles/main.css
View File

@@ -366,6 +366,13 @@
background: linear-gradient(90deg, var(--nigerian-green) 0%, var(--dutch-white) 20%, var(--dutch-red) 40%, var(--dutch-white) 60%, var(--dutch-blue) 80%, var(--nigerian-green) 100%); background: linear-gradient(90deg, var(--nigerian-green) 0%, var(--dutch-white) 20%, var(--dutch-red) 40%, var(--dutch-white) 60%, var(--dutch-blue) 80%, var(--nigerian-green) 100%);
} }
/* Subtle brand surface (used for CTA sections) */
.brand-surface {
background: radial-gradient(1200px 600px at 20% 20%, rgba(10,10,10,0.08), rgba(10,10,10,0) 60%),
linear-gradient(135deg, rgba(12, 84, 36, 0.95) 0%, rgba(29, 78, 216, 0.90) 100%);
color: #fff;
}
/* Combined Flag Button */ /* Combined Flag Button */
.btn-combined-flag { .btn-combined-flag {
background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--dutch-red) 33%, var(--dutch-white) 66%, var(--dutch-blue) 100%); background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--dutch-red) 33%, var(--dutch-white) 66%, var(--dutch-blue) 100%);