69 lines
2.4 KiB
TypeScript
69 lines
2.4 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-14 sm:px-6 lg:px-8 lg:pb-20">
|
|
<div className="mx-auto max-w-6xl border-y border-border/80 py-9 lg:grid lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.55fr)] lg:gap-14 lg:py-11">
|
|
<div className="max-w-md space-y-4 lg:pt-1">
|
|
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
Vor dem Angebot
|
|
</p>
|
|
<h2 className="text-2xl font-semibold tracking-tight text-balance lg:text-3xl">
|
|
Erst verstehen, dann bauen.
|
|
</h2>
|
|
<p className="text-base leading-7 text-muted-foreground">
|
|
Die Zusammenarbeit ist bewusst direkt gehalten: ein Gespräch, eine
|
|
klare Empfehlung und ein Vorschlag, der zu Ihrem Betrieb passt.
|
|
</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-5 sm:border-t-0 sm:border-l sm:pl-6 sm:pt-0 lg:pl-8",
|
|
)}
|
|
>
|
|
<dt className="text-sm font-semibold text-foreground">
|
|
{item.title}
|
|
</dt>
|
|
<dd className="space-y-2">
|
|
<p className="text-base font-medium leading-7 text-balance text-foreground lg:text-lg">
|
|
{item.description}
|
|
</p>
|
|
<p className="text-sm leading-6 text-muted-foreground">
|
|
{item.note}
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|