70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const trustAnchors = [
|
|
{
|
|
title: "Direkter Kontakt",
|
|
description:
|
|
"Sie sprechen mit dem Menschen, der die Website auch plant und baut.",
|
|
note: "Keine Vertriebsrunde, keine unklaren Übergänge.",
|
|
},
|
|
{
|
|
title: "15+ Jahre Erfahrung",
|
|
description:
|
|
"Webentwicklung und Software mit Fokus auf robuste, wartbare Lösungen.",
|
|
note: "Praxis statt Buzzwords und Technik nur dort, wo sie wirklich hilft.",
|
|
},
|
|
{
|
|
title: "Hosting in Sachsen",
|
|
description:
|
|
"Deutsche Server, DSGVO-konform und passend für regionale Unternehmen.",
|
|
note: "Greifbar, nachvollziehbar und ohne unnötiges Zusatztheater.",
|
|
},
|
|
];
|
|
|
|
export default function CTASection() {
|
|
return (
|
|
<section className="px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
|
|
<div className="mx-auto max-w-6xl border-y border-border/80 py-8 lg:grid lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.45fr)] lg:gap-12 lg:py-10">
|
|
<div className="max-w-md space-y-4">
|
|
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
Vertrauensanker
|
|
</p>
|
|
<h2 className="text-2xl font-semibold tracking-tight text-balance lg:text-3xl">
|
|
Ein gemeinsamer Startpunkt statt leerer Versprechen.
|
|
</h2>
|
|
<p className="text-base leading-7 text-muted-foreground">
|
|
Noch bevor es um Pakete oder Features geht, soll direkt klar sein,
|
|
warum diese Zusammenarbeit für regionale Unternehmen greifbar und
|
|
verlaesslich wirkt.
|
|
</p>
|
|
</div>
|
|
<dl className="mt-8 grid gap-6 sm:grid-cols-3 lg:mt-0 lg:gap-0">
|
|
{trustAnchors.map((item, index) => (
|
|
<div
|
|
key={item.title}
|
|
className={cn(
|
|
"space-y-3",
|
|
index === 0
|
|
? ""
|
|
: "border-t border-border/70 pt-4 sm:border-t-0 sm:border-l sm:pl-6 sm:pt-0 lg:pl-8",
|
|
)}
|
|
>
|
|
<dt className="text-sm font-medium text-foreground">
|
|
{item.title}
|
|
</dt>
|
|
<dd className="space-y-2">
|
|
<p className="text-lg font-semibold leading-7 text-balance text-foreground">
|
|
{item.description}
|
|
</p>
|
|
<p className="text-sm leading-6 text-muted-foreground">
|
|
{item.note}
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|