Kirubel-Kibru-Yaltopia
d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
38 lines
1.5 KiB
TypeScript
38 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'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>
|
|
);
|
|
}
|