From f93d3a396d172ae9d2c749e481e8dce981f2d226 Mon Sep 17 00:00:00 2001
From: Caleb Wodi <calebwodi33@gmail.com>
Date: Sat, 14 Feb 2026 18:33:08 +0100
Subject: [PATCH] feat: add bottom CTA section and site footer

---
 apps/web/app/page.tsx          |  9 +++++
 apps/web/components/cta.tsx    | 51 +++++++++++++++++++++++++
 apps/web/components/footer.tsx | 68 ++++++++++++++++++++++++++++++++++
 3 files changed, 128 insertions(+)
 create mode 100644 apps/web/components/cta.tsx
 create mode 100644 apps/web/components/footer.tsx

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 1e9414a..43be0f8 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,4 +1,11 @@
 import { Navbar } from "@/components/navbar"
+import { Hero } from "@/components/hero"
+import { Features } from "@/components/features"
+import { Modes } from "@/components/modes"
+import { InputFormats } from "@/components/input-formats"
+import { Install } from "@/components/install"
+import { CTA } from "@/components/cta"
+import { Footer } from "@/components/footer"
 
 export default function Page() {
   return (
@@ -9,6 +16,8 @@ export default function Page() {
       <Modes />
       <InputFormats />
       <Install />
+      <CTA />
+      <Footer />
     </main>
   )
 }
diff --git a/apps/web/components/cta.tsx b/apps/web/components/cta.tsx
new file mode 100644
index 0000000..dc423f5
--- /dev/null
+++ b/apps/web/components/cta.tsx
@@ -0,0 +1,51 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Github } from "lucide-react"
+
+export function CTA() {
+  return (
+    <section className="py-24 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="relative overflow-hidden rounded-2xl border border-border bg-card p-12 text-center md:p-20">
+          {/* Subtle glow */}
+          <div
+            className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full opacity-[0.05]"
+            style={{
+              background:
+                "radial-gradient(ellipse, hsl(160 84% 39%) 0%, transparent 70%)",
+            }}
+          />
+
+          <div className="relative">
+            <h2 className="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+              Stop guessing. Start understanding.
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-pretty text-muted-foreground leading-relaxed">
+              Run a single command and get a clear explanation of any
+              public GitHub repository.
+            </p>
+
+            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+              <Button asChild size="lg" className="gap-2 px-6">
+                <Link href="#install">
+                  Install Now
+                  <ArrowRight className="h-4 w-4" />
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="gap-2 px-6 bg-transparent">
+                <Link
+                  href="https://github.com/calchiwo/ExplainThisRepo"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Github className="h-4 w-4" />
+                  Star on GitHub
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/components/footer.tsx b/apps/web/components/footer.tsx
new file mode 100644
index 0000000..1c81fea
--- /dev/null
+++ b/apps/web/components/footer.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link"
+import { Terminal } from "lucide-react"
+
+export function Footer() {
+  return (
+    <footer className="border-t border-border py-12">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="flex flex-col items-center gap-8 md:flex-row md:justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary">
+              <Terminal className="h-3.5 w-3.5 text-primary-foreground" />
+            </div>
+            <span className="text-sm font-semibold text-foreground">
+              ExplainThisRepo
+            </span>
+          </div>
+
+          <div className="flex items-center gap-6">
+            <Link
+              href="https://pypi.org/project/explainthisrepo/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              PyPI
+            </Link>
+            <Link
+              href="https://www.npmjs.com/package/explainthisrepo"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              npm
+            </Link>
+            <Link
+              href="https://github.com/calchiwo/ExplainThisRepo"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              GitHub
+            </Link>
+            <Link
+              href="https://x.com/calchiwo"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Twitter
+            </Link>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            MIT License. Built by{" "}
+            <Link
+              href="https://calebwodi.vercel.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-foreground underline underline-offset-4 transition-colors hover:text-primary"
+            >
+              Caleb Wodi
+            </Link>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}