GRV-Summit-Site/components/home/StatsGrid.tsx
“kirukib” 3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Add site-wide topography patterns and refine section styling.
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-20 20:34:36 +03:00

39 lines
1.4 KiB
TypeScript

import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { CyclingGrantAmount } from "@/components/grants/CyclingGrantAmount";
export function StatsGrid() {
return (
<Section variant="muted" id="stats">
<TopoProseSurface className="mx-auto max-w-3xl text-center">
<p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
The future starts here
</p>
<h2 className="mt-3 text-3xl font-bold text-white md:text-4xl">
Powering Ethiopia&apos;s innovation leap forward
</h2>
</TopoProseSurface>
<div className="mt-12 grid grid-cols-2 gap-6 md:grid-cols-4">
{site.stats.map((stat) => (
<div
key={stat.label}
className="rounded-2xl border border-border bg-white p-6 text-center shadow-sm"
>
{stat.type === "cycling" ? (
<CyclingGrantAmount
showCaption
valueClassName="text-3xl font-bold text-[#1f3d7e] md:text-4xl"
captionClassName="text-muted-foreground"
/>
) : (
<p className="text-3xl font-bold text-[#1f3d7e] md:text-4xl">{stat.value}</p>
)}
<p className="mt-2 text-sm text-muted-foreground">{stat.label}</p>
</div>
))}
</div>
</Section>
);
}