mathias/webkulisse-saas-tanstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revision vor Kundenübergabe: Plausibilität, SEO, A11y, OpenPanel

Browse Source
This commit is contained in:
mathias
2026-09-10 16:51:09 +02:00
parent 3d4f38bfac
commit 3bb0438215
21 changed files with 839 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/hero.tsx
+46 -46
View File
@@ -10,58 +10,58 @@ const trustPoints = [
export default function Hero() {
return (
<section className="mx-auto max-w-6xl px-4 pt-12 pb-16 md:px-6 md:pt-20 md:pb-24">
<div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
<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>
<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>
<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>
<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">
Erstgespräch buchen
<ArrowRight className="h-4 w-4" />
</Button>
</BookingDialog>
<Button variant="ghost" size="lg" asChild>
<a href="#pricing" className="no-underline">Pakete ansehen</a>
<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>
</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>
</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>
<figure className="island-shell relative overflow-hidden rounded-3xl">
<img
className="block h-full w-full object-cover"
src="https://placehold.co/400x600"
alt="Aufgeräumter Schreibtisch aus Holz mit Laptop"
width="400"
height="600"
loading="eager"
/>
</figure>
<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>
);