merge dev to main

.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
+/docs/ @cerebrocerberus @ichigo-k @khali-physi-hacker @papayankey

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>
+```
+

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": {

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>
+  );
+}

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);

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>
   );

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>
+  );
+}

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>
   );
 }

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>
+  );
+}