Auth fertig erstellt. Aktuell läuft review durch KI

2026-08-29 14:07:44 +02:00
commit 625d026f59
70 changed files with 17032 additions and 0 deletions
@@ -0,0 +1,68 @@
+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-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>
+
+                    <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">
+                                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>
+                        </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>
+
+                <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>
+            </div>
+        </section>
+    );
+}