style: radically simplify layouts to be extremely modern and minimalist
Build & Deploy / 🔍 Prepare (push) Successful in 9s
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🩺 Smoke Test (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🔍 Prepare (push) Successful in 9s
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🩺 Smoke Test (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
This commit is contained in:
+118
-231
@@ -1,215 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Section } from "@/src/components/Section";
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import {
|
||||
ExperienceIllustration,
|
||||
ResponsibilityIllustration,
|
||||
ResultIllustration,
|
||||
ContactIllustration,
|
||||
HeroLines,
|
||||
ParticleNetwork,
|
||||
GridLines,
|
||||
} from "@/src/components/Landing";
|
||||
import { Section } from "@/src/components/Section";
|
||||
import { Signature } from "@/src/components/Signature";
|
||||
import { Check } from "lucide-react";
|
||||
import {
|
||||
H1,
|
||||
H3,
|
||||
H4,
|
||||
LeadText,
|
||||
BodyText,
|
||||
Label,
|
||||
MonoLabel,
|
||||
} from "@/src/components/Typography";
|
||||
import { Card, Container } from "@/src/components/Layout";
|
||||
import { Button } from "@/src/components/Button";
|
||||
import { IconList, IconListItem } from "@/src/components/IconList";
|
||||
import {
|
||||
GradientMesh,
|
||||
CodeSnippet,
|
||||
AbstractCircuit,
|
||||
} from "@/src/components/Effects";
|
||||
|
||||
import { Marker } from "@/src/components/Marker";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
|
||||
<Container variant="narrow" className="relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
|
||||
<section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-12">
|
||||
<Reveal width="fit-content">
|
||||
<div className="relative">
|
||||
<div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
|
||||
<div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
|
||||
<img
|
||||
src="/marc-mintel.png"
|
||||
alt="Marc Mintel"
|
||||
className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0 w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-40 h-40 md:w-56 md:h-56 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<img
|
||||
src="/marc-mintel.png"
|
||||
alt="Marc Mintel"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="space-y-3 md:space-y-6 max-w-3xl">
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
|
||||
<div className="h-px w-6 md:w-8 bg-slate-900"></div>
|
||||
<MonoLabel className="text-slate-900 text-[10px] md:text-sm">
|
||||
Webentwickler
|
||||
</MonoLabel>
|
||||
<div className="h-px w-6 md:w-8 bg-slate-900"></div>
|
||||
</div>
|
||||
<MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
|
||||
WEBENTWICKLER
|
||||
</MonoLabel>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<H1 className="text-4xl md:text-8xl leading-none tracking-tighter">
|
||||
<H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Über <span className="text-slate-400">mich.</span>
|
||||
</H1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-400 font-medium max-w-xl mx-auto text-sm md:text-xl">
|
||||
<p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
|
||||
15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
|
||||
ersparen.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
{/* Connector to first section */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md:h-16 bg-gradient-to-b from-transparent to-slate-200" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 01: Story */}
|
||||
<Section
|
||||
number="01"
|
||||
title="Erfahrung"
|
||||
borderTop
|
||||
illustration={<ExperienceIllustration className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<Section number="01" title="Erfahrung" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Aus der Praxis. <br />
|
||||
<span className="text-slate-400">Für die Praxis.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-6 md:space-y-8">
|
||||
<LeadText className="text-xl md:text-2xl text-slate-400">
|
||||
Ich habe in Agenturen, Konzernen und Startups gearbeitet.
|
||||
Dabei habe ich oft gesehen, woran Projekte scheitern: zu viele
|
||||
Leute, zu viel Blabla, keine klaren Verantwortlichkeiten.{" "}
|
||||
<span className="text-slate-900">
|
||||
<Marker delay={0.2}>Das mache ich anders.</Marker>
|
||||
</span>
|
||||
</LeadText>
|
||||
<IconList className="space-y-4">
|
||||
{[
|
||||
"Kein Fachchinesisch, sondern klare Kommunikation",
|
||||
"Fokus auf Ergebnisse statt auf endlose Meetings",
|
||||
"Eine Person, die Ihr Projekt von A bis Z kennt",
|
||||
].map((item, i) => (
|
||||
<IconListItem key={i} bullet>
|
||||
<BodyText className="text-lg">{item}</BodyText>
|
||||
</IconListItem>
|
||||
))}
|
||||
</IconList>
|
||||
</div>
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
|
||||
habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
|
||||
viel Blabla.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<Card
|
||||
variant="gray"
|
||||
hover={false}
|
||||
padding="normal"
|
||||
className="group"
|
||||
>
|
||||
<H4 className="text-xl mb-6">
|
||||
Meine Philosophie: Direkte Zusammenarbeit ohne
|
||||
Reibungsverluste.
|
||||
</H4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{["Unkompliziert", "Persönlich", "Verlässlich"].map(
|
||||
(tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm"
|
||||
>
|
||||
<Label className="text-slate-900">{tag}</Label>
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
<div className="space-y-12">
|
||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
||||
Das mache ich anders. Keine Hierarchien, kein Fachchinesisch,
|
||||
sondern klare Kommunikation. Fokus auf Ergebnisse statt auf
|
||||
endlose Meetings.
|
||||
</BodyText>
|
||||
<div className="space-y-6 border-l border-slate-100 pl-8">
|
||||
<div>
|
||||
<Label className="text-slate-900 text-lg">Direkt</Label>
|
||||
<BodyText className="text-slate-500">
|
||||
Sie sprechen immer mit mir.
|
||||
</BodyText>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-900 text-lg">
|
||||
Unkompliziert
|
||||
</Label>
|
||||
<BodyText className="text-slate-500">
|
||||
Wir beschränken uns auf das Wesentliche.
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 02: Arbeitsweise – HOW I work */}
|
||||
<Section
|
||||
number="02"
|
||||
title="Ablauf"
|
||||
variant="gray"
|
||||
borderTop
|
||||
illustration={<ResponsibilityIllustration className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="subtle" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
{/* Section 02: Ablauf */}
|
||||
<Section number="02" title="Ablauf" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
So einfach läuft ein Projekt <br />
|
||||
<span className="text-slate-400">bei mir ab.</span>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
So einfach läuft <br />
|
||||
<span className="text-slate-400">ein Projekt ab.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
{/* Timeline Steps */}
|
||||
<div className="space-y-1 relative">
|
||||
{/* Connecting line */}
|
||||
<div className="absolute left-[15px] top-8 bottom-8 w-px bg-slate-200 hidden md:block" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{[
|
||||
{
|
||||
step: "01",
|
||||
title: "Kurzes Gespräch",
|
||||
desc: "Sie beschreiben, was Sie brauchen. Kein stundenlanger Workshop, nur die Fakten.",
|
||||
desc: "Kein Workshop, nur die Fakten.",
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Klares Angebot",
|
||||
desc: "Sie erhalten einen Fixpreis. Ohne Sternchen, ohne Nachforderungen.",
|
||||
desc: "Fixpreis ohne Sternchen.",
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Schnelle Umsetzung",
|
||||
desc: "Ich baue Ihre Website. Sie müssen sich um nichts kümmern.",
|
||||
title: "Umsetzung",
|
||||
desc: "Ich baue, Sie entspannen.",
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Go-Live & Sorglos-Paket",
|
||||
desc: "Die Seite geht online und ich übernehme ab sofort die Wartung und alle Änderungen für Sie.",
|
||||
title: "Go-Live & Support",
|
||||
desc: "Ich übernehme die Wartung.",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={0.1 + i * 0.1}>
|
||||
<div className="flex gap-4 md:gap-6 py-2 md:py-6 group">
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
|
||||
<span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
|
||||
{item.step}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 md:space-y-2 pt-1">
|
||||
<H4 className="text-base md:text-xl font-bold">
|
||||
<Reveal key={i} delay={0.1 * i}>
|
||||
<div className="space-y-6 pt-6 border-t border-slate-900">
|
||||
<Label className="text-slate-400 font-mono text-sm">
|
||||
{item.step}
|
||||
</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900 text-xl">
|
||||
{item.title}
|
||||
</H4>
|
||||
<BodyText className="text-slate-500 text-sm md:text-base">
|
||||
</Label>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
{item.desc}
|
||||
</BodyText>
|
||||
</div>
|
||||
@@ -220,110 +152,65 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 03: Garantie – The Pledge */}
|
||||
{/* Section 03: Garantie */}
|
||||
<Section number="03" title="Garantie" borderTop>
|
||||
<div className="relative">
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<div className="max-w-4xl text-left space-y-12 md:space-y-16 py-8 md:py-16">
|
||||
<H3 className="text-3xl md:text-6xl leading-tight">
|
||||
Ich stehe für <br />
|
||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
||||
</H3>
|
||||
|
||||
<div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed">
|
||||
<p>
|
||||
Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt,
|
||||
liegt die Verantwortung allein bei mir.
|
||||
</p>
|
||||
<p>
|
||||
Sie beauftragen mich, damit Sie{" "}
|
||||
<span className="text-slate-900 font-medium relative inline-block">
|
||||
Ruhe
|
||||
<svg
|
||||
className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30"
|
||||
viewBox="0 0 100 10"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 5 Q 50 10 100 5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</span>{" "}
|
||||
haben. Und genau das bekommen Sie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl text-left">
|
||||
<div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
|
||||
<h4 className="font-bold text-slate-900 mb-2">
|
||||
Fixpreis-Garantie
|
||||
</h4>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Keine versteckten Kosten. Der vereinbarte Preis ist final.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
|
||||
<h4 className="font-bold text-slate-900 mb-2">
|
||||
Zufriedenheitsgarantie
|
||||
</h4>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Wir gehen erst live, wenn Sie zu 100% zufrieden sind.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 md:pt-12 flex flex-col items-start">
|
||||
<div className="w-64 md:w-80">
|
||||
<Signature delay={0.5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Ich stehe für <br />
|
||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-end">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-8">
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Wenn etwas nicht passt, liegt die Verantwortung allein bei
|
||||
mir.
|
||||
</LeadText>
|
||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
||||
Sie beauftragen mich, damit Sie Ruhe haben. Fixpreis bedeutet
|
||||
Fixpreis. Wir gehen erst live, wenn Sie zu 100% zufrieden
|
||||
sind.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<div className="pb-8">
|
||||
<Signature />
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 04: CTA */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Kontakt"
|
||||
variant="gray"
|
||||
borderTop
|
||||
illustration={<ContactIllustration className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-10 md:space-y-12">
|
||||
<Reveal>
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
Bereit, Ihre Website <br />
|
||||
<span className="text-slate-400">abzuhaken?</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<Section number="04" title="Kontakt" borderTop>
|
||||
<div className="py-12 md:py-24">
|
||||
<div className="space-y-16 md:space-y-24">
|
||||
<Reveal>
|
||||
<H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Bereit, das Thema <br />
|
||||
<span className="text-slate-400">abzuhaken?</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<Card
|
||||
variant="glass"
|
||||
hover={false}
|
||||
padding="normal"
|
||||
techBorder
|
||||
className="rounded-3xl shadow-xl relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative z-10 space-y-6 md:space-y-8">
|
||||
<LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
|
||||
Lassen Sie uns das Thema Website ein für alle Mal{" "}
|
||||
<span className="text-slate-900">
|
||||
sinnvoll <Marker delay={0.3}>lösen.</Marker>
|
||||
</span>
|
||||
</LeadText>
|
||||
|
||||
<div className="pt-2 md:pt-4">
|
||||
<Button href="/contact" className="w-full md:w-auto">
|
||||
<Reveal delay={0.2}>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
||||
<LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
|
||||
Lassen Sie uns das Thema Website ein für alle Mal sinnvoll
|
||||
lösen.
|
||||
</LeadText>
|
||||
<Button
|
||||
href="/contact"
|
||||
className="w-full md:w-auto px-12 py-6 text-xl"
|
||||
>
|
||||
Kostenlos anfragen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
+132
-224
@@ -1,94 +1,56 @@
|
||||
"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 { H1, H3, LeadText, BodyText, Label } from "@/src/components/Typography";
|
||||
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";
|
||||
import { Availability } from "@/src/components/Availability";
|
||||
|
||||
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: Was Sie bekommen */}
|
||||
<Section
|
||||
number="02"
|
||||
title="Ihr Vorteil"
|
||||
borderTop
|
||||
effects={<GradientMesh variant="metallic" className="opacity-70" />}
|
||||
>
|
||||
<div className="space-y-10 md:space-y-16 relative">
|
||||
{/* Section 02: Ihr Vorteil */}
|
||||
<Section number="02" title="Ihr Vorteil" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="max-w-3xl">
|
||||
Sie kümmern sich um Ihr Geschäft. <br />
|
||||
<Marker delay={0.3}>Ich um Ihre Website.</Marker>
|
||||
<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 Website.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
{[
|
||||
{
|
||||
icon: <ConceptCommunication className="w-8 h-8" />,
|
||||
title: "Ein Ansprechpartner",
|
||||
text: "Sie sprechen direkt mit dem, der Ihre Website baut. Keine Agentur, keine Umwege, kein Stille-Post-Effekt.",
|
||||
text: "Direkte Kommunikation. Keine Agentur, keine Projektmanager, kein Stille-Post-Effekt.",
|
||||
},
|
||||
{
|
||||
icon: <ConceptPrototyping className="w-8 h-8" />,
|
||||
title: "Schnell sichtbare Ergebnisse",
|
||||
text: "Kein monatelanges Warten. Sie sehen erste Entwürfe innerhalb weniger Tage — nicht erst nach Wochen.",
|
||||
title: "Fixpreis",
|
||||
text: "Keine versteckten Kosten, keine Stundenzettel. Sie wissen exakt, was es kostet.",
|
||||
},
|
||||
{
|
||||
icon: <ConceptPrice className="w-8 h-8" />,
|
||||
title: "Fixpreis ohne Überraschungen",
|
||||
text: "Sie wissen vorher, was es kostet. Kein Stundenzettel, keine Nachforderungen, keine bösen Überraschungen.",
|
||||
title: "Schnelle Ergebnisse",
|
||||
text: "Kein monatelanges Warten. Erste Entwürfe innerhalb weniger Tage.",
|
||||
},
|
||||
{
|
||||
icon: <ConceptCode className="w-8 h-8" />,
|
||||
title: "Null Arbeit für Sie",
|
||||
text: "Keine Einarbeitung in ein CMS, keine Schulungen. Änderungen? Sagen Sie Bescheid — ich erledige das.",
|
||||
text: "Keine CMS-Einarbeitung. Änderungen oder Updates? Eine kurze E-Mail genügt.",
|
||||
},
|
||||
].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 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>
|
||||
@@ -96,195 +58,142 @@ export default function LandingPage() {
|
||||
</Section>
|
||||
|
||||
{/* Section 03: Der Unterschied */}
|
||||
<Section number="03" title="Der Unterschied" variant="white" borderTop>
|
||||
<div className="space-y-10 md:space-y-16 relative">
|
||||
<Section number="03" title="Der Unterschied" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="max-w-3xl">
|
||||
Warum nicht einfach <br />
|
||||
eine <Marker delay={0.4}>Agentur?</Marker>
|
||||
<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="grid grid-cols-1 gap-8 relative z-20">
|
||||
<ComparisonRow
|
||||
negativeLabel="Agentur"
|
||||
negativeText="Projektmanager, Designer, Entwickler — Sie erklären Ihr Anliegen drei Mal."
|
||||
positiveLabel="Bei mir"
|
||||
positiveText={
|
||||
<>
|
||||
<PenCircle delay={0.5}>Ein</PenCircle> Ansprechpartner für
|
||||
alles. Von der ersten Idee bis zur fertigen Website.
|
||||
</>
|
||||
}
|
||||
delay={0.1}
|
||||
/>
|
||||
<ComparisonRow
|
||||
negativeLabel="Agentur"
|
||||
negativeText="Stundenabrechnungen, Nachträge, unklare Endkosten."
|
||||
positiveLabel="Bei mir"
|
||||
positiveText={
|
||||
<>
|
||||
<PenCircle delay={0.5}>Fixpreis.</PenCircle> Sie wissen vorher
|
||||
exakt, was es kostet. Punkt.
|
||||
</>
|
||||
}
|
||||
reverse
|
||||
delay={0.2}
|
||||
/>
|
||||
<ComparisonRow
|
||||
negativeLabel="Baukasten"
|
||||
negativeText="Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt."
|
||||
positiveLabel="Bei mir"
|
||||
positiveText={
|
||||
<>
|
||||
Ich baue, Sie lehnen sich zurück. Brauchen Sie eine Änderung?{" "}
|
||||
<PenCircle delay={0.5}>Kurze Nachricht</PenCircle> genügt.
|
||||
</>
|
||||
}
|
||||
delay={0.3}
|
||||
/>
|
||||
<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: Für wen */}
|
||||
{/* Section 04: Zielgruppe */}
|
||||
<Section number="04" title="Für wen" borderTop>
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-10 relative z-10">
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<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 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-400 text-base md:text-lg">
|
||||
<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>
|
||||
<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">
|
||||
<ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
|
||||
</div>
|
||||
<H3 className="text-xl md:text-3xl">
|
||||
Selbstständige & <br />
|
||||
kleine Teams
|
||||
</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-400 text-base md:text-lg">
|
||||
<LeadText className="text-slate-500">
|
||||
Sie wollen online sichtbar sein, aber keine Zeit in eine
|
||||
Website stecken. Ich liefere Ihnen eine fertige Lösung — Sie
|
||||
konzentrieren sich auf Ihre Kunden.
|
||||
Website stecken. Ich liefere eine fertige Lösung, damit Sie
|
||||
sich auf Ihre Kunden konzentrieren können.
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 05: Leistungen */}
|
||||
<Section number="05" title="Leistungen" variant="gray" borderTop>
|
||||
<div className="space-y-0 relative z-20">
|
||||
<Section number="05" title="Leistungen" borderTop>
|
||||
<div className="space-y-0">
|
||||
{[
|
||||
{
|
||||
num: "01",
|
||||
binary: "00000001",
|
||||
title: "Websites",
|
||||
text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Von der Firmenwebsite bis zur Landingpage.",
|
||||
tags: ["Firmenwebsite", "Landingpage", "Responsive", "SEO"],
|
||||
text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Ohne Overhead.",
|
||||
href: "/websites",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
binary: "00000010",
|
||||
title: "Sorglos-Paket",
|
||||
text: "Änderungen, Wartung, Sicherheit, Updates — alles inklusive. Sie sagen Bescheid, ich erledige das. Ein Jahr, ein Paket, null Aufwand.",
|
||||
tags: ["Wartung", "Änderungen", "Sicherheit", "Updates"],
|
||||
text: "Änderungen, Wartung, Sicherheit — alles inklusive. Sie sagen Bescheid, ich erledige das.",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
binary: "00000011",
|
||||
title: "Web-Anwendungen",
|
||||
text: "Wenn eine einfache Website nicht reicht: Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
|
||||
tags: ["Portale", "Dashboards", "Automatisierung", "Tools"],
|
||||
text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
|
||||
href: "/contact",
|
||||
},
|
||||
].map((service, i) => (
|
||||
<Reveal key={i} delay={0.1 + i * 0.15}>
|
||||
<div className="group py-8 md:py-12 lg: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-10 lg: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>
|
||||
<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>
|
||||
<BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
|
||||
<LeadText className="text-slate-400 group-hover:text-slate-600 transition-colors">
|
||||
{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>
|
||||
</LeadText>
|
||||
</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"
|
||||
<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"
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
@@ -292,40 +201,39 @@ export default function LandingPage() {
|
||||
|
||||
{/* Section 06: Contact */}
|
||||
<Section number="06" title="Kontakt" borderTop>
|
||||
<div className="relative py-4 md:py-12" id="contact">
|
||||
<div className="relative py-12 md:py-32" id="contact">
|
||||
<Reveal>
|
||||
<div className="space-y-8 md:space-y-12 lg:space-y-16">
|
||||
<H1 className="text-4xl md:text-6xl lg:text-8xl">
|
||||
<div className="space-y-12 md:space-y-24">
|
||||
<H1 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Klingt gut? <br />
|
||||
<span className="text-slate-400">Lassen Sie uns reden.</span>
|
||||
</H1>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6 md:gap-10 lg: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, was Sie brauchen. Ich melde mich{" "}
|
||||
<span className="text-slate-900 border-b-2 border-slate-900/10">
|
||||
<Marker>innerhalb von 24 Stunden</Marker>
|
||||
</span>{" "}
|
||||
mit einem konkreten Vorschlag.
|
||||
<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">
|
||||
Beschreiben Sie kurz, was Sie brauchen. Ich melde mich
|
||||
innerhalb von 24 Stunden mit einem konkreten Vorschlag.
|
||||
</LeadText>
|
||||
<div className="pt-2 md:pt-4">
|
||||
<div className="pt-4">
|
||||
<Button
|
||||
href="/contact"
|
||||
size="large"
|
||||
className="w-full md:w-auto"
|
||||
className="text-lg px-8 py-4"
|
||||
>
|
||||
Kostenlos 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="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-green-500 rounded-full animate-pulse"></div>
|
||||
<Label className="text-slate-900">Verfügbarkeit</Label>
|
||||
<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-sm md:text-base leading-snug">
|
||||
<BodyText className="text-slate-500">
|
||||
Aktuell nehme ich Projekte für{" "}
|
||||
<span className="font-bold text-slate-900">
|
||||
<Availability />
|
||||
|
||||
@@ -3,54 +3,35 @@
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import { Section } from "@/src/components/Section";
|
||||
import {
|
||||
SpeedPerformance,
|
||||
SolidFoundation,
|
||||
LayerSeparation,
|
||||
TaskDone,
|
||||
} from "@/src/components/Landing";
|
||||
import {
|
||||
H1,
|
||||
H3,
|
||||
LeadText,
|
||||
BodyText,
|
||||
Label,
|
||||
MonoLabel,
|
||||
} from "@/src/components/Typography";
|
||||
import { Card } from "@/src/components/Layout";
|
||||
import { Button } from "@/src/components/Button";
|
||||
import { IconList, IconListItem } from "@/src/components/IconList";
|
||||
import {
|
||||
GradientMesh,
|
||||
CodeSnippet,
|
||||
AbstractCircuit,
|
||||
CMSVisualizer,
|
||||
ArchitectureVisualizer,
|
||||
ResultVisualizer,
|
||||
} from "@/src/components/Effects";
|
||||
import { Marker } from "@/src/components/Marker";
|
||||
|
||||
export default function WebsitesPage() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||
<AbstractCircuit />
|
||||
|
||||
<Section className="pt-24 pb-12 md:pt-40 md:pb-24">
|
||||
<div className="space-y-12 md:space-y-24">
|
||||
<div className="space-y-6 md:space-y-10 max-w-5xl">
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<div className="space-y-10 max-w-4xl">
|
||||
<Reveal>
|
||||
<div className="space-y-4">
|
||||
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
|
||||
<div className="space-y-6">
|
||||
<MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
|
||||
PROFESSIONELLE WEBSITES
|
||||
</MonoLabel>
|
||||
<H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
|
||||
<H1 className="text-5xl md:text-8xl lg:text-9xl leading-[0.9] tracking-tighter">
|
||||
Ihre Website. <br />
|
||||
<span className="text-slate-400">
|
||||
<Marker>Komplett sorgenfrei.</Marker>
|
||||
</span>
|
||||
</H3>
|
||||
<span className="text-slate-400">Komplett sorgenfrei.</span>
|
||||
</H1>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
|
||||
<LeadText className="text-xl md:text-3xl text-slate-500 leading-snug">
|
||||
Kein WordPress-Chaos. Kein Baukasten-Frust. Ich baue Ihnen eine
|
||||
maßgeschneiderte Website, mit der Sie{" "}
|
||||
<span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
|
||||
@@ -61,312 +42,190 @@ export default function WebsitesPage() {
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{/* Keeping the ArchitectureVisualizer for visual impact, but context is different */}
|
||||
<Reveal delay={0.3} direction="up">
|
||||
<ArchitectureVisualizer />
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Reveal delay={0.3}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 py-12 md:py-20 border-y border-slate-100">
|
||||
{[
|
||||
{
|
||||
label: "Kein CMS-Zwang",
|
||||
sub: "Einfachheit",
|
||||
desc: "Sie müssen kein System lernen. Ich übernehme alle Updates.",
|
||||
desc: "Sie müssen kein System lernen. Ich übernehme alles.",
|
||||
},
|
||||
{
|
||||
label: "Fixpreis",
|
||||
sub: "Planbarkeit",
|
||||
desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
|
||||
},
|
||||
{
|
||||
label: "Pfeilschnell",
|
||||
sub: "Performance",
|
||||
desc: "Keine langen Ladezeiten. Ihre Kunden bleiben auf der Seite.",
|
||||
desc: "Keine langen Ladezeiten. Kunden bleiben auf der Seite.",
|
||||
},
|
||||
{
|
||||
label: "Sorglos",
|
||||
sub: "Betreuung",
|
||||
desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={0.4 + i * 0.1}>
|
||||
<div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
|
||||
<Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
|
||||
{item.label}
|
||||
</Label>
|
||||
<BodyText className="text-xs text-slate-400">
|
||||
{item.desc}
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
<div key={i} className="space-y-4">
|
||||
<Label className="text-slate-900 text-lg">{item.label}</Label>
|
||||
<BodyText className="text-slate-500">{item.desc}</BodyText>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 02: Performance */}
|
||||
<Section
|
||||
number="02"
|
||||
title="Schnelligkeit"
|
||||
borderTop
|
||||
variant="gray"
|
||||
illustration={<SpeedPerformance className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<Section number="02" title="Schnelligkeit" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Niemand wartet gerne. <br />
|
||||
<span className="text-slate-400">
|
||||
Ihre Kunden <Marker delay={0.3}>erst recht nicht.</Marker>
|
||||
Ihre Kunden erst recht nicht.
|
||||
</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
|
||||
<div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
|
||||
Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
|
||||
sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
|
||||
Websites sind auf maximale Geschwindigkeit optimiert.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<Reveal delay={0.4}>
|
||||
<IconList className="space-y-2 md:space-y-4">
|
||||
{[
|
||||
"Sofortiger Seitenaufbau ohne Verzögerung",
|
||||
"Automatische Bild-Optimierung für Smartphones",
|
||||
"Bessere Google-Platzierung (SEO) durch Top-Speed",
|
||||
"Höhere Zufriedenheit bei Ihren Besuchern",
|
||||
].map((item, i) => (
|
||||
<IconListItem key={i} bullet>
|
||||
<LeadText className="text-base md:text-xl">
|
||||
{item}
|
||||
</LeadText>
|
||||
</IconListItem>
|
||||
))}
|
||||
</IconList>
|
||||
</Reveal>
|
||||
</div>
|
||||
<div className="md:col-span-5">
|
||||
<Reveal delay={0.6}>
|
||||
<Card
|
||||
variant="glass"
|
||||
padding="normal"
|
||||
techBorder
|
||||
className="text-center group py-10 md:py-12"
|
||||
>
|
||||
<div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
|
||||
100%
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-xl md:text-2xl text-slate-500">
|
||||
Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
|
||||
sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
|
||||
Websites sind auf maximale Geschwindigkeit optimiert.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<div className="space-y-8 border-l border-slate-100 pl-8 md:pl-12">
|
||||
{[
|
||||
"Sofortiger Seitenaufbau ohne Verzögerung",
|
||||
"Automatische Bild-Optimierung für Smartphones",
|
||||
"Bessere Google-Platzierung (SEO) durch Top-Speed",
|
||||
].map((item, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Label className="text-slate-900">0{i + 1}</Label>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
{item}
|
||||
</BodyText>
|
||||
</div>
|
||||
<Label className="mt-4">Fokus auf das Wesentliche</Label>
|
||||
<span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
|
||||
SCHNELL · SICHER · ZUVERLÄSSIG
|
||||
</span>
|
||||
</Card>
|
||||
</Reveal>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 03: Code-Qualität */}
|
||||
<Section
|
||||
number="03"
|
||||
title="Qualität"
|
||||
borderTop
|
||||
illustration={<SolidFoundation className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<Section number="03" title="Qualität" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Handarbeit statt <br />
|
||||
<span className="text-slate-400">Fertigbausatz.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
|
||||
Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
|
||||
Themes, die ständig aktualisiert werden müssen.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Reveal delay={0.4}>
|
||||
<CodeSnippet variant="git" />
|
||||
</Reveal>
|
||||
<Reveal delay={0.5}>
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
<Card variant="glass" padding="normal" className="group">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900">
|
||||
Saubere Programmierung
|
||||
</Label>
|
||||
<BodyText>
|
||||
Ihre Website wird von Grund auf solide entwickelt. Kein
|
||||
unnötiger Ballast, der die Seite verlangsamt oder
|
||||
angreifbar macht.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Card>
|
||||
<Card variant="glass" padding="normal" className="group">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900">Zukunftssicher</Label>
|
||||
<BodyText>
|
||||
Moderne Technologien garantieren, dass Ihre Website auch
|
||||
in ein paar Jahren noch perfekt und fehlerfrei läuft.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 04: Content-System -> Sorglos Paket */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Das Sorglos-Paket"
|
||||
borderTop
|
||||
variant="gray"
|
||||
illustration={<LayerSeparation className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="subtle" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12 md:space-y-20">
|
||||
<div className="space-y-6 md:space-y-10 max-w-5xl">
|
||||
<Reveal>
|
||||
<div className="space-y-4">
|
||||
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
|
||||
NULL AUFWAND FÜR SIE
|
||||
</MonoLabel>
|
||||
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
|
||||
Sie haben Besseres <br />
|
||||
<span className="text-slate-400 italic font-serif">
|
||||
zu tun.
|
||||
</span>
|
||||
</H3>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
<Reveal delay={0.2}>
|
||||
<div className="space-y-6">
|
||||
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
|
||||
Bilder tauschen, Texte anpassen, Sicherheitsupdates
|
||||
einspielen? Darum kümmern Sie sich nie wieder. Das{" "}
|
||||
<span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
|
||||
erledige ich.
|
||||
</span>
|
||||
</LeadText>
|
||||
<LeadText className="text-xl md:text-2xl text-slate-500">
|
||||
Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
|
||||
Themes, die ständig aktualisiert werden müssen.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<div className="space-y-12">
|
||||
<div>
|
||||
<Label className="text-slate-900 text-xl mb-4 block">
|
||||
Saubere Programmierung
|
||||
</Label>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
Ihre Website wird von Grund auf solide entwickelt. Kein
|
||||
unnötiger Ballast, der die Seite verlangsamt oder angreifbar
|
||||
macht.
|
||||
</BodyText>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-900 text-xl mb-4 block">
|
||||
Zukunftssicher
|
||||
</Label>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
Moderne Technologien garantieren, dass Ihre Website auch in
|
||||
ein paar Jahren noch perfekt und fehlerfrei läuft.
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
<div className="lg:col-span-8 relative">
|
||||
<Reveal delay={0.4} direction="up">
|
||||
<CMSVisualizer className="w-full mx-auto" />
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 space-y-8">
|
||||
<Reveal delay={0.5}>
|
||||
<div className="space-y-4">
|
||||
<BodyText className="text-slate-500 leading-relaxed">
|
||||
Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
|
||||
Sie eine Änderung brauchen, schreiben Sie mir einfach eine
|
||||
kurze Nachricht. Kein kompliziertes
|
||||
Content-Management-System (CMS), keine Schulungen.
|
||||
</BodyText>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{["Änderungen inklusive", "Technik-Wartung", "Hosting"].map(
|
||||
(tag, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
|
||||
>
|
||||
{tag}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.6}>
|
||||
<div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
|
||||
<div className="flex justify-between items-center text-white/90">
|
||||
<span>SERVICE_LEVEL</span>
|
||||
<span className="text-green-500 font-bold">ACTIVE</span>
|
||||
</div>
|
||||
<p className="leading-tight">
|
||||
Schicken Sie einfach eine E-Mail mit den neuen Texten oder
|
||||
Bildern.
|
||||
</p>
|
||||
<div className="pt-2 border-t border-white/10 flex items-center justify-between">
|
||||
<span>STRESS</span>
|
||||
<span className="text-white">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.7}>
|
||||
<div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 05: Was Sie bekommen */}
|
||||
<Section
|
||||
number="05"
|
||||
title="Ergebnis"
|
||||
borderTop
|
||||
illustration={<TaskDone className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-12 md:space-y-24">
|
||||
<div className="max-w-4xl space-y-6">
|
||||
{/* 04: Sorglos Paket */}
|
||||
<Section number="04" title="Sorglos-Paket" borderTop>
|
||||
<div className="space-y-16 md:space-y-32">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
||||
Das Prinzip: <br />
|
||||
<span className="text-slate-400">Null Aufwand.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-start">
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Sie haben Besseres zu tun, als Bilder zu tauschen oder Updates
|
||||
zu installieren.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.3}>
|
||||
<div className="space-y-8">
|
||||
<BodyText className="text-slate-500 text-lg md:text-xl leading-relaxed">
|
||||
Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
|
||||
Sie eine Änderung brauchen, schreiben Sie mir einfach eine
|
||||
E-Mail. Kein kompliziertes System, keine Schulungen. Ich setze
|
||||
es für Sie um.
|
||||
</BodyText>
|
||||
<div className="pt-8 border-t border-slate-100 flex gap-8">
|
||||
<div>
|
||||
<Label className="text-slate-900">Inklusive</Label>
|
||||
<BodyText className="text-slate-500 mt-2">
|
||||
Änderungen & Wartung
|
||||
</BodyText>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-900">Ihr Stresslevel</Label>
|
||||
<BodyText className="text-slate-500 mt-2">0%</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 05: CTA */}
|
||||
<Section number="05" title="Ergebnis" borderTop>
|
||||
<div className="py-12 md:py-24">
|
||||
<div className="space-y-16 md:space-y-24">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
|
||||
<H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Ihre fertige <br />
|
||||
<span className="text-slate-400">Website.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
|
||||
Professionell, schnell und wartungsfrei. Sie bekommen eine
|
||||
schlüsselfertige Lösung, die Ihr Unternehmen optimal
|
||||
präsentiert.
|
||||
</LeadText>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
||||
<LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
|
||||
Professionell, schnell und wartungsfrei. Schlüsselfertig für
|
||||
Ihr Unternehmen.
|
||||
</LeadText>
|
||||
<Button
|
||||
href="/contact"
|
||||
className="w-full md:w-auto px-12 py-6 text-xl"
|
||||
>
|
||||
Projekt starten
|
||||
</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.3} direction="up">
|
||||
<ResultVisualizer />
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.5}>
|
||||
<div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
||||
<div className="space-y-3">
|
||||
<MonoLabel className="text-blue-500">
|
||||
BEREIT FÜR DEN NÄCHSTEN SCHRITT?
|
||||
</MonoLabel>
|
||||
<div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
|
||||
Lassen Sie uns über Ihr Projekt sprechen.
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
href="/contact"
|
||||
className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
|
||||
>
|
||||
Kostenlos anfragen
|
||||
</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user