69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import { ArrowRight, HeartHandshake, ShieldCheck, Zap } from "lucide-react";
|
|
import { Button } from "@/components/ui/button.tsx";
|
|
import { BookingDialog } from "@/components/booking-dialog.tsx";
|
|
|
|
const trustPoints = [
|
|
{ icon: Zap, label: "Unter 1 Sekunde Ladezeit" },
|
|
{ icon: ShieldCheck, label: "Ohne Update-Pflicht" },
|
|
{ icon: HeartHandshake, label: "Persönlich betreut" },
|
|
];
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="mx-auto max-w-4xl px-4 pt-12 pb-16 md:px-6 md:pt-20 md:pb-24">
|
|
<div className="space-y-6 rise-in">
|
|
<span className="island-kicker inline-flex items-center gap-2">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-[var(--lagoon)]" aria-hidden />
|
|
Für Handwerk, Praxis und Therapie in Bayern
|
|
</span>
|
|
|
|
<h1 className="font-heading text-4xl font-bold leading-[1.05] tracking-tight text-[var(--sea-ink)] sm:text-5xl lg:text-6xl">
|
|
Eine Webseite, die{" "}
|
|
<span className="text-[var(--lagoon-deep)]">neue Kunden bringt</span> - nicht nur gut aussieht.
|
|
</h1>
|
|
|
|
<p className="max-w-xl text-lg text-[var(--sea-ink-soft)] sm:text-xl">
|
|
Damit neue Kunden Sie zuerst finden - nicht die Konkurrenz in der Nachbarschaft.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<BookingDialog>
|
|
<Button
|
|
data-type="accent"
|
|
size="lg"
|
|
className="gap-2"
|
|
data-track="cta_erstgespraech"
|
|
data-source="hero"
|
|
>
|
|
Erstgespräch buchen
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Button>
|
|
</BookingDialog>
|
|
<Button variant="ghost" size="lg" asChild>
|
|
<a
|
|
href="#pricing"
|
|
className="no-underline"
|
|
data-track="cta_pakete_ansehen"
|
|
data-source="hero"
|
|
>
|
|
Pakete ansehen
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<p className="text-sm text-(--sea-ink-soft)">
|
|
30 Minuten, kostenlos - direkt online buchen, keine Warteschleifen.
|
|
</p>
|
|
|
|
<ul className="flex flex-wrap items-center gap-x-6 gap-y-3 pt-2 text-sm text-[var(--sea-ink-soft)]">
|
|
{trustPoints.map(({ icon: Icon, label }) => (
|
|
<li key={label} className="inline-flex items-center gap-2">
|
|
<Icon className="h-4 w-4 text-[var(--lagoon-deep)]" aria-hidden />
|
|
{label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|