diff --git a/frontend/src/App.css b/frontend/src/App.css index f4a142f..56ce400 100644 --- a/frontend/src/App.css +++ b/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 ──────────────────────────────────────── */ diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts index 04c62a5..d1d2572 100644 --- a/frontend/src/api/public-client.ts +++ b/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 { + return request(`${BASE}/stats`); +} + // ── Topics ─────────────────────────────────────────────────────────────────── export async function fetchTopics(): Promise { diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 8dac13e..97fbaa6 100644 --- a/frontend/src/pages/Home.tsx +++ b/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(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 (
{/* Hero search */} @@ -176,6 +195,20 @@ export default function Home() { + {/* Stats scorecard */} + {stats && ( +
+
+ {stats.technique_count} + Articles +
+
+ {stats.creator_count} + Creators +
+
+ )} + {/* Random technique discovery */}