GRV-Summit-Site/components/home/StatsGrid.tsx
“kirukib” efa48f6f6b
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Refine topography to hero and footer, improve readability and hero motion.
Limit mainwhite pattern to the landing hero and a bottom footer band; remove it from sections and page headers. Add vertical water-flow animation and stronger hero particles with hover boost. Fix green text on white sections and card descriptions in green bands, including the two-days program cards.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-21 14:29:39 +03:00

39 lines
1.5 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="topo-on-green-bg 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="topo-card-surface rounded-2xl border border-border bg-white p-6 text-center text-[#1a5c38] shadow-sm"
>
{stat.type === "cycling" ? (
<CyclingGrantAmount
showCaption
valueClassName="text-3xl font-bold text-[#1a5c38] md:text-4xl"
captionClassName="text-[#3d5248]"
/>
) : (
<p className="text-3xl font-bold text-[#1a5c38] md:text-4xl">{stat.value}</p>
)}
<p className="mt-2 text-sm text-[#3d5248]">{stat.label}</p>
</div>
))}
</div>
</Section>
);
}