310 lines
12 KiB
TypeScript
310 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { Reveal } from "@/src/components/Reveal";
|
||
import { Section } from "@/src/components/Section";
|
||
import { H1, H3, LeadText, BodyText, Label } from "@/src/components/Typography";
|
||
import { Button } from "@/src/components/Button";
|
||
import { HeroSection } from "@/src/components/HeroSection";
|
||
import { Availability } from "@/src/components/Availability";
|
||
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
|
||
import { Marker } from "@/src/components/Marker";
|
||
import { GlitchText } from "@/src/components/GlitchText";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
<AbstractCircuit />
|
||
<HeroSection />
|
||
|
||
{/* Section 02: Ihr Vorteil */}
|
||
<Section number="02" title="Ihr Vorteil" borderTop>
|
||
<div className="space-y-16 md:space-y-32 relative z-10">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
|
||
Sie kümmern sich um Ihr Geschäft.{" "}
|
||
<span className="text-slate-400">
|
||
Ich um Ihre <Marker delay={0.3}>Website.</Marker>
|
||
</span>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||
{[
|
||
{
|
||
title: "Ein Ansprechpartner",
|
||
text: "Direkte Kommunikation. Keine Agentur, keine Projektmanager, kein Stille-Post-Effekt.",
|
||
},
|
||
{
|
||
title: "Fixpreis",
|
||
text: "Keine versteckten Kosten, keine Stundenzettel. Sie wissen exakt, was es kostet.",
|
||
},
|
||
{
|
||
title: "Schnelle Ergebnisse",
|
||
text: "Kein monatelanges Warten. Erste Entwürfe innerhalb weniger Tage.",
|
||
},
|
||
{
|
||
title: "Null Arbeit für Sie",
|
||
text: "Keine CMS-Einarbeitung. Änderungen oder Updates? Eine kurze E-Mail genügt.",
|
||
},
|
||
].map((item, i) => (
|
||
<Reveal key={i} delay={0.1 * i}>
|
||
<div className="space-y-4">
|
||
<div className="h-px w-full bg-slate-100 mb-6" />
|
||
<Label className="text-slate-900 text-lg md:text-xl font-medium tracking-tight">
|
||
{item.title}
|
||
</Label>
|
||
<BodyText className="text-slate-500 text-base md:text-lg">
|
||
{item.text}
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 03: Der Unterschied */}
|
||
<Section number="03" title="Der Unterschied" borderTop>
|
||
<div className="space-y-16 md:space-y-32">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
|
||
Warum nicht einfach{" "}
|
||
<span className="text-slate-400">eine Agentur?</span>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="space-y-12 md:space-y-0">
|
||
{[
|
||
{
|
||
label: "Agentur",
|
||
text: "Projektmanager, Designer, Entwickler — Sie erklären alles drei Mal. Stundenabrechnungen, unklare Endkosten.",
|
||
},
|
||
{
|
||
label: "Baukasten (Wix, etc.)",
|
||
text: "Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt, wenn etwas nicht funktioniert.",
|
||
},
|
||
{
|
||
label: "Bei mir",
|
||
text: "Ein Ansprechpartner. Fixpreis. Ich baue, Sie lehnen sich zurück. Sie brauchen eine Änderung? Kurze Nachricht genügt.",
|
||
highlight: true,
|
||
},
|
||
].map((item, i) => (
|
||
<Reveal key={i} delay={0.1 * i}>
|
||
<div
|
||
className={`grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-8 py-8 md:py-16 border-t ${item.highlight ? "border-slate-900" : "border-slate-100"}`}
|
||
>
|
||
<div className="md:col-span-1">
|
||
<Label
|
||
className={`text-lg md:text-xl ${item.highlight ? "text-slate-900 font-bold" : "text-slate-400"}`}
|
||
>
|
||
{item.label}
|
||
</Label>
|
||
</div>
|
||
<div className="md:col-span-3">
|
||
<LeadText
|
||
className={`text-xl md:text-3xl leading-snug ${item.highlight ? "text-slate-900" : "text-slate-500"}`}
|
||
>
|
||
{item.text}
|
||
</LeadText>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 04: Zielgruppe */}
|
||
<Section number="04" title="Für wen" borderTop>
|
||
<div className="space-y-16 md:space-y-32">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
|
||
Fokus auf das <span className="text-slate-400">Wesentliche.</span>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||
<Reveal>
|
||
<div className="space-y-8">
|
||
<H3 className="text-2xl md:text-4xl">
|
||
Unternehmer & Geschäftsführer
|
||
</H3>
|
||
<LeadText className="text-slate-500">
|
||
Sie brauchen eine professionelle Website, die Ihr Unternehmen
|
||
repräsentiert — ohne sich selbst mit Technik beschäftigen zu
|
||
müssen. Ich übernehme alles.
|
||
</LeadText>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<div className="space-y-8">
|
||
<H3 className="text-2xl md:text-4xl">
|
||
Selbstständige & kleine Teams
|
||
</H3>
|
||
<LeadText className="text-slate-500">
|
||
Sie wollen online sichtbar sein, aber keine Zeit in eine
|
||
Website stecken. Ich liefere eine fertige Lösung, damit Sie
|
||
sich auf Ihre Kunden konzentrieren können.
|
||
</LeadText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 05: Leistungen */}
|
||
<Section number="05" title="Leistungen" borderTop>
|
||
<div className="space-y-0">
|
||
{[
|
||
{
|
||
title: "Websites",
|
||
text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Ohne Overhead.",
|
||
href: "/websites",
|
||
},
|
||
{
|
||
title: "Sorglos-Paket",
|
||
text: "Änderungen, Wartung, Sicherheit — alles inklusive. Sie sagen Bescheid, ich erledige das.",
|
||
href: "/contact",
|
||
},
|
||
{
|
||
title: "Web-Anwendungen",
|
||
text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
|
||
href: "/showcase",
|
||
},
|
||
].map((service, i) => (
|
||
<Reveal key={i} delay={0.1 * i}>
|
||
<a href={service.href} className="group block">
|
||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 py-12 md:py-20 border-b border-slate-100 transition-colors hover:border-slate-300">
|
||
<div className="space-y-4 max-w-2xl">
|
||
<H3 className="text-3xl md:text-5xl group-hover:translate-x-2 transition-transform duration-500">
|
||
{service.title}
|
||
</H3>
|
||
<LeadText className="text-slate-400 group-hover:text-slate-600 transition-colors">
|
||
{service.text}
|
||
</LeadText>
|
||
</div>
|
||
<div className="text-slate-300 group-hover:text-slate-900 transition-colors pb-1">
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 06: Blog / Insights */}
|
||
<Section number="06" title="Einblicke" borderTop>
|
||
<div className="space-y-16 md:space-y-32">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
|
||
Wissen statt <span className="text-slate-400">Werbung.</span>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||
<Reveal>
|
||
<div className="space-y-8">
|
||
<Label className="text-slate-400">Aktueller Artikel</Label>
|
||
<H3 className="text-2xl md:text-4xl leading-tight">
|
||
Warum Websites nach Updates oft brechen – und wie man das
|
||
verhindert.
|
||
</H3>
|
||
<Button
|
||
href="/blog/why-websites-break-after-updates"
|
||
variant="outline"
|
||
>
|
||
Artikel lesen
|
||
</Button>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<div className="space-y-8 border-l border-slate-100 pl-8 md:pl-12 flex flex-col justify-end">
|
||
<LeadText className="text-slate-500">
|
||
Ich teile meine Gedanken zu digitaler Architektur, Fixpreisen
|
||
und warum weniger oft mehr ist.
|
||
</LeadText>
|
||
<a
|
||
href="/blog"
|
||
className="text-slate-900 font-bold hover:underline underline-offset-4"
|
||
>
|
||
Alle Artikel ansehen →
|
||
</a>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 07: Contact */}
|
||
<Section
|
||
number="07"
|
||
title="Kontakt"
|
||
borderTop
|
||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||
>
|
||
<div className="relative py-12 md:py-32" id="contact">
|
||
<Reveal>
|
||
<div className="space-y-12 md:space-y-24 relative z-10">
|
||
<H1 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||
Bereit für den Start? <br />
|
||
<span className="text-slate-400">
|
||
<GlitchText delay={0.5} duration={1}>
|
||
Sagen Sie Hallo.
|
||
</GlitchText>
|
||
</span>
|
||
</H1>
|
||
|
||
<div className="flex flex-col md:flex-row gap-12 md:gap-24 items-start">
|
||
<div className="space-y-8 flex-1">
|
||
<LeadText className="text-2xl md:text-4xl text-slate-500 leading-snug">
|
||
Schreiben Sie mir kurz, was Sie vorhaben. Ich melde mich
|
||
innerhalb von 24 Stunden bei Ihnen.
|
||
</LeadText>
|
||
<div className="pt-4">
|
||
<Button
|
||
href="/contact"
|
||
size="large"
|
||
className="text-lg px-8 py-4"
|
||
>
|
||
Jetzt Nachricht schreiben
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full md:w-80 space-y-4 pt-4 md:pt-0">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-2 h-2 bg-slate-900 rounded-full"></div>
|
||
<Label className="text-slate-900 text-sm">
|
||
Verfügbarkeit
|
||
</Label>
|
||
</div>
|
||
<BodyText className="text-slate-500">
|
||
Aktuell nehme ich Projekte für{" "}
|
||
<span className="font-bold text-slate-900">
|
||
<Availability />
|
||
</span>{" "}
|
||
an.
|
||
</BodyText>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|