diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 15aa943..8cbf3b9 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,5 +1,5 @@
 # Global — core team reviews everything by default
-* @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey @seth-mensah
+* @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
 
 # App directory — critical, needs at least 2 eyes
 /app/ @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
@@ -16,4 +16,4 @@ next.config.js @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
 /public/ @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
 
 # Docs
-/docs/ @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
\ No newline at end of file
+/docs/ @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey
diff --git a/docs/cta-button.md b/docs/cta-button.md
new file mode 100644
index 0000000..a3bef06
--- /dev/null
+++ b/docs/cta-button.md
@@ -0,0 +1,60 @@
+# CTA Button Documentation
+
+The `CtaButton` component (`src/components/ui/cta-button.tsx`) provides a highly customizable button component featuring the signature decorative "offset" background typical of the Codetopia design language.
+
+It is completely polymorphic, meaning it can render as a standard `<button>` or as any other component (like a Next.js `<Link>`) while retaining all its complex styling logic.
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `className` | `string` | `undefined` | Classes applied directly to the button element (foreground). You can pass standard Tailwind text and background colors here to easily reskin it. |
+| `offsetClassName` | `string` | `undefined` | Classes applied to the decorative offset div behind the button. Useful for changing the drop-shadow color or making it hidden on mobile. |
+| `wrapperClassName` | `string` | `undefined` | Space-separated CSS classes extending the parent `div` that wraps the offset element and the actual button. |
+| `asChild` | `boolean` | `false` | When true, passes the styles to its immediate child rather than rendering a `<button>`. Essential for creating styled text links instead of actual buttons. |
+
+## Usage Examples
+
+### Custom Styled Button
+You can quickly apply your own colors to the foreground block and the background offset block.
+```tsx
+import { CtaButton } from "@/components/ui/cta-button";
+
+<CtaButton 
+  className="bg-white text-black hover:bg-zinc-200"
+  offsetClassName="bg-zinc-700 hidden sm:block"
+>
+  JOIN OUR COMMUNITY
+</CtaButton>
+```
+
+### Using as a Next.js Link
+Because this component implements Radix UI's `Slot`, you can pass the `asChild` prop to render it as another component, such as a navigational `Link`, instead of a standard `button` element.
+```tsx
+import Link from "next/link";
+import { CtaButton } from "@/components/ui/cta-button";
+
+<CtaButton 
+  asChild 
+  className="bg-purple-600 text-white hover:bg-purple-700" 
+  offsetClassName="bg-purple-900"
+>
+  <Link href="/about">
+    READ MORE ABOUT US
+  </Link>
+</CtaButton>
+```
+
+### Complex Outlined Buttons
+You can use standard Tailwind classes to create borders and outlined variations of the CTA button since it is fully customizable through classes.
+```tsx
+import { CtaButton } from "@/components/ui/cta-button";
+
+<CtaButton
+  className="border-zinc-600 text-white hover:bg-zinc-900 border-[1px] sm:border-2 !bg-transparent border-solid !px-10"
+  offsetClassName="border-zinc-600 hidden sm:block"
+>
+  LEARN MORE
+</CtaButton>
+```
+
diff --git a/package.json b/package.json
index 2781a9d..1eb9165 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,15 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-auto-scroll": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7919ac1..f453efd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,15 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      embla-carousel-auto-scroll:
+        specifier: ^8.6.0
+        version: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-autoplay:
+        specifier: ^8.6.0
+        version: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.2.3)
       lucide-react:
         specifier: ^0.575.0
         version: 0.575.0(react@19.2.3)
@@ -29,6 +38,9 @@ importers:
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@19.2.3)
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.5.0
@@ -1670,6 +1682,29 @@ packages:
   electron-to-chromium@1.5.302:
     resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
 
+  embla-carousel-auto-scroll@8.6.0:
+    resolution: {integrity: sha512-WT9fWhNXFpbQ6kP+aS07oF5IHYLZ1Dx4DkwgCY8Hv2ZyYd2KMCPfMV1q/cA3wFGuLO7GMgKiySLX90/pQkcOdQ==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-autoplay@8.6.0:
+    resolution: {integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -2394,6 +2429,11 @@ packages:
     peerDependencies:
       react: ^19.2.3
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -4344,6 +4384,26 @@ snapshots:
 
   electron-to-chromium@1.5.302: {}
 
+  embla-carousel-auto-scroll@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-react@8.6.0(react@19.2.3):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.3
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
@@ -5052,6 +5112,10 @@ snapshots:
       react: 19.2.3
       scheduler: 0.27.0
 
+  react-icons@5.5.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.3):
     dependencies:
       react: 19.2.3
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..50c9195
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import logo from "@/assets/images/logos/codetopia-community.png";
+import { Container } from "@/components/layout/Container";
+
+export default function AboutPage() {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center py-24 md:py-32 bg-[#09090b]">
+      <Container className="flex flex-col items-center text-center px-4 max-w-4xl font-sans">
+        {/* Community Logo */}
+        <div className="mb-12">
+          <Image
+            src={logo}
+            alt="Codetopia Community"
+            width={400}
+            height={240}
+            priority
+            className="object-contain"
+          />
+        </div>
+
+        {/* Heading */}
+        <h1 className="text-3xl md:text-5xl lg:text-6xl font-black text-white tracking-tighter uppercase mb-10 leading-none">
+          ABOUT CODETOPIA COMMUNITY
+        </h1>
+
+        {/* Description */}
+        <p className="text-zinc-400 text-lg md:text-xl lg:text-2xl font-normal leading-relaxed max-w-3xl">
+          Launched in 2020 as <a href="https://codetopia.org/">Codetopia</a>
+          's first initiative, Codetopia Community has grown from a small group
+          of passionate developers into a thriving ecosystem of tech
+          professionals, students, and enthusiasts, united by a commitment to
+          collaborative learning and innovation.
+        </p>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index d234217..1d1a029 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,6 +9,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-space-grotesk);
   --font-mono: var(--font-inter);
+
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 92beb68..2c64999 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Space_Grotesk } from "next/font/google";
+import { ContributionBanner } from "@/components/layout/ContributionBanner";
+import { Footer } from "@/components/layout/Footer"; // Added import for Footer
 import { Header } from "@/components/layout/Header";
 import "./globals.css";
 
@@ -26,10 +28,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${spaceGrotesk.variable} ${inter.variable} antialiased min-h-screen bg-grey-900 flex flex-col`}
+        className={`${spaceGrotesk.variable} ${inter.variable} antialiased min-h-screen bg-[#09090b] text-white flex flex-col`}
       >
+        <ContributionBanner />
         <Header />
-        <main className="flex-1 w-full">{children}</main>
+        <main className="flex-1 w-full flex flex-col">{children}</main>
+        <Footer /> {/* Added Footer component */}
       </body>
     </html>
   );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..b138a10
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,45 @@
+import { MoveRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import logo from "@/assets/images/logos/codetopia-community.png";
+import { Container } from "@/components/layout/Container";
+import { CtaButton } from "@/components/ui/cta-button";
+
+export default function NotFound() {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center py-24 md:py-32 relative overflow-hidden bg-[#09090b]">
+      {/* Watermark Background */}
+      <div className="absolute inset-0 z-0 flex items-center justify-center pointer-events-none opacity-5">
+        <Image
+          src={logo}
+          alt="Codetopia Watermark"
+          className="w-[150%] max-w-none md:w-full object-cover"
+        />
+      </div>
+
+      <Container className="flex flex-col items-center justify-center text-center px-4 max-w-2xl font-sans relative z-10">
+        <h1 className="text-8xl md:text-[120px] font-black text-white tracking-tighter uppercase leading-none mb-6">
+          404
+        </h1>
+        <h2 className="text-2xl md:text-3xl font-bold text-zinc-200 mb-6 uppercase tracking-wider">
+          Page Not Found
+        </h2>
+        <p className="text-zinc-400 text-lg md:text-xl font-mono mb-12">
+          The page you are looking for does not exist or has been moved.
+        </p>
+
+        <Link href="/">
+          <CtaButton
+            className="bg-white text-black hover:bg-zinc-200 px-8"
+            offsetClassName="bg-zinc-700"
+          >
+            <span className="flex items-center">
+              RETURN HOME
+              <MoveRight className="ml-2 w-5 h-5" strokeWidth={2.5} />
+            </span>
+          </CtaButton>
+        </Link>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 877d830..f620ce5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,21 @@
-import { Container } from "@/components/layout/Container";
+import { CTA } from "@/components/home/CTA";
+import { Hero } from "@/components/home/Hero";
+import { Newsletter } from "@/components/home/Newsletter";
+// import { Organisations } from "@/components/home/Organisations";
+// import { OurImpact } from "@/components/home/OurImpact";
+import { Stats } from "@/components/home/Stats";
+import { WhatWeOffer } from "@/components/home/WhatWeOffer";
 
 export default function Home() {
   return (
-    <div className="w-full">
-      <section className="w-full">
-        <Container className="py-12">
-          <div className="text-white">Codetopia Is here again testing..</div>
-        </Container>
-      </section>
+    <div className="w-full flex flex-col">
+      <Hero />
+      {/* <Organisations /> */}
+      <Stats />
+      <WhatWeOffer />
+      {/* <OurImpact /> */}
+      <Newsletter />
+      <CTA />
     </div>
   );
 }
diff --git a/src/assets/images/django-girls.jpg b/src/assets/images/django-girls.jpg
new file mode 100644
index 0000000..bd7a009
Binary files /dev/null and b/src/assets/images/django-girls.jpg differ
diff --git a/src/assets/images/footer-bg.png b/src/assets/images/footer-bg.png
new file mode 100644
index 0000000..78a437d
Binary files /dev/null and b/src/assets/images/footer-bg.png differ
diff --git a/src/assets/images/hero-bg-image.jpg b/src/assets/images/hero-bg-image.jpg
new file mode 100644
index 0000000..8a0bb6b
Binary files /dev/null and b/src/assets/images/hero-bg-image.jpg differ
diff --git a/src/assets/images/logos/Codetopia-Logo-TW.png b/src/assets/images/logos/Codetopia-Logo-TW.png
deleted file mode 100644
index 10404ee..0000000
Binary files a/src/assets/images/logos/Codetopia-Logo-TW.png and /dev/null differ
diff --git a/src/assets/images/logos/articles-logo.png b/src/assets/images/logos/articles-logo.png
new file mode 100644
index 0000000..3bd7a77
Binary files /dev/null and b/src/assets/images/logos/articles-logo.png differ
diff --git a/src/assets/images/logos/codetopia-community.png b/src/assets/images/logos/codetopia-community.png
new file mode 100644
index 0000000..d577eb5
Binary files /dev/null and b/src/assets/images/logos/codetopia-community.png differ
diff --git a/src/assets/images/logos/community-logo.png b/src/assets/images/logos/community-logo.png
new file mode 100644
index 0000000..6518cb7
Binary files /dev/null and b/src/assets/images/logos/community-logo.png differ
diff --git a/src/assets/images/logos/events-logo.png b/src/assets/images/logos/events-logo.png
new file mode 100644
index 0000000..f1cb50c
Binary files /dev/null and b/src/assets/images/logos/events-logo.png differ
diff --git a/src/components/home/CTA.tsx b/src/components/home/CTA.tsx
new file mode 100644
index 0000000..a90570d
--- /dev/null
+++ b/src/components/home/CTA.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { CtaButton } from "@/components/ui/cta-button";
+
+export function CTA() {
+  return (
+    <section className="relative w-full py-24 md:py-32 bg-[#09090b] overflow-hidden flex flex-col items-center justify-center text-center">
+      {/* Brutalist Grid Background */}
+      <div
+        className="absolute inset-0 z-0 pointer-events-none opacity-[0.03]"
+        style={{
+          backgroundImage: `linear-gradient(to right, #ffffff 1px, transparent 1px),
+                               linear-gradient(to bottom, #ffffff 1px, transparent 1px)`,
+          backgroundSize: "40px 40px",
+        }}
+      />
+
+      <Container className="relative z-10 flex flex-col items-center max-w-4xl px-4 font-sans">
+        <h2 className="text-2xl md:text-4xl lg:text-5xl font-bold text-white mb-6 uppercase tracking-wider">
+          Ready to join our community
+        </h2>
+        <p className="text-zinc-300 text-base md:text-xl lg:text-2xl mb-12 max-w-3xl leading-relaxed">
+          Whether you're a beginner or an experienced developer, there's a place
+          for you in Codetopia Community. Start your journey today!
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-4 w-full sm:w-auto">
+          <CtaButton
+            asChild
+            className="bg-white text-black hover:bg-zinc-200"
+            offsetClassName="border-white"
+          >
+            <a
+              href="https://discord.gg/3nBFMfdNmB"
+              target="_blank"
+              rel="noreferrer"
+            >
+              JOIN OUR COMMUNITY
+            </a>
+          </CtaButton>
+          <CtaButton
+            asChild
+            className="bg-[#09090b] text-white border border-white hover:bg-zinc-900"
+            offsetClassName="border-white"
+          >
+            <Link href="/about">LEARN MORE</Link>
+          </CtaButton>
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
new file mode 100644
index 0000000..c8e9257
--- /dev/null
+++ b/src/components/home/Hero.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { MoveRight } from "lucide-react";
+import Link from "next/link";
+import heroBg from "@/assets/images/django-girls.jpg";
+import { Container } from "@/components/layout/Container";
+import { CtaButton } from "@/components/ui/cta-button";
+
+export function Hero() {
+  return (
+    <section className="relative w-full min-h-[calc(100vh-80px)] flex flex-col justify-center overflow-hidden">
+      {/* Background Image & Overlay */}
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
+        style={{ backgroundImage: `url('${heroBg.src}')` }}
+      >
+        {/* Dark Overlay */}
+        <div className="absolute inset-0 bg-[#09090b]/70" />
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 relative z-10 flex flex-col items-center justify-center text-center pt-20 pb-24">
+        <Container className="flex flex-col items-center justify-center">
+          <h1 className="text-4xl md:text-5xl lg:text-7xl xl:text-8xl font-black text-white tracking-tighter uppercase max-w-4xl lg:max-w-5xl xl:max-w-6xl leading-[1.05] font-sans">
+            WHERE BUILDERS GROW, <br className="hidden md:block" /> COLLABORATE,
+            AND LEAD
+          </h1>
+          <p className="mt-8 text-lg md:text-xl xl:text-2xl text-zinc-400 max-w-3xl font-medium font-mono leading-relaxed">
+            A community where developers and technologists learn together,
+            collaborate, and grow.
+          </p>
+
+          <div className="mt-10 flex flex-col sm:flex-row items-center gap-8 md:gap-6 w-full sm:w-auto">
+            <CtaButton
+              asChild
+              className="bg-white text-black hover:bg-zinc-200"
+              offsetClassName="border-white"
+            >
+              <a
+                href="https://discord.gg/3nBFMfdNmB"
+                target="_blank"
+                rel="noreferrer"
+              >
+                JOIN OUR COMMUNITY
+              </a>
+            </CtaButton>
+            <CtaButton
+              asChild
+              className="bg-transparent border-white text-white hover:bg-white/10 border"
+              offsetClassName="border-white mix-blend-overlay"
+            >
+              <Link href="/about">
+                LEARN MORE{" "}
+                <MoveRight className="ml-2 w-5 h-5" strokeWidth={2.5} />
+              </Link>
+            </CtaButton>
+          </div>
+        </Container>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/Newsletter.tsx b/src/components/home/Newsletter.tsx
new file mode 100644
index 0000000..eadda61
--- /dev/null
+++ b/src/components/home/Newsletter.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Container } from "@/components/layout/Container";
+import { CtaButton } from "@/components/ui/cta-button";
+
+export function Newsletter() {
+  return (
+    <section className="w-full py-10 md:py-20 bg-[#e4e4e7] flex justify-center items-center">
+      <Container className="px-4 w-full flex justify-center">
+        <div className="w-full max-w-7xl bg-[#18181b] p-8 py-12 md:p-16 lg:p-24 flex flex-col items-center text-center shadow-2xl">
+          <h2 className="text-white text-2xl md:text-3xl lg:text-4xl font-bold uppercase tracking-wider mb-4 md:mb-6 font-sans">
+            Codetopia Newsletters
+          </h2>
+          <p className="text-zinc-400 text-sm md:text-base lg:text-lg font-mono max-w-2xl mb-8 md:mb-12 px-2">
+            Subscribe to our newsletter to get updates on upcoming events, new
+            articles, and community announcements delivered straight to your
+            inbox.
+          </p>
+
+          <form
+            className="flex flex-col sm:flex-row items-stretch sm:items-center w-full max-w-xl gap-4 sm:gap-0"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <input
+              type="email"
+              placeholder="Enter your email address"
+              className="flex-1 w-full bg-zinc-900 text-white px-6 py-5 h-14 sm:h-16 outline-none font-mono text-sm border border-zinc-700/50 rounded-none placeholder:text-zinc-600 focus:border-zinc-500 transition-colors"
+              required
+            />
+            <div className="w-full sm:w-auto mt-2 sm:mt-0 sm:ml-4">
+              <CtaButton
+                type="submit"
+                className="bg-[#18181b] text-white border-white hover:bg-zinc-900"
+                offsetClassName="border-white"
+              >
+                Subscribe
+              </CtaButton>
+            </div>
+          </form>
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/home/Organisations.tsx b/src/components/home/Organisations.tsx
new file mode 100644
index 0000000..6829cb6
--- /dev/null
+++ b/src/components/home/Organisations.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import Image from "next/image";
+import { type Organisation, organisations } from "@/lib/data/partners";
+
+const sponsors = organisations.filter((o) => o.type === "sponsor");
+const partners = organisations.filter((o) => o.type === "partner");
+const workedWith = organisations.filter((o) => o.type === "worked-with");
+
+function OrgLogo({ org }: { org: Organisation }) {
+  return (
+    <div className="group/logo flex items-center justify-center grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-500 cursor-pointer px-6 md:px-12 shrink-0">
+      <Image
+        src={org.logo}
+        alt={org.name}
+        width={160}
+        height={72}
+        className="h-14 w-auto object-contain"
+        unoptimized
+      />
+    </div>
+  );
+}
+
+function OrgStrip({ items }: { items: Organisation[] }) {
+  // 1–4 items: static single-line row, centered
+  if (items.length < 5) {
+    return (
+      <div className="flex justify-center items-center gap-4 md:gap-12 flex-nowrap w-full py-4 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+        {items.map((org) => (
+          <OrgLogo key={org.id} org={org} />
+        ))}
+      </div>
+    );
+  }
+
+  // 5+ items: CSS marquee — duplicate once, animate translateX(-50%)
+  return (
+    <div className="w-full overflow-hidden">
+      <div
+        role="marquee"
+        className="flex items-center w-max"
+        style={{
+          animation: "marquee 25s linear infinite",
+          willChange: "transform",
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLDivElement).style.animationPlayState =
+            "paused";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLDivElement).style.animationPlayState =
+            "running";
+        }}
+      >
+        {/* 2 copies is enough for a seamless loop with translateX(-50%) */}
+        {[...items, ...items].map((org, i) => (
+          <OrgLogo key={`${org.id}-${i}`} org={org} />
+        ))}
+      </div>
+      <style>{`
+        @keyframes marquee {
+          from { transform: translateX(0); }
+          to   { transform: translateX(-50%); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function SubSection({
+  title,
+  items,
+}: {
+  title: string;
+  items: Organisation[];
+}) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="w-full flex flex-col items-center mb-14 last:mb-0">
+      <h3 className="text-white text-sm font-bold tracking-[0.25em] mb-6 uppercase text-center font-sans opacity-50">
+        {title}
+      </h3>
+      <OrgStrip items={items} />
+    </div>
+  );
+}
+
+export function Organisations() {
+  return (
+    <section className="w-full py-14 bg-[#09090b] border-b-4 border-zinc-800 flex flex-col items-center overflow-hidden">
+      <SubSection title="Sponsors" items={sponsors} />
+      <SubSection title="Partners" items={partners} />
+      <SubSection title="Organisations We've Worked With" items={workedWith} />
+    </section>
+  );
+}
diff --git a/src/components/home/OurImpact.tsx b/src/components/home/OurImpact.tsx
new file mode 100644
index 0000000..fb171e4
--- /dev/null
+++ b/src/components/home/OurImpact.tsx
@@ -0,0 +1,332 @@
+"use client";
+
+import {
+  Calendar,
+  Image as ImageIcon,
+  MapPin,
+  MoveRight,
+  PlayCircle,
+} from "lucide-react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import logo from "@/assets/images/logos/codetopia-community.png";
+import { Container } from "@/components/layout/Container";
+import { CtaButton } from "@/components/ui/cta-button";
+import { impactStories } from "@/lib/data/impact-stories";
+
+function getYouTubeEmbedUrl(url: string) {
+  if (!url) return "";
+  const match = url.match(/[?&]v=([^&]+)/);
+  if (match) {
+    return `https://www.youtube.com/embed/${match[1]}?autoplay=1`;
+  }
+  const shortMatch = url.match(/youtu\.be\/([^?]+)/);
+  if (shortMatch) {
+    return `https://www.youtube.com/embed/${shortMatch[1]}?autoplay=1`;
+  }
+  return url;
+}
+
+// Story Logo Watermark
+function StoryLogoWatermark({ logo, alt }: { logo: string; alt: string }) {
+  return (
+    <div className="flex items-center gap-1.5 text-white opacity-80 group-hover:opacity-100 transition-opacity">
+      <Image
+        src={logo}
+        alt={alt}
+        width={60}
+        height={60}
+        unoptimized
+        className="w-15 h-15 object-contain brightness-0 invert"
+      />
+    </div>
+  );
+}
+
+export function OurImpact() {
+  const [selectedStory, setSelectedStory] = useState<
+    (typeof impactStories)[0] | null
+  >(null);
+  const [isPlayingVideo, setIsPlayingVideo] = useState(false);
+
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (selectedStory) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+      setIsPlayingVideo(false);
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [selectedStory]);
+
+  return (
+    <>
+      <section className="w-full py-24 md:py-32 bg-[#09090b] flex flex-col items-center justify-center border-t border-zinc-900 overflow-hidden">
+        <Container className="flex flex-col items-center w-full px-4 font-sans max-w-6xl">
+          <div className="flex flex-col items-center flex-1 text-center">
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase tracking-wider mb-4">
+              Our Impact
+            </h2>
+            <p className="text-zinc-400 text-base md:text-lg max-w-2xl font-mono mb-16">
+              We don't just work with industry leaders; we actively empower the
+              next generation of developers across schools, bootcamps, and local
+              hubs.
+            </p>
+          </div>
+
+          {/* Impact Cards Carousel */}
+          <h3 className="text-zinc-500 text-sm font-bold tracking-[0.2em] mb-12 uppercase text-center font-sans relative z-20">
+            Places We Empower
+          </h3>
+        </Container>
+
+        <div className="w-full relative flex flex-col items-center pb-4 overflow-hidden px-4 md:px-8">
+          {/* The Brutalist Vertical Impact Log Container */}
+          <div className="w-full max-w-7xl">
+            <div className="h-[80vh] overflow-y-auto overflow-x-hidden scroll-smooth pr-4 md:pr-8 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white hover:[&::-webkit-scrollbar-thumb]:bg-zinc-200 active:[&::-webkit-scrollbar-thumb]:bg-zinc-400 [&::-webkit-scrollbar-thumb]:rounded-none">
+              <div className="flex flex-col border-2 border-zinc-800 bg-[#09090b]">
+                {impactStories.map((story) => (
+                  <button
+                    type="button"
+                    key={story.id}
+                    onClick={() => setSelectedStory(story)}
+                    className="group relative flex flex-col w-full shrink-0 h-auto min-h-[300px] lg:min-h-[400px] border-b-2 border-zinc-800 last:border-b-0 bg-[#09090b] overflow-hidden cursor-pointer [direction:ltr] text-left"
+                  >
+                    {/* Background Panoramic Image Layer */}
+                    <div className="absolute inset-0 w-full h-full z-0 overflow-hidden">
+                      <Image
+                        src={story.image}
+                        alt={story.title}
+                        fill
+                        unoptimized
+                        className="object-cover grayscale group-hover:grayscale-0 scale-105 group-hover:scale-100 transition-all duration-700 ease-out z-0 opacity-40 group-hover:opacity-100"
+                      />
+                      {/* Dark scrim to guarantee text legibility */}
+                      <div className="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-black via-black/90 to-black/20 group-hover:from-black/90 group-hover:via-black/60 group-hover:to-transparent transition-colors duration-500 z-10" />
+                    </div>
+
+                    {/* Logo watermark top-right */}
+                    <div className="absolute top-5 right-5 z-20 opacity-40 group-hover:opacity-90 transition-opacity duration-500 text-white hidden md:block">
+                      <div className="absolute inset-0 bg-black/40 blur-xl scale-150 rounded-full z-0" />
+                      <div className="relative z-10 scale-[80%] origin-top-right">
+                        <StoryLogoWatermark
+                          logo={story.logo}
+                          alt={story.title}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Content Overlay */}
+                    <div className="relative z-20 w-full lg:w-[60%] flex flex-col justify-center px-6 py-8 md:p-8 lg:p-12 h-full flex-grow">
+                      {/* Badges */}
+                      <div className="flex flex-wrap gap-2 mb-4 md:mb-6 translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
+                        {story.link && (
+                          <span className="font-mono text-[10px] tracking-[0.2em] uppercase text-black border-2 border-black px-2 py-1 bg-white flex items-center gap-1 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
+                            <PlayCircle className="w-3 h-3" /> VIDEO
+                          </span>
+                        )}
+                        {story.galleryLink && (
+                          <span className="font-mono text-[10px] tracking-[0.2em] uppercase text-black border-2 border-black px-2 py-1 bg-white flex items-center gap-1 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
+                            <ImageIcon className="w-3 h-3" /> GALLERY
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Title */}
+                      <h4 className="font-black text-white uppercase tracking-tighter text-4xl md:text-5xl lg:text-6xl leading-[1.1] translate-y-2 group-hover:translate-y-0 transition-transform duration-300 delay-75 mb-6 lg:mb-8 max-w-4xl drop-shadow-lg font-sans">
+                        {story.title}
+                      </h4>
+
+                      {/* Meta Info */}
+                      <div className="flex flex-col gap-3 font-mono text-zinc-300 group-hover:text-zinc-200 text-sm md:text-base tracking-[0.15em] uppercase translate-y-2 group-hover:translate-y-0 transition-transform duration-300 delay-150 drop-shadow-md font-mono">
+                        <div className="flex items-center gap-3">
+                          <Calendar className="w-4 h-4 md:w-5 md:h-5" />
+                          {story.date}
+                        </div>
+                        <div className="flex items-start gap-3">
+                          <MapPin className="w-4 h-4 md:w-5 md:h-5 shrink-0 mt-0.5" />
+                          <span>{story.location}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          {/* Global CTA */}
+          <Container className="w-full flex justify-center mt-6">
+            <CtaButton
+              className="bg-white text-black hover:bg-zinc-200 !px-8 text-sm"
+              offsetClassName="bg-zinc-700"
+            >
+              <span className="flex items-center">
+                INVITE US TO YOUR CAMPUS OR HUB
+                <MoveRight
+                  className="ml-2 w-4 h-4"
+                  strokeWidth={2.5}
+                  size={2}
+                />
+              </span>
+            </CtaButton>
+          </Container>
+        </div>
+      </section>
+
+      {/* Centered Brutalist Modal Card */}
+      {selectedStory && (
+        // biome-ignore lint/a11y/useKeyWithClickEvents: Backdrop does not need keyboard interaction
+        // biome-ignore lint/a11y/noStaticElementInteractions: Backdrop is a presentational element
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md p-3 sm:p-6 md:p-8 cursor-[url('/close-cursor.svg'),_pointer]"
+          style={{ height: "100dvh" }}
+          onClick={() => setSelectedStory(null)}
+        >
+          {/* Codetopia Logo — top-left, mirrors close button */}
+          <div className="absolute top-3 left-3 sm:top-6 sm:left-6 md:top-8 md:left-8 z-[110] flex items-center justify-center">
+            <Image
+              src={logo}
+              alt="Codetopia"
+              width={100}
+              height={100}
+              className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 object-contain brightness-0 invert opacity-70"
+            />
+          </div>
+
+          {/* Global Screen-Fixed Close Button */}
+          <button
+            type="button"
+            onClick={() => setSelectedStory(null)}
+            className="absolute top-3 right-3 sm:top-6 sm:right-6 md:top-8 md:right-8 z-[110] text-white opacity-70 hover:opacity-100 transition-all bg-[#09090b] hover:bg-white hover:text-black p-2.5 md:p-4 rounded-full border-2 border-zinc-700 hover:border-white shadow-2xl flex items-center justify-center cursor-pointer group"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="group-hover:rotate-90 transition-transform duration-300"
+            >
+              <title>Close Dialog</title>
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+
+          {/* Modal card — scrollable on all breakpoints, max 92dvh tall */}
+          <div
+            className="relative w-full max-w-7xl bg-[#09090b] border-2 border-white shadow-2xl flex flex-col lg:flex-row cursor-default overflow-y-auto max-h-[92dvh] [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white hover:[&::-webkit-scrollbar-thumb]:bg-zinc-200 active:[&::-webkit-scrollbar-thumb]:bg-zinc-400 [&::-webkit-scrollbar-thumb]:rounded-none"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+          >
+            {/* Left Data Column */}
+            <div className="w-full lg:w-[35%] flex flex-col justify-center p-5 sm:p-8 lg:p-12 xl:p-16 border-b-2 lg:border-b-0 lg:border-r-2 border-zinc-800 relative z-20 bg-[#09090b] shrink-0">
+              <div className="flex items-center gap-2 font-mono text-zinc-500 tracking-[0.2em] uppercase mb-3 md:mb-6 text-xs sm:text-sm md:text-base">
+                <Calendar className="w-4 h-4 md:w-5 md:h-5 shrink-0" />
+                {selectedStory.date}
+              </div>
+              <div className="flex items-start gap-2 font-sans font-black text-white text-2xl sm:text-4xl md:text-5xl lg:text-5xl xl:text-6xl uppercase tracking-tighter leading-[1.1] break-words">
+                <MapPin className="w-4 h-4 md:w-5 md:h-5 shrink-0 mt-1 md:mt-2" />
+                {selectedStory.location}
+              </div>
+            </div>
+
+            {/* Right Panoramic View Column */}
+            <div className="w-full lg:w-[65%] relative flex flex-col justify-end p-5 sm:p-8 lg:p-12 xl:p-16 min-h-[55vw] sm:min-h-[420px] lg:min-h-0 lg:flex-1">
+              {isPlayingVideo && selectedStory.link ? (
+                <div className="absolute inset-0 z-30 bg-black flex flex-col animate-in fade-in duration-300">
+                  <button
+                    type="button"
+                    onClick={() => setIsPlayingVideo(false)}
+                    className="absolute top-4 left-4 sm:top-6 sm:left-6 z-40 font-mono text-[10px] sm:text-xs tracking-[0.25em] uppercase text-white border border-white/60 px-3 py-1 sm:px-4 sm:py-2 bg-black/60 hover:bg-white hover:text-black hover:border-white transition-colors backdrop-blur-sm flex items-center gap-2 group cursor-pointer"
+                  >
+                    ← BACK TO POST
+                  </button>
+                  <iframe
+                    src={getYouTubeEmbedUrl(selectedStory.link)}
+                    title={selectedStory.title}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className="w-full h-full border-0"
+                  />
+                </div>
+              ) : (
+                <>
+                  {/* Background Image */}
+                  <Image
+                    src={selectedStory.image as string}
+                    alt={selectedStory.title as string}
+                    fill
+                    unoptimized
+                    className="object-cover"
+                  />
+
+                  {/* Scrim */}
+                  <div className="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-black/95 via-black/80 to-transparent z-10" />
+
+                  {/* Story Logo Watermark */}
+                  <div className="absolute top-4 right-4 sm:top-6 sm:right-6 md:top-8 md:right-8 z-20 opacity-80 text-white">
+                    <div className="absolute inset-0 bg-black/60 blur-xl scale-150 rounded-full z-0" />
+                    <div className="relative z-10">
+                      <StoryLogoWatermark
+                        logo={selectedStory.logo}
+                        alt={selectedStory.title}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Event Title & Impact Report */}
+                  <div className="relative z-20 max-w-3xl mt-auto pt-12 sm:pt-16">
+                    <h4 className="text-xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-white uppercase tracking-tighter mb-3 md:mb-6 border-b-2 border-white pb-2 md:pb-4 inline-block drop-shadow-lg font-sans">
+                      {selectedStory.title}
+                    </h4>
+                    <div className="bg-black/80 border border-white backdrop-blur-md drop-shadow-2xl flex flex-col">
+                      <span className="font-mono text-zinc-400 uppercase tracking-[0.2em] text-[10px] md:text-xs lg:text-sm pt-3 px-3 sm:pt-5 sm:px-5 lg:pt-7 lg:px-7 pb-2 sm:pb-3 border-b border-zinc-800">
+                        Impact Report
+                      </span>
+                      <p className="block text-white text-sm md:text-base lg:text-lg font-mono leading-relaxed px-3 sm:px-5 lg:px-7 pb-3 sm:pb-5 lg:pb-7 pt-3 sm:pt-5">
+                        {selectedStory.impact}
+                      </p>
+                      {selectedStory.link && (
+                        <div className="px-3 sm:px-5 lg:px-7 pb-4 sm:pb-6 lg:pb-8">
+                          <button
+                            type="button"
+                            onClick={() => setIsPlayingVideo(true)}
+                            className="inline-flex items-center justify-center gap-2 bg-white text-black font-bold uppercase tracking-widest text-xs sm:text-sm px-5 py-2.5 sm:px-7 sm:py-3 md:px-8 md:py-4 hover:bg-zinc-200 transition-colors w-fit group/btn shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-none hover:translate-x-[4px] hover:translate-y-[4px] cursor-pointer"
+                          >
+                            <PlayCircle className="w-4 h-4 md:w-5 md:h-5 group-hover/btn:scale-110 transition-transform" />
+                            Watch Video
+                          </button>
+                        </div>
+                      )}
+                      {selectedStory.galleryLink && (
+                        <div className="px-3 sm:px-5 lg:px-7 pb-4 sm:pb-6 lg:pb-8">
+                          <a
+                            href={selectedStory.galleryLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center justify-center gap-2 bg-transparent text-white border-2 border-white font-bold uppercase tracking-widest text-xs sm:text-sm px-5 py-2.5 sm:px-7 sm:py-3 md:px-8 md:py-4 hover:bg-white hover:text-black transition-colors w-fit group/btn shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-none hover:translate-x-[4px] hover:translate-y-[4px] cursor-pointer"
+                          >
+                            <ImageIcon className="w-4 h-4 md:w-5 md:h-5 group-hover/btn:scale-110 transition-transform" />
+                            View Gallery
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/home/Stats.tsx b/src/components/home/Stats.tsx
new file mode 100644
index 0000000..9452a92
--- /dev/null
+++ b/src/components/home/Stats.tsx
@@ -0,0 +1,85 @@
+import { Container } from "@/components/layout/Container";
+
+const stats = [
+  {
+    value: "500+",
+    label: "Active Members",
+    description:
+      "A high-performance network of creators and leaders in the Ghana tech ecosystem.",
+  },
+  {
+    value: "2+",
+    label: "Events Hosted",
+    description:
+      "Workshops, bootcamps, and community sessions that turn learners into hands-on builders.",
+  },
+  // {
+  //   value: "2+",
+  //   label: "Countries Reached",
+  //   description:
+  //     "Building beyond borders — from Ghana to Nigeria and growing across Africa.",
+  // },
+  // {
+  //   value: "140+",
+  //   label: "Learners Reached",
+  //   description:
+  //     "Individuals who've been directly impacted through our events, bootcamps, and mentorships.",
+  // },
+  // {
+  //   value: "2+",
+  //   label: "Countries Reached",
+  //   description:
+  //     "Building beyond borders — from Ghana to Nigeria and growing across Africa.",
+  // },
+  // {
+  //   value: "140+",
+  //   label: "Learners Reached",
+  //   description:
+  //     "Individuals who've been directly impacted through our events, bootcamps, and mentorships.",
+  // },
+];
+
+export function Stats() {
+  return (
+    <section className="w-full py-20 md:py-32 bg-white flex flex-col items-center justify-center relative overflow-hidden text-black z-20">
+      <Container className="w-full px-4 max-w-7xl relative z-10 flex flex-col items-center">
+        {/* Section Header */}
+        <div className="flex flex-col items-center flex-1 text-center mb-16">
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold uppercase tracking-wider mb-4 font-sans text-black">
+            Traction
+          </h2>
+          <p className="text-zinc-600 text-base md:text-lg max-w-3xl font-mono">
+            A disciplined environment where 500+ technologists transition from
+            consumers to creators through structured mentorship and
+            collaborative contribution.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-8 w-full">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="relative group text-left w-full sm:w-72 md:w-80 lg:w-72 xl:w-80 shrink-0"
+            >
+              {/* Hollow offset border shadow */}
+              <div className="absolute inset-0 border-2 border-zinc-900 translate-x-[8px] translate-y-[8px] z-0 transition-transform duration-300 group-hover:translate-x-[4px] group-hover:translate-y-[4px]" />
+
+              {/* Top Interactive Card */}
+              <div className="relative z-10 flex flex-col items-center justify-center h-full p-8 md:p-10 text-center bg-white border-2 border-zinc-900 hover:bg-zinc-50 transition-all duration-300 group-hover:translate-x-[4px] group-hover:translate-y-[4px]">
+                <span className="text-5xl md:text-6xl font-black font-sans tracking-tighter text-zinc-900 mb-4 md:mb-6 select-none transition-transform duration-500 group-hover:scale-105">
+                  {stat.value}
+                </span>
+                <span className="text-zinc-900 text-base md:text-lg lg:text-xl font-sans font-bold uppercase tracking-[0.2em] mb-4">
+                  {stat.label}
+                </span>
+                <p className="text-zinc-500 font-mono text-sm leading-relaxed">
+                  {stat.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/home/WhatWeOffer.tsx b/src/components/home/WhatWeOffer.tsx
new file mode 100644
index 0000000..7ecd039
--- /dev/null
+++ b/src/components/home/WhatWeOffer.tsx
@@ -0,0 +1,86 @@
+import { Compass, GitPullRequest, Layers, Ticket } from "lucide-react";
+import Image from "next/image";
+import logo from "@/assets/images/logos/codetopia-community.png";
+import { Container } from "@/components/layout/Container";
+
+const offers = [
+  {
+    title: "Direct Mentorship",
+    description:
+      "1-on-1 guidance from experienced engineers to help you navigate your tech journey.",
+    icon: Compass,
+  },
+  {
+    title: "Collaborative Projects",
+    description:
+      "Real-world engineering on community-led systems and open-source contributions.",
+    icon: GitPullRequest,
+  },
+  {
+    title: "Technical Training",
+    description:
+      "Structured learning paths and workshops from fundamentals to advanced architecture.",
+    icon: Layers,
+  },
+  {
+    title: "Community Events",
+    description:
+      "Meetups, technical sessions, and hackathons to connect and build together.",
+    icon: Ticket,
+  },
+];
+
+export function WhatWeOffer() {
+  return (
+    <section className="relative w-full py-24 md:py-32 bg-[#09090b] overflow-hidden flex flex-col items-center justify-center text-center">
+      {/* Watermark Background */}
+      <div className="absolute inset-0 z-0 flex items-center justify-center pointer-events-none opacity-5">
+        <Image
+          src={logo}
+          alt="Codetopia Watermark"
+          className="w-[150%] max-w-none md:w-full object-cover"
+        />
+      </div>
+
+      <Container className="relative z-10 flex flex-col items-center w-full px-4 font-sans">
+        <div className="flex flex-col items-center mb-16 text-center">
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase tracking-wider mb-4 font-sans">
+            What We Offer
+          </h2>
+          <p className="text-zinc-400 text-base md:text-lg max-w-2xl font-mono">
+            Everything you need to accelerate your tech career, expand your
+            network, and build the future.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-2 w-full max-w-[90rem]">
+          {offers.map((offer) => {
+            const Icon = offer.icon;
+            return (
+              <div
+                key={offer.title}
+                className="relative group text-left cursor-pointer"
+              >
+                {/* Hollow offsetting border shadow */}
+                <div className="absolute inset-0 border border-zinc-500 translate-x-[8px] translate-y-[8px] z-0 transition-transform duration-300 group-hover:translate-x-[4px] group-hover:translate-y-[4px]" />
+
+                {/* Main Card */}
+                <div className="relative z-10 bg-[#e4e4e7] border border-transparent flex flex-col p-8 md:p-8 h-full transition-transform duration-300 group-hover:translate-x-[4px] group-hover:translate-y-[4px]">
+                  <div className="mb-8 md:mb-10 text-[#18181b]">
+                    <Icon size={64} strokeWidth={1.5} />
+                  </div>
+                  <h3 className="text-2xl font-bold text-[#18181b] mb-4">
+                    {offer.title}
+                  </h3>
+                  <p className="text-[#3f3f46] text-lg leading-relaxed">
+                    {offer.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/layout/Container.tsx b/src/components/layout/Container.tsx
index 28966a1..e2ee970 100644
--- a/src/components/layout/Container.tsx
+++ b/src/components/layout/Container.tsx
@@ -8,7 +8,7 @@ interface ContainerProps {
 
 export function Container({ children, className }: ContainerProps) {
   return (
-    <div className={cn("mx-auto w-full max-w-7xl px-6 lg:px-12", className)}>
+    <div className={cn("mx-auto w-full max-w-8xl px-6 lg:px-12", className)}>
       {children}
     </div>
   );
diff --git a/src/components/layout/ContributionBanner.tsx b/src/components/layout/ContributionBanner.tsx
new file mode 100644
index 0000000..b4620cd
--- /dev/null
+++ b/src/components/layout/ContributionBanner.tsx
@@ -0,0 +1,29 @@
+import { AlertCircle } from "lucide-react";
+import Link from "next/link";
+
+export function ContributionBanner() {
+  return (
+    <div className="w-full bg-zinc-900 border-b border-zinc-800 text-zinc-300 py-3 px-4 text-sm md:text-base">
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 text-center">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="w-4 h-4 md:w-5 md:h-5 text-amber-500" />
+          <span className="font-medium text-amber-500">
+            Site Under Construction
+          </span>
+        </div>
+        <span className="hidden md:inline text-zinc-600">|</span>
+        <p>
+          Some features may not work as expected.{" "}
+          <Link
+            href="https://github.com/codetopiacommunity/community-website"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white underline underline-offset-4 hover:text-amber-500 transition-colors font-medium border-b border-white hover:border-amber-500 pb-0.5"
+          >
+            We are looking for contributors!
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..1c264f2
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,293 @@
+import { Mail, MapPin, PhoneCall } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import {
+  FaDiscord,
+  FaGithub,
+  FaInstagram,
+  FaLinkedinIn,
+  FaMastodon,
+  // FaSnapchat,
+  FaThreads,
+  FaTiktok,
+  FaWhatsapp,
+  FaXTwitter,
+  FaYoutube,
+} from "react-icons/fa6";
+import { SiBluesky } from "react-icons/si";
+import logo from "@/assets/images/logos/codetopia-community.png";
+import { Container } from "@/components/layout/Container";
+
+export function Footer() {
+  return (
+    <footer className="relative w-full text-white pb-8 mt-auto bg-[#09090b] overflow-hidden border-t border-zinc-900">
+      {/* Logo Typography Background */}
+      <div className="absolute inset-x-0 bottom-0 h-full overflow-hidden pointer-events-none z-0 opacity-5">
+        <div
+          className="absolute left-0 bottom-0 w-1/2 h-full bg-no-repeat bg-[right_center] bg-[length:400%_auto] md:bg-[length:250%_auto] lg:bg-[length:200%_auto]"
+          style={{ backgroundImage: `url('${logo.src}')` }}
+        />
+        <div
+          className="absolute right-0 bottom-0 w-1/2 h-full bg-no-repeat bg-[left_center] bg-[length:400%_auto] md:bg-[length:250%_auto] lg:bg-[length:200%_auto]"
+          style={{ backgroundImage: `url('${logo.src}')` }}
+        />
+      </div>
+
+      <Container className="relative z-10 pt-20">
+        {/* Top 4-Column Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8 mb-16">
+          {/* Column 1: Brand & Socials */}
+          <div className="flex flex-col gap-6">
+            <Link href="/" className="flex shrink-0 items-center">
+              <Image
+                src={logo}
+                alt="Codetopia"
+                width={150}
+                height={90}
+                priority
+                className="object-contain"
+              />
+            </Link>
+            <div className="flex flex-col gap-2">
+              <p className="text-zinc-400 text-sm font-mono italic mb-5">
+                A utopia for tech enthusiasts
+              </p>
+              <div className="flex items-center gap-2">
+                <span className="h-px w-4 bg-zinc-800" />
+                <span className="text-[10px] font-mono font-bold tracking-[0.2em] text-zinc-500 uppercase">
+                  A Codetopia Initiative
+                </span>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-4 mt-2">
+              <Link
+                href="https://discord.gg/3nBFMfdNmB"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Discord</span>
+                <FaDiscord className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://www.youtube.com/@codetopiacommunity"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">YouTube</span>
+                <FaYoutube className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://www.linkedin.com/company/codetopiacommunity"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">LinkedIn</span>
+                <FaLinkedinIn className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://x.com/codetopiacom"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">X (Twitter)</span>
+                <FaXTwitter className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://www.instagram.com/codetopiacom/"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Instagram</span>
+                <FaInstagram className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="http://www.threads.com/codetopiacom/"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Threads</span>
+                <FaThreads className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://www.tiktok.com/@codetopiacommunity"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">TikTok</span>
+                <FaTiktok className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://bsky.app/profile/codetopiacommunity.bsky.social"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Bluesky</span>
+                <SiBluesky className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://mastodon.social/@codetopiacommunity"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Mastodon</span>
+                <FaMastodon className="w-4 h-4 text-zinc-300" />
+              </Link>
+              {/* <Link
+                href="#"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">Snapchat</span>
+                <FaSnapchat className="w-4 h-4 text-zinc-300" />
+              </Link> */}
+              <Link
+                href="https://chat.whatsapp.com/LiiirOwOnPz0XQ3vupioi9"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">WhatsApp</span>
+                <FaWhatsapp className="w-4 h-4 text-zinc-300" />
+              </Link>
+              <Link
+                href="https://github.com/codetopiacommunity"
+                target="_blank"
+                className="p-2 bg-zinc-900 rounded-full hover:bg-zinc-800 transition-colors"
+              >
+                <span className="sr-only">GitHub</span>
+                <FaGithub className="w-4 h-4 text-zinc-300" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Column 2: Community */}
+          <div className="flex flex-col gap-4 font-sans">
+            <h3 className="font-bold text-lg mb-2">Community</h3>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Code of Conduct
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Become a Sponsor
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Become a Volunteer
+            </Link>
+            <Link
+              href="https://discord.gg/3nBFMfdNmB"
+              target="_blank"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Join Our Discord Server
+            </Link>
+            <Link
+              href="https://chat.whatsapp.com/LiiirOwOnPz0XQ3vupioi9"
+              target="_blank"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Join Our WhatsApp Community
+            </Link>
+          </div>
+
+          {/* Column 3: Contact */}
+          <div className="flex flex-col gap-4 font-sans">
+            <h3 className="font-bold text-lg mb-2">Contact</h3>
+            <div className="flex items-start md:items-center gap-3 text-zinc-400 text-sm">
+              <Mail className="w-4 h-4 text-zinc-400 shrink-0 mt-0.5 md:mt-0" />
+              codetopiancommunity@gmail.com
+            </div>
+            <div className="flex items-start md:items-center gap-3 text-zinc-400 text-sm">
+              <MapPin className="w-4 h-4 text-zinc-400 shrink-0 mt-0.5 md:mt-0" />{" "}
+              Accra, Ghana
+            </div>
+            <div className="flex items-start md:items-center gap-3 text-zinc-400 text-sm">
+              <PhoneCall className="w-4 h-4 text-zinc-400 shrink-0 mt-0.5 md:mt-0" />{" "}
+              (+233) 53 264 6232
+            </div>
+          </div>
+
+          {/* Column 4: Quick Links */}
+          <div className="flex flex-col gap-4 font-sans">
+            <h3 className="font-bold text-lg mb-2">Quick Links</h3>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              About Us
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Events
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Articles
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-400 hover:text-white transition-colors text-sm"
+            >
+              Gallery
+            </Link>
+
+            <div className="mt-4 p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
+              <p className="text-zinc-400 text-sm mb-3">
+                Found a bug or want to improve this site?
+              </p>
+              <Link
+                href="https://github.com/codetopiacommunity/community-website"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 text-white hover:text-zinc-300 font-medium text-sm transition-colors"
+              >
+                <FaGithub className="w-4 h-4" />
+                <span>Contribute on GitHub</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="pt-8 border-t border-zinc-800 flex flex-col md:flex-row items-center justify-between gap-4 font-mono">
+          <p className="text-zinc-500 text-xs text-center md:text-left">
+            &copy; {new Date().getFullYear()} Codetopia Community. All rights
+            reserved.
+          </p>
+          <p className="text-zinc-500 text-xs text-center md:text-left">
+            Built with ❤️ by Codetopia Community | Open Source
+          </p>
+          <div className="flex items-center gap-6">
+            <Link
+              href="#"
+              className="text-zinc-500 hover:text-white transition-colors text-xs"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-500 hover:text-white transition-colors text-xs"
+            >
+              Terms of Service
+            </Link>
+            <Link
+              href="#"
+              className="text-zinc-500 hover:text-white transition-colors text-xs"
+            >
+              Cookies Policy
+            </Link>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 334037f..25e23c1 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,7 +4,7 @@ import { Menu, X } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
-import logo from "@/assets/images/logos/Codetopia-Logo-TW.png";
+import logo from "@/assets/images/logos/codetopia-community.png";
 import { Container } from "./Container";
 
 const navLinks = [
@@ -25,8 +25,8 @@ export function Header() {
           <Image
             src={logo}
             alt="Codetopia"
-            width={80}
-            height={48}
+            width={150}
+            height={90}
             priority
             className="object-contain"
           />
@@ -40,7 +40,7 @@ export function Header() {
               <Link
                 key={link.name}
                 href={link.href}
-                className="text-xs font-bold tracking-wider text-grey-300 hover:text-grey-50 transition-colors"
+                className="text-sm lg:text-base font-bold tracking-wider text-grey-300 hover:text-grey-50 transition-colors"
               >
                 {link.name}
               </Link>
@@ -72,7 +72,7 @@ export function Header() {
                 key={link.name}
                 href={link.href}
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="w-full text-sm font-bold tracking-wider text-grey-300 hover:text-grey-50 py-3 border-b border-grey-800/50 last:border-none transition-colors"
+                className="w-full text-base font-bold tracking-wider text-grey-300 hover:text-grey-50 py-3 border-b border-grey-800/50 last:border-none transition-colors"
               >
                 {link.name}
               </Link>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..c50b468
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..8bd5e35
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      {/* biome-ignore lint/a11y/useSemanticElements: Standard ARIA carousel pattern */}
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: Standard ARIA carousel item pattern
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/src/components/ui/cta-button.tsx b/src/components/ui/cta-button.tsx
new file mode 100644
index 0000000..414e96c
--- /dev/null
+++ b/src/components/ui/cta-button.tsx
@@ -0,0 +1,56 @@
+import { Slot } from "radix-ui";
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface CtaButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: React.ReactNode;
+  wrapperClassName?: string;
+  offsetClassName?: string;
+  asChild?: boolean;
+}
+
+export const CtaButton = React.forwardRef<HTMLButtonElement, CtaButtonProps>(
+  (
+    {
+      className,
+      label,
+      children,
+      wrapperClassName,
+      offsetClassName,
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot.Root : "button";
+
+    return (
+      <div
+        className={cn(
+          "relative group w-full sm:w-auto font-sans",
+          wrapperClassName,
+        )}
+      >
+        <div
+          className={cn(
+            "absolute inset-0 border border-white translate-x-[4px] translate-y-[4px] pointer-events-none group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300",
+            offsetClassName,
+          )}
+        />
+        <Comp
+          // biome-ignore lint/suspicious/noExplicitAny: Radix Slot ref typing doesn't always align with button props
+          ref={ref as any}
+          className={cn(
+            "relative z-10 w-full sm:w-auto h-14 sm:h-16 px-8 flex items-center justify-center bg-[#18181b] text-white border border-white font-bold uppercase tracking-widest text-sm hover:bg-zinc-900 transition-colors duration-300",
+            className,
+          )}
+          {...props}
+        >
+          {children || label}
+        </Comp>
+      </div>
+    );
+  },
+);
+CtaButton.displayName = "CtaButton";
diff --git a/src/lib/data/impact-stories.ts b/src/lib/data/impact-stories.ts
new file mode 100644
index 0000000..a592ecd
--- /dev/null
+++ b/src/lib/data/impact-stories.ts
@@ -0,0 +1,107 @@
+export interface ImpactStory {
+  id: number;
+  title: string;
+  impact: string;
+  image: string;
+  logo: string;
+  date: string;
+  location: string;
+  link?: string;
+  galleryLink?: string;
+}
+
+export const impactStories: ImpactStory[] = [
+  {
+    id: 1,
+    title: "Django Girls Koforidua",
+    impact:
+      "Mentored to teach web fundamentals. Helped over 40 women deploy their first working application online.",
+    image:
+      "https://images.unsplash.com/photo-1540317580384-e5d43867caa6?auto=format&fit=crop&w=800&q=80",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Django_Girls_logo.svg/1200px-Django_Girls_logo.svg.png",
+    date: "23 - 25 March 2025",
+    location: "Koforidua Library",
+    link: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // Sample YouTube link
+  },
+  {
+    id: 2,
+    title: "Local High School Initiative",
+    impact:
+      "Introduced Python and basic web concepts to 40 seniors, resulting in a 30% increase in CS majors.",
+    image:
+      "https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=800&q=80",
+    logo: "https://via.placeholder.com/150/09090b/ffffff?text=Prempeh",
+    date: "05 September 2025",
+    location: "Prempeh College",
+    galleryLink: "https://unsplash.com/s/photos/high-school", // Sample gallery link
+  },
+  {
+    id: 3,
+    title: "Django Girls Bootcamp",
+    impact:
+      "Mentored to teach web fundamentals. Helped over 60 women deploy their first working application online.",
+    image:
+      "https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=800&q=80",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Django_Girls_logo.svg/1200px-Django_Girls_logo.svg.png",
+    date: "14 August 2025",
+    location: "Lagos, Nigeria",
+    link: "https://www.youtube.com/watch?v=ScMzIvxBSi4", // Sample YouTube link
+    galleryLink: "https://unsplash.com/s/photos/high-school",
+  },
+  {
+    id: 4,
+    title: "Developer Hub Accra",
+    impact:
+      "Refactored legacy codebases alongside junior developers, accelerating their transition into mid-level engineering roles.",
+    image:
+      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=80",
+    logo: "https://via.placeholder.com/150/09090b/ffffff?text=ADC",
+    date: "01 - 10 July 2025",
+    location: "Accra Digital Center",
+    galleryLink: "https://unsplash.com/s/photos/developers", // Sample gallery link
+  },
+  {
+    id: 5,
+    title: "Django Girls Koforidua",
+    impact:
+      "Mentored to teach web fundamentals. Helped over 40 women deploy their first working application online.",
+    image:
+      "https://images.unsplash.com/photo-1540317580384-e5d43867caa6?auto=format&fit=crop&w=800&q=80",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Django_Girls_logo.svg/1200px-Django_Girls_logo.svg.png",
+    date: "23 - 25 March 2025",
+    location: "Koforidua Library",
+  },
+  {
+    id: 6,
+    title: "Local High School Initiative",
+    impact:
+      "Introduced Python and basic web concepts to 40 seniors, resulting in a 30% increase in CS majors.",
+    image:
+      "https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=800&q=80",
+    logo: "https://via.placeholder.com/150/09090b/ffffff?text=Prempeh",
+    date: "05 September 2025",
+    location: "Prempeh College",
+  },
+  {
+    id: 7,
+    title: "Django Girls Bootcamp",
+    impact:
+      "Mentored to teach web fundamentals. Helped over 60 women deploy their first working application online.",
+    image:
+      "https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=800&q=80",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Django_Girls_logo.svg/1200px-Django_Girls_logo.svg.png",
+    date: "14 August 2025",
+    location: "Lagos, Nigeria",
+  },
+  {
+    id: 8,
+    title: "Developer Hub Accra",
+    impact:
+      "Refactored legacy codebases alongside junior developers, accelerating their transition into mid-level engineering roles.",
+    image:
+      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=80",
+    logo: "https://via.placeholder.com/150/09090b/ffffff?text=ADC",
+    date: "01 - 10 July 2025",
+    location: "Accra Digital Center",
+  },
+];
diff --git a/src/lib/data/partners.ts b/src/lib/data/partners.ts
new file mode 100644
index 0000000..1235462
--- /dev/null
+++ b/src/lib/data/partners.ts
@@ -0,0 +1,63 @@
+export type RelationshipType = "worked-with" | "partner" | "sponsor";
+
+export interface Organisation {
+  id: number;
+  name: string;
+  logo: string;
+  type: RelationshipType;
+}
+
+export const organisations: Organisation[] = [
+  {
+    id: 1,
+    name: "Django Girls",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Django_Girls_logo.svg/1200px-Django_Girls_logo.svg.png",
+    type: "sponsor",
+  },
+  {
+    id: 2,
+    name: "Open Source Community Africa",
+    logo: "https://raw.githubusercontent.com/oscafrica/oscafrica.org-v2/main/public/images/logo/light/osca.svg",
+    type: "partner",
+  },
+  {
+    id: 3,
+    name: "Python Software Foundation",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png",
+    type: "partner",
+  },
+  {
+    id: 4,
+    name: "GitHub",
+    logo: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+    type: "partner",
+  },
+  {
+    id: 5,
+    name: "Google for Developers",
+    logo: "https://www.gstatic.com/devrel-devsite/prod/v773193e230ce8d1973c735d469cf3e5d381165e6d6387063469e3bc6482f345c/developers/images/touchicon-180.png",
+    type: "sponsor",
+  },
+  {
+    id: 6,
+    name: "Microsoft for Startups",
+    logo: "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageMW/RE1Mu3b?ver=5c31",
+    type: "worked-with",
+  },
+
+  // --- Add formal partners here when agreements are in place ---
+  // {
+  //   id: 7,
+  //   name: "Partner Name",
+  //   logo: "https://...",
+  //   type: "partner",
+  // },
+
+  // --- Add sponsors here when confirmed ---
+  // {
+  //   id: 8,
+  //   name: "Sponsor Name",
+  //   logo: "https://...",
+  //   type: "sponsor",
+  // },
+];