Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
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>
39 lines
1.4 KiB
TypeScript
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'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>
|
|
);
|
|
}
|