feat: Homepage displays a stats scorecard showing live article and crea…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/Home.tsx"
- "frontend/src/App.css"

GSD-Task: S03/T02

frontend/src/App.css

@@ -1451,6 +1451,42 @@ a.app-footer__repo:hover {
   line-height: 1.4;
 }
 
+/* ── Stats scorecard ──────────────────────────────────────────────────── */
+
+.home-stats {
+  display: flex;
+  justify-content: center;
+  gap: 2.5rem;
+  max-width: 36rem;
+  margin: 0 auto 1.5rem;
+  padding: 1rem 1.5rem;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.625rem;
+}
+
+.home-stats__metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.home-stats__number {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.home-stats__label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 /* ── Recently Added section ───────────────────────────────────────────────── */
 
 /* ── Featured technique spotlight ──────────────────────────────────────── */

frontend/src/api/public-client.ts

@@ -306,6 +306,17 @@ export async function fetchTechniqueVersion(
   );
 }
 
+// ── Stats ─────────────────────────────────────────────────────────────────────
+
+export interface StatsResponse {
+  technique_count: number;
+  creator_count: number;
+}
+
+export async function fetchStats(): Promise<StatsResponse> {
+  return request<StatsResponse>(`${BASE}/stats`);
+}
+
 // ── Topics ───────────────────────────────────────────────────────────────────
 
 export async function fetchTopics(): Promise<TopicCategory[]> {

frontend/src/pages/Home.tsx

@@ -15,7 +15,9 @@ import {
   fetchTechniques,
   fetchTopics,
   fetchRandomTechnique,
+  fetchStats,
   type TechniqueListItem,
+  type StatsResponse,
 } from "../api/public-client";
 
 export default function Home() {
@@ -26,6 +28,7 @@ export default function Home() {
   const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([]);
   const [randomLoading, setRandomLoading] = useState(false);
   const [randomError, setRandomError] = useState(false);
+  const [stats, setStats] = useState<StatsResponse | null>(null);
   const navigate = useNavigate();
 
   const handleRandomTechnique = async () => {
@@ -96,6 +99,22 @@ export default function Home() {
     };
   }, []);
 
+  // Load stats
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const data = await fetchStats();
+        if (!cancelled) setStats(data);
+      } catch {
+        // optional section — silently ignore
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   return (
     <div className="home">
       {/* Hero search */}
@@ -176,6 +195,20 @@ export default function Home() {
         </Link>
       </section>
 
+      {/* Stats scorecard */}
+      {stats && (
+        <section className="home-stats card-stagger" style={{ '--stagger-index': 2 } as React.CSSProperties}>
+          <div className="home-stats__metric">
+            <span className="home-stats__number">{stats.technique_count}</span>
+            <span className="home-stats__label">Articles</span>
+          </div>
+          <div className="home-stats__metric">
+            <span className="home-stats__number">{stats.creator_count}</span>
+            <span className="home-stats__label">Creators</span>
+          </div>
+        </section>
+      )}
+
       {/* Random technique discovery */}
       <div className="home-random">
         <button