style: modernize headers for About/Events/Members/Orphanage/Contact/Gallery using brand-surface; simplify copy; fix date sort; unify CTA
This commit is contained in:
101
package-lock.json
generated
101
package-lock.json
generated
@@ -12,7 +12,7 @@
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"astro": "^5.9.4",
|
||||
"astro": "^5.12.9",
|
||||
"keen-slider": "^6.8.6",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
@@ -54,18 +54,18 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@astrojs/internal-helpers": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.6.1.tgz",
|
||||
"integrity": "sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A==",
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.7.1.tgz",
|
||||
"integrity": "sha512-7dwEVigz9vUWDw3nRwLQ/yH/xYovlUA0ZD86xoeKEBmkz9O6iELG1yri67PgAPW6VLL/xInA4t7H0CK6VmtkKQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@astrojs/markdown-remark": {
|
||||
"version": "6.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.2.tgz",
|
||||
"integrity": "sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==",
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.5.tgz",
|
||||
"integrity": "sha512-MiR92CkE2BcyWf3b86cBBw/1dKiOH0qhLgXH2OXA6cScrrmmks1Rr4Tl0p/lFpvmgQQrP54Pd1uidJfmxGrpWQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astrojs/internal-helpers": "0.6.1",
|
||||
"@astrojs/internal-helpers": "0.7.1",
|
||||
"@astrojs/prism": "3.3.0",
|
||||
"github-slugger": "^2.0.0",
|
||||
"hast-util-from-html": "^2.0.3",
|
||||
@@ -80,7 +80,7 @@
|
||||
"remark-rehype": "^11.1.2",
|
||||
"remark-smartypants": "^3.0.2",
|
||||
"shiki": "^3.2.1",
|
||||
"smol-toml": "^1.3.1",
|
||||
"smol-toml": "^1.3.4",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-remove-position": "^5.0.0",
|
||||
"unist-util-visit": "^5.0.0",
|
||||
@@ -1686,60 +1686,60 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@shikijs/core": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.6.0.tgz",
|
||||
"integrity": "sha512-9By7Xb3olEX0o6UeJyPLI1PE1scC4d3wcVepvtv2xbuN9/IThYN4Wcwh24rcFeASzPam11MCq8yQpwwzCgSBRw==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.9.2.tgz",
|
||||
"integrity": "sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "3.6.0",
|
||||
"@shikijs/types": "3.9.2",
|
||||
"@shikijs/vscode-textmate": "^10.0.2",
|
||||
"@types/hast": "^3.0.4",
|
||||
"hast-util-to-html": "^9.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/engine-javascript": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.6.0.tgz",
|
||||
"integrity": "sha512-7YnLhZG/TU05IHMG14QaLvTW/9WiK8SEYafceccHUSXs2Qr5vJibUwsDfXDLmRi0zHdzsxrGKpSX6hnqe0k8nA==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.9.2.tgz",
|
||||
"integrity": "sha512-kUTRVKPsB/28H5Ko6qEsyudBiWEDLst+Sfi+hwr59E0GLHV0h8RfgbQU7fdN5Lt9A8R1ulRiZyTvAizkROjwDA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "3.6.0",
|
||||
"@shikijs/types": "3.9.2",
|
||||
"@shikijs/vscode-textmate": "^10.0.2",
|
||||
"oniguruma-to-es": "^4.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/engine-oniguruma": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.6.0.tgz",
|
||||
"integrity": "sha512-nmOhIZ9yT3Grd+2plmW/d8+vZ2pcQmo/UnVwXMUXAKTXdi+LK0S08Ancrz5tQQPkxvjBalpMW2aKvwXfelauvA==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.9.2.tgz",
|
||||
"integrity": "sha512-Vn/w5oyQ6TUgTVDIC/BrpXwIlfK6V6kGWDVVz2eRkF2v13YoENUvaNwxMsQU/t6oCuZKzqp9vqtEtEzKl9VegA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "3.6.0",
|
||||
"@shikijs/types": "3.9.2",
|
||||
"@shikijs/vscode-textmate": "^10.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/langs": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.6.0.tgz",
|
||||
"integrity": "sha512-IdZkQJaLBu1LCYCwkr30hNuSDfllOT8RWYVZK1tD2J03DkiagYKRxj/pDSl8Didml3xxuyzUjgtioInwEQM/TA==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.9.2.tgz",
|
||||
"integrity": "sha512-X1Q6wRRQXY7HqAuX3I8WjMscjeGjqXCg/Sve7J2GWFORXkSrXud23UECqTBIdCSNKJioFtmUGJQNKtlMMZMn0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "3.6.0"
|
||||
"@shikijs/types": "3.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/themes": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.6.0.tgz",
|
||||
"integrity": "sha512-Fq2j4nWr1DF4drvmhqKq8x5vVQ27VncF8XZMBuHuQMZvUSS3NBgpqfwz/FoGe36+W6PvniZ1yDlg2d4kmYDU6w==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.9.2.tgz",
|
||||
"integrity": "sha512-6z5lBPBMRfLyyEsgf6uJDHPa6NAGVzFJqH4EAZ+03+7sedYir2yJBRu2uPZOKmj43GyhVHWHvyduLDAwJQfDjA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/types": "3.6.0"
|
||||
"@shikijs/types": "3.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@shikijs/types": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.6.0.tgz",
|
||||
"integrity": "sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.9.2.tgz",
|
||||
"integrity": "sha512-/M5L0Uc2ljyn2jKvj4Yiah7ow/W+DJSglVafvWAJ/b8AZDeeRAdMu3c2riDzB7N42VD+jSnWxeP9AKtd4TfYVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/vscode-textmate": "^10.0.2",
|
||||
@@ -2341,14 +2341,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/astro": {
|
||||
"version": "5.9.4",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-5.9.4.tgz",
|
||||
"integrity": "sha512-AEulm16C9IijMYrFb3VIFx9z17p/wfDSHUHdbbvSEX+rBca64xV+f67tnsql3s4CE8u2cwYpdX+5yH7l53W4iA==",
|
||||
"version": "5.12.9",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-5.12.9.tgz",
|
||||
"integrity": "sha512-cZ7kZ61jyE5nwSrFKSRyf5Gds+uJELqQxJFqMkcgiWQvhWZJUSShn8Uz3yc9WLyLw5Kim5P5un9SkJSGogfEZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astrojs/compiler": "^2.12.2",
|
||||
"@astrojs/internal-helpers": "0.6.1",
|
||||
"@astrojs/markdown-remark": "6.3.2",
|
||||
"@astrojs/internal-helpers": "0.7.1",
|
||||
"@astrojs/markdown-remark": "6.3.5",
|
||||
"@astrojs/telemetry": "3.3.0",
|
||||
"@capsizecss/unpack": "^2.4.0",
|
||||
"@oslojs/encoding": "^1.1.0",
|
||||
@@ -2391,6 +2391,7 @@
|
||||
"rehype": "^13.0.2",
|
||||
"semver": "^7.7.1",
|
||||
"shiki": "^3.2.1",
|
||||
"smol-toml": "^1.3.4",
|
||||
"tinyexec": "^0.3.2",
|
||||
"tinyglobby": "^0.2.12",
|
||||
"tsconfck": "^3.1.5",
|
||||
@@ -2404,7 +2405,7 @@
|
||||
"xxhash-wasm": "^1.1.0",
|
||||
"yargs-parser": "^21.1.1",
|
||||
"yocto-spinner": "^0.2.1",
|
||||
"zod": "^3.24.2",
|
||||
"zod": "^3.24.4",
|
||||
"zod-to-json-schema": "^3.24.5",
|
||||
"zod-to-ts": "^1.2.0"
|
||||
},
|
||||
@@ -6087,17 +6088,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/shiki": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-3.6.0.tgz",
|
||||
"integrity": "sha512-tKn/Y0MGBTffQoklaATXmTqDU02zx8NYBGQ+F6gy87/YjKbizcLd+Cybh/0ZtOBX9r1NEnAy/GTRDKtOsc1L9w==",
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-3.9.2.tgz",
|
||||
"integrity": "sha512-t6NKl5e/zGTvw/IyftLcumolgOczhuroqwXngDeMqJ3h3EQiTY/7wmfgPlsmloD8oYfqkEDqxiaH37Pjm1zUhQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@shikijs/core": "3.6.0",
|
||||
"@shikijs/engine-javascript": "3.6.0",
|
||||
"@shikijs/engine-oniguruma": "3.6.0",
|
||||
"@shikijs/langs": "3.6.0",
|
||||
"@shikijs/themes": "3.6.0",
|
||||
"@shikijs/types": "3.6.0",
|
||||
"@shikijs/core": "3.9.2",
|
||||
"@shikijs/engine-javascript": "3.9.2",
|
||||
"@shikijs/engine-oniguruma": "3.9.2",
|
||||
"@shikijs/langs": "3.9.2",
|
||||
"@shikijs/themes": "3.9.2",
|
||||
"@shikijs/types": "3.9.2",
|
||||
"@shikijs/vscode-textmate": "^10.0.2",
|
||||
"@types/hast": "^3.0.4"
|
||||
}
|
||||
@@ -6131,9 +6132,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/smol-toml": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.4.tgz",
|
||||
"integrity": "sha512-UOPtVuYkzYGee0Bd2Szz8d2G3RfMfJ2t3qVdZUAozZyAk+a0Sxa+QKix0YCwjL/A1RR0ar44nCxaoN9FxdJGwA==",
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.4.1.tgz",
|
||||
"integrity": "sha512-CxdwHXyYTONGHThDbq5XdwbFsuY4wlClRGejfE2NtwUtiHYsP1QtNsHb/hnj31jKYSchztJsaA8pSQoVzkfCFg==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"astro": "^5.9.4",
|
||||
"astro": "^5.12.9",
|
||||
"keen-slider": "^6.8.6",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
||||
@@ -3,92 +3,25 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Page Header with Flag Integration -->
|
||||
<section class="relative py-16 px-4 text-center text-white overflow-hidden" style="
|
||||
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 -->
|
||||
<!-- Clean header -->
|
||||
<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">
|
||||
<!-- Breadcrumb with Flag Accents -->
|
||||
<div class="flex items-center justify-center gap-2 mb-6 text-sm">
|
||||
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
|
||||
<span class="text-white/60">•</span>
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
|
||||
<a href="/" class="hover:underline">Home</a>
|
||||
<span class="opacity-60">/</span>
|
||||
<span>About</span>
|
||||
</div>
|
||||
|
||||
<!-- Title with Flag Integration -->
|
||||
<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>
|
||||
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">About Us</h1>
|
||||
<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
|
||||
<span class="font-semibold text-nigerian-green-200">Nigerian culture</span> with
|
||||
<span class="font-semibold text-dutch-blue-200">Dutch hospitality</span> in the Netherlands.
|
||||
We connect <span class="font-semibold">Nigerian culture</span> with
|
||||
<span class="font-semibold">Dutch society</span>—supporting families
|
||||
and building opportunities across the Netherlands.
|
||||
</p>
|
||||
|
||||
<!-- Cultural Bridge Visual -->
|
||||
<div class="mt-8 flex items-center justify-center gap-6">
|
||||
<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-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 class="mt-6 flex items-center justify-center gap-3">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
@@ -97,58 +30,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
<section class="section" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<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="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">
|
||||
<div class="relative lg:order-2">
|
||||
<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>
|
||||
@@ -158,13 +52,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
<section class="section bg-white" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4">
|
||||
<span class="text-nigerian-green-700">Who</span> Are We?
|
||||
</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>
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Who are we?</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">The meaning and values behind the name “Omoluabi”.</p>
|
||||
</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">
|
||||
@@ -183,37 +72,24 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-headline text-2xl font-bold text-nigerian-green-700 mb-8 text-center">
|
||||
Our Fundamental Identities
|
||||
</h3>
|
||||
<h3 class="font-headline text-2xl font-bold text-gray-900 mb-6 text-center">Our values</h3>
|
||||
<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>
|
||||
</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">Ìtẹríba</strong> <span class="text-gray-600 text-sm">(Respect)</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">Irera eni sile</strong> <span class="text-gray-600 text-sm">(Humility)</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">Inú rere</strong> <span class="text-gray-600 text-sm">(Think good about others)</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">Òtítọ́</strong> <span class="text-gray-600 text-sm">(Truth)</span>
|
||||
</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>
|
||||
{[
|
||||
['Ọ̀rọ̀ sísọ','Careful spoken words'],
|
||||
['Ìtẹríba','Respect'],
|
||||
['Irera eni sile','Humility'],
|
||||
['Inú rere','Think good about others'],
|
||||
['Òtítọ́','Truth'],
|
||||
['Ìwà','Good character'],
|
||||
['Akínkanjú','Bravery'],
|
||||
['Isẹ́ sísẹ','Hard working'],
|
||||
['Ọpọlọ pípé','Highly intelligent']
|
||||
].map(([title,subtitle]) => (
|
||||
<div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
|
||||
<div class="font-semibold text-gray-900">{title}</div>
|
||||
<div class="text-gray-600 text-sm">({subtitle})</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -222,10 +98,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
<section class="section bg-gray-50" data-animate-on-scroll="fade-in">
|
||||
<div class="container">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-4">
|
||||
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>
|
||||
<h2 class="font-headline text-4xl font-bold text-gray-900 mb-3">Mission & Vision</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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 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">
|
||||
<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>
|
||||
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-3xl mx-auto mb-8">
|
||||
|
||||
@@ -4,22 +4,16 @@ import ContactForm from '../components/ContactForm.jsx';
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Page Header -->
|
||||
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
<!-- Page Header (modern) -->
|
||||
<section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
|
||||
<div class="relative z-10 max-w-4xl mx-auto">
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm">
|
||||
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
|
||||
<span class="text-white/60">•</span>
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
|
||||
<a href="/" class="hover:underline">Home</a>
|
||||
<span class="opacity-60">/</span>
|
||||
<span>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>
|
||||
<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">
|
||||
Contact Us
|
||||
</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>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Contact Us</h1>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -4,26 +4,20 @@ import EventFilterSearch from '../components/EventFilterSearch.jsx';
|
||||
|
||||
const eventFiles = Object.values(await import.meta.glob('../../content/events/*.md', { eager: true })) as any[];
|
||||
const events = eventFiles;
|
||||
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0) - new Date(a.frontmatter?.date || 0));
|
||||
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0).getTime() - new Date(a.frontmatter?.date || 0).getTime());
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Page Header -->
|
||||
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
<!-- Page Header (modern) -->
|
||||
<section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
|
||||
<div class="relative z-10 max-w-4xl mx-auto">
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm">
|
||||
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
|
||||
<span class="text-white/60">•</span>
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
|
||||
<a href="/" class="hover:underline">Home</a>
|
||||
<span class="opacity-60">/</span>
|
||||
<span>Events</span>
|
||||
<span class="ml-4"><span class="dutch-flag-badge"><span class="stripe red"></span><span class="stripe white"></span><span class="stripe blue"></span></span></span>
|
||||
</div>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-200 animate-text-shine">
|
||||
Our Events
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
|
||||
Explore our upcoming and past events. Use the filters and search bar to find what you're looking for!
|
||||
</p>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Events</h1>
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Find community gatherings, cultural celebrations, and programs across the Netherlands.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -7,11 +7,13 @@ const images = galleryFiles[0]?.frontmatter?.images || [];
|
||||
---
|
||||
|
||||
<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">
|
||||
<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 />
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@@ -173,7 +173,7 @@ import HomeGallery from '../components/HomeGallery.astro';
|
||||
</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 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>
|
||||
|
||||
<h2 class="font-headline text-5xl font-bold mb-6 leading-tight">
|
||||
Make A Donation For Our Various
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-kente-gold-200">Projects</span>
|
||||
Support Our <span class="text-kente-gold-200">Community Programs</span>
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -6,22 +6,16 @@ const members = memberFiles[0]?.frontmatter?.members || [];
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Page Header -->
|
||||
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
<!-- Page Header (modern) -->
|
||||
<section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
|
||||
<div class="relative z-10 max-w-4xl mx-auto">
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm">
|
||||
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
|
||||
<span class="text-white/60">•</span>
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
|
||||
<a href="/" class="hover:underline">Home</a>
|
||||
<span class="opacity-60">/</span>
|
||||
<span>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>
|
||||
<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">
|
||||
Meet Our Members
|
||||
</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>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Our Members</h1>
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Dedicated people at the heart of Omoluabi.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -3,22 +3,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Page Header -->
|
||||
<section class="relative py-16 px-4 text-center text-white overflow-hidden nigerian-flag-bg" data-animate-on-scroll="fade-in">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
<!-- Page Header (modern) -->
|
||||
<section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
|
||||
<div class="relative z-10 max-w-4xl mx-auto">
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm">
|
||||
<a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
|
||||
<span class="text-white/60">•</span>
|
||||
<div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
|
||||
<a href="/" class="hover:underline">Home</a>
|
||||
<span class="opacity-60">/</span>
|
||||
<span>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>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-200 animate-text-shine">
|
||||
Our Orphanage Program
|
||||
</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>
|
||||
<h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Our Orphanage Program</h1>
|
||||
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">How we support children with care, education, and hope.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.btn-combined-flag {
|
||||
background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--dutch-red) 33%, var(--dutch-white) 66%, var(--dutch-blue) 100%);
|
||||
|
||||
Reference in New Issue
Block a user