Rocky_Mountain_Vending/components/stats-section.tsx

36 lines
1 KiB
TypeScript

import {
PublicInset,
PublicSection,
PublicSurface,
} from "@/components/public-surface"
export function StatsSection() {
const stats = [
{ value: "6+", label: "Years of Experience" },
{ value: "3", label: "Counties Served" },
{ value: "20+", label: "Cities Served in Utah" },
{ value: "Full", label: "Service Support" },
]
return (
<PublicSection tone="muted">
<PublicSurface className="p-4 sm:p-5 md:p-6">
<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
{stats.map((stat) => (
<PublicInset
key={stat.label}
className="border-0 bg-transparent px-3 py-4 text-center shadow-none"
>
<div className="text-4xl md:text-5xl font-bold text-primary mb-2">
{stat.value}
</div>
<div className="text-sm md:text-base text-muted-foreground">
{stat.label}
</div>
</PublicInset>
))}
</div>
</PublicSurface>
</PublicSection>
)
}