diff --git a/astro.config.mjs b/astro.config.mjs
index 9512ab2..508cbec 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,13 +3,9 @@ import { defineConfig } from 'astro/config';
 
 import tailwindcss from '@tailwindcss/vite';
 
-import react from '@astrojs/react';
-
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()]
-  },
-
-  integrations: [react()]
+  }
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ffcf2ff..d1a63c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,9 @@
       "name": "omoluabi",
       "version": "0.0.1",
       "dependencies": {
-        "@astrojs/react": "^4.3.0",
         "@tailwindcss/vite": "^4.1.10",
-        "@types/react": "^19.1.8",
-        "@types/react-dom": "^19.1.6",
         "astro": "^5.9.4",
         "daisyui": "^5.0.43",
-        "keen-slider": "^6.8.6",
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0",
         "tailwindcss": "^4.1.10"
       }
     },
@@ -86,26 +80,6 @@
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
       }
     },
-    "node_modules/@astrojs/react": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-4.3.0.tgz",
-      "integrity": "sha512-N02aj52Iezn69qHyx5+XvPqgsPMEnel9mI5JMbGiRMTzzLMuNaxRVoQTaq2024Dpr7BLsxCjqMkNvelqMDhaHA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vitejs/plugin-react": "^4.4.1",
-        "ultrahtml": "^1.6.0",
-        "vite": "^6.3.5"
-      },
-      "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.50 || ^18.0.21 || ^19.0.0",
-        "@types/react-dom": "^17.0.17 || ^18.0.6 || ^19.0.0",
-        "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@astrojs/telemetry": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -124,163 +98,6 @@
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.5.tgz",
-      "integrity": "sha512-KiRAp/VoJaWkkte84TvUd9qjdbZAdiqyvMxrGl1N6vzFogKmaLgoM3L1kgtLicp2HP5fBJS8JrZKLVIZGVJAVg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
-      "integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.27.3",
-        "@babel/helpers": "^7.27.4",
-        "@babel/parser": "^7.27.4",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.27.4",
-        "@babel/types": "^7.27.3",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
-      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.27.5",
-        "@babel/types": "^7.27.3",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
-      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "license": "ISC"
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
-      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.27.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -299,28 +116,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.6.tgz",
-      "integrity": "sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/parser": {
       "version": "7.27.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
@@ -336,68 +131,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
-      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
-      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
-      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
-        "@babel/parser": "^7.27.4",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.3",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
@@ -1259,12 +992,6 @@
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "license": "MIT"
     },
-    "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.11",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
-      "integrity": "sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==",
-      "license": "MIT"
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
@@ -1891,47 +1618,6 @@
         "vite": "^5.2.0 || ^6"
       }
     },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
-      "integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1998,24 +1684,6 @@
         "undici-types": "~7.8.0"
       }
     },
-    "node_modules/@types/react": {
-      "version": "19.1.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
-      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
-      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.0.0"
-      }
-    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2028,26 +1696,6 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.2.tgz",
-      "integrity": "sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.27.4",
-        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.11",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.17.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
-      }
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2364,38 +2012,6 @@
         "base64-js": "^1.1.2"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
-      "integrity": "sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001718",
-        "electron-to-chromium": "^1.5.160",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
     "node_modules/camelcase": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
@@ -2408,26 +2024,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001723",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001723.tgz",
-      "integrity": "sha512-1R/elMjtehrFejxwmexeXAtae5UO9iSyFn6G/I806CYC/BLyyBk1EPhrKBkWhy6wM6Xnm47dSJQec+tLJ39WHw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -2610,12 +2206,6 @@
       "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
       "license": "ISC"
     },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "license": "MIT"
-    },
     "node_modules/cookie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
@@ -2674,12 +2264,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
-    },
     "node_modules/daisyui": {
       "version": "5.0.43",
       "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.43.tgz",
@@ -2810,12 +2394,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.170",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.170.tgz",
-      "integrity": "sha512-GP+M7aeluQo9uAyiTCxgIj/j+PrWhMlY7LFVj8prlsPljd0Fdg9AprlfUi+OCSFWy9Y5/2D/Jrj9HS8Z4rpKWA==",
-      "license": "ISC"
-    },
     "node_modules/emoji-regex": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
@@ -2893,15 +2471,6 @@
         "@esbuild/win32-x64": "0.25.5"
       }
     },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/escape-string-regexp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -3005,15 +2574,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/get-east-asian-width": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
@@ -3032,15 +2592,6 @@
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
       "license": "ISC"
     },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3377,12 +2928,6 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "license": "MIT"
-    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -3395,36 +2940,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/keen-slider": {
-      "version": "6.8.6",
-      "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
-      "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w==",
-      "license": "MIT"
-    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -4625,12 +4140,6 @@
       "integrity": "sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==",
       "license": "MIT"
     },
-    "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "license": "MIT"
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4852,36 +4361,6 @@
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
       "license": "MIT"
     },
-    "node_modules/react": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
-      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "license": "MIT",
-      "dependencies": {
-        "scheduler": "^0.26.0"
-      },
-      "peerDependencies": {
-        "react": "^19.1.0"
-      }
-    },
-    "node_modules/react-refresh": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
-      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -5173,12 +4652,6 @@
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "license": "MIT"
     },
-    "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -5766,36 +5239,6 @@
         }
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/package.json b/package.json
index ca23ea9..06899ca 100644
--- a/package.json
+++ b/package.json
@@ -9,15 +9,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^4.3.0",
     "@tailwindcss/vite": "^4.1.10",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
     "astro": "^5.9.4",
     "daisyui": "^5.0.43",
-    "keen-slider": "^6.8.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.10"
   }
 }
diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro
new file mode 100644
index 0000000..7ef0773
--- /dev/null
+++ b/src/components/AboutSection.astro
@@ -0,0 +1,57 @@
+---
+import '../styles/main.css';
+// About section for homepage
+---
+<section class="section about-section">
+  <div class="container">
+    <div class="about-grid">
+      <div class="about-image">
+        <div class="about-image-frame"></div>
+        <div class="about-image-container">
+          <img src="/images/whoAreWe.webp" alt="About Omoluabi Association" />
+        </div>
+      </div>
+      <div class="about-content">
+        <h2 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 700; color: #16a34a; margin: 0;">
+          <div class="about-line"></div>
+          About Us
+        </h2>
+        <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #16a34a; display: flex; align-items: center; gap: 0.5rem;">
+          <span style="font-size: 2rem;">🌟</span>
+          WHO ARE WE?
+        </h3>
+        <div style="color: #374151; line-height: 1.6; margin-bottom: 2rem;">
+          <p style="font-size: 1.125rem; margin-bottom: 1rem;">
+            The <strong style="color: #16a34a;">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 style="margin-bottom: 1rem;">
+            Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building.
+          </p>
+          <p>
+            Our association is a non profit, non religious, non partisan, non ethnic 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 class="about-stats">
+          <div class="stat-card">
+            <div class="stat-number" style="color: #16a34a;">2018</div>
+            <div class="stat-label">Established</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-number" style="color: #f59e0b;">500+</div>
+            <div class="stat-label">Members</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-number" style="color: #dc2626;">50+</div>
+            <div class="stat-label">Events</div>
+          </div>
+        </div>
+        <div class="badges">
+          <span class="badge badge-green">Non-Profit</span>
+          <span class="badge badge-gold">Cultural Heritage</span>
+          <span class="badge badge-red">Community Focus</span>
+          <span class="badge badge-blue">Inclusive</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> 
\ No newline at end of file
diff --git a/src/components/ContactForm.astro b/src/components/ContactForm.astro
new file mode 100644
index 0000000..a84c38d
--- /dev/null
+++ b/src/components/ContactForm.astro
@@ -0,0 +1,61 @@
+---
+// Contact Form Component - Static version
+---
+
+<form class="max-w-xl mx-auto bg-base-100 p-8 rounded-xl shadow-lg" id="contactForm" autocomplete="off">
+  <div class="mb-4">
+    <label for="name" class="block font-bold mb-1">Name</label>
+    <input type="text" id="name" name="name" class="input input-bordered w-full" required autocomplete="off" />
+  </div>
+  <div class="mb-4">
+    <label for="email" class="block font-bold mb-1">Email</label>
+    <input type="email" id="email" name="email" class="input input-bordered w-full" required autocomplete="off" />
+  </div>
+  <div class="mb-4">
+    <label for="subject" class="block font-bold mb-1">Subject</label>
+    <input type="text" id="subject" name="subject" class="input input-bordered w-full" required autocomplete="off" />
+  </div>
+  <div class="mb-4">
+    <label for="message" class="block font-bold mb-1">Message</label>
+    <textarea id="message" name="message" class="textarea textarea-bordered w-full" rows="5" required></textarea>
+  </div>
+  <!-- Honeypot field for spam protection -->
+  <div style="display: none;">
+    <label for="honey">Do not fill this out</label>
+    <input type="text" id="honey" name="honey" tabindex="-1" autocomplete="off" />
+  </div>
+  <button type="submit" class="btn btn-primary w-full">Send Message</button>
+  <div id="status" class="mt-4 text-center text-sm text-success" style="display: none;"></div>
+</form>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('contactForm') as HTMLFormElement;
+    const statusDiv = document.getElementById('status') as HTMLDivElement;
+    
+    if (!form || !statusDiv) return;
+    
+    form.addEventListener('submit', async function(e) {
+      e.preventDefault();
+      
+      // Honeypot check
+      const honeyField = form.querySelector('#honey') as HTMLInputElement;
+      if (honeyField && honeyField.value !== "") {
+        showStatus("Spam detected.");
+        return;
+      }
+      
+      showStatus("Sending...");
+      
+      // Placeholder: would POST to /api/contact
+      setTimeout(() => {
+        showStatus("Message sent (placeholder, not yet implemented).");
+      }, 1000);
+    });
+    
+    function showStatus(message: string) {
+      statusDiv.textContent = message;
+      statusDiv.style.display = 'block';
+    }
+  });
+</script> 
\ No newline at end of file
diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.jsx
deleted file mode 100644
index 7db6a24..0000000
--- a/src/components/ContactForm.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState } from "react";
-
-export default function ContactForm() {
-  const [status, setStatus] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    const form = e.target;
-    // Honeypot check
-    if (form.honey.value !== "") {
-      setStatus("Spam detected.");
-      return;
-    }
-    setStatus("Sending...");
-    // Placeholder: would POST to /api/contact
-    setTimeout(() => setStatus("Message sent (placeholder, not yet implemented)."), 1000);
-  };
-
-  return (
-    <form className="max-w-xl mx-auto bg-base-100 p-8 rounded-xl shadow-lg" onSubmit={handleSubmit} autoComplete="off">
-      <div className="mb-4">
-        <label htmlFor="name" className="block font-bold mb-1">Name</label>
-        <input type="text" id="name" name="name" className="input input-bordered w-full" required autoComplete="off" />
-      </div>
-      <div className="mb-4">
-        <label htmlFor="email" className="block font-bold mb-1">Email</label>
-        <input type="email" id="email" name="email" className="input input-bordered w-full" required autoComplete="off" />
-      </div>
-      <div className="mb-4">
-        <label htmlFor="subject" className="block font-bold mb-1">Subject</label>
-        <input type="text" id="subject" name="subject" className="input input-bordered w-full" required autoComplete="off" />
-      </div>
-      <div className="mb-4">
-        <label htmlFor="message" className="block font-bold mb-1">Message</label>
-        <textarea id="message" name="message" className="textarea textarea-bordered w-full" rows={5} required></textarea>
-      </div>
-      {/* Honeypot field for spam protection */}
-      <div style={{ display: "none" }}>
-        <label htmlFor="honey">Do not fill this out</label>
-        <input type="text" id="honey" name="honey" tabIndex="-1" autoComplete="off" />
-      </div>
-      <button type="submit" className="btn btn-primary w-full">Send Message</button>
-      {status && <div className="mt-4 text-center text-sm text-success">{status}</div>}
-    </form>
-  );
-} 
\ No newline at end of file
diff --git a/src/components/EventsSection.astro b/src/components/EventsSection.astro
new file mode 100644
index 0000000..f1dbc1d
--- /dev/null
+++ b/src/components/EventsSection.astro
@@ -0,0 +1,109 @@
+---
+import '../styles/main.css';
+// Events section for homepage
+---
+<section class="section" style="background: white;">
+  <div class="container">
+    <div style="text-align: center; margin-bottom: 3rem;">
+      <h2 class="section-title">
+        Upcoming <span style="color: #16a34a;">Events</span>
+      </h2>
+      <p class="section-subtitle">
+        Join us in celebrating our rich cultural heritage and building stronger community bonds
+      </p>
+      <div class="section-divider"></div>
+    </div>
+    <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
+      <!-- Featured Event (Large) -->
+      <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
+        <article style="
+          background: white;
+          border-radius: 1rem;
+          box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+          overflow: hidden;
+          transition: all 0.3s ease;
+          position: relative;
+          group: hover;
+        " onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 20px 40px rgba(0,0,0,0.15)'"
+           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'">
+          <div style="position: relative;">
+            <img src="/images/placeholder-event1.jpg" alt="Nigerian Cultural Festival" style="
+              width: 100%;
+              height: 20rem;
+              object-fit: cover;
+            " />
+            <div style="
+              position: absolute;
+              inset: 0;
+              background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
+            "></div>
+            <div style="
+              position: absolute;
+              top: 1rem;
+              left: 1rem;
+              background: #f59e0b;
+              color: white;
+              padding: 0.5rem 1rem;
+              border-radius: 20px;
+              font-weight: 600;
+              font-size: 0.875rem;
+            ">
+              Cultural Festival
+            </div>
+            <div style="
+              position: absolute;
+              top: 1rem;
+              right: 1rem;
+              background: rgba(255,255,255,0.9);
+              color: #16a34a;
+              padding: 0.5rem 1rem;
+              border-radius: 20px;
+              font-weight: 600;
+              font-size: 0.875rem;
+            ">
+              Dec 15, 2024
+            </div>
+          </div>
+          <div style="padding: 2rem;">
+            <h3 style="
+              font-size: 1.5rem;
+              font-weight: 700;
+              margin-bottom: 0.75rem;
+              color: #111827;
+            ">
+              Nigerian Cultural Festival 2024
+            </h3>
+            <p style="color: #6b7280; margin-bottom: 1rem; line-height: 1.6;">
+              Join us for a spectacular celebration of Nigerian culture featuring traditional music, dance, authentic cuisine, and art exhibitions. A perfect opportunity to connect with our heritage and community.
+            </p>
+            <div style="display: flex; align-items: center; justify-content: between; flex-wrap: wrap; gap: 1rem;">
+              <div style="display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.875rem;">
+                <span>📍</span>
+                <span>Amsterdam Community Center</span>
+              </div>
+              <div style="display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.875rem;">
+                <span>🕒</span>
+                <span>14:00 - 22:00</span>
+              </div>
+              <button style="
+                background: #16a34a;
+                color: white;
+                padding: 0.5rem 1rem;
+                border-radius: 8px;
+                border: none;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                margin-left: auto;
+              " onmouseover="this.style.background='#15803d'"
+                 onmouseout="this.style.background='#16a34a'">
+                Learn More
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+      <!-- You can add more events here as needed -->
+    </div>
+  </div>
+</section> 
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index bbef7c2..37a39e8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,75 +1,71 @@
 ---
-// Footer.astro - Modern Nigerian-themed footer
+// Footer.astro - Modern Nigerian-themed footer with custom CSS
 ---
 
-<footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white relative overflow-hidden">
+<footer class="footer">
   <!-- Background Pattern -->
-  <div class="absolute inset-0 opacity-5">
-    <div class="absolute inset-0" 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>
+  <div class="footer-bg-pattern"></div>
 
   <!-- Decorative Top Border -->
-  <div class="h-2 bg-gradient-to-r from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500"></div>
+  <div class="footer-top-border"></div>
 
-  <div class="container mx-auto px-4 py-16 relative z-10">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+  <div class="footer-container">
+    <div class="footer-grid">
       
       <!-- Brand Section -->
-      <div class="lg:col-span-2">
-        <div class="flex items-center gap-4 mb-6">
+      <div class="footer-brand">
+        <div class="footer-logo-section">
           <!-- Logo -->
-          <div class="relative">
-            <div class="w-16 h-16 rounded-full bg-gradient-to-r from-nigerian-green-500 via-white to-nigerian-green-500 p-0.5 shadow-xl">
-              <div class="w-full h-full rounded-full bg-gray-800 flex items-center justify-center">
-                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-nigerian-green-500 to-kente-gold-500 flex items-center justify-center">
-                  <span class="text-white font-bold text-xl">O</span>
+          <div class="footer-logo-container">
+            <div class="footer-logo-flag">
+              <div class="footer-logo-inner">
+                <div class="footer-logo-symbol">
+                  <span>O</span>
                 </div>
               </div>
             </div>
-            <div class="absolute -top-1 -right-1 w-5 h-5 bg-kente-gold-400 rounded-full animate-pulse"></div>
+            <div class="footer-logo-accent"></div>
           </div>
-          <div>
-            <h3 class="font-headline text-3xl font-bold bg-gradient-to-r from-nigerian-green-400 to-kente-gold-400 bg-clip-text text-transparent">
-              Omoluabi Foundation
-            </h3>
-            <p class="text-gray-400 text-sm">Building Bridges, Celebrating Heritage</p>
+          <div class="footer-brand-text">
+            <h3 class="footer-brand-title">Omoluabi Association</h3>
+            <p class="footer-brand-subtitle">Building Bridges, Celebrating Heritage</p>
           </div>
         </div>
         
-        <p class="text-gray-300 leading-relaxed mb-6 max-w-md">
+        <p class="footer-description">
           Connecting Nigerian hearts in the Netherlands through culture, community, and compassion. 
           Together, we preserve our heritage while embracing our future.
         </p>
         
         <!-- Nigerian Flag Colors Accent -->
-        <div class="flex items-center gap-4 mb-6">
-          <div class="flex gap-1">
-            <div class="w-4 h-6 bg-nigerian-green-500 rounded-sm"></div>
-            <div class="w-4 h-6 bg-white rounded-sm"></div>
-            <div class="w-4 h-6 bg-nigerian-green-500 rounded-sm"></div>
+        <div class="footer-flag-section">
+          <div class="footer-flag">
+            <div class="flag-stripe flag-green"></div>
+            <div class="flag-stripe flag-white"></div>
+            <div class="flag-stripe flag-green"></div>
           </div>
-          <span class="text-sm text-gray-400">Proudly Nigerian 🇳🇬 in the Netherlands 🇳🇱</span>
+          <span class="footer-flag-text">Proudly Nigerian 🇳🇬 in the Netherlands 🇳🇱</span>
         </div>
         
         <!-- Social Media Links -->
-        <div class="flex gap-4">
-          <a href="#" class="group bg-gray-800 hover:bg-nigerian-green-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
-            <svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
+        <div class="footer-social">
+          <a href="#" class="social-link social-twitter">
+            <svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
               <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
             </svg>
           </a>
-          <a href="#" class="group bg-gray-800 hover:bg-kente-gold-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
-            <svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
+          <a href="#" class="social-link social-facebook">
+            <svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
               <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
             </svg>
           </a>
-          <a href="#" class="group bg-gray-800 hover:bg-ankara-red-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
-            <svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
+          <a href="#" class="social-link social-instagram">
+            <svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
               <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.221.083.343-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/>
             </svg>
           </a>
-          <a href="#" class="group bg-gray-800 hover:bg-adire-blue-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
-            <svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
+          <a href="#" class="social-link social-linkedin">
+            <svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
               <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
             </svg>
           </a>
@@ -77,93 +73,74 @@
       </div>
 
       <!-- Quick Links -->
-      <div>
-        <h4 class="font-headline text-xl font-bold mb-6 text-white flex items-center gap-2">
-          <span class="w-1 h-6 bg-gradient-to-b from-nigerian-green-400 to-kente-gold-400 rounded-full"></span>
+      <div class="footer-section">
+        <h4 class="footer-section-title">
+          <span class="footer-section-accent"></span>
           Quick Links
         </h4>
-        <nav class="space-y-3">
-          <a href="/" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
-            Home
-          </a>
-          <a href="/events" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
-            Events
-          </a>
-          <a href="/members" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
-            Members
-          </a>
-          <a href="/orphanage" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
-            Orphanage
-          </a>
-          <a href="/contact" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
-            Contact
-          </a>
-          <a href="/join" class="block text-kente-gold-400 hover:text-kente-gold-300 transition-colors duration-200 hover:translate-x-1 transform font-semibold">
-            Join Us →
-          </a>
+        <nav class="footer-nav">
+          <a href="/home" class="footer-nav-link">Home</a>
+          <a href="/events" class="footer-nav-link">Events</a>
+          <a href="/members" class="footer-nav-link">Members</a>
+          <a href="/orphanage" class="footer-nav-link">Orphanage</a>
+          <a href="/contact" class="footer-nav-link">Contact</a>
+          <a href="/join" class="footer-nav-link footer-nav-cta">Join Us →</a>
         </nav>
       </div>
 
       <!-- Contact Info -->
-      <div>
-        <h4 class="font-headline text-xl font-bold mb-6 text-white flex items-center gap-2">
-          <span class="w-1 h-6 bg-gradient-to-b from-ankara-red-400 to-nigerian-green-400 rounded-full"></span>
+      <div class="footer-section">
+        <h4 class="footer-section-title">
+          <span class="footer-section-accent footer-section-accent-alt"></span>
           Get in Touch
         </h4>
-        <div class="space-y-4">
-          <div class="flex items-start gap-3">
-            <div class="bg-nigerian-green-500/20 p-2 rounded-lg mt-1">
-              <svg class="w-4 h-4 text-nigerian-green-400" fill="currentColor" viewBox="0 0 20 20">
+        <div class="footer-contact">
+          <div class="contact-item">
+            <div class="contact-icon contact-location">
+              <svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
               </svg>
             </div>
-            <div>
-              <p class="text-gray-300 text-sm leading-relaxed">
-                Amsterdam, Netherlands<br/>
-                Various locations across NL
-              </p>
+            <div class="contact-text">
+              <p>Amsterdam, Netherlands<br/>Various locations across NL</p>
             </div>
           </div>
           
-          <div class="flex items-start gap-3">
-            <div class="bg-kente-gold-500/20 p-2 rounded-lg mt-1">
-              <svg class="w-4 h-4 text-kente-gold-400" fill="currentColor" viewBox="0 0 20 20">
+          <div class="contact-item">
+            <div class="contact-icon contact-phone">
+              <svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
               </svg>
             </div>
-            <div>
-              <p class="text-gray-300 text-sm">
-                +31 (0) 123 456 789
-              </p>
+            <div class="contact-text">
+              <p>+31 (0) 123 456 789</p>
             </div>
           </div>
           
-          <div class="flex items-start gap-3">
-            <div class="bg-ankara-red-500/20 p-2 rounded-lg mt-1">
-              <svg class="w-4 h-4 text-ankara-red-400" fill="currentColor" viewBox="0 0 20 20">
+          <div class="contact-item">
+            <div class="contact-icon contact-email">
+              <svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                 <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
               </svg>
             </div>
-            <div>
-              <p class="text-gray-300 text-sm">
-                info@omoluabi.nl
-              </p>
+            <div class="contact-text">
+              <p>info@omoluabi.nl</p>
             </div>
           </div>
         </div>
         
         <!-- Newsletter Signup -->
-        <div class="mt-8 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
-          <h5 class="font-semibold mb-3 text-white">Stay Updated</h5>
-          <div class="flex gap-2">
+        <div class="footer-newsletter">
+          <h5 class="newsletter-title">Stay Updated</h5>
+          <div class="newsletter-form">
             <input 
               type="email" 
               placeholder="Your email" 
-              class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm text-white placeholder-gray-400 focus:border-nigerian-green-400 focus:outline-none"
+              class="newsletter-input"
             />
-            <button class="bg-nigerian-green-500 hover:bg-nigerian-green-600 px-4 py-2 rounded-lg transition-colors duration-200">
-              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button class="newsletter-button">
+              <svg class="newsletter-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
               </svg>
             </button>
@@ -173,34 +150,510 @@
     </div>
 
     <!-- Bottom Section -->
-    <div class="border-t border-gray-700 mt-12 pt-8">
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+    <div class="footer-bottom">
+      <div class="footer-bottom-content">
         <!-- Copyright -->
-        <div class="text-gray-400 text-sm">
-          <span>&copy; {new Date().getFullYear()} Omoluabi Foundation Netherlands. </span>
-          <span class="text-nigerian-green-400">Made with ❤️ </span>
+        <div class="footer-copyright">
+          <span>&copy; {new Date().getFullYear()} Omoluabi Association Netherlands. </span>
+          <span class="copyright-heart">Made with ❤️ </span>
           <span>for the Nigerian community.</span>
         </div>
         
         <!-- Additional Links -->
-        <div class="flex gap-6 text-sm">
-          <a href="/privacy" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
-          <a href="/terms" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
-          <a href="/sitemap" class="text-gray-400 hover:text-white transition-colors">Sitemap</a>
+        <div class="footer-links">
+          <a href="/privacy" class="footer-link">Privacy Policy</a>
+          <a href="/terms" class="footer-link">Terms of Service</a>
+          <a href="/sitemap" class="footer-link">Sitemap</a>
         </div>
       </div>
       
       <!-- Cultural Quote -->
-      <div class="mt-6 text-center">
-        <p class="text-gray-500 italic text-sm">
-          "Omoluabi ni wa" - We are people of good character
-        </p>
-        <div class="flex justify-center mt-2 gap-1">
-          <span class="text-nigerian-green-400">🌟</span>
-          <span class="text-kente-gold-400">🌟</span>
-          <span class="text-ankara-red-400">🌟</span>
+      <div class="footer-quote">
+        <p class="quote-text">"Omoluabi ni wa" - We are people of good character</p>
+        <div class="quote-stars">
+          <span class="star star-green">🌟</span>
+          <span class="star star-gold">🌟</span>
+          <span class="star star-red">🌟</span>
         </div>
       </div>
     </div>
   </div>
-</footer>
\ No newline at end of file
+</footer>
+
+<style>
+  /* Footer Styles */
+  .footer {
+    background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .footer-bg-pattern {
+    position: absolute;
+    inset: 0;
+    opacity: 0.05;
+    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");
+  }
+
+  .footer-top-border {
+    height: 8px;
+    background: linear-gradient(90deg, #16a34a, #f59e0b, #dc2626);
+  }
+
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 2rem;
+    position: relative;
+    z-index: 10;
+  }
+
+  .footer-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+
+  @media (min-width: 768px) {
+    .footer-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .footer-grid {
+      grid-template-columns: 2fr 1fr 1fr;
+    }
+  }
+
+  /* Brand Section */
+  .footer-brand {
+    grid-column: 1 / -1;
+  }
+
+  @media (min-width: 1024px) {
+    .footer-brand {
+      grid-column: 1 / 2;
+    }
+  }
+
+  .footer-logo-section {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .footer-logo-container {
+    position: relative;
+  }
+
+  .footer-logo-flag {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #16a34a, #ffffff, #16a34a);
+    padding: 2px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  }
+
+  .footer-logo-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #1f2937;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .footer-logo-symbol {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #16a34a, #f59e0b);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .footer-logo-symbol span {
+    color: white;
+    font-weight: bold;
+    font-size: 1.25rem;
+  }
+
+  .footer-logo-accent {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: #f59e0b;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+  }
+
+  .footer-brand-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .footer-brand-title {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.875rem;
+    font-weight: 700;
+    background: linear-gradient(45deg, #16a34a, #f59e0b);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.25rem;
+  }
+
+  .footer-brand-subtitle {
+    color: #9ca3af;
+    font-size: 0.875rem;
+  }
+
+  .footer-description {
+    color: #d1d5db;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+    max-width: 24rem;
+  }
+
+  .footer-flag-section {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .footer-flag {
+    display: flex;
+    gap: 1px;
+  }
+
+  .flag-stripe {
+    width: 1rem;
+    height: 1.5rem;
+    border-radius: 2px;
+  }
+
+  .flag-green {
+    background: #16a34a;
+  }
+
+  .flag-white {
+    background: white;
+  }
+
+  .footer-flag-text {
+    font-size: 0.875rem;
+    color: #9ca3af;
+  }
+
+  .footer-social {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .social-link {
+    background: #374151;
+    padding: 0.75rem;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    transform: scale(1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .social-link:hover {
+    transform: scale(1.1) rotate(6deg);
+  }
+
+  .social-twitter:hover {
+    background: #16a34a;
+  }
+
+  .social-facebook:hover {
+    background: #f59e0b;
+  }
+
+  .social-instagram:hover {
+    background: #dc2626;
+  }
+
+  .social-linkedin:hover {
+    background: #2563eb;
+  }
+
+  .social-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: #9ca3af;
+    transition: color 0.3s ease;
+  }
+
+  .social-link:hover .social-icon {
+    color: white;
+  }
+
+  /* Footer Sections */
+  .footer-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .footer-section-title {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .footer-section-accent {
+    width: 4px;
+    height: 1.5rem;
+    background: linear-gradient(180deg, #16a34a, #f59e0b);
+    border-radius: 2px;
+  }
+
+  .footer-section-accent-alt {
+    background: linear-gradient(180deg, #dc2626, #16a34a);
+  }
+
+  .footer-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .footer-nav-link {
+    color: #d1d5db;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    transform: translateX(0);
+  }
+
+  .footer-nav-link:hover {
+    color: #16a34a;
+    transform: translateX(4px);
+  }
+
+  .footer-nav-cta {
+    color: #f59e0b;
+    font-weight: 600;
+  }
+
+  .footer-nav-cta:hover {
+    color: #f59e0b;
+  }
+
+  /* Contact Section */
+  .footer-contact {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .contact-icon {
+    padding: 0.5rem;
+    border-radius: 8px;
+    margin-top: 2px;
+  }
+
+  .contact-location {
+    background: rgba(22, 163, 74, 0.2);
+  }
+
+  .contact-phone {
+    background: rgba(245, 158, 11, 0.2);
+  }
+
+  .contact-email {
+    background: rgba(220, 38, 38, 0.2);
+  }
+
+  .contact-icon-svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .contact-location .contact-icon-svg {
+    color: #16a34a;
+  }
+
+  .contact-phone .contact-icon-svg {
+    color: #f59e0b;
+  }
+
+  .contact-email .contact-icon-svg {
+    color: #dc2626;
+  }
+
+  .contact-text p {
+    color: #d1d5db;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  /* Newsletter */
+  .footer-newsletter {
+    padding: 1rem;
+    background: rgba(55, 65, 81, 0.5);
+    border-radius: 12px;
+    border: 1px solid #4b5563;
+  }
+
+  .newsletter-title {
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    color: white;
+  }
+
+  .newsletter-form {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .newsletter-input {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    background: #374151;
+    border: 1px solid #4b5563;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: white;
+  }
+
+  .newsletter-input::placeholder {
+    color: #9ca3af;
+  }
+
+  .newsletter-input:focus {
+    border-color: #16a34a;
+    outline: none;
+  }
+
+  .newsletter-button {
+    background: #16a34a;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .newsletter-button:hover {
+    background: #15803d;
+  }
+
+  .newsletter-icon {
+    width: 1rem;
+    height: 1rem;
+    color: white;
+  }
+
+  /* Bottom Section */
+  .footer-bottom {
+    border-top: 1px solid #4b5563;
+    margin-top: 3rem;
+    padding-top: 2rem;
+  }
+
+  .footer-bottom-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  @media (min-width: 768px) {
+    .footer-bottom-content {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  .footer-copyright {
+    color: #9ca3af;
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
+  @media (min-width: 768px) {
+    .footer-copyright {
+      text-align: left;
+    }
+  }
+
+  .copyright-heart {
+    color: #16a34a;
+  }
+
+  .footer-links {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.875rem;
+  }
+
+  .footer-link {
+    color: #9ca3af;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .footer-link:hover {
+    color: white;
+  }
+
+  .footer-quote {
+    margin-top: 1.5rem;
+    text-align: center;
+  }
+
+  .quote-text {
+    color: #6b7280;
+    font-style: italic;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .quote-stars {
+    display: flex;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .star-green {
+    color: #16a34a;
+  }
+
+  .star-gold {
+    color: #f59e0b;
+  }
+
+  .star-red {
+    color: #dc2626;
+  }
+
+  /* Animations */
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 85ece09..b20098b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,102 +1,101 @@
 ---
+import '../styles/main.css';
 // Header.astro - Updated with better navigation and active states
 ---
 
-<header class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-lg border-b border-gray-200/50 shadow-lg">
-  <div class="max-w-7xl mx-auto px-4">
+<header class="header">
+  <div class="header-content">
     <!-- Top bar with cultural elements -->
-    <div class="hidden md:flex items-center justify-between py-2 text-sm border-b border-gray-100">
-      <div class="flex items-center gap-4 text-gray-600">
-        <div class="flex items-center gap-2">
-          <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+    <div class="header-top-bar">
+      <div class="header-top-left">
+        <div class="header-info-item">
+          <svg class="header-icon header-icon-green" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
           </svg>
           <span>Netherlands</span>
         </div>
-        <div class="flex items-center gap-2">
-          <svg class="w-4 h-4 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
+        <div class="header-info-item">
+          <svg class="header-icon header-icon-amber" fill="currentColor" viewBox="0 0 20 20">
             <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
           </svg>
           <span>+31 (0) 123 456 789</span>
         </div>
       </div>
-      <div class="flex items-center gap-1">
-        <span class="text-gray-500">🇳🇬</span>
-        <span class="font-semibold text-green-700">Celebrating Nigerian Heritage</span>
-        <span class="text-gray-500">🇳🇱</span>
+      <div class="header-top-right">
+        <span class="flag-emoji">🇳🇬</span>
+        <span class="header-heritage-text">Celebrating Nigerian Heritage</span>
+        <span class="flag-emoji">🇳🇱</span>
       </div>
     </div>
 
     <!-- Main navigation -->
-    <nav class="flex items-center justify-between py-4">
+    <nav class="header-nav">
       <!-- Logo -->
-      <a href="/" class="flex items-center gap-3 group">
-        <div class="relative">
+      <a href="/home" class="header-logo">
+        <div class="logo-container">
           <!-- Nigerian flag inspired logo -->
-          <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 via-white to-green-500 p-0.5 shadow-lg group-hover:shadow-xl transition-all duration-300">
-            <div class="w-full h-full rounded-full bg-white flex items-center justify-center">
-              <div class="w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-amber-500 flex items-center justify-center">
-                <span class="text-white font-bold text-sm">O</span>
+          <div class="logo-flag">
+            <div class="logo-inner">
+              <div class="logo-symbol">
+                <span>O</span>
               </div>
             </div>
           </div>
           <!-- Floating accent -->
-          <div class="absolute -top-1 -right-1 w-4 h-4 bg-amber-400 rounded-full animate-bounce"></div>
+          <div class="logo-accent"></div>
         </div>
-        <div class="flex flex-col">
-          <span class="font-bold text-2xl bg-gradient-to-r from-green-600 to-amber-600 bg-clip-text text-transparent">
-            Omoluabi
-          </span>
-          <span class="text-sm text-gray-600 font-medium -mt-1">Foundation</span>
+        <div class="logo-text">
+          <span class="logo-title">Omoluabi</span>
+          <span class="logo-subtitle">Association</span>
         </div>
       </a>
 
       <!-- Desktop Navigation -->
-      <div class="hidden lg:flex items-center gap-1">
-        <a href="/" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+      <div class="header-desktop-nav">
+        <a href="/home" class="nav-link">
           Home
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
-        <a href="/about" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+        <a href="/about" class="nav-link">
           About
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
-        <a href="/events" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+        <a href="/events" class="nav-link">
           Events
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
-        <a href="/members" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+        <a href="/members" class="nav-link">
           Members
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
-        <a href="/orphanage" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+        <a href="/orphanage" class="nav-link">
           Orphanage
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
-        <a href="/contact" class="nav-link px-4 py-2 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200 relative group">
+        <a href="/contact" class="nav-link">
           Contact
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 group-hover:w-full transition-all duration-300"></span>
+          <span class="nav-underline"></span>
         </a>
       </div>
 
       <!-- CTA Buttons -->
-      <div class="flex items-center gap-3">
-        <a href="/donate" class="inline-flex items-center px-6 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg shadow-lg hover:shadow-xl hover:from-red-600 hover:to-red-700 transition-all duration-200 font-medium">
-          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+      <div class="header-cta">
+        <a href="/donate" class="btn btn-donate">
+          <svg class="btn-icon" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
           </svg>
           Donate
         </a>
-        <a href="/join" class="inline-flex items-center px-6 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg shadow-lg hover:shadow-xl hover:from-amber-600 hover:to-amber-700 transition-all duration-200 font-medium">
-          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+        <a href="/join" class="btn btn-join">
+          <svg class="btn-icon" fill="currentColor" viewBox="0 0 20 20">
             <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
           </svg>
           Join Us
         </a>
 
         <!-- Mobile menu button -->
-        <button class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200" onclick="toggleMobileMenu()">
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
+          <svg class="mobile-menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
         </button>
@@ -105,24 +104,24 @@
   </div>
 
   <!-- Mobile Navigation -->
-  <div id="mobile-menu" class="lg:hidden hidden bg-white border-t border-gray-200 shadow-lg">
-    <div class="max-w-7xl mx-auto px-4 py-4 space-y-2">
-      <a href="/" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+  <div id="mobile-menu" class="mobile-menu">
+    <div class="mobile-menu-content">
+      <a href="/home" class="mobile-nav-link">
         🏠 Home
       </a>
-      <a href="/about" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+      <a href="/about" class="mobile-nav-link">
         ℹ️ About
       </a>
-      <a href="/events" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+      <a href="/events" class="mobile-nav-link">
         📅 Events
       </a>
-      <a href="/members" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+      <a href="/members" class="mobile-nav-link">
         👥 Members
       </a>
-      <a href="/orphanage" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+      <a href="/orphanage" class="mobile-nav-link">
         🏠 Orphanage
       </a>
-      <a href="/contact" class="block px-4 py-3 rounded-lg font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-all duration-200">
+      <a href="/contact" class="mobile-nav-link">
         📞 Contact
       </a>
     </div>
@@ -132,7 +131,9 @@
 <script>
   function toggleMobileMenu() {
     const menu = document.getElementById('mobile-menu');
-    menu.classList.toggle('hidden');
+    if (menu) {
+      menu.classList.toggle('mobile-menu-hidden');
+    }
   }
 
   // Add active state to current page
@@ -142,11 +143,11 @@
     
     navLinks.forEach(link => {
       const href = link.getAttribute('href');
-      if (href === currentPath || (currentPath !== '/' && href !== '/' && currentPath.startsWith(href))) {
-        link.classList.add('text-green-600', 'bg-green-50');
-        const underline = link.querySelector('span');
+      if (href && (href === currentPath || (currentPath !== '/home' && href !== '/home' && currentPath.startsWith(href)))) {
+        link.classList.add('nav-link-active');
+        const underline = link.querySelector('.nav-underline');
         if (underline) {
-          underline.classList.add('w-full');
+          underline.classList.add('nav-underline-active');
         }
       }
     });
@@ -154,7 +155,356 @@
 </script>
 
 <style>
-  /* Add some breathing room for fixed header */
+  /* Header Styles */
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(229, 229, 229, 0.5);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+  }
+
+  /* Top Bar */
+  .header-top-bar {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(229, 229, 229, 0.5);
+    font-size: 0.875rem;
+  }
+
+  @media (min-width: 768px) {
+    .header-top-bar {
+      display: flex;
+    }
+  }
+
+  .header-top-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: #6b7280;
+  }
+
+  .header-info-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .header-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .header-icon-green {
+    color: #16a34a;
+  }
+
+  .header-icon-amber {
+    color: #f59e0b;
+  }
+
+  .header-top-right {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .flag-emoji {
+    color: #6b7280;
+  }
+
+  .header-heritage-text {
+    font-weight: 600;
+    color: #16a34a;
+  }
+
+  /* Main Navigation */
+  .header-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 0;
+  }
+
+  /* Logo */
+  .header-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .logo-container {
+    position: relative;
+  }
+
+  .logo-flag {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #16a34a, #ffffff, #16a34a);
+    padding: 2px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+  }
+
+  .header-logo:hover .logo-flag {
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .logo-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo-symbol {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #16a34a, #f59e0b);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo-symbol span {
+    color: white;
+    font-weight: bold;
+    font-size: 0.875rem;
+  }
+
+  .logo-accent {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 1rem;
+    height: 1rem;
+    background: #f59e0b;
+    border-radius: 50%;
+    animation: bounce 2s infinite;
+  }
+
+  .logo-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .logo-title {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(45deg, #16a34a, #f59e0b);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .logo-subtitle {
+    font-size: 0.875rem;
+    color: #6b7280;
+    font-weight: 500;
+    margin-top: -0.25rem;
+  }
+
+  /* Desktop Navigation */
+  .header-desktop-nav {
+    display: none;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  @media (min-width: 1024px) {
+    .header-desktop-nav {
+      display: flex;
+    }
+  }
+
+  .nav-link {
+    position: relative;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    color: #374151;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    overflow: hidden;
+  }
+
+  .nav-link:hover {
+    color: #16a34a;
+    background: rgba(22, 163, 74, 0.1);
+  }
+
+  .nav-link-active {
+    color: #16a34a;
+    background: rgba(22, 163, 74, 0.1);
+  }
+
+  .nav-underline {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #16a34a;
+    transition: width 0.3s ease;
+  }
+
+  .nav-link:hover .nav-underline,
+  .nav-underline-active {
+    width: 100%;
+  }
+
+  /* CTA Buttons */
+  .header-cta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .btn:hover {
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .btn-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+
+  .btn-donate {
+    background: linear-gradient(45deg, #ef4444, #dc2626);
+    color: white;
+  }
+
+  .btn-donate:hover {
+    background: linear-gradient(45deg, #dc2626, #b91c1c);
+  }
+
+  .btn-join {
+    background: linear-gradient(45deg, #f59e0b, #d97706);
+    color: white;
+  }
+
+  .btn-join:hover {
+    background: linear-gradient(45deg, #d97706, #b45309);
+  }
+
+  /* Mobile Menu Button */
+  .mobile-menu-btn {
+    display: block;
+    padding: 0.5rem;
+    border-radius: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .mobile-menu-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  @media (min-width: 1024px) {
+    .mobile-menu-btn {
+      display: none;
+    }
+  }
+
+  .mobile-menu-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Mobile Menu */
+  .mobile-menu {
+    display: none;
+    background: white;
+    border-top: 1px solid rgba(229, 229, 229, 0.5);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .mobile-menu-hidden {
+    display: none !important;
+  }
+
+  @media (min-width: 1024px) {
+    .mobile-menu {
+      display: none !important;
+    }
+  }
+
+  .mobile-menu-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .mobile-nav-link {
+    display: block;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    color: #374151;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  .mobile-nav-link:hover {
+    color: #16a34a;
+    background: rgba(22, 163, 74, 0.1);
+  }
+
+  /* Animations */
+  @keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+      transform: translate3d(0, 0, 0);
+    }
+    40%, 43% {
+      transform: translate3d(0, -8px, 0);
+    }
+    70% {
+      transform: translate3d(0, -4px, 0);
+    }
+    90% {
+      transform: translate3d(0, -2px, 0);
+    }
+  }
+
+  /* Body padding for fixed header */
   body {
     padding-top: 120px;
   }
@@ -164,26 +514,5 @@
       padding-top: 80px;
     }
   }
-
-  /* Ensure smooth transitions */
-  .nav-link {
-    position: relative;
-    overflow: hidden;
-  }
-
-  /* Custom bounce animation */
-  @keyframes bounce {
-    0%, 20%, 53%, 80%, 100% {
-      transform: translate3d(0,0,0);
-    }
-    40%, 43% {
-      transform: translate3d(0,-8px,0);
-    }
-    70% {
-      transform: translate3d(0,-4px,0);
-    }
-    90% {
-      transform: translate3d(0,-2px,0);
-    }
-  }
+</style>
 </style>
\ No newline at end of file
diff --git a/src/components/HeroCarousel.jsx b/src/components/HeroCarousel.jsx
deleted file mode 100644
index 950c9ba..0000000
--- a/src/components/HeroCarousel.jsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import { useState, useEffect } from "react";
-
-const slides = [
-  {
-    image: "/images/hero1.jpg",
-    alt: "Nigerian community gathering",
-    title: "Celebrating Nigerian Culture",
-    subtitle: "in the Heart of Netherlands",
-    description: "Join our vibrant community events that showcase the rich traditions, music, and cuisine of Nigeria while building lasting friendships.",
-    cta: "Join Our Events",
-    theme: "green"
-  },
-  {
-    image: "/images/hero2.jpg",
-    alt: "Children at orphanage",
-    title: "Supporting Our Future",
-    subtitle: "Orphanage Outreach Program",
-    description: "Making a real difference in the lives of children through education, healthcare, and providing hope for a brighter tomorrow.",
-    cta: "Learn More",
-    theme: "gold"
-  },
-  {
-    image: "/images/hero3.jpg",
-    alt: "Nigerian textiles and art",
-    title: "Proud Heritage",
-    subtitle: "United in Our Mission",
-    description: "Preserving and promoting Nigerian arts, crafts, and cultural traditions while fostering integration in Dutch society.",
-    cta: "Explore Culture",
-    theme: "red"
-  },
-];
-
-const themeColors = {
-  green: {
-    primary: "from-green-600 to-green-800",
-    secondary: "from-green-500 to-green-700",
-    accent: "bg-green-500",
-    text: "text-green-600"
-  },
-  gold: {
-    primary: "from-yellow-500 to-orange-600",
-    secondary: "from-yellow-400 to-orange-500",
-    accent: "bg-yellow-500",
-    text: "text-yellow-600"
-  },
-  red: {
-    primary: "from-red-600 to-red-800",
-    secondary: "from-red-500 to-red-700",
-    accent: "bg-red-500",
-    text: "text-red-600"
-  }
-};
-
-export default function HeroCarousel() {
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(true);
-
-  useEffect(() => {
-    if (!isPlaying) return;
-    
-    const interval = setInterval(() => {
-      setCurrentSlide((prev) => (prev + 1) % slides.length);
-    }, 6000);
-
-    return () => clearInterval(interval);
-  }, [isPlaying]);
-
-  const nextSlide = () => {
-    setCurrentSlide((prev) => (prev + 1) % slides.length);
-  };
-
-  const prevSlide = () => {
-    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
-  };
-
-  const goToSlide = (index) => {
-    setCurrentSlide(index);
-  };
-
-  return (
-    <div className="relative w-full max-w-6xl mx-auto rounded-2xl overflow-hidden shadow-2xl bg-white">
-      {/* Main Carousel Container */}
-      <div className="relative h-[600px] overflow-hidden">
-        {slides.map((slide, index) => {
-          const theme = themeColors[slide.theme];
-          return (
-            <div
-              key={index}
-              className={`absolute inset-0 transition-all duration-1000 ease-in-out ${
-                index === currentSlide 
-                  ? 'opacity-100 translate-x-0' 
-                  : index < currentSlide 
-                    ? 'opacity-0 -translate-x-full' 
-                    : 'opacity-0 translate-x-full'
-              }`}
-            >
-              {/* Background Image */}
-              <div className="absolute inset-0">
-                <img 
-                  src={slide.image} 
-                  alt={slide.alt} 
-                  className="w-full h-full object-cover"
-                />
-                <div className={`absolute inset-0 bg-gradient-to-r ${theme.primary} opacity-80`}></div>
-                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
-              </div>
-
-              {/* Content */}
-              <div className="relative z-10 h-full flex items-center">
-                <div className="container mx-auto px-8">
-                  <div className="max-w-2xl text-white">
-                    {/* Animated Content */}
-                    <div className={`transition-all duration-1000 delay-300 ${
-                      index === currentSlide ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
-                    }`}>
-                      <div className="flex items-center gap-3 mb-4">
-                        <div className={`w-2 h-12 ${theme.accent} rounded-full`}></div>
-                        <span className="text-sm font-semibold uppercase tracking-wider opacity-90">
-                          Omoluabi Foundation
-                        </span>
-                      </div>
-                      
-                      <h1 className="text-5xl md:text-6xl font-bold mb-2 leading-tight">
-                        {slide.title}
-                      </h1>
-                      <h2 className="text-2xl md:text-3xl font-light mb-6 text-yellow-200">
-                        {slide.subtitle}
-                      </h2>
-                      
-                      <p className="text-lg md:text-xl mb-8 leading-relaxed opacity-90 max-w-xl">
-                        {slide.description}
-                      </p>
-                      
-                      <div className="flex flex-col sm:flex-row gap-4">
-                        <button className="bg-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
-                          {slide.cta}
-                        </button>
-                        <button className="border-2 border-white text-white px-8 py-4 rounded-xl font-bold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
-                          Learn More
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Decorative Elements */}
-              <div className="absolute top-10 right-10 w-32 h-32 border-2 border-white/20 rounded-full animate-spin" style={{animationDuration: '20s'}}></div>
-              <div className="absolute bottom-10 left-10 w-24 h-24 border-2 border-white/20 rounded-full animate-bounce"></div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Navigation Arrows */}
-      <button
-        onClick={prevSlide}
-        className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-3 rounded-full transition-all duration-300 hover:scale-110 group"
-        aria-label="Previous slide"
-      >
-        <svg className="w-6 h-6 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-        </svg>
-      </button>
-      
-      <button
-        onClick={nextSlide}
-        className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-3 rounded-full transition-all duration-300 hover:scale-110 group"
-        aria-label="Next slide"
-      >
-        <svg className="w-6 h-6 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-        </svg>
-      </button>
-
-      {/* Slide Indicators */}
-      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3">
-        {slides.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => goToSlide(index)}
-            className={`w-3 h-3 rounded-full transition-all duration-300 ${
-              index === currentSlide 
-                ? 'bg-white scale-125' 
-                : 'bg-white/50 hover:bg-white/75'
-            }`}
-            aria-label={`Go to slide ${index + 1}`}
-          />
-        ))}
-      </div>
-
-      {/* Play/Pause Button */}
-      <button
-        onClick={() => setIsPlaying(!isPlaying)}
-        className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300 hover:scale-110"
-        aria-label={isPlaying ? "Pause slideshow" : "Play slideshow"}
-      >
-        {isPlaying ? (
-          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
-          </svg>
-        ) : (
-          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
-          </svg>
-        )}
-      </button>
-
-      {/* Progress Bar */}
-      <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
-        <div 
-          className="h-full bg-gradient-to-r from-yellow-400 to-red-500 transition-all duration-100"
-          style={{
-            width: `${((currentSlide + 1) / slides.length) * 100}%`
-          }}
-        />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/components/HeroSection.astro b/src/components/HeroSection.astro
new file mode 100644
index 0000000..847beca
--- /dev/null
+++ b/src/components/HeroSection.astro
@@ -0,0 +1,34 @@
+---
+import '../styles/main.css';
+// Hero section for homepage
+---
+<section class="hero">
+  <div class="floating-element floating-1"></div>
+  <div class="floating-element floating-2"></div>
+  <div class="floating-element floating-3"></div>
+  <div class="hero-content">
+    <h1 class="hero-title">
+      <span class="hero-title-shine">Welcome to<br/>
+      Omoluabi Association</span>
+    </h1>
+    <p class="hero-subtitle">
+      <strong>Bridging cultures, Building communities</strong><br/>
+      Supporting Nigerians in the Netherlands with unity, heritage, and hope
+    </p>
+    <div class="hero-symbols">
+      <span>🇳🇬</span>
+      <span style="color: #f59e0b;">•</span>
+      <span>🤝</span>
+      <span style="color: #f59e0b;">•</span>
+      <span>🇳🇱</span>
+    </div>
+    <div class="hero-cta">
+      <a href="/join" class="btn" style="background: white; color: #16a34a; padding: 1rem 2rem; font-size: 1.125rem;">
+        👥 Join Our Community
+      </a>
+      <a href="/events" class="btn btn-outline" style="padding: 1rem 2rem; font-size: 1.125rem;">
+        📅 View Events
+      </a>
+    </div>
+  </div>
+</section> 
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 94f51c9..21a5432 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -7,7 +7,7 @@ import Footer from '../components/Footer.astro';
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Omoluabi Foundation</title>
+    <title>Omoluabi Association</title>
     <meta name="description" content="Supporting Nigerians in the Netherlands" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 9101a34..c463465 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,12 +1,14 @@
 ---
-// About page for Omoluabi Foundation with modern design
+// About page for Omoluabi Association with modern design
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 ---
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>About - Omoluabi Foundation</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" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -25,137 +27,6 @@
       line-height: 1.6;
     }
 
-    /* Header Styles */
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 50;
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      border-bottom: 1px solid rgba(229, 229, 229, 0.5);
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-
-    .header-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 1rem 2rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      text-decoration: none;
-      color: inherit;
-    }
-
-    .logo-icon {
-      width: 3rem;
-      height: 3rem;
-      border-radius: 50%;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: bold;
-      font-size: 1.25rem;
-      position: relative;
-    }
-
-    .logo-icon::after {
-      content: '';
-      position: absolute;
-      top: -2px;
-      right: -2px;
-      width: 1rem;
-      height: 1rem;
-      background: #f59e0b;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-
-    .logo-text {
-      font-family: 'Poppins', sans-serif;
-      font-size: 1.5rem;
-      font-weight: 700;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .nav {
-      display: flex;
-      gap: 2rem;
-    }
-
-    .nav-link {
-      text-decoration: none;
-      color: #374151;
-      font-weight: 500;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      transition: all 0.3s ease;
-      position: relative;
-    }
-
-    .nav-link:hover {
-      color: #16a34a;
-      background: rgba(22, 163, 74, 0.1);
-    }
-
-    .nav-link.active {
-      color: #16a34a;
-      background: rgba(22, 163, 74, 0.1);
-    }
-
-    .nav-link.active::after {
-      content: '';
-      position: absolute;
-      bottom: -0.5rem;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0.5rem;
-      height: 0.5rem;
-      background: #16a34a;
-      border-radius: 50%;
-    }
-
-    .btn {
-      padding: 0.75rem 1.5rem;
-      border-radius: 8px;
-      font-weight: 600;
-      text-decoration: none;
-      border: none;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .btn-primary {
-      background: #16a34a;
-      color: white;
-    }
-
-    .btn-secondary {
-      background: #f59e0b;
-      color: white;
-    }
-
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-    }
-
     /* Main Content */
     .main-content {
       padding-top: 5rem;
@@ -202,39 +73,21 @@
       animation: textShine 20s linear infinite;
     }
 
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      margin-bottom: 1rem;
-      font-size: 1rem;
-    }
-
-    .breadcrumb-link {
-      color: rgba(255, 255, 255, 0.8);
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-
-    .breadcrumb-link:hover {
-      color: white;
-    }
-
-    .breadcrumb-separator {
-      color: rgba(255, 255, 255, 0.6);
-    }
-
     .page-subtitle {
       font-size: 1.25rem;
       opacity: 0.9;
-      max-width: 42rem;
+      max-width: 600px;
       margin: 0 auto;
     }
 
-    /* Section Styles */
-    .section {
-      padding: 5rem 2rem;
+    @keyframes textShine {
+      0% { background-position: 0% 50%; }
+      100% { background-position: 100% 50%; }
+    }
+
+    /* Content Sections */
+    .content-section {
+      padding: 4rem 2rem;
     }
 
     .container {
@@ -248,791 +101,517 @@
       font-weight: 700;
       text-align: center;
       margin-bottom: 1rem;
-      color: #111827;
+      color: #16a34a;
     }
 
     .section-subtitle {
-      font-size: 1.25rem;
-      color: #6b7280;
+      font-size: 1.125rem;
       text-align: center;
-      max-width: 42rem;
-      margin: 0 auto 3rem;
-    }
-
-    .section-divider {
-      width: 6rem;
-      height: 0.25rem;
-      background: linear-gradient(to right, #16a34a, #f59e0b);
-      border-radius: 25px;
-      margin: 0 auto 3rem;
-    }
-
-    /* About Grid */
-    .about-grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 4rem;
-      align-items: center;
-    }
-
-    .about-content {
-      background: white;
-      padding: 3rem;
-      border-radius: 1.5rem;
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-      position: relative;
-    }
-
-    .about-content::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      background: linear-gradient(45deg, #16a34a, #f59e0b, #dc2626);
-      border-radius: 1.5rem;
-      z-index: -1;
-    }
-
-    .about-content h2 {
-      font-family: 'Poppins', sans-serif;
-      font-size: 2.5rem;
-      font-weight: 700;
-      color: #16a34a;
-      margin-bottom: 2rem;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-
-    .decorative-line {
-      width: 0.5rem;
-      height: 3rem;
-      background: linear-gradient(to bottom, #16a34a, #f59e0b);
-      border-radius: 25px;
-    }
-
-    /* Principles Grid */
-    .principles-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 2rem;
-      margin: 3rem 0;
-    }
-
-    .principle-card {
-      background: white;
-      padding: 2rem;
-      border-radius: 1rem;
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-      transition: all 0.3s ease;
-      border-left: 4px solid transparent;
-    }
-
-    .principle-card:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-    }
-
-    .principle-card:nth-child(1) {
-      border-left-color: #16a34a;
-    }
-
-    .principle-card:nth-child(2) {
-      border-left-color: #f59e0b;
-    }
-
-    .principle-card:nth-child(3) {
-      border-left-color: #dc2626;
-    }
-
-    .principle-card:nth-child(4) {
-      border-left-color: #8b5cf6;
-    }
-
-    .principle-card:nth-child(5) {
-      border-left-color: #2563eb;
-    }
-
-    .principle-card:nth-child(6) {
-      border-left-color: #059669;
-    }
-
-    .principle-icon {
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-      display: block;
-    }
-
-    .principle-title {
-      font-size: 1.25rem;
-      font-weight: 700;
-      margin-bottom: 0.75rem;
-      color: #111827;
-    }
-
-    .principle-text {
       color: #6b7280;
-      line-height: 1.6;
+      margin-bottom: 3rem;
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
     }
 
-    /* Stats Grid */
-    .stats-grid {
+    /* Mission & Vision */
+    .mission-vision-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 2rem;
-      margin: 3rem 0;
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+      margin-bottom: 4rem;
     }
 
-    .stat-card {
+    .mission-card, .vision-card {
       background: white;
-      padding: 2rem;
+      padding: 2.5rem;
       border-radius: 1rem;
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
       text-align: center;
-      transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
     }
 
-    .stat-card::before {
+    .mission-card::before, .vision-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
-      background: linear-gradient(to right, #16a34a, #f59e0b);
     }
 
-    .stat-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+    .mission-card::before {
+      background: linear-gradient(90deg, #16a34a, #f59e0b);
     }
 
-    .stat-number {
-      font-size: 2.5rem;
+    .vision-card::before {
+      background: linear-gradient(90deg, #f59e0b, #dc2626);
+    }
+
+    .card-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+    }
+
+    .card-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.5rem;
       font-weight: 700;
-      color: #16a34a;
-      margin-bottom: 0.5rem;
+      margin-bottom: 1rem;
+      color: #111827;
     }
 
-    .stat-label {
+    .card-content {
       color: #6b7280;
-      font-weight: 500;
+      line-height: 1.7;
     }
 
-    /* Identity List */
-    .identity-list {
+    /* Values Section */
+    .values-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 1rem;
-      margin: 2rem 0;
-    }
-
-    .identity-item {
-      background: rgba(22, 163, 74, 0.1);
-      padding: 1rem 1.5rem;
-      border-radius: 0.75rem;
-      border-left: 4px solid #16a34a;
-      transition: all 0.3s ease;
-    }
-
-    .identity-item:hover {
-      background: rgba(22, 163, 74, 0.15);
-      transform: translateX(0.5rem);
-    }
-
-    .identity-item:nth-child(even) {
-      background: rgba(245, 158, 11, 0.1);
-      border-left-color: #f59e0b;
-    }
-
-    .identity-item:nth-child(even):hover {
-      background: rgba(245, 158, 11, 0.15);
-    }
-
-    .identity-item strong {
-      color: #111827;
-      font-weight: 600;
-    }
-
-    .identity-item span {
-      color: #6b7280;
-      font-size: 0.875rem;
-    }
-
-    /* Members Section */
-    .members-section {
-      background: linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%);
-    }
-
-    .members-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 2rem;
+      margin-bottom: 4rem;
     }
 
-    .member-card {
+    .value-card {
+      background: white;
+      padding: 2rem;
+      border-radius: 1rem;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    .value-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+    }
+
+    .value-icon {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .value-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.75rem;
+      color: #111827;
+    }
+
+    .value-description {
+      color: #6b7280;
+      line-height: 1.6;
+    }
+
+    /* Team Section */
+    .team-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-bottom: 4rem;
+    }
+
+    .team-member {
       background: white;
       border-radius: 1rem;
       overflow: hidden;
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-      transition: all 0.3s ease;
-      position: relative;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
     }
 
-    .member-card:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+    .team-member:hover {
+      transform: translateY(-5px);
     }
 
     .member-image {
       width: 100%;
       height: 200px;
       object-fit: cover;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
     }
 
-    .member-content {
+    .member-info {
       padding: 1.5rem;
-    }
-
-    .member-name {
-      font-size: 1.125rem;
-      font-weight: 700;
-      color: #111827;
-      margin-bottom: 0.5rem;
-    }
-
-    .member-role {
-      color: #6b7280;
-      font-size: 0.875rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .member-badge {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      background: rgba(22, 163, 74, 0.9);
-      color: white;
-      padding: 0.25rem 0.75rem;
-      border-radius: 15px;
-      font-size: 0.75rem;
-      font-weight: 600;
-    }
-
-    /* Footer */
-    .footer {
-      background: linear-gradient(135deg, #111827, #1f2937);
-      color: white;
-      padding: 3rem 2rem 1rem;
       text-align: center;
     }
 
-    .footer-content {
-      max-width: 1200px;
+    .member-name {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: #111827;
+    }
+
+    .member-role {
+      color: #16a34a;
+      font-weight: 500;
+      margin-bottom: 0.75rem;
+    }
+
+    .member-bio {
+      color: #6b7280;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    /* Stats Section */
+    .stats-section {
+      background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%);
+      color: white;
+      padding: 4rem 2rem;
+      text-align: center;
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 2rem;
+      max-width: 800px;
       margin: 0 auto;
     }
 
-    .footer-logo {
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-number {
       font-family: 'Poppins', sans-serif;
-      font-size: 2rem;
+      font-size: 3rem;
+      font-weight: 800;
+      margin-bottom: 0.5rem;
+      display: block;
+    }
+
+    .stat-label {
+      font-size: 1.125rem;
+      opacity: 0.9;
+    }
+
+    /* Timeline */
+    .timeline {
+      position: relative;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .timeline::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: #e5e7eb;
+      transform: translateX(-50%);
+    }
+
+    .timeline-item {
+      position: relative;
+      margin-bottom: 3rem;
+    }
+
+    .timeline-item:nth-child(odd) .timeline-content {
+      margin-left: 0;
+      margin-right: 50%;
+      padding-right: 2rem;
+      text-align: right;
+    }
+
+    .timeline-item:nth-child(even) .timeline-content {
+      margin-left: 50%;
+      margin-right: 0;
+      padding-left: 2rem;
+      text-align: left;
+    }
+
+    .timeline-dot {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 1rem;
+      height: 1rem;
+      background: #16a34a;
+      border-radius: 50%;
+      transform: translateX(-50%);
+      border: 3px solid white;
+      box-shadow: 0 0 0 3px #e5e7eb;
+    }
+
+    .timeline-content {
+      background: white;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .timeline-year {
       font-weight: 700;
-      margin-bottom: 1rem;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .footer-text {
-      color: #9ca3af;
-      margin-bottom: 2rem;
-    }
-
-    .footer-nav {
-      display: flex;
-      justify-content: center;
-      gap: 2rem;
-      margin-bottom: 2rem;
-    }
-
-    .footer-link {
-      color: #d1d5db;
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-
-    .footer-link:hover {
       color: #16a34a;
+      margin-bottom: 0.5rem;
     }
 
-    .footer-bottom {
-      border-top: 1px solid #374151;
-      padding-top: 2rem;
+    .timeline-title {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: #111827;
+    }
+
+    .timeline-description {
       color: #6b7280;
+      font-size: 0.875rem;
     }
 
-    /* Animations */
-    @keyframes textShine {
-      0% { background-position: -200% center; }
-      100% { background-position: 200% center; }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .page-title {
+        font-size: 2.5rem;
+      }
+
+      .mission-vision-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+      }
+
+      .timeline::before {
+        left: 1rem;
+      }
+
+      .timeline-item:nth-child(odd) .timeline-content,
+      .timeline-item:nth-child(even) .timeline-content {
+        margin-left: 3rem;
+        margin-right: 0;
+        padding-left: 1rem;
+        padding-right: 0;
+        text-align: left;
+      }
+
+      .timeline-dot {
+        left: 1rem;
+      }
     }
 
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
     }
-
-    @keyframes bounce {
-      0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
-      40%, 43% { transform: translateY(-10px); }
-      70% { transform: translateY(-5px); }
-      90% { transform: translateY(-2px); }
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-10px); }
-    }
-
-    /* Responsive */
-    @media (min-width: 768px) {
-      .about-grid {
-        grid-template-columns: 1fr 1fr;
-      }
-      
-      .nav {
-        display: flex;
-      }
-      
-      .page-title {
-        font-size: 4rem;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .nav {
-        display: none;
-      }
-      
-      .page-title {
-        font-size: 2.5rem;
-      }
-      
-      .section {
-        padding: 3rem 1rem;
-      }
-      
-      .main-content {
-        padding-top: 4rem;
-      }
-      
-      .about-content {
-        padding: 2rem;
-      }
-      
-      .about-content h2 {
-        font-size: 2rem;
-      }
-    }
   </style>
 </head>
 <body>
-  <!-- Header -->
-  <header class="header">
-    <div class="header-content">
-      <a href="/" class="logo">
-        <div class="logo-icon">O</div>
-        <div>
-          <div class="logo-text">Omoluabi</div>
-          <div style="font-size: 0.875rem; color: #6b7280; margin-top: -0.25rem;">Foundation</div>
-        </div>
-      </a>
-      
-      <nav class="nav">
-        <a href="/" class="nav-link">Home</a>
-        <a href="/events" class="nav-link">Events</a>
-        <a href="/members" class="nav-link">Members</a>
-        <a href="/about" class="nav-link active">About</a>
-        <a href="/contact" class="nav-link">Contact</a>
-      </nav>
-      
-      <div style="display: flex; gap: 0.5rem;">
-        <a href="/donate" class="btn btn-secondary">❤️ Donate</a>
-        <a href="/join" class="btn btn-primary">👥 Join</a>
-      </div>
-    </div>
-  </header>
+  <Header />
 
   <!-- Main Content -->
   <main class="main-content">
     <!-- Page Header -->
-    <section class="page-header">
+    <header class="page-header">
       <div class="page-header-content">
-        <div class="breadcrumb">
-          <a href="/" class="breadcrumb-link">🏠 Home</a>
-          <span class="breadcrumb-separator">•</span>
-          <span>About</span>
-        </div>
-        <h1 class="page-title">About Us</h1>
-        <p class="page-subtitle">
-          Discover the rich heritage and noble mission of the Omoluabi Association in the Netherlands
-        </p>
+        <h1 class="page-title">About Omoluabi</h1>
+        <p class="page-subtitle">Discover our story, mission, and the values that drive our community forward</p>
       </div>
-    </section>
+    </header>
 
-    <!-- Main About Section -->
-    <section class="section">
+    <!-- Mission & Vision -->
+    <section class="content-section">
       <div class="container">
-        <div class="about-grid">
-          <div class="about-content">
-            <h2>
-              <div class="decorative-line"></div>
-              OMOLUABI ASSOCIATION IN THE NETHERLANDS (OAN)
-            </h2>
-            
-            <div style="color: #374151; line-height: 1.7; font-size: 1.125rem;">
-              <p style="margin-bottom: 1.5rem; font-weight: 500;">
-                The <strong style="color: #16a34a;">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 style="margin-bottom: 1.5rem;">
-                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 style="margin-bottom: 2rem;">
-                The OMOLUABI association of The Netherlands was established on <strong style="color: #f59e0b;">May 1st, 2018</strong> by well-bred, dignifying, and unique personalities that live across the Royal Kingdom of The Netherlands.
-              </p>
-              
-              <div style="background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(245, 158, 11, 0.1)); padding: 2rem; border-radius: 1rem; border-left: 4px solid #16a34a;">
-                <p style="font-style: italic; color: #374151; margin: 0;">
-                  "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="stats-grid">
-              <div class="stat-card">
-                <div class="stat-number">2018</div>
-                <div class="stat-label">Established</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number">500+</div>
-                <div class="stat-label">Members</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number">50+</div>
-                <div class="stat-label">Events Held</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number">€50K+</div>
-                <div class="stat-label">Raised for Charity</div>
-              </div>
-            </div>
+        <div class="mission-vision-grid">
+          <div class="mission-card">
+            <div class="card-icon">🎯</div>
+            <h2 class="card-title">Our Mission</h2>
+            <p class="card-content">
+              To promote and preserve Yoruba cultural heritage while fostering unity, education, and community development among Nigerians in the Netherlands and beyond.
+            </p>
           </div>
-
-          <div style="position: relative;">
-            <img src="/images/whoAreWe.webp" alt="Omoluabi Association Members" style="
-              width: 100%;
-              height: 400px;
-              object-fit: cover;
-              border-radius: 1.5rem;
-              box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-            " />
-            <div style="
-              position: absolute;
-              top: -1.5rem;
-              right: -1.5rem;
-              background: #16a34a;
-              color: white;
-              padding: 0.75rem 1.5rem;
-              border-radius: 25px;
-              font-weight: 700;
-              box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
-              animation: bounce 2s ease-in-out infinite;
-            ">
-              Est. 2018
-            </div>
+          <div class="vision-card">
+            <div class="card-icon">🌟</div>
+            <h2 class="card-title">Our Vision</h2>
+            <p class="card-content">
+              To be the leading cultural organization that bridges Nigerian heritage with Dutch society, creating a vibrant, inclusive community that celebrates diversity and mutual understanding.
+            </p>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- WHO ARE WE Section -->
-    <section class="section" style="background: white;">
+    <!-- Core Values -->
+    <section class="content-section" style="background: #f9fafb;">
       <div class="container">
-        <div style="text-align: center; margin-bottom: 3rem;">
-          <h2 class="section-title">
-            <span style="color: #16a34a;">Who</span> Are We?
-          </h2>
-          <p class="section-subtitle">
-            Understanding the meaning and values behind the name "Omoluabi"
-          </p>
-          <div class="section-divider"></div>
-        </div>
-
-        <div style="background: linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%); padding: 3rem; border-radius: 1.5rem; margin-bottom: 3rem;">
-          <div style="text-align: center; margin-bottom: 2rem;">
-            <h3 style="font-size: 1.75rem; font-weight: 700; color: #16a34a; margin-bottom: 1rem;">
-              🌟 The Meaning of "Omoluabi"
-            </h3>
-            <p style="font-size: 1.25rem; color: #374151; line-height: 1.6;">
-              Omoluabi is a Yoruba word that signifies <strong style="color: #f59e0b;">"WELL BRED INDIVIDUAL"</strong> (Omtrent het gedrag)
-            </p>
-          </div>
-
-          <div style="color: #374151; line-height: 1.7; font-size: 1.125rem;">
-            <p style="margin-bottom: 1.5rem;">
-              This choice of name was unilaterally agreed upon by all our members to bear as an association. The attributes associated with this dignifying name represent the core values we uphold and embody in our daily lives.
-            </p>
-          </div>
-        </div>
-
-        <div>
-          <h3 style="font-size: 1.75rem; font-weight: 700; color: #16a34a; margin-bottom: 2rem; text-align: center;">
-            Our Fundamental Identities
-          </h3>
-          <div class="identity-list">
-            <div class="identity-item">
-              <strong>Ọ̀rọ̀ sísọ</strong> <span>(Careful spoken words)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Ìtẹríba</strong> <span>(Respect)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Irera eni sile</strong> <span>(Humility)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Inú rere</strong> <span>(Think good about others)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Òtítọ́</strong> <span>(Truth)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Ìwà</strong> <span>(Good character)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Akínkanjú</strong> <span>(Bravery)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Isẹ́ sísẹ</strong> <span>(Hard working)</span>
-            </div>
-            <div class="identity-item">
-              <strong>Ọpọlọ pípé</strong> <span>(Highly intelligent)</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Mission & Vision Section -->
-    <section class="section members-section">
-      <div class="container">
-        <div style="text-align: center; margin-bottom: 4rem;">
-          <h2 class="section-title">
-            Our <span style="color: #16a34a;">Mission</span> & <span style="color: #f59e0b;">Vision</span>
-          </h2>
-          <div class="section-divider"></div>
-        </div>
-
-        <div class="principles-grid">
-          <div class="principle-card">
-            <span class="principle-icon">🎯</span>
-            <h3 class="principle-title">Motto</h3>
-            <p class="principle-text">
-              To promote, enhance and exhibit the Yoruba cultural heritage globally with a starting point in The Netherlands.
-            </p>
-          </div>
-
-          <div class="principle-card">
-            <span class="principle-icon">🤝</span>
-            <h3 class="principle-title">Aims and Objectives</h3>
-            <p class="principle-text">
-              To promote and defend our traditions, values, norms and culture in the western world.
-            </p>
-          </div>
-
-          <div class="principle-card">
-            <span class="principle-icon">❤️</span>
-            <h3 class="principle-title">Our Mission</h3>
-            <p class="principle-text">
-              To cherish, uphold, and project the honor and dignity of Yoruba culture, language and tradition in Africa and Diaspora.
-            </p>
-          </div>
-
-          <div class="principle-card">
-            <span class="principle-icon">💡</span>
-            <h3 class="principle-title">Our Vision</h3>
-            <p class="principle-text">
-              To harmonize all resources and strength of our people towards development (cultural, social and economical).
-            </p>
-          </div>
-
-          <div class="principle-card">
-            <span class="principle-icon">🎭</span>
-            <h3 class="principle-title">Activities</h3>
-            <p class="principle-text">
-              Promoting cultural heritage, cultural development of Yoruba land, and teaching our children local languages (Yoruba).
-            </p>
-          </div>
-
-          <div class="principle-card">
-            <span class="principle-icon">🗣️</span>
-            <h3 class="principle-title">Slogan</h3>
-            <p class="principle-text">
-              "ASA WAA! TIWA N TIWA A WA GAN GAN LAWA, WON KO NI FI ELO MIRAN SE WA"
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Leadership Section -->
-    <section class="section" style="background: white;">
-      <div class="container">
-        <div style="text-align: center; margin-bottom: 4rem;">
-          <h2 class="section-title">
-            Meet Our <span style="color: #16a34a;">Leadership</span>
-          </h2>
-          <p class="section-subtitle">
-            Dedicated leaders guiding our community with wisdom and vision
-          </p>
-          <div class="section-divider"></div>
-        </div>
-
-        <div class="members-grid">
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">Convener</div>
-            <div class="member-content">
-              <h3 class="member-name">Chief (Mrs) Elisabeth Dara King</h3>
-              <p class="member-role">Convener & Founder</p>
-            </div>
-          </div>
-
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">Coordinator</div>
-            <div class="member-content">
-              <h3 class="member-name">Omoluabi Bashorun Micheal Oladosu</h3>
-              <p class="member-role">Coordinator</p>
-            </div>
-          </div>
-
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">Secretary</div>
-            <div class="member-content">
-              <h3 class="member-name">Omoluabi Engr Kayode O. Opadola</h3>
-              <p class="member-role">Secretary</p>
-            </div>
-          </div>
-
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">General Secretary</div>
-            <div class="member-content">
-              <h3 class="member-name">Omoluabi Otunba Bambo T. O Larry</h3>
-              <p class="member-role">General Secretary</p>
-            </div>
-          </div>
-
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">Member</div>
-            <div class="member-content">
-              <h3 class="member-name">Omoluabi Ogedengbe Oluwagbemiga Dada</h3>
-              <p class="member-role">Member</p>
-            </div>
-          </div>
-
-          <div class="member-card">
-            <div class="member-image"></div>
-            <div class="member-badge">Media Director</div>
-            <div class="member-content">
-              <h3 class="member-name">Omoluabi Omoba Johnson Adesida</h3>
-              <p class="member-role">Media Director</p>
-            </div>
-          </div>
-        </div>
-
-        <div style="text-align: center; margin-top: 3rem;">
-          <a href="/members" style="
-            background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%);
-            color: white;
-            padding: 1rem 2rem;
-            border-radius: 12px;
-            font-weight: 600;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 15px 35px rgba(22, 163, 74, 0.3);
-            transition: all 0.3s ease;
-          " onmouseover="this.style.transform='translateY(-3px) scale(1.05)'; this.style.boxShadow='0 20px 45px rgba(22, 163, 74, 0.4)'"
-             onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 15px 35px rgba(22, 163, 74, 0.3)'">
-            👥 View All Members
-            <span style="font-size: 0.875rem; opacity: 0.9;">→</span>
-          </a>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA Section -->
-    <section class="section" style="background: linear-gradient(135deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%); color: white; text-align: center; position: relative; overflow: hidden;">
-      <div style="position: absolute; top: 2.5rem; left: 2.5rem; width: 8rem; height: 8rem; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 6s ease-in-out infinite;"></div>
-      <div style="position: absolute; bottom: 2.5rem; right: 2.5rem; width: 6rem; height: 6rem; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; animation-delay: 1s;"></div>
-      
-      <div class="container" style="position: relative; z-index: 10;">
-        <h2 style="font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2;">
-          Ready to Join Our <span style="color: rgba(255,255,255,0.9);">Community</span>?
-        </h2>
+        <h2 class="section-title">Our Core Values</h2>
+        <p class="section-subtitle">The principles that guide everything we do</p>
         
-        <p style="font-size: 1.25rem; margin-bottom: 2rem; color: rgba(255,255,255,0.9); line-height: 1.6; max-width: 48rem; margin-left: auto; margin-right: auto;">
-          Become part of a vibrant community dedicated to preserving Nigerian culture and building stronger connections in the Netherlands.
-        </p>
+        <div class="values-grid">
+          <div class="value-card">
+            <div class="value-icon">🤝</div>
+            <h3 class="value-title">Unity</h3>
+            <p class="value-description">Bringing people together across cultures, backgrounds, and experiences to build stronger communities.</p>
+          </div>
+          <div class="value-card">
+            <div class="value-icon">🏛️</div>
+            <h3 class="value-title">Heritage</h3>
+            <p class="value-description">Preserving and celebrating our rich Yoruba cultural traditions and passing them to future generations.</p>
+          </div>
+          <div class="value-card">
+            <div class="value-icon">📚</div>
+            <h3 class="value-title">Education</h3>
+            <p class="value-description">Promoting learning and knowledge sharing about Nigerian culture, history, and contemporary issues.</p>
+          </div>
+          <div class="value-card">
+            <div class="value-icon">❤️</div>
+            <h3 class="value-title">Service</h3>
+            <p class="value-description">Serving our community through charitable activities, support programs, and cultural initiatives.</p>
+          </div>
+          <div class="value-card">
+            <div class="value-icon">🌍</div>
+            <h3 class="value-title">Inclusivity</h3>
+            <p class="value-description">Welcoming all who share our values, regardless of ethnicity, religion, or background.</p>
+          </div>
+          <div class="value-card">
+            <div class="value-icon">🚀</div>
+            <h3 class="value-title">Innovation</h3>
+            <p class="value-description">Embracing new ideas and approaches to cultural preservation and community building.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Our Story -->
+    <section class="content-section">
+      <div class="container">
+        <h2 class="section-title">Our Story</h2>
+        <p class="section-subtitle">From humble beginnings to a thriving community</p>
         
-        <div style="display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center;">
-          <a href="/join" class="btn" style="background: white; color: #16a34a; padding: 1rem 2rem; font-weight: 700; font-size: 1.125rem; box-shadow: 0 25px 50px rgba(0,0,0,0.25);">
-            👥 Join Us Today
-          </a>
-          <a href="/contact" class="btn" style="background: transparent; color: white; border: 2px solid white; padding: 1rem 2rem; font-weight: 700; font-size: 1.125rem;">
-            📞 Contact Us
-          </a>
+        <div class="timeline">
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2018</div>
+              <h3 class="timeline-title">Association Established</h3>
+              <p class="timeline-description">A group of passionate Nigerians came together to form the Omoluabi Association, with the vision of preserving Yoruba culture in the Netherlands.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2019</div>
+              <h3 class="timeline-title">First Cultural Festival</h3>
+              <p class="timeline-description">Successfully organized our first major cultural event, bringing together over 200 community members to celebrate Nigerian heritage.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2020</div>
+              <h3 class="timeline-title">Community Support Programs</h3>
+              <p class="timeline-description">Launched various support programs for Nigerian families, including language classes, cultural workshops, and community outreach.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2021</div>
+              <h3 class="timeline-title">Partnership Expansion</h3>
+              <p class="timeline-description">Formed partnerships with Dutch cultural organizations and educational institutions to promote cross-cultural understanding.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2022</div>
+              <h3 class="timeline-title">Youth Programs Launch</h3>
+              <p class="timeline-description">Introduced specialized programs for Nigerian youth, including mentorship, career guidance, and cultural identity workshops.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2023</div>
+              <h3 class="timeline-title">International Recognition</h3>
+              <p class="timeline-description">Received recognition from the Nigerian Embassy and Dutch cultural organizations for our contributions to community development.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <div class="timeline-year">2024</div>
+              <h3 class="timeline-title">Future Forward</h3>
+              <p class="timeline-description">Continuing to grow and expand our programs, with plans for a cultural center and enhanced educational initiatives.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Impact Stats -->
+    <section class="stats-section">
+      <div class="container">
+        <h2 class="section-title" style="color: white; margin-bottom: 3rem;">Our Impact</h2>
+        <div class="stats-grid">
+          <div class="stat-item">
+            <span class="stat-number">500+</span>
+            <div class="stat-label">Community Members</div>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">50+</span>
+            <div class="stat-label">Events Organized</div>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">1000+</span>
+            <div class="stat-label">Lives Touched</div>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">6</span>
+            <div class="stat-label">Years of Service</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Leadership Team -->
+    <section class="content-section" style="background: #f9fafb;">
+      <div class="container">
+        <h2 class="section-title">Our Leadership Team</h2>
+        <p class="section-subtitle">Meet the dedicated individuals guiding our organization</p>
+        
+        <div class="team-grid">
+          <div class="team-member">
+            <img src="/images/members/member1.jpg" alt="President" class="member-image" />
+            <div class="member-info">
+              <h3 class="member-name">Chief Adebayo Ogunlesi</h3>
+              <div class="member-role">President & Founder</div>
+              <p class="member-bio">A passionate advocate for Nigerian culture with over 20 years of experience in community development and cultural preservation.</p>
+            </div>
+          </div>
+          <div class="team-member">
+            <img src="/images/members/member2.jpg" alt="Vice President" class="member-image" />
+            <div class="member-info">
+              <h3 class="member-name">Dr. Folake Adebayo</h3>
+              <div class="member-role">Vice President</div>
+              <p class="member-bio">An educator and cultural scholar dedicated to promoting Nigerian heritage through educational programs and community engagement.</p>
+            </div>
+          </div>
+          <div class="team-member">
+            <img src="/images/members/member3.jpg" alt="Secretary" class="member-image" />
+            <div class="member-info">
+              <h3 class="member-name">Mrs. Bisi Johnson</h3>
+              <div class="member-role">General Secretary</div>
+              <p class="member-bio">A community organizer with expertise in event planning and cultural programming, ensuring smooth operations of all activities.</p>
+            </div>
+          </div>
+          <div class="team-member">
+            <img src="/images/members/member4.jpg" alt="Treasurer" class="member-image" />
+            <div class="member-info">
+              <h3 class="member-name">Mr. Tunde Williams</h3>
+              <div class="member-role">Treasurer</div>
+              <p class="member-bio">A financial professional committed to ensuring transparency and proper management of the association's resources.</p>
+            </div>
+          </div>
         </div>
       </div>
     </section>
   </main>
 
-  <!-- Footer -->
-  <footer class="footer">
-    <div class="footer-content">
-      <div class="footer-logo">Omoluabi Foundation</div>
-      <p class="footer-text">Supporting Nigerians in the Netherlands with unity, heritage, and hope</p>
-      
-      <nav class="footer-nav">
-        <a href="/events" class="footer-link">Events</a>
-        <a href="/members" class="footer-link">Members</a>
-        <a href="/about" class="footer-link">About</a>
-        <a href="/contact" class="footer-link">Contact</a>
-      </nav>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2024 Omoluabi Foundation Netherlands. Made with ❤️ for the Nigerian community.</p>
-        <p style="font-style: italic; margin-top: 1rem; color: #9ca3af;">
-          "Omoluabi ni wa" - We are people of good character
-        </p>
-        <div style="margin-top: 0.5rem;">
-          <span style="color: #16a34a;">🌟</span>
-          <span style="color: #f59e0b;">🌟</span>
-          <span style="color: #dc2626;">🌟</span>
-        </div>
-      </div>
-    </div>
-  </footer>
+  <Footer />
 </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 8fe946f..85ec952 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,9 +1,9 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import ContactForm from '../components/ContactForm.jsx';
+import ContactForm from '../components/ContactForm.astro';
 ---
 <BaseLayout>
   <h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Contact Us</h1>
   <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>
-  <ContactForm client:load />
+  <ContactForm />
 </BaseLayout> 
\ No newline at end of file
diff --git a/src/pages/events.astro b/src/pages/events.astro
index 688e27f..3e0cfd9 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -1,27 +1,447 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+// Events page for Omoluabi Association
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+// Get all event files
 const events = await Astro.glob('../../content/events/*.md');
-const sortedEvents = events.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
+const sortedEvents = events.sort((a: any, b: any) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+
+// Separate upcoming and past events
+const now = new Date();
+const upcomingEvents = sortedEvents.filter((event: any) => new Date(event.frontmatter.date).getTime() >= now.getTime());
+const pastEvents = sortedEvents.filter((event: any) => new Date(event.frontmatter.date).getTime() < now.getTime());
 ---
-<BaseLayout>
-  <h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Events</h1>
-  <p class="mt-4 text-center">See our upcoming and past events below.</p>
-  <section class="max-w-5xl mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 gap-8 px-4">
-    {sortedEvents.map(event => (
-      <article class="card bg-base-100 shadow-lg">
-        <figure>
-          <img src={event.frontmatter.image} alt={event.frontmatter.title} class="w-full h-48 object-cover" />
-        </figure>
-        <div class="card-body">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="badge badge-secondary">{event.frontmatter.category}</span>
-            <span class="text-xs text-gray-500">{new Date(event.frontmatter.date).toLocaleDateString()}</span>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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" />
+  <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>
+    * {
+      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;
+    }
+
+    /* Page Header */
+    .page-header {
+      background: linear-gradient(135deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%);
+      color: white;
+      padding: 4rem 2rem;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .page-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      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.05'%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");
+      pointer-events: none;
+    }
+
+    .page-header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      position: relative;
+      z-index: 10;
+    }
+
+    .page-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 3.5rem;
+      font-weight: 800;
+      margin-bottom: 1rem;
+      background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
+      background-size: 300% auto;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textShine 4s linear infinite;
+    }
+
+    .page-subtitle {
+      font-size: 1.25rem;
+      opacity: 0.9;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    @keyframes textShine {
+      0% { background-position: 0% 50%; }
+      100% { background-position: 100% 50%; }
+    }
+
+    /* Content Sections */
+    .content-section {
+      padding: 4rem 2rem;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .section-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 2.5rem;
+      font-weight: 700;
+      text-align: center;
+      margin-bottom: 1rem;
+      color: #16a34a;
+    }
+
+    .section-subtitle {
+      font-size: 1.125rem;
+      text-align: center;
+      color: #6b7280;
+      margin-bottom: 3rem;
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    /* Events Grid */
+    .events-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 2rem;
+      margin-bottom: 4rem;
+    }
+
+    .event-card {
+      background: white;
+      border-radius: 1rem;
+      overflow: hidden;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      position: relative;
+    }
+
+    .event-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+    }
+
+    .event-image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      background: linear-gradient(45deg, #16a34a, #f59e0b);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 3rem;
+    }
+
+    .event-badge {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: #f59e0b;
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      font-weight: 600;
+      font-size: 0.875rem;
+    }
+
+    .event-badge.upcoming {
+      background: #16a34a;
+    }
+
+    .event-badge.past {
+      background: #6b7280;
+    }
+
+    .event-content {
+      padding: 1.5rem;
+    }
+
+    .event-meta {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .event-category {
+      background: rgba(22, 163, 74, 0.1);
+      color: #16a34a;
+      padding: 0.25rem 0.75rem;
+      border-radius: 15px;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .event-date {
+      color: #6b7280;
+      font-size: 0.875rem;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .event-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.75rem;
+      color: #111827;
+      line-height: 1.3;
+    }
+
+    .event-description {
+      color: #6b7280;
+      margin-bottom: 1rem;
+      line-height: 1.6;
+    }
+
+    .event-details {
+      background: #f9fafb;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .event-detail {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-size: 0.875rem;
+      color: #374151;
+    }
+
+    .event-detail:last-child {
+      margin-bottom: 0;
+    }
+
+    .event-detail-icon {
+      color: #16a34a;
+      font-size: 1rem;
+    }
+
+    .event-content-full {
+      color: #6b7280;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e5e7eb;
+    }
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: 4rem 2rem;
+      background: white;
+      border-radius: 1rem;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    }
+
+    .empty-icon {
+      font-size: 4rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+
+    .empty-title {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: #374151;
+    }
+
+    .empty-description {
+      color: #6b7280;
+      margin-bottom: 2rem;
+    }
+
+    .cta-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      background: linear-gradient(45deg, #16a34a, #f59e0b);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .cta-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .page-title {
+        font-size: 2.5rem;
+      }
+
+      .events-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+
+      .content-section {
+        padding: 2rem 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <Header />
+
+  <!-- Main Content -->
+  <main>
+    <!-- Page Header -->
+    <header class="page-header">
+      <div class="page-header-content">
+        <h1 class="page-title">Our Events</h1>
+        <p class="page-subtitle">Join us for cultural celebrations, community gatherings, and special programs</p>
+      </div>
+    </header>
+
+    <!-- Upcoming Events -->
+    <section class="content-section">
+      <div class="container">
+        <h2 class="section-title">Upcoming Events</h2>
+        <p class="section-subtitle">Mark your calendar for these exciting upcoming events</p>
+        
+        {upcomingEvents.length > 0 ? (
+          <div class="events-grid">
+            {upcomingEvents.map((event: any) => (
+              <article class="event-card">
+                <div class="event-badge upcoming">Upcoming</div>
+                <div class="event-image">
+                  📅
+                </div>
+                <div class="event-content">
+                  <div class="event-meta">
+                    <span class="event-category">{event.frontmatter.category}</span>
+                    <span class="event-date">
+                      📅 {new Date(event.frontmatter.date).toLocaleDateString('en-US', { 
+                        weekday: 'long', 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric' 
+                      })}
+                    </span>
+                  </div>
+                  <h3 class="event-title">{event.frontmatter.title}</h3>
+                  <p class="event-description">{event.frontmatter.description}</p>
+                  <div class="event-content-full">
+                    {event.compiledContent()}
+                  </div>
+                </div>
+              </article>
+            ))}
           </div>
-          <h2 class="card-title text-lg font-bold">{event.frontmatter.title}</h2>
-          <p class="text-sm mb-2">{event.frontmatter.description}</p>
-          <div class="text-xs text-gray-400">{event.compiledContent()}</div>
+        ) : (
+          <div class="empty-state">
+            <div class="empty-icon">📅</div>
+            <h3 class="empty-title">No Upcoming Events</h3>
+            <p class="empty-description">We're currently planning our next events. Check back soon or contact us to stay updated!</p>
+            <a href="/contact" class="cta-button">
+              📞 Contact Us
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+
+    <!-- Past Events -->
+    <section class="content-section" style="background: #f9fafb;">
+      <div class="container">
+        <h2 class="section-title">Past Events</h2>
+        <p class="section-subtitle">Relive the memories of our previous successful events</p>
+        
+        {pastEvents.length > 0 ? (
+          <div class="events-grid">
+            {pastEvents.map((event: any) => (
+              <article class="event-card">
+                <div class="event-badge past">Past Event</div>
+                <div class="event-image">
+                  🎉
+                </div>
+                <div class="event-content">
+                  <div class="event-meta">
+                    <span class="event-category">{event.frontmatter.category}</span>
+                    <span class="event-date">
+                      📅 {new Date(event.frontmatter.date).toLocaleDateString('en-US', { 
+                        weekday: 'long', 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric' 
+                      })}
+                    </span>
+                  </div>
+                  <h3 class="event-title">{event.frontmatter.title}</h3>
+                  <p class="event-description">{event.frontmatter.description}</p>
+                  <div class="event-content-full">
+                    {event.compiledContent()}
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div class="empty-state">
+            <div class="empty-icon">📚</div>
+            <h3 class="empty-title">No Past Events</h3>
+            <p class="empty-description">This is where we'll showcase our past events and achievements.</p>
+          </div>
+        )}
+      </div>
+    </section>
+
+    <!-- Call to Action -->
+    <section class="content-section" style="background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%); color: white; text-align: center;">
+      <div class="container">
+        <h2 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;">
+          Want to Stay Updated?
+        </h2>
+        <p style="font-size: 1.125rem; margin-bottom: 2rem; opacity: 0.9;">
+          Join our community to receive updates about upcoming events and cultural activities
+        </p>
+        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+          <a href="/join" class="cta-button" style="background: white; color: #16a34a;">
+            👥 Join Our Community
+          </a>
+          <a href="/contact" class="cta-button" style="background: transparent; color: white; border: 2px solid white;">
+            📞 Contact Us
+          </a>
         </div>
-      </article>
-    ))}
-  </section>
-</BaseLayout> 
\ No newline at end of file
+      </div>
+    </section>
+  </main>
+
+  <Footer />
+</body>
+</html> 
\ No newline at end of file
diff --git a/src/pages/home.astro b/src/pages/home.astro
new file mode 100644
index 0000000..4eb58ed
--- /dev/null
+++ b/src/pages/home.astro
@@ -0,0 +1,47 @@
+---
+// Standalone homepage with no external dependencies
+import '../styles/main.css';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import HeroSection from '../components/HeroSection.astro';
+import AboutSection from '../components/AboutSection.astro';
+import EventsSection from '../components/EventsSection.astro';
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Omoluabi Association</title>
+  <meta name="description" content="Supporting Nigerians in the Netherlands" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <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>
+<body>
+  <Header />
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <HeroSection />
+    <AboutSection />
+    <EventsSection />
+  </main>
+
+  <Footer />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 925d685..04d0310 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,1413 +1,8 @@
 ---
-// Standalone homepage with no external dependencies
+// Redirect to home page
 ---
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Omoluabi Association</title>
-  <meta name="description" content="Supporting Nigerians in the Netherlands" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <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;
-    }
-
-    /* Header Styles */
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 50;
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      border-bottom: 1px solid rgba(229, 229, 229, 0.5);
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-
-    .header-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 1rem 2rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      text-decoration: none;
-      color: inherit;
-    }
-
-    .logo-icon {
-      width: 3rem;
-      height: 3rem;
-      border-radius: 50%;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: bold;
-      font-size: 1.25rem;
-      position: relative;
-    }
-
-    .logo-icon::after {
-      content: '';
-      position: absolute;
-      top: -2px;
-      right: -2px;
-      width: 1rem;
-      height: 1rem;
-      background: #f59e0b;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-
-    .logo-text {
-      font-family: 'Poppins', sans-serif;
-      font-size: 1.5rem;
-      font-weight: 700;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .nav {
-      display: flex;
-      gap: 2rem;
-    }
-
-    .nav-link {
-      text-decoration: none;
-      color: #374151;
-      font-weight: 500;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      transition: all 0.3s ease;
-    }
-
-    .nav-link:hover {
-      color: #16a34a;
-      background: rgba(22, 163, 74, 0.1);
-    }
-
-    .btn {
-      padding: 0.75rem 1.5rem;
-      border-radius: 8px;
-      font-weight: 600;
-      text-decoration: none;
-      border: none;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .btn-primary {
-      background: #16a34a;
-      color: white;
-    }
-
-    .btn-secondary {
-      background: #f59e0b;
-      color: white;
-    }
-
-    .btn-outline {
-      background: transparent;
-      color: white;
-      border: 2px solid white;
-    }
-
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-    }
-
-    /* Main Content */
-    .main-content {
-      padding-top: 5rem;
-    }
-
-    /* Hero Section */
-    .hero {
-      min-height: 100vh;
-      background: linear-gradient(135deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-      color: white;
-      text-align: center;
-    }
-
-    .hero::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      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.05'%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");
-      pointer-events: none;
-    }
-
-    .floating-element {
-      position: absolute;
-      border-radius: 50%;
-      animation: float 6s ease-in-out infinite;
-    }
-
-    .floating-1 {
-      top: 5rem;
-      left: 2.5rem;
-      width: 4rem;
-      height: 4rem;
-      background: rgba(245, 158, 11, 0.3);
-    }
-
-    .floating-2 {
-      top: 10rem;
-      right: 5rem;
-      width: 3rem;
-      height: 3rem;
-      background: rgba(220, 38, 38, 0.3);
-      animation-delay: 1s;
-    }
-
-    .floating-3 {
-      bottom: 8rem;
-      left: 25%;
-      width: 5rem;
-      height: 5rem;
-      background: rgba(37, 99, 235, 0.3);
-      animation-delay: 2s;
-    }
-
-    .hero-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 2rem;
-      position: relative;
-      z-index: 10;
-    }
-
-    .hero-title {
-      font-family: 'Poppins', sans-serif;
-      font-size: 4rem;
-      font-weight: 800;
-      margin-bottom: 1.5rem;
-      line-height: 1.1;
-    }
-
-    .hero-title-shine {
-      background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
-      background-size: 300% auto;
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      animation: textShine 20s linear infinite;
-      text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
-    }
-
-    .hero-subtitle {
-      font-size: 1.5rem;
-      margin-bottom: 2rem;
-      max-width: 48rem;
-      margin-left: auto;
-      margin-right: auto;
-      font-weight: 300;
-      line-height: 1.6;
-    }
-
-    .hero-symbols {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 3rem;
-      font-size: 2rem;
-    }
-
-    .hero-symbols span:nth-child(odd) {
-      animation: bounce 2s ease-in-out infinite;
-    }
-
-    .hero-symbols span:nth-child(2) {
-      animation-delay: 0.5s;
-    }
-
-    .hero-symbols span:nth-child(4) {
-      animation-delay: 1s;
-    }
-
-    .hero-cta {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Section Styles */
-    .section {
-      padding: 5rem 2rem;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    .section-title {
-      font-family: 'Poppins', sans-serif;
-      font-size: 2.5rem;
-      font-weight: 700;
-      text-align: center;
-      margin-bottom: 1rem;
-      color: #111827;
-    }
-
-    .section-subtitle {
-      font-size: 1.25rem;
-      color: #6b7280;
-      text-align: center;
-      max-width: 42rem;
-      margin: 0 auto 3rem;
-    }
-
-    .section-divider {
-      width: 6rem;
-      height: 0.25rem;
-      background: linear-gradient(to right, #16a34a, #f59e0b);
-      border-radius: 25px;
-      margin: 0 auto 3rem;
-    }
-
-    /* About Section */
-    .about-section {
-      background: linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%);
-      position: relative;
-    }
-
-    .about-grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 3rem;
-      align-items: center;
-    }
-
-    .about-image {
-      position: relative;
-    }
-
-    .about-image-frame {
-      position: absolute;
-      inset: -1rem;
-      background: linear-gradient(45deg, #f59e0b, #dc2626);
-      border-radius: 1rem;
-      transform: rotate(1deg);
-    }
-
-    .about-image-container {
-      position: relative;
-      background: white;
-      padding: 0.5rem;
-      border-radius: 1rem;
-      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-      transform: rotate(-1deg);
-      transition: transform 0.5s ease;
-    }
-
-    .about-image-container:hover {
-      transform: rotate(0deg);
-    }
-
-    .about-image img {
-      width: 100%;
-      height: 24rem;
-      object-fit: cover;
-      border-radius: 0.75rem;
-    }
-
-    .about-badge {
-      position: absolute;
-      top: -1.5rem;
-      right: -1.5rem;
-      background: #16a34a;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 25px;
-      font-weight: 700;
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-      animation: bounce 2s ease-in-out infinite;
-    }
-
-    .about-content h2 {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .about-line {
-      width: 0.5rem;
-      height: 3rem;
-      background: linear-gradient(to bottom, #16a34a, #f59e0b);
-      border-radius: 25px;
-    }
-
-    .about-stats {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1rem;
-      margin: 2rem 0;
-    }
-
-    .stat-card {
-      text-align: center;
-      padding: 1rem;
-      background: white;
-      border-radius: 0.75rem;
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-      transition: all 0.3s ease;
-    }
-
-    .stat-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-    }
-
-    .stat-number {
-      font-size: 1.5rem;
-      font-weight: 700;
-      margin-bottom: 0.25rem;
-    }
-
-    .stat-label {
-      font-size: 0.875rem;
-      color: #6b7280;
-    }
-
-    .badges {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.75rem;
-    }
-
-    .badge {
-      padding: 0.5rem 1rem;
-      border-radius: 20px;
-      font-weight: 600;
-      font-size: 0.875rem;
-      border: 1px solid;
-    }
-
-    .badge-green {
-      background: rgba(22, 163, 74, 0.1);
-      color: #16a34a;
-      border-color: rgba(22, 163, 74, 0.2);
-    }
-
-    .badge-gold {
-      background: rgba(245, 158, 11, 0.1);
-      color: #f59e0b;
-      border-color: rgba(245, 158, 11, 0.2);
-    }
-
-    .badge-red {
-      background: rgba(220, 38, 38, 0.1);
-      color: #dc2626;
-      border-color: rgba(220, 38, 38, 0.2);
-    }
-
-    .badge-blue {
-      background: rgba(37, 99, 235, 0.1);
-      color: #2563eb;
-      border-color: rgba(37, 99, 235, 0.2);
-    }
-
-    /* Footer */
-    .footer {
-      background: linear-gradient(135deg, #111827, #1f2937);
-      color: white;
-      padding: 3rem 2rem 1rem;
-      text-align: center;
-    }
-
-    .footer-content {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    .footer-logo {
-      font-family: 'Poppins', sans-serif;
-      font-size: 2rem;
-      font-weight: 700;
-      margin-bottom: 1rem;
-      background: linear-gradient(45deg, #16a34a, #f59e0b);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .footer-text {
-      color: #9ca3af;
-      margin-bottom: 2rem;
-    }
-
-    .footer-nav {
-      display: flex;
-      justify-content: center;
-      gap: 2rem;
-      margin-bottom: 2rem;
-    }
-
-    .footer-link {
-      color: #d1d5db;
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-
-    .footer-link:hover {
-      color: #16a34a;
-    }
-
-    .footer-bottom {
-      border-top: 1px solid #374151;
-      padding-top: 2rem;
-      color: #6b7280;
-    }
-
-    /* Animations */
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-10px); }
-    }
-
-    @keyframes textShine {
-      0% { background-position: -200% center; }
-      100% { background-position: 200% center; }
-    }
-
-    @keyframes bounce {
-      0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
-      40%, 43% { transform: translateY(-10px); }
-      70% { transform: translateY(-5px); }
-      90% { transform: translateY(-2px); }
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-
-    /* Responsive */
-    @media (min-width: 768px) {
-      .hero-title {
-        font-size: 5rem;
-      }
-      
-      .hero-cta {
-        flex-direction: row;
-      }
-      
-      .about-grid {
-        grid-template-columns: 1fr 1fr;
-      }
-      
-      .nav {
-        display: flex;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .nav {
-        display: none;
-      }
-      
-      .hero-title {
-        font-size: 2.5rem;
-      }
-      
-      .hero-subtitle {
-        font-size: 1.25rem;
-      }
-      
-      .section {
-        padding: 3rem 1rem;
-      }
-      
-      .main-content {
-        padding-top: 4rem;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- Header -->
-  <header class="header">
-    <div class="header-content">
-      <a href="/" class="logo">
-        <div class="logo-icon">O</div>
-        <div>
-          <div class="logo-text">Omoluabi</div>
-          <div style="font-size: 0.875rem; color: #6b7280; margin-top: -0.25rem;">Association</div>
-        </div>
-      </a>
-      
-      <nav class="nav">
-        <a href="/" class="nav-link">Home</a>
-        <a href="/events" class="nav-link">Events</a>
-        <a href="/members" class="nav-link">Members</a>
-        <a href="/orphanage" class="nav-link">Orphanage</a>
-        <a href="/contact" class="nav-link">Contact</a>
-      </nav>
-      
-      <div style="display: flex; gap: 0.5rem;">
-        <a href="/donate" class="btn btn-secondary">❤️ Donate</a>
-        <a href="/join" class="btn btn-primary">👥 Join</a>
-      </div>
-    </div>
-  </header>
-
-  <!-- Main Content -->
-  <main class="main-content">
-    <!-- Hero Section -->
-    <section class="hero">
-      <div class="floating-element floating-1"></div>
-      <div class="floating-element floating-2"></div>
-      <div class="floating-element floating-3"></div>
-      
-      <div class="hero-content">
-        <h1 class="hero-title">
-          <span class="hero-title-shine">Welcome to<br/>
-          Omoluabi Association</span>
-        </h1>
-        
-        <p class="hero-subtitle">
-          <strong>Bridging cultures, Building communities</strong><br/>
-          Supporting Nigerians in the Netherlands with unity, heritage, and hope
-        </p>
-
-        <div class="hero-symbols">
-          <span>🇳🇬</span>
-          <span style="color: #f59e0b;">•</span>
-          <span>🤝</span>
-          <span style="color: #f59e0b;">•</span>
-          <span>🇳🇱</span>
-        </div>
-
-        <div class="hero-cta">
-          <a href="/join" class="btn" style="background: white; color: #16a34a; padding: 1rem 2rem; font-size: 1.125rem;">
-            👥 Join Our Community
-          </a>
-          <a href="/events" class="btn btn-outline" style="padding: 1rem 2rem; font-size: 1.125rem;">
-            📅 View Events
-          </a>
-        </div>
-      </div>
-    </section>
-
-    <!-- About Section -->
-    <section class="section about-section">
-      <div class="container">
-        <div class="about-grid">
-          <div class="about-image">
-            <div class="about-image-frame"></div>
-            <div class="about-image-container">
-              <img src="/images/whoAreWe.webp" alt="About Omoluabi Association" />
-            </div>
-          </div>
-
-          <div class="about-content">
-            <h2 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 700; color: #16a34a; margin: 0;">
-              <div class="about-line"></div>
-              About Us
-            </h2>
-            
-            <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #16a34a; display: flex; align-items: center; gap: 0.5rem;">
-              <span style="font-size: 2rem;">🌟</span>
-              WHO ARE WE?
-            </h3>
-            
-            <div style="color: #374151; line-height: 1.6; margin-bottom: 2rem;">
-              <p style="font-size: 1.125rem; margin-bottom: 1rem;">
-                The <strong style="color: #16a34a;">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 style="margin-bottom: 1rem;">
-                Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building.
-              </p>
-              <p>
-                Our association is a non profit, non religious, non partisan, non ethnic 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 class="about-stats">
-              <div class="stat-card">
-                <div class="stat-number" style="color: #16a34a;">2018</div>
-                <div class="stat-label">Established</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number" style="color: #f59e0b;">500+</div>
-                <div class="stat-label">Members</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number" style="color: #dc2626;">50+</div>
-                <div class="stat-label">Events</div>
-              </div>
-            </div>
-
-            <div class="badges">
-              <span class="badge badge-green">Non-Profit</span>
-              <span class="badge badge-gold">Cultural Heritage</span>
-              <span class="badge badge-red">Community Focus</span>
-              <span class="badge badge-blue">Inclusive</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Events Section -->
-    <section class="section" style="background: white;">
-      <div class="container">
-        <div style="text-align: center; margin-bottom: 3rem;">
-          <h2 class="section-title">
-            Upcoming <span style="color: #16a34a;">Events</span>
-          </h2>
-          <p class="section-subtitle">
-            Join us in celebrating our rich cultural heritage and building stronger community bonds
-          </p>
-          <div class="section-divider"></div>
-        </div>
-
-        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
-          <!-- Featured Event (Large) -->
-          <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
-            <article style="
-              background: white;
-              border-radius: 1rem;
-              box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-              overflow: hidden;
-              transition: all 0.3s ease;
-              position: relative;
-              group: hover;
-            " onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 20px 40px rgba(0,0,0,0.15)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'">
-              <div style="position: relative;">
-                <img src="/images/placeholder-event1.jpg" alt="Nigerian Cultural Festival" style="
-                  width: 100%;
-                  height: 20rem;
-                  object-fit: cover;
-                " />
-                <div style="
-                  position: absolute;
-                  inset: 0;
-                  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
-                "></div>
-                <div style="
-                  position: absolute;
-                  top: 1rem;
-                  left: 1rem;
-                  background: #f59e0b;
-                  color: white;
-                  padding: 0.5rem 1rem;
-                  border-radius: 20px;
-                  font-weight: 600;
-                  font-size: 0.875rem;
-                ">
-                  Cultural Festival
-                </div>
-                <div style="
-                  position: absolute;
-                  top: 1rem;
-                  right: 1rem;
-                  background: rgba(255,255,255,0.9);
-                  color: #16a34a;
-                  padding: 0.5rem 1rem;
-                  border-radius: 20px;
-                  font-weight: 600;
-                  font-size: 0.875rem;
-                ">
-                  Dec 15, 2024
-                </div>
-              </div>
-              <div style="padding: 2rem;">
-                <h3 style="
-                  font-size: 1.5rem;
-                  font-weight: 700;
-                  margin-bottom: 0.75rem;
-                  color: #111827;
-                ">
-                  Nigerian Cultural Festival 2024
-                </h3>
-                <p style="color: #6b7280; margin-bottom: 1rem; line-height: 1.6;">
-                  Join us for a spectacular celebration of Nigerian culture featuring traditional music, dance, authentic cuisine, and art exhibitions. A perfect opportunity to connect with our heritage and community.
-                </p>
-                <div style="display: flex; align-items: center; justify-content: between; flex-wrap: wrap; gap: 1rem;">
-                  <div style="display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.875rem;">
-                    <span>📍</span>
-                    <span>Amsterdam Community Center</span>
-                  </div>
-                  <div style="display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.875rem;">
-                    <span>🕒</span>
-                    <span>14:00 - 22:00</span>
-                  </div>
-                  <button style="
-                    background: #16a34a;
-                    color: white;
-                    padding: 0.5rem 1rem;
-                    border-radius: 8px;
-                    border: none;
-                    font-weight: 600;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                    margin-left: auto;
-                  " onmouseover="this.style.background='#15803d'"
-                     onmouseout="this.style.background='#16a34a'">
-                    Learn More
-                  </button>
-                </div>
-              </div>
-            </article>
-          </div>
-
-          <!-- Smaller Events Grid -->
-          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
-            <!-- Event 2 -->
-            <article style="
-              background: white;
-              border-radius: 1rem;
-              box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-              overflow: hidden;
-              transition: all 0.3s ease;
-            " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.12)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'">
-              <div style="position: relative;">
-                <img src="/images/placeholder-event2.jpg" alt="Community Meetup" style="
-                  width: 100%;
-                  height: 12rem;
-                  object-fit: cover;
-                " />
-                <div style="
-                  position: absolute;
-                  top: 0.75rem;
-                  left: 0.75rem;
-                  background: #dc2626;
-                  color: white;
-                  padding: 0.25rem 0.75rem;
-                  border-radius: 15px;
-                  font-weight: 600;
-                  font-size: 0.75rem;
-                ">
-                  Community
-                </div>
-              </div>
-              <div style="padding: 1.5rem;">
-                <h4 style="
-                  font-size: 1.125rem;
-                  font-weight: 700;
-                  margin-bottom: 0.5rem;
-                  color: #111827;
-                ">
-                  Monthly Community Meetup
-                </h4>
-                <p style="color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.5;">
-                  Connect with fellow community members, share experiences, and discuss upcoming initiatives.
-                </p>
-                <div style="display: flex; align-items: center; justify-content: space-between;">
-                  <span style="
-                    font-size: 0.75rem;
-                    color: #9ca3af;
-                    display: flex;
-                    align-items: center;
-                    gap: 0.25rem;
-                  ">
-                    📅 Jan 20, 2025
-                  </span>
-                  <span style="
-                    background: rgba(22, 163, 74, 0.1);
-                    color: #16a34a;
-                    padding: 0.25rem 0.5rem;
-                    border-radius: 12px;
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                  ">
-                    Free
-                  </span>
-                </div>
-              </div>
-            </article>
-
-            <!-- Event 3 -->
-            <article style="
-              background: white;
-              border-radius: 1rem;
-              box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-              overflow: hidden;
-              transition: all 0.3s ease;
-            " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.12)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'">
-              <div style="position: relative;">
-                <img src="/images/placeholder-event3.jpg" alt="Youth Workshop" style="
-                  width: 100%;
-                  height: 12rem;
-                  object-fit: cover;
-                " />
-                <div style="
-                  position: absolute;
-                  top: 0.75rem;
-                  left: 0.75rem;
-                  background: #8b5cf6;
-                  color: white;
-                  padding: 0.25rem 0.75rem;
-                  border-radius: 15px;
-                  font-weight: 600;
-                  font-size: 0.75rem;
-                ">
-                  Workshop
-                </div>
-              </div>
-              <div style="padding: 1.5rem;">
-                <h4 style="
-                  font-size: 1.125rem;
-                  font-weight: 700;
-                  margin-bottom: 0.5rem;
-                  color: #111827;
-                ">
-                  Youth Leadership Workshop
-                </h4>
-                <p style="color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.5;">
-                  Empowering young Nigerian-Dutch leaders with skills, mentorship, and networking opportunities.
-                </p>
-                <div style="display: flex; align-items: center; justify-content: space-between;">
-                  <span style="
-                    font-size: 0.75rem;
-                    color: #9ca3af;
-                    display: flex;
-                    align-items: center;
-                    gap: 0.25rem;
-                  ">
-                    📅 Feb 8, 2025
-                  </span>
-                  <span style="
-                    background: rgba(139, 92, 246, 0.1);
-                    color: #8b5cf6;
-                    padding: 0.25rem 0.5rem;
-                    border-radius: 12px;
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                  ">
-                    €15
-                  </span>
-                </div>
-              </div>
-            </article>
-
-            <!-- Event 4 -->
-            <article style="
-              background: white;
-              border-radius: 1rem;
-              box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-              overflow: hidden;
-              transition: all 0.3s ease;
-            " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.12)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.1)'">
-              <div style="position: relative;">
-                <img src="/images/placeholder-event4.jpg" alt="Charity Fundraiser" style="
-                  width: 100%;
-                  height: 12rem;
-                  object-fit: cover;
-                " />
-                <div style="
-                  position: absolute;
-                  top: 0.75rem;
-                  left: 0.75rem;
-                  background: #f59e0b;
-                  color: white;
-                  padding: 0.25rem 0.75rem;
-                  border-radius: 15px;
-                  font-weight: 600;
-                  font-size: 0.75rem;
-                ">
-                  Fundraiser
-                </div>
-              </div>
-              <div style="padding: 1.5rem;">
-                <h4 style="
-                  font-size: 1.125rem;
-                  font-weight: 700;
-                  margin-bottom: 0.5rem;
-                  color: #111827;
-                ">
-                  Orphanage Support Fundraiser
-                </h4>
-                <p style="color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.5;">
-                  Help us raise funds for our partner orphanage in Nigeria. Every contribution makes a difference.
-                </p>
-                <div style="display: flex; align-items: center; justify-content: space-between;">
-                  <span style="
-                    font-size: 0.75rem;
-                    color: #9ca3af;
-                    display: flex;
-                    align-items: center;
-                    gap: 0.25rem;
-                  ">
-                    📅 Mar 3, 2025
-                  </span>
-                  <span style="
-                    background: rgba(245, 158, 11, 0.1);
-                    color: #f59e0b;
-                    padding: 0.25rem 0.5rem;
-                    border-radius: 12px;
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                  ">
-                    €25
-                  </span>
-                </div>
-              </div>
-            </article>
-          </div>
-
-          <!-- View All Events CTA -->
-          <div style="text-align: center; margin-top: 2rem;">
-            <a href="/events" style="
-              background: linear-gradient(135deg, #16a34a 0%, #f59e0b 100%);
-              color: white;
-              padding: 1rem 2rem;
-              border-radius: 12px;
-              font-weight: 600;
-              text-decoration: none;
-              display: inline-flex;
-              align-items: center;
-              gap: 0.5rem;
-              box-shadow: 0 10px 25px rgba(22, 163, 74, 0.3);
-              transition: all 0.3s ease;
-            " onmouseover="this.style.transform='translateY(-2px) scale(1.05)'; this.style.boxShadow='0 15px 35px rgba(22, 163, 74, 0.4)'"
-               onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 10px 25px rgba(22, 163, 74, 0.3)'">
-              <svg style="width: 1.25rem; height: 1.25rem;" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
-              </svg>
-              View All Events
-              <span style="font-size: 0.875rem; opacity: 0.9;">→</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Donation Section -->
-    <section class="section" style="background: linear-gradient(135deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%); color: white; text-align: center; position: relative; overflow: hidden;">
-      <div style="position: absolute; top: 2.5rem; left: 2.5rem; width: 8rem; height: 8rem; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 6s ease-in-out infinite;"></div>
-      <div style="position: absolute; bottom: 2.5rem; right: 2.5rem; width: 6rem; height: 6rem; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; animation-delay: 1s;"></div>
-      
-      <div class="container" style="position: relative; z-index: 10;">
-        <div style="display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem;">
-          <span style="font-size: 2.5rem;">❤️</span>
-          <h3 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Support Our Mission</h3>
-          <div style="display: flex; gap: 0.25rem;">
-            <span style="color: rgba(245, 158, 11, 0.8);">★</span>
-            <span style="color: rgba(245, 158, 11, 0.8);">★</span>
-            <span style="color: rgba(245, 158, 11, 0.8);">★</span>
-          </div>
-        </div>
-        
-        <h2 style="font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2;">
-          Make A Donation For Our Various 
-          <span style="color: rgba(245, 158, 11, 0.9);">Projects</span>
-        </h2>
-        
-        <p style="font-size: 1.25rem; margin-bottom: 2rem; color: rgba(255,255,255,0.9); line-height: 1.6; max-width: 48rem; margin-left: auto; margin-right: auto;">
-          Your generous contribution helps us preserve Nigerian culture, support community members, and create lasting impact in the Netherlands.
-        </p>
-        
-        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; max-width: 24rem; margin-left: auto; margin-right: auto;">
-          <div style="text-align: center; padding: 1rem; border-radius: 0.75rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);">
-            <div style="font-size: 1.5rem; font-weight: 700;">€50K+</div>
-            <div style="font-size: 0.875rem; opacity: 0.9;">Raised This Year</div>
-          </div>
-          <div style="text-align: center; padding: 1rem; border-radius: 0.75rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);">
-            <div style="font-size: 1.5rem; font-weight: 700;">200+</div>
-            <div style="font-size: 0.875rem; opacity: 0.9;">Families Helped</div>
-          </div>
-        </div>
-        
-        <a href="/donate" class="btn" style="background: white; color: #dc2626; padding: 1rem 2rem; font-weight: 700; font-size: 1.125rem; box-shadow: 0 25px 50px rgba(0,0,0,0.25);">
-          ❤️ DONATE NOW ✈️
-        </a>
-      </div>
-    </section>
-    </section>
-
-    <!-- Gallery Section -->
-    <section class="section" style="background: linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%);">
-      <div class="container">
-        <div style="text-align: center; margin-bottom: 4rem;">
-          <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem;">
-            <span style="color: #dc2626;">★</span>
-            <span style="color: #dc2626;">★</span>
-            <span style="color: #dc2626;">★</span>
-            <span style="color: #6b7280; font-weight: 600; font-size: 1.125rem;">Our Gallery</span>
-            <span style="color: #dc2626;">★</span>
-            <span style="color: #dc2626;">★</span>
-            <span style="color: #dc2626;">★</span>
-          </div>
-          <h2 class="section-title" style="margin-bottom: 1.5rem;">
-            <span style="color: #16a34a;">Photo</span>speak
-          </h2>
-          <p class="section-subtitle">
-            Capturing moments of joy, culture, and community through our lens
-          </p>
-          <div class="section-divider"></div>
-        </div>
-
-        <!-- Gallery Grid -->
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
-          <!-- Gallery Item 1 - Featured Large -->
-          <div style="grid-column: span 2; grid-row: span 2; position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15); transition: all 0.5s ease; cursor: pointer;"
-               onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 35px 70px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.15)'">
-            <img src="/images/gallery-featured.jpg" alt="Nigerian Cultural Festival" style="
-              width: 100%;
-              height: 100%;
-              min-height: 400px;
-              object-fit: cover;
-              transition: transform 0.5s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 50%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 2rem;
-              color: white;
-            ">
-              <div style="
-                background: #f59e0b;
-                color: white;
-                padding: 0.5rem 1rem;
-                border-radius: 20px;
-                font-weight: 600;
-                font-size: 0.875rem;
-                width: fit-content;
-                margin-bottom: 1rem;
-              ">
-                Cultural Festival 2024
-              </div>
-              <h3 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Celebrating Nigerian Heritage
-              </h3>
-              <p style="opacity: 0.9; font-size: 1rem;">
-                A spectacular showcase of traditional music, dance, and cultural exhibitions
-              </p>
-            </div>
-          </div>
-
-          <!-- Gallery Item 2 -->
-          <div style="position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;"
-               onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.1)'">
-            <img src="/images/gallery-1.jpg" alt="Community Gathering" style="
-              width: 100%;
-              height: 250px;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(22,163,74,0.8), transparent 60%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 1.5rem;
-              color: white;
-              opacity: 0;
-              transition: opacity 0.3s ease;
-            " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-              <h4 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Community Unity
-              </h4>
-              <p style="font-size: 0.875rem; opacity: 0.9;">
-                Building stronger bonds within our community
-              </p>
-            </div>
-            <div style="
-              position: absolute;
-              top: 1rem;
-              right: 1rem;
-              background: rgba(255,255,255,0.9);
-              padding: 0.5rem;
-              border-radius: 50%;
-              backdrop-filter: blur(10px);
-            ">
-              <svg style="width: 1rem; height: 1rem; color: #16a34a;" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-              </svg>
-            </div>
-          </div>
-
-          <!-- Gallery Item 3 -->
-          <div style="position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;"
-               onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.1)'">
-            <img src="/images/gallery-2.jpg" alt="Traditional Attire" style="
-              width: 100%;
-              height: 250px;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(245,158,11,0.8), transparent 60%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 1.5rem;
-              color: white;
-              opacity: 0;
-              transition: opacity 0.3s ease;
-            " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-              <h4 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Traditional Elegance
-              </h4>
-              <p style="font-size: 0.875rem; opacity: 0.9;">
-                Showcasing beautiful Nigerian traditional wear
-              </p>
-            </div>
-            <div style="
-              position: absolute;
-              top: 1rem;
-              right: 1rem;
-              background: rgba(255,255,255,0.9);
-              padding: 0.5rem;
-              border-radius: 50%;
-              backdrop-filter: blur(10px);
-            ">
-              <svg style="width: 1rem; height: 1rem; color: #f59e0b;" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-              </svg>
-            </div>
-          </div>
-
-          <!-- Gallery Item 4 -->
-          <div style="position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;"
-               onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.1)'">
-            <img src="/images/gallery-3.jpg" alt="Youth Activities" style="
-              width: 100%;
-              height: 250px;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(139,92,246,0.8), transparent 60%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 1.5rem;
-              color: white;
-              opacity: 0;
-              transition: opacity 0.3s ease;
-            " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-              <h4 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Youth Engagement
-              </h4>
-              <p style="font-size: 0.875rem; opacity: 0.9;">
-                Empowering the next generation of leaders
-              </p>
-            </div>
-            <div style="
-              position: absolute;
-              top: 1rem;
-              right: 1rem;
-              background: rgba(255,255,255,0.9);
-              padding: 0.5rem;
-              border-radius: 50%;
-              backdrop-filter: blur(10px);
-            ">
-              <svg style="width: 1rem; height: 1rem; color: #8b5cf6;" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-              </svg>
-            </div>
-          </div>
-
-          <!-- Gallery Item 5 -->
-          <div style="position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;"
-               onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.1)'">
-            <img src="/images/gallery-4.jpg" alt="Charity Work" style="
-              width: 100%;
-              height: 250px;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(220,38,38,0.8), transparent 60%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 1.5rem;
-              color: white;
-              opacity: 0;
-              transition: opacity 0.3s ease;
-            " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-              <h4 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Giving Back
-              </h4>
-              <p style="font-size: 0.875rem; opacity: 0.9;">
-                Supporting communities through charitable initiatives
-              </p>
-            </div>
-            <div style="
-              position: absolute;
-              top: 1rem;
-              right: 1rem;
-              background: rgba(255,255,255,0.9);
-              padding: 0.5rem;
-              border-radius: 50%;
-              backdrop-filter: blur(10px);
-            ">
-              <svg style="width: 1rem; height: 1rem; color: #dc2626;" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-              </svg>
-            </div>
-          </div>
-
-          <!-- Gallery Item 6 -->
-          <div style="position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;"
-               onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 25px 50px rgba(0,0,0,0.2)'"
-               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.1)'">
-            <img src="/images/gallery-5.jpg" alt="Leadership Meeting" style="
-              width: 100%;
-              height: 250px;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            " />
-            <div style="
-              position: absolute;
-              inset: 0;
-              background: linear-gradient(to top, rgba(37,99,235,0.8), transparent 60%);
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-              padding: 1.5rem;
-              color: white;
-              opacity: 0;
-              transition: opacity 0.3s ease;
-            " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-              <h4 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
-                Leadership
-              </h4>
-              <p style="font-size: 0.875rem; opacity: 0.9;">
-                Guiding our community with wisdom and vision
-              </p>
-            </div>
-            <div style="
-              position: absolute;
-              top: 1rem;
-              right: 1rem;
-              background: rgba(255,255,255,0.9);
-              padding: 0.5rem;
-              border-radius: 50%;
-              backdrop-filter: blur(10px);
-            ">
-              <svg style="width: 1rem; height: 1rem; color: #2563eb;" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <!-- View All Gallery CTA -->
-        <div style="text-align: center;">
-          <a href="/gallery" style="
-            background: linear-gradient(135deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%);
-            color: white;
-            padding: 1rem 2rem;
-            border-radius: 12px;
-            font-weight: 600;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 15px 35px rgba(22, 163, 74, 0.3);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-          " onmouseover="this.style.transform='translateY(-3px) scale(1.05)'; this.style.boxShadow='0 20px 45px rgba(22, 163, 74, 0.4)'"
-             onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 15px 35px rgba(22, 163, 74, 0.3)'">
-            <svg style="width: 1.25rem; height: 1.25rem;" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
-            </svg>
-            View Full Gallery
-            <span style="font-size: 0.875rem; opacity: 0.9;">📸</span>
-          </a>
-        </div>
-      </div>
-    </section>
-  </main>
-
-  <!-- Footer -->
-  <footer class="footer">
-    <div class="footer-content">
-      <div class="footer-logo">Omoluabi Association</div>
-      <p class="footer-text">Supporting Nigerians in the Netherlands with unity, heritage, and hope</p>
-      
-      <nav class="footer-nav">
-        <a href="/events" class="footer-link">Events</a>
-        <a href="/members" class="footer-link">Members</a>
-        <a href="/orphanage" class="footer-link">Orphanage</a>
-        <a href="/contact" class="footer-link">Contact</a>
-      </nav>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2024 Omoluabi Association Netherlands. Made with ❤️ for the Nigerian community.</p>
-        <p style="font-style: italic; margin-top: 1rem; color: #9ca3af;">
-          "Omoluabi ni wa" - We are people of good character
-        </p>
-        <div style="margin-top: 0.5rem;">
-          <span style="color: #16a34a;">🌟</span>
-          <span style="color: #f59e0b;">🌟</span>
-          <span style="color: #dc2626;">🌟</span>
-        </div>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
\ No newline at end of file
+<meta http-equiv="refresh" content="0; url=/home" />
+<script>
+  window.location.href = '/home';
+</script>
+<p>Redirecting to <a href="/home">home page</a>...</p> 
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index bf94e7b..88911d3 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,5 +1,315 @@
 /* Custom CSS for Omoluabi Foundation */
 
+/* Hero Section */
+.hero {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  color: white;
+  text-align: center;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  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.05'%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");
+  pointer-events: none;
+}
+
+.hero-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  position: relative;
+  z-index: 10;
+}
+
+.hero-title {
+  font-family: 'Poppins', sans-serif;
+  font-size: 4rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  line-height: 1.1;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: 300;
+  line-height: 1.6;
+}
+
+.hero-symbols {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 3rem;
+  font-size: 2rem;
+}
+
+.hero-symbols span:nth-child(odd) {
+  animation: bounce 2s ease-in-out infinite;
+}
+
+.hero-symbols span:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.hero-symbols span:nth-child(4) {
+  animation-delay: 1s;
+}
+
+.hero-cta {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Floating Elements */
+.floating-element {
+  position: absolute;
+  border-radius: 50%;
+  animation: float 6s ease-in-out infinite;
+}
+
+.floating-1 {
+  top: 5rem;
+  left: 2.5rem;
+  width: 4rem;
+  height: 4rem;
+  background: rgba(245, 158, 11, 0.3);
+}
+
+.floating-2 {
+  top: 10rem;
+  right: 5rem;
+  width: 3rem;
+  height: 3rem;
+  background: rgba(220, 38, 38, 0.3);
+  animation-delay: 1s;
+}
+
+.floating-3 {
+  bottom: 8rem;
+  left: 25%;
+  width: 5rem;
+  height: 5rem;
+  background: rgba(37, 99, 235, 0.3);
+  animation-delay: 2s;
+}
+
+/* Section Styles */
+.section {
+  padding: 5rem 2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-title {
+  font-family: 'Poppins', sans-serif;
+  font-size: 2.5rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: #111827;
+}
+
+.section-subtitle {
+  font-size: 1.25rem;
+  color: #6b7280;
+  text-align: center;
+  max-width: 42rem;
+  margin: 0 auto 3rem;
+}
+
+.section-divider {
+  width: 6rem;
+  height: 0.25rem;
+  background: linear-gradient(to right, #16a34a, #f59e0b);
+  border-radius: 25px;
+  margin: 0 auto 3rem;
+}
+
+/* About Section */
+.about-section {
+  background: linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%);
+  position: relative;
+}
+
+.about-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.about-image {
+  position: relative;
+}
+
+.about-image-frame {
+  position: absolute;
+  inset: -1rem;
+  background: linear-gradient(45deg, #f59e0b, #dc2626);
+  border-radius: 1rem;
+  transform: rotate(1deg);
+}
+
+.about-image-container {
+  position: relative;
+  background: white;
+  padding: 0.5rem;
+  border-radius: 1rem;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+  transform: rotate(-1deg);
+  transition: transform 0.5s ease;
+}
+
+.about-image-container:hover {
+  transform: rotate(0deg);
+}
+
+.about-image img {
+  width: 100%;
+  height: 24rem;
+  object-fit: cover;
+  border-radius: 0.75rem;
+}
+
+.about-line {
+  width: 0.5rem;
+  height: 3rem;
+  background: linear-gradient(to bottom, #16a34a, #f59e0b);
+  border-radius: 25px;
+}
+
+.about-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.stat-card {
+  text-align: center;
+  padding: 1rem;
+  background: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.stat-number {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.badge {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  border: 1px solid;
+}
+
+.badge-green {
+  background: rgba(22, 163, 74, 0.1);
+  color: #16a34a;
+  border-color: rgba(22, 163, 74, 0.2);
+}
+
+.badge-gold {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.badge-red {
+  background: rgba(220, 38, 38, 0.1);
+  color: #dc2626;
+  border-color: rgba(220, 38, 38, 0.2);
+}
+
+.badge-blue {
+  background: rgba(37, 99, 235, 0.1);
+  color: #2563eb;
+  border-color: rgba(37, 99, 235, 0.2);
+}
+
+/* Main Content */
+.main-content {
+  padding-top: 5rem;
+}
+
+/* Button Styles */
+.btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-primary {
+  background: #16a34a;
+  color: white;
+}
+
+.btn-secondary {
+  background: #f59e0b;
+  color: white;
+}
+
+.btn-outline {
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
 /* Hero Section Background Pattern */
 .hero-pattern {
     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.05'%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");
@@ -19,7 +329,7 @@
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: textShine 4s linear infinite;
+    animation: textShine 20s linear infinite;
     text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
   }
   
@@ -57,6 +367,21 @@
     }
   }
   
+  @keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40%, 43% {
+      transform: translateY(-10px);
+    }
+    70% {
+      transform: translateY(-5px);
+    }
+    90% {
+      transform: translateY(-2px);
+    }
+  }
+  
   @keyframes pulse {
     0%, 100% {
       opacity: 1;
@@ -341,4 +666,37 @@
     .text-gray-400 {
       color: #9ca3af;
     }
+  }
+  
+  /* Responsive Design */
+  @media (min-width: 768px) {
+    .hero-title {
+      font-size: 5rem;
+    }
+    
+    .hero-cta {
+      flex-direction: row;
+    }
+    
+    .about-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  
+  @media (max-width: 767px) {
+    .hero-title {
+      font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+      font-size: 1.25rem;
+    }
+    
+    .section {
+      padding: 3rem 1rem;
+    }
+    
+    .main-content {
+      padding-top: 4rem;
+    }
   }
\ No newline at end of file