328 lines
13 KiB
TypeScript
328 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
ComparisonRow,
|
||
ConceptCode,
|
||
ConceptCommunication,
|
||
ConceptPrice,
|
||
ConceptPrototyping,
|
||
ConceptWebsite,
|
||
} from "../src/components/Landing";
|
||
import { Reveal } from "../src/components/Reveal";
|
||
import { Section } from "../src/components/Section";
|
||
import {
|
||
H1,
|
||
H3,
|
||
LeadText,
|
||
BodyText,
|
||
MonoLabel,
|
||
Label,
|
||
} from "../src/components/Typography";
|
||
import { Card, Container } from "../src/components/Layout";
|
||
import { Button } from "../src/components/Button";
|
||
import { GradientMesh, CodeSnippet } from "../src/components/Effects";
|
||
import { IconList, IconListItem } from "../src/components/IconList";
|
||
import { HeroSection } from "../src/components/HeroSection";
|
||
import { GlitchText } from "../src/components/GlitchText";
|
||
import { Marker } from "../src/components/Marker";
|
||
import { PenCircle } from "../src/components/PenCircle";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
{/* Dark Hero */}
|
||
<HeroSection />
|
||
|
||
{/* Rest of page on white */}
|
||
|
||
{/* Section 02: The Promise – Streamlined */}
|
||
<Section
|
||
number="02"
|
||
title="Das Versprechen"
|
||
borderTop
|
||
effects={<GradientMesh variant="metallic" className="opacity-70" />}
|
||
>
|
||
<div className="space-y-10 md:space-y-16 relative">
|
||
<Reveal>
|
||
<H3 className="max-w-3xl">
|
||
Kein Agentur-Zirkus. <br />
|
||
<Marker delay={0.3}>Ergebnisse.</Marker>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
|
||
{[
|
||
{
|
||
icon: <ConceptCommunication className="w-8 h-8" />,
|
||
title: "Direkte Kommunikation",
|
||
text: "Sie sprechen mit dem Entwickler. Keine Stille Post, keine Umwege.",
|
||
},
|
||
{
|
||
icon: <ConceptPrototyping className="w-8 h-8" />,
|
||
title: "Schnelle Umsetzung",
|
||
text: "Sichtbare Fortschritte in Tagen. Prototypen statt Konzeptpapiere.",
|
||
},
|
||
{
|
||
icon: <ConceptCode className="w-8 h-8" />,
|
||
title: "Sauberer Code",
|
||
text: "Maßgeschneiderte Architektur. Kein Baukasten, kein Plugin-Chaos.",
|
||
},
|
||
{
|
||
icon: <ConceptPrice className="w-8 h-8" />,
|
||
title: "Klare Fixpreise",
|
||
text: "Volle Budgetsicherheit. Keine versteckten Kosten.",
|
||
},
|
||
].map((item, i) => (
|
||
<Reveal key={i} delay={0.1 + i * 0.1}>
|
||
<Card
|
||
variant="glass"
|
||
padding="normal"
|
||
techBorder
|
||
className="group"
|
||
>
|
||
<div className="space-y-4 relative z-10">
|
||
<div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
|
||
{item.icon}
|
||
</div>
|
||
<Label className="text-slate-900">{item.title}</Label>
|
||
<BodyText className="text-slate-500">{item.text}</BodyText>
|
||
</div>
|
||
</Card>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 03: The Difference – Visual Comparison */}
|
||
<Section number="03" title="Der Unterschied" variant="white" borderTop>
|
||
<div className="space-y-10 md:space-y-16 relative">
|
||
<Reveal>
|
||
<H3 className="max-w-3xl">
|
||
Ich arbeite für das Ergebnis, <br />
|
||
nicht gegen die <Marker delay={0.4}>Uhr.</Marker>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 gap-8 relative z-20">
|
||
<ComparisonRow
|
||
negativeLabel="Klassisch"
|
||
negativeText="Wochen in Planung, bevor eine einzige Zeile Code geschrieben wird."
|
||
positiveLabel="Mein Weg"
|
||
positiveText={
|
||
<>
|
||
Schnelle Prototypen. Ergebnisse in{" "}
|
||
<PenCircle delay={0.5}>Tagen</PenCircle>, nicht Monaten.
|
||
</>
|
||
}
|
||
delay={0.1}
|
||
/>
|
||
<ComparisonRow
|
||
negativeLabel="Klassisch"
|
||
negativeText="Unvorhersehbare Kosten durch Stundenabrechnungen."
|
||
positiveLabel="Mein Weg"
|
||
positiveText={
|
||
<>
|
||
<PenCircle delay={0.5}>Fixpreise.</PenCircle> Sie wissen von
|
||
Anfang an, was es kostet.
|
||
</>
|
||
}
|
||
reverse
|
||
delay={0.2}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 04: Target Group */}
|
||
<Section number="04" title="Für wen" borderTop>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 relative z-10">
|
||
<Reveal>
|
||
<Card variant="glass" padding="normal" techBorder className="group">
|
||
<div className="space-y-4 md:space-y-6 relative overflow-hidden">
|
||
<div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
|
||
<ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
|
||
</div>
|
||
<H3 className="text-xl md:text-3xl">
|
||
Unternehmer & <br />
|
||
Geschäftsführer
|
||
</H3>
|
||
<LeadText className="text-slate-400 text-base md:text-lg">
|
||
Sie wollen eine Website, die funktioniert – ohne sich mit
|
||
Technik beschäftigen zu müssen.
|
||
</LeadText>
|
||
</div>
|
||
<div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
|
||
<Label className="group-hover:text-slate-900 transition-colors">
|
||
Perfekt für Sie
|
||
</Label>
|
||
</div>
|
||
</Card>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<Card variant="glass" padding="normal" techBorder className="group">
|
||
<div className="space-y-6 relative overflow-hidden">
|
||
<div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
|
||
{/* Icon placeholder or same as above if needed */}
|
||
<ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
|
||
</div>
|
||
<H3 className="text-xl md:text-3xl">
|
||
Marketing & <br />
|
||
Vertrieb
|
||
</H3>
|
||
<LeadText className="text-slate-400 text-base md:text-lg">
|
||
Sie brauchen Landingpages und Tools, die Ergebnisse liefern.
|
||
Schnell und zuverlässig.
|
||
</LeadText>
|
||
</div>
|
||
<div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
|
||
<Label className="group-hover:text-slate-900 transition-colors">
|
||
Perfekt für Sie
|
||
</Label>
|
||
</div>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 05: Leistungen — Interactive Service Rows */}
|
||
<Section number="05" title="Leistungen" variant="gray" borderTop>
|
||
<div className="space-y-0 relative z-20">
|
||
{[
|
||
{
|
||
num: "01",
|
||
binary: "00000001",
|
||
title: "Websites",
|
||
text: "High-Performance Websites mit maßgeschneiderter Architektur. Von der Konzeption bis zum Go-Live — individuell, schnell, messbar.",
|
||
tags: ["Next.js", "React", "TypeScript", "Performance"],
|
||
href: "/websites",
|
||
},
|
||
{
|
||
num: "02",
|
||
binary: "00000010",
|
||
title: "Systeme",
|
||
text: "Web-Applikationen und interne Tools, wenn Standard-Software nicht reicht. Dashboards, Portale, Automatisierungen.",
|
||
tags: ["Full-Stack", "APIs", "Datenbanken", "Auth"],
|
||
href: "/contact",
|
||
},
|
||
{
|
||
num: "03",
|
||
binary: "00000011",
|
||
title: "Automatisierung",
|
||
text: "Verbindung von Tools, automatische Prozesse, Daten-Synchronisation. Weniger manuelle Arbeit, mehr Effizienz.",
|
||
tags: ["CI/CD", "Workflows", "Integrationen", "Monitoring"],
|
||
href: "/contact",
|
||
},
|
||
].map((service, i) => (
|
||
<Reveal key={i} delay={0.1 + i * 0.15}>
|
||
<div className="group py-8 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
|
||
<div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-16">
|
||
{/* Number + Binary */}
|
||
<div className="shrink-0 flex md:block items-baseline gap-4">
|
||
<span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
|
||
{service.num}
|
||
</span>
|
||
<span
|
||
className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
|
||
aria-hidden="true"
|
||
>
|
||
{service.binary}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 space-y-4 md:space-y-6">
|
||
<H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
|
||
<GlitchText
|
||
trigger="inView"
|
||
delay={0.2 + i * 0.15}
|
||
duration={0.6}
|
||
>
|
||
{service.title}
|
||
</GlitchText>
|
||
</H3>
|
||
<BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
|
||
{service.text}
|
||
</BodyText>
|
||
{/* Tags */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{service.tags.map((tag, j) => (
|
||
<span
|
||
key={j}
|
||
className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<div className="md:self-center shrink-0 pt-4 md:pt-0">
|
||
<Button
|
||
href={service.href}
|
||
variant="ghost"
|
||
size="normal"
|
||
showArrow
|
||
className="w-full md:w-auto"
|
||
>
|
||
Details
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 06: Contact */}
|
||
<Section number="06" title="Kontakt" borderTop>
|
||
<div className="relative py-4 md:py-12" id="contact">
|
||
<Reveal>
|
||
<div className="space-y-8 md:space-y-16">
|
||
<H1 className="text-3xl md:text-8xl">
|
||
Lassen Sie uns <br />
|
||
<span className="text-slate-400">starten.</span>
|
||
</H1>
|
||
|
||
<div className="flex flex-col md:flex-row gap-6 md:gap-16 items-start relative z-10">
|
||
<div className="space-y-4 md:space-y-8 flex-1">
|
||
<LeadText className="text-lg md:text-3xl text-slate-400">
|
||
Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
|
||
<span className="text-slate-900 border-b-2 border-slate-900/10">
|
||
<Marker>zeitnah</Marker>
|
||
</span>{" "}
|
||
bei Ihnen.
|
||
</LeadText>
|
||
<div className="pt-2 md:pt-4">
|
||
<Button
|
||
href="/contact"
|
||
size="large"
|
||
className="w-full md:w-auto"
|
||
>
|
||
Projekt anfragen
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||
<Label className="text-slate-900">Verfügbarkeit</Label>
|
||
</div>
|
||
<BodyText className="text-sm md:text-base leading-snug">
|
||
Aktuell nehme ich Projekte für{" "}
|
||
<span className="font-bold text-slate-900">Q2 2026</span>{" "}
|
||
an.
|
||
</BodyText>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|