From 3f77240ebabae77f50056b710afd92f4d5b77bba Mon Sep 17 00:00:00 2001
From: Your Name <ibimodejunior@gmail.com>
Date: Tue, 26 May 2026 23:29:03 +0100
Subject: [PATCH] feat(home): add scholarship alumni spotlight section

---
 src/pages/Home.test.tsx | 38 +++++++++++++++++
 src/pages/Home.tsx      | 90 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Home.test.tsx

diff --git a/src/pages/Home.test.tsx b/src/pages/Home.test.tsx
new file mode 100644
index 00000000..3e699631
--- /dev/null
+++ b/src/pages/Home.test.tsx
@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest"
+import { MemoryRouter } from "react-router-dom"
+import Home from "./Home"
+import { render, screen } from "../test/setup"
+
+vi.mock("@stellar/design-system", () => ({
+	Icon: {
+		Lightbulb01: () => null,
+		Trophy01: () => null,
+		Star01: () => null,
+		Users01: () => null,
+	},
+}))
+
+vi.mock("../hooks/useCourses", () => ({
+	useEnrolledCourses: () => ({
+		enrolledCourses: [],
+		isLoading: false,
+	}),
+}))
+
+describe("Home", () => {
+	it("renders scholarship alumni spotlight content", () => {
+		render(
+			<MemoryRouter>
+				<Home />
+			</MemoryRouter>,
+		)
+
+		expect(
+			screen.getByRole("heading", { name: "Scholarship Alumni Spotlight" }),
+		).toBeInTheDocument()
+		expect(screen.getByText("Amina Diallo")).toBeInTheDocument()
+		expect(screen.getByText("Diego Alvarez")).toBeInTheDocument()
+		expect(screen.getByText("Grace Mwangi")).toBeInTheDocument()
+		expect(screen.getAllByText(/Class of 2025/i)).toHaveLength(2)
+	})
+})
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8eaf8b9c..b7d040b9 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -62,6 +62,36 @@ const FEATURES = [
 	},
 ]
 
+const ALUMNI_SPOTLIGHT = [
+	{
+		name: "Amina Diallo",
+		cohort: "Backend Engineering Cohort",
+		year: "2025",
+		scholarshipAmount: "4,000 USDC",
+		outcome: "Now shipping smart contract audits at an African fintech startup.",
+		quote:
+			"The milestone-based scholarship made me accountable and gave me runway to focus on mastery.",
+	},
+	{
+		name: "Diego Alvarez",
+		cohort: "Frontend Product Cohort",
+		year: "2025",
+		scholarshipAmount: "3,200 USDC",
+		outcome: "Built an open-source design system now used by three community DAOs.",
+		quote:
+			"LearnVault turned my portfolio into verified on-chain proof that employers trusted instantly.",
+	},
+	{
+		name: "Grace Mwangi",
+		cohort: "Data + AI Cohort",
+		year: "2024",
+		scholarshipAmount: "5,100 USDC",
+		outcome: "Leading analytics automation for a public health nonprofit.",
+		quote:
+			"The alumni network and DAO mentors gave me feedback loops I couldn't get anywhere else.",
+	},
+]
+
 const Home: React.FC = () => {
 	const { enrolledCourses, isLoading: isLoadingCourses } = useEnrolledCourses()
 
@@ -238,8 +268,66 @@ const Home: React.FC = () => {
 					</div>
 				</section>
 
+				{/* ── SCHOLARSHIP ALUMNI SPOTLIGHT ────────────────────────────── */}
+				<section className="flex flex-col gap-10 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-500">
+					<div className="flex items-center gap-3">
+						<Icon.Users01 size="lg" className="text-brand-cyan shrink-0" />
+						<div>
+							<h2 className="text-2xl font-black">Scholarship Alumni Spotlight</h2>
+							<p className="text-white/45 text-sm mt-1 max-w-2xl">
+								Stories from scholars who completed tracks, secured milestone funding,
+								and are now building real-world impact.
+							</p>
+						</div>
+					</div>
+
+					<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+						{ALUMNI_SPOTLIGHT.map(
+							({
+								name,
+								cohort,
+								year,
+								scholarshipAmount,
+								outcome,
+								quote,
+							}) => (
+								<article
+									key={name}
+									className="glass-card rounded-3xl border border-white/10 p-7 flex flex-col gap-6 hover:border-brand-cyan/30 transition-colors"
+								>
+									<div className="flex items-center justify-between gap-4">
+										<div>
+											<h3 className="text-lg font-black">{name}</h3>
+											<p className="text-xs text-white/45 uppercase tracking-widest mt-1">
+												{cohort}
+											</p>
+										</div>
+										<span className="text-xs font-bold px-3 py-1 rounded-full border border-brand-cyan/40 text-brand-cyan bg-brand-cyan/10">
+											Class of {year}
+										</span>
+									</div>
+
+									<blockquote className="text-sm leading-relaxed text-white/75 italic">
+										“{quote}”
+									</blockquote>
+
+									<div className="space-y-2 text-sm">
+										<p className="text-white/55">
+											<span className="text-white/75 font-semibold">Scholarship:</span>{" "}
+											{scholarshipAmount}
+										</p>
+										<p className="text-white/55">
+											<span className="text-white/75 font-semibold">Outcome:</span> {outcome}
+										</p>
+									</div>
+								</article>
+							),
+						)}
+					</div>
+				</section>
+
 				{/* ── CTA BANNER ───────────────────────────────────────────────── */}
-				<section className="glass-card rounded-3xl border border-brand-cyan/15 p-10 text-center flex flex-col items-center gap-6 animate-in fade-in duration-700 delay-500">
+				<section className="glass-card rounded-3xl border border-brand-cyan/15 p-10 text-center flex flex-col items-center gap-6 animate-in fade-in duration-700 delay-[600ms]">
 					<h2 className="text-2xl font-black">Join the open-source sprint</h2>
 					<p className="text-white/40 max-w-md text-sm leading-relaxed">
 						LearnVault is built in the open. Pick an issue, ship a feature, and