49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Stats11Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Stats11 = ({ className }: Stats11Props) => {
|
|
const stats = [
|
|
["SEO-ready", "Leistungsseiten, Region und Kontakt sauber strukturiert."],
|
|
["< 1 Sek.", "Auf schnelle Ladezeiten und klare Technik ausgelegt."],
|
|
["ab 799 €", "Transparente Einstiegspreise ohne Paketnebel."],
|
|
["2 Wochen", "Typischer Zeitraum vom Startgespräch bis zur Vorschau."],
|
|
];
|
|
|
|
return (
|
|
<section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="rounded-lg border border-border bg-primary p-6 text-primary-foreground sm:p-8 lg:grid lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.45fr)] lg:gap-12 lg:p-10">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary-foreground/65">
|
|
Messbare Grundlagen
|
|
</p>
|
|
<h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
|
|
Gute Websites fühlen sich ruhig an, weil die Basis stimmt.
|
|
</h2>
|
|
</div>
|
|
<div className="mt-10 grid gap-4 sm:grid-cols-2 lg:mt-0">
|
|
{stats.map(([value, label]) => (
|
|
<div
|
|
key={value}
|
|
className="rounded-md border border-primary-foreground/15 bg-primary-foreground/[0.06] p-5"
|
|
>
|
|
<p className="text-3xl font-semibold tracking-tight">
|
|
{value}
|
|
</p>
|
|
<p className="mt-3 text-sm leading-6 text-primary-foreground/72">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Stats11 };
|