feat(content): rewrite copy to focus on worry-free package and static sites
Some checks failed
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:
2026-05-06 11:34:52 +02:00
parent 5663c3ae38
commit 07c8d7c668
6 changed files with 202 additions and 183 deletions

View File

@@ -37,17 +37,12 @@ import { Marker } from "@/src/components/Marker";
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="flex flex-col bg-white overflow-hidden relative"> <div className="flex flex-col bg-white overflow-hidden relative">
{/* Background decoration removed per user request */}
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50"> <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"> <Container variant="narrow" className="relative z-10">
<div className="flex flex-col items-center text-center space-y-6 md:space-y-12"> <div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
<Reveal width="fit-content"> <Reveal width="fit-content">
<div className="relative"> <div className="relative">
{/* Structural rings around avatar */}
{/* Structural rings removed per user request */}
<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="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"> <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
<img <img
@@ -65,7 +60,7 @@ export default function AboutPage() {
<div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4"> <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> <div className="h-px w-6 md:w-8 bg-slate-900"></div>
<MonoLabel className="text-slate-900 text-[10px] md:text-sm"> <MonoLabel className="text-slate-900 text-[10px] md:text-sm">
Digital Architect Webentwickler
</MonoLabel> </MonoLabel>
<div className="h-px w-6 md:w-8 bg-slate-900"></div> <div className="h-px w-6 md:w-8 bg-slate-900"></div>
</div> </div>
@@ -77,8 +72,8 @@ export default function AboutPage() {
</Reveal> </Reveal>
<Reveal delay={0.3}> <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-400 font-medium max-w-xl mx-auto text-sm md:text-xl">
15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen 15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
halten. ersparen.
</p> </p>
</Reveal> </Reveal>
</div> </div>
@@ -99,8 +94,8 @@ export default function AboutPage() {
<div className="space-y-8 md:space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Vom Designer <br /> Aus der Praxis. <br />
<span className="text-slate-400">zum Architekten.</span> <span className="text-slate-400">Für die Praxis.</span>
</H3> </H3>
</Reveal> </Reveal>
@@ -108,18 +103,18 @@ export default function AboutPage() {
<Reveal delay={0.1}> <Reveal delay={0.1}>
<div className="space-y-6 md:space-y-8"> <div className="space-y-6 md:space-y-8">
<LeadText className="text-xl md:text-2xl text-slate-400"> <LeadText className="text-xl md:text-2xl text-slate-400">
Agenturen, Konzerne, Startups ich habe die Branche von allen Ich habe in Agenturen, Konzernen und Startups gearbeitet.
Seiten kennengelernt. Was hängen geblieben ist:{" "} Dabei habe ich oft gesehen, woran Projekte scheitern: zu viele
Leute, zu viel Blabla, keine klaren Verantwortlichkeiten.{" "}
<span className="text-slate-900"> <span className="text-slate-900">
<Marker delay={0.2}>Ergebnisse</Marker> zählen. Nicht der <Marker delay={0.2}>Das mache ich anders.</Marker>
Weg dorthin.
</span> </span>
</LeadText> </LeadText>
<IconList className="space-y-4"> <IconList className="space-y-4">
{[ {[
"Frontend, Backend, Infrastruktur Fullstack", "Kein Fachchinesisch, sondern klare Kommunikation",
"Komplexe Systeme auf das Wesentliche reduziert", "Fokus auf Ergebnisse statt auf endlose Meetings",
"Performance-Probleme systematisch gelöst", "Eine Person, die Ihr Projekt von A bis Z kennt",
].map((item, i) => ( ].map((item, i) => (
<IconListItem key={i} bullet> <IconListItem key={i} bullet>
<BodyText className="text-lg">{item}</BodyText> <BodyText className="text-lg">{item}</BodyText>
@@ -136,17 +131,20 @@ export default function AboutPage() {
className="group" className="group"
> >
<H4 className="text-xl mb-6"> <H4 className="text-xl mb-6">
Heute: Direkte Zusammenarbeit ohne Reibungsverluste. Meine Philosophie: Direkte Zusammenarbeit ohne
Reibungsverluste.
</H4> </H4>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{["Effizient", "Pragmatisch", "Verlässlich"].map((tag, i) => ( {["Unkompliziert", "Persönlich", "Verlässlich"].map(
<span (tag, i) => (
key={i} <span
className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm" 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> <Label className="text-slate-900">{tag}</Label>
))} </span>
),
)}
</div> </div>
</Card> </Card>
</Reveal> </Reveal>
@@ -157,7 +155,7 @@ export default function AboutPage() {
{/* Section 02: Arbeitsweise HOW I work */} {/* Section 02: Arbeitsweise HOW I work */}
<Section <Section
number="02" number="02"
title="Arbeitsweise" title="Ablauf"
variant="gray" variant="gray"
borderTop borderTop
illustration={<ResponsibilityIllustration className="w-24 h-24" />} illustration={<ResponsibilityIllustration className="w-24 h-24" />}
@@ -166,7 +164,7 @@ export default function AboutPage() {
<div className="space-y-12"> <div className="space-y-12">
<Reveal> <Reveal>
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
So läuft ein Projekt <br /> So einfach läuft ein Projekt <br />
<span className="text-slate-400">bei mir ab.</span> <span className="text-slate-400">bei mir ab.</span>
</H3> </H3>
</Reveal> </Reveal>
@@ -179,23 +177,23 @@ export default function AboutPage() {
{[ {[
{ {
step: "01", step: "01",
title: "Briefing", title: "Kurzes Gespräch",
desc: "Sie beschreiben Ihr Vorhaben. Ich höre zu und stelle die richtigen Fragen.", desc: "Sie beschreiben, was Sie brauchen. Kein stundenlanger Workshop, nur die Fakten.",
}, },
{ {
step: "02", step: "02",
title: "Angebot", title: "Klares Angebot",
desc: "Ein Fixpreis-Angebot mit klarem Leistungsumfang. Keine Überraschungen.", desc: "Sie erhalten einen Fixpreis. Ohne Sternchen, ohne Nachforderungen.",
}, },
{ {
step: "03", step: "03",
title: "Umsetzung", title: "Schnelle Umsetzung",
desc: "Schnelle Iterationen. Sie sehen regelmäßig den Fortschritt und geben Feedback.", desc: "Ich baue Ihre Website. Sie müssen sich um nichts kümmern.",
}, },
{ {
step: "04", step: "04",
title: "Launch", title: "Go-Live & Sorglos-Paket",
desc: "Go-Live mit automatisiertem Deployment. Dokumentiert und übergabereif.", desc: "Die Seite geht online und ich übernehme ab sofort die Wartung und alle Änderungen für Sie.",
}, },
].map((item, i) => ( ].map((item, i) => (
<Reveal key={i} delay={0.1 + i * 0.1}> <Reveal key={i} delay={0.1 + i * 0.1}>
@@ -235,12 +233,12 @@ export default function AboutPage() {
<div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed"> <div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed">
<p> <p>
Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt, Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt,
liegt die Verantwortung bei mir. liegt die Verantwortung allein bei mir.
</p> </p>
<p> <p>
Ich liefere nicht nur Code, sondern{" "} Sie beauftragen mich, damit Sie{" "}
<span className="text-slate-900 font-medium relative inline-block"> <span className="text-slate-900 font-medium relative inline-block">
Ergebnisse Ruhe
<svg <svg
className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30" className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30"
viewBox="0 0 100 10" viewBox="0 0 100 10"
@@ -253,8 +251,8 @@ export default function AboutPage() {
fill="none" fill="none"
/> />
</svg> </svg>
</span> </span>{" "}
, auf die Sie bauen können. haben. Und genau das bekommen Sie.
</p> </p>
</div> </div>
@@ -269,7 +267,7 @@ export default function AboutPage() {
</div> </div>
<div className="p-6 bg-slate-50 rounded-2xl border border-slate-100"> <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
<h4 className="font-bold text-slate-900 mb-2"> <h4 className="font-bold text-slate-900 mb-2">
Satisfaction Guarantee Zufriedenheitsgarantie
</h4> </h4>
<p className="text-slate-500 text-sm"> <p className="text-slate-500 text-sm">
Wir gehen erst live, wenn Sie zu 100% zufrieden sind. Wir gehen erst live, wenn Sie zu 100% zufrieden sind.
@@ -299,8 +297,8 @@ export default function AboutPage() {
<div className="space-y-10 md:space-y-12"> <div className="space-y-10 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Bereit für eine <br /> Bereit, Ihre Website <br />
<span className="text-slate-400">Zusammenarbeit?</span> <span className="text-slate-400">abzuhaken?</span>
</H3> </H3>
</Reveal> </Reveal>
@@ -313,15 +311,15 @@ export default function AboutPage() {
> >
<div className="relative z-10 space-y-6 md:space-y-8"> <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"> <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
Lassen Sie uns gemeinsam etwas bauen, das{" "} Lassen Sie uns das Thema Website ein für alle Mal{" "}
<span className="text-slate-900"> <span className="text-slate-900">
wirklich <Marker delay={0.3}>funktioniert.</Marker> sinnvoll <Marker delay={0.3}>lösen.</Marker>
</span> </span>
</LeadText> </LeadText>
<div className="pt-2 md:pt-4"> <div className="pt-2 md:pt-4">
<Button href="/contact" className="w-full md:w-auto"> <Button href="/contact" className="w-full md:w-auto">
Projekt anfragen Kostenlos anfragen
</Button> </Button>
</div> </div>
</div> </div>

View File

@@ -16,11 +16,11 @@ const newsreader = Newsreader({
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
default: "Marc Mintel", default: "Marc Mintel — Professionelle Websites für Unternehmen",
template: "%s | Marc Mintel", template: "%s | Marc Mintel",
}, },
description: description:
"Technical problem solver's blog - practical insights and learning notes", "Professionelle Websites zum Fixpreis. Ein Entwickler, ein Ansprechpartner — von der Idee bis zum fertigen Ergebnis. Inklusive Sorglos-Paket: Änderungen, Wartung und Sicherheit komplett abgedeckt.",
metadataBase: new URL("https://mintel.me"), metadataBase: new URL("https://mintel.me"),
icons: { icons: {
icon: "/favicon.svg", icon: "/favicon.svg",
@@ -33,7 +33,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en" className={`${inter.variable} ${newsreader.variable}`}> <html lang="de" className={`${inter.variable} ${newsreader.variable}`}>
<body className="min-h-screen bg-white"> <body className="min-h-screen bg-white">
<Header /> <Header />
<main>{children}</main> <main>{children}</main>

View File

@@ -36,18 +36,18 @@ export default function LandingPage() {
{/* Rest of page on white */} {/* Rest of page on white */}
{/* Section 02: The Promise Streamlined */} {/* Section 02: Was Sie bekommen */}
<Section <Section
number="02" number="02"
title="Das Versprechen" title="Ihr Vorteil"
borderTop borderTop
effects={<GradientMesh variant="metallic" className="opacity-70" />} effects={<GradientMesh variant="metallic" className="opacity-70" />}
> >
<div className="space-y-10 md:space-y-16 relative"> <div className="space-y-10 md:space-y-16 relative">
<Reveal> <Reveal>
<H3 className="max-w-3xl"> <H3 className="max-w-3xl">
Kein Agentur-Zirkus. <br /> Sie kümmern sich um Ihr Geschäft. <br />
<Marker delay={0.3}>Ergebnisse.</Marker> <Marker delay={0.3}>Ich um Ihre Website.</Marker>
</H3> </H3>
</Reveal> </Reveal>
@@ -55,23 +55,23 @@ export default function LandingPage() {
{[ {[
{ {
icon: <ConceptCommunication className="w-8 h-8" />, icon: <ConceptCommunication className="w-8 h-8" />,
title: "Direkte Kommunikation", title: "Ein Ansprechpartner",
text: "Sie sprechen mit dem Entwickler. Keine Stille Post, keine Umwege.", text: "Sie sprechen direkt mit dem, der Ihre Website baut. Keine Agentur, keine Umwege, kein Stille-Post-Effekt.",
}, },
{ {
icon: <ConceptPrototyping className="w-8 h-8" />, icon: <ConceptPrototyping className="w-8 h-8" />,
title: "Schnelle Umsetzung", title: "Schnell sichtbare Ergebnisse",
text: "Sichtbare Fortschritte in Tagen. Prototypen statt Konzeptpapiere.", text: "Kein monatelanges Warten. Sie sehen erste Entwürfe innerhalb weniger Tage — nicht erst nach Wochen.",
},
{
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" />, icon: <ConceptPrice className="w-8 h-8" />,
title: "Klare Fixpreise", title: "Fixpreis ohne Überraschungen",
text: "Volle Budgetsicherheit. Keine versteckten Kosten.", text: "Sie wissen vorher, was es kostet. Kein Stundenzettel, keine Nachforderungen, keine bösen Überraschungen.",
},
{
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.",
}, },
].map((item, i) => ( ].map((item, i) => (
<Reveal key={i} delay={0.1 + i * 0.1}> <Reveal key={i} delay={0.1 + i * 0.1}>
@@ -95,47 +95,59 @@ export default function LandingPage() {
</div> </div>
</Section> </Section>
{/* Section 03: The Difference Visual Comparison */} {/* Section 03: Der Unterschied */}
<Section number="03" title="Der Unterschied" variant="white" borderTop> <Section number="03" title="Der Unterschied" variant="white" borderTop>
<div className="space-y-10 md:space-y-16 relative"> <div className="space-y-10 md:space-y-16 relative">
<Reveal> <Reveal>
<H3 className="max-w-3xl"> <H3 className="max-w-3xl">
Ich arbeite für das Ergebnis, <br /> Warum nicht einfach <br />
nicht gegen die <Marker delay={0.4}>Uhr.</Marker> eine <Marker delay={0.4}>Agentur?</Marker>
</H3> </H3>
</Reveal> </Reveal>
<div className="grid grid-cols-1 gap-8 relative z-20"> <div className="grid grid-cols-1 gap-8 relative z-20">
<ComparisonRow <ComparisonRow
negativeLabel="Klassisch" negativeLabel="Agentur"
negativeText="Wochen in Planung, bevor eine einzige Zeile Code geschrieben wird." negativeText="Projektmanager, Designer, Entwickler — Sie erklären Ihr Anliegen drei Mal."
positiveLabel="Mein Weg" positiveLabel="Bei mir"
positiveText={ positiveText={
<> <>
Schnelle Prototypen. Ergebnisse in{" "} <PenCircle delay={0.5}>Ein</PenCircle> Ansprechpartner für
<PenCircle delay={0.5}>Tagen</PenCircle>, nicht Monaten. alles. Von der ersten Idee bis zur fertigen Website.
</> </>
} }
delay={0.1} delay={0.1}
/> />
<ComparisonRow <ComparisonRow
negativeLabel="Klassisch" negativeLabel="Agentur"
negativeText="Unvorhersehbare Kosten durch Stundenabrechnungen." negativeText="Stundenabrechnungen, Nachträge, unklare Endkosten."
positiveLabel="Mein Weg" positiveLabel="Bei mir"
positiveText={ positiveText={
<> <>
<PenCircle delay={0.5}>Fixpreise.</PenCircle> Sie wissen von <PenCircle delay={0.5}>Fixpreis.</PenCircle> Sie wissen vorher
Anfang an, was es kostet. exakt, was es kostet. Punkt.
</> </>
} }
reverse reverse
delay={0.2} 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> </div>
</div> </div>
</Section> </Section>
{/* Section 04: Target Group */} {/* Section 04: Für wen */}
<Section number="04" title="Für wen" borderTop> <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="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-10 relative z-10">
<Reveal> <Reveal>
@@ -149,8 +161,9 @@ export default function LandingPage() {
Geschäftsführer Geschäftsführer
</H3> </H3>
<LeadText className="text-slate-400 text-base md:text-lg"> <LeadText className="text-slate-400 text-base md:text-lg">
Sie wollen eine Website, die funktioniert ohne sich mit Sie brauchen eine professionelle Website, die Ihr Unternehmen
Technik beschäftigen zu müssen. repräsentiert ohne sich selbst mit Technik beschäftigen zu
müssen. Ich übernehme alles.
</LeadText> </LeadText>
</div> </div>
<div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8"> <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
@@ -164,16 +177,16 @@ export default function LandingPage() {
<Card variant="glass" padding="normal" techBorder className="group"> <Card variant="glass" padding="normal" techBorder className="group">
<div className="space-y-6 relative overflow-hidden"> <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"> <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" /> <ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
</div> </div>
<H3 className="text-xl md:text-3xl"> <H3 className="text-xl md:text-3xl">
Marketing & <br /> Selbstständige & <br />
Vertrieb kleine Teams
</H3> </H3>
<LeadText className="text-slate-400 text-base md:text-lg"> <LeadText className="text-slate-400 text-base md:text-lg">
Sie brauchen Landingpages und Tools, die Ergebnisse liefern. Sie wollen online sichtbar sein, aber keine Zeit in eine
Schnell und zuverlässig. Website stecken. Ich liefere Ihnen eine fertige Lösung Sie
konzentrieren sich auf Ihre Kunden.
</LeadText> </LeadText>
</div> </div>
<div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8"> <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
@@ -186,7 +199,7 @@ export default function LandingPage() {
</div> </div>
</Section> </Section>
{/* Section 05: Leistungen — Interactive Service Rows */} {/* Section 05: Leistungen */}
<Section number="05" title="Leistungen" variant="gray" borderTop> <Section number="05" title="Leistungen" variant="gray" borderTop>
<div className="space-y-0 relative z-20"> <div className="space-y-0 relative z-20">
{[ {[
@@ -194,24 +207,24 @@ export default function LandingPage() {
num: "01", num: "01",
binary: "00000001", binary: "00000001",
title: "Websites", title: "Websites",
text: "High-Performance Websites mit maßgeschneiderter Architektur. Von der Konzeption bis zum Go-Live — individuell, schnell, messbar.", text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Von der Firmenwebsite bis zur Landingpage.",
tags: ["Next.js", "React", "TypeScript", "Performance"], tags: ["Firmenwebsite", "Landingpage", "Responsive", "SEO"],
href: "/websites", href: "/websites",
}, },
{ {
num: "02", num: "02",
binary: "00000010", binary: "00000010",
title: "Systeme", title: "Sorglos-Paket",
text: "Web-Applikationen und interne Tools, wenn Standard-Software nicht reicht. Dashboards, Portale, Automatisierungen.", text: "Änderungen, Wartung, Sicherheit, Updates — alles inklusive. Sie sagen Bescheid, ich erledige das. Ein Jahr, ein Paket, null Aufwand.",
tags: ["Full-Stack", "APIs", "Datenbanken", "Auth"], tags: ["Wartung", "Änderungen", "Sicherheit", "Updates"],
href: "/contact", href: "/contact",
}, },
{ {
num: "03", num: "03",
binary: "00000011", binary: "00000011",
title: "Automatisierung", title: "Web-Anwendungen",
text: "Verbindung von Tools, automatische Prozesse, Daten-Synchronisation. Weniger manuelle Arbeit, mehr Effizienz.", text: "Wenn eine einfache Website nicht reicht: Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
tags: ["CI/CD", "Workflows", "Integrationen", "Monitoring"], tags: ["Portale", "Dashboards", "Automatisierung", "Tools"],
href: "/contact", href: "/contact",
}, },
].map((service, i) => ( ].map((service, i) => (
@@ -283,18 +296,18 @@ export default function LandingPage() {
<Reveal> <Reveal>
<div className="space-y-8 md:space-y-12 lg:space-y-16"> <div className="space-y-8 md:space-y-12 lg:space-y-16">
<H1 className="text-4xl md:text-6xl lg:text-8xl"> <H1 className="text-4xl md:text-6xl lg:text-8xl">
Lassen Sie uns <br /> Klingt gut? <br />
<span className="text-slate-400">starten.</span> <span className="text-slate-400">Lassen Sie uns reden.</span>
</H1> </H1>
<div className="flex flex-col md:flex-row gap-6 md:gap-10 lg:gap-16 items-start relative z-10"> <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"> <div className="space-y-4 md:space-y-8 flex-1">
<LeadText className="text-lg md:text-3xl text-slate-400"> <LeadText className="text-lg md:text-3xl text-slate-400">
Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "} Beschreiben Sie kurz, was Sie brauchen. Ich melde mich{" "}
<span className="text-slate-900 border-b-2 border-slate-900/10"> <span className="text-slate-900 border-b-2 border-slate-900/10">
<Marker>zeitnah</Marker> <Marker>innerhalb von 24 Stunden</Marker>
</span>{" "} </span>{" "}
bei Ihnen. mit einem konkreten Vorschlag.
</LeadText> </LeadText>
<div className="pt-2 md:pt-4"> <div className="pt-2 md:pt-4">
<Button <Button
@@ -302,7 +315,7 @@ export default function LandingPage() {
size="large" size="large"
className="w-full md:w-auto" className="w-full md:w-auto"
> >
Projekt anfragen Kostenlos anfragen
</Button> </Button>
</div> </div>
</div> </div>
@@ -314,7 +327,9 @@ export default function LandingPage() {
</div> </div>
<BodyText className="text-sm md:text-base leading-snug"> <BodyText className="text-sm md:text-base leading-snug">
Aktuell nehme ich Projekte für{" "} Aktuell nehme ich Projekte für{" "}
<span className="font-bold text-slate-900"><Availability /></span>{" "} <span className="font-bold text-slate-900">
<Availability />
</span>{" "}
an. an.
</BodyText> </BodyText>
</div> </div>

View File

@@ -39,29 +39,30 @@ export default function WebsitesPage() {
<Reveal> <Reveal>
<div className="space-y-4"> <div className="space-y-4">
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs"> <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
SYSTEM ENGINEERING PROFESSIONELLE WEBSITES
</MonoLabel> </MonoLabel>
<H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter"> <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
Websites, die einfach <br /> Ihre Website. <br />
<span className="text-slate-400"> <span className="text-slate-400">
<Marker>funktionieren.</Marker> <Marker>Komplett sorgenfrei.</Marker>
</span> </span>
</H3> </H3>
</div> </div>
</Reveal> </Reveal>
<Reveal delay={0.2}> <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-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur Kein WordPress-Chaos. Kein Baukasten-Frust. Ich baue Ihnen eine
für{" "} maßgeschneiderte Website, mit der Sie{" "}
<span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8"> <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
maximale Performance null Arbeit
</span> </span>{" "}
. haben.
</LeadText> </LeadText>
</Reveal> </Reveal>
</div> </div>
<div className="space-y-12"> <div className="space-y-12">
{/* Keeping the ArchitectureVisualizer for visual impact, but context is different */}
<Reveal delay={0.3} direction="up"> <Reveal delay={0.3} direction="up">
<ArchitectureVisualizer /> <ArchitectureVisualizer />
</Reveal> </Reveal>
@@ -69,24 +70,24 @@ export default function WebsitesPage() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{[ {[
{ {
label: "Next.js", label: "Kein CMS-Zwang",
sub: "Architecture", sub: "Einfachheit",
desc: "React-Framework für maximale SEO & Speed.", desc: "Sie müssen kein System lernen. Ich übernehme alle Updates.",
}, },
{ {
label: "Docker", label: "Fixpreis",
sub: "Infrastructure", sub: "Planbarkeit",
desc: "Reproduzierbare Umgebungen überall.", desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
}, },
{ {
label: "Directus", label: "Pfeilschnell",
sub: "Management", sub: "Performance",
desc: "Headless CMS für flexible Datenabfrage.", desc: "Keine langen Ladezeiten. Ihre Kunden bleiben auf der Seite.",
}, },
{ {
label: "Gitea", label: "Sorglos",
sub: "Pipeline", sub: "Betreuung",
desc: "Self-hosted Git & CI/CD Pipelines.", desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
}, },
].map((item, i) => ( ].map((item, i) => (
<Reveal key={i} delay={0.4 + i * 0.1}> <Reveal key={i} delay={0.4 + i * 0.1}>
@@ -108,7 +109,7 @@ export default function WebsitesPage() {
{/* 02: Performance */} {/* 02: Performance */}
<Section <Section
number="02" number="02"
title="Performance" title="Schnelligkeit"
borderTop borderTop
variant="gray" variant="gray"
illustration={<SpeedPerformance className="w-24 h-24" />} illustration={<SpeedPerformance className="w-24 h-24" />}
@@ -117,9 +118,9 @@ export default function WebsitesPage() {
<div className="space-y-8 md:space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Geschwindigkeit ist <br /> Niemand wartet gerne. <br />
<span className="text-slate-400"> <span className="text-slate-400">
kein Extra. Sie ist <Marker delay={0.3}>Standard.</Marker> Ihre Kunden <Marker delay={0.3}>erst recht nicht.</Marker>
</span> </span>
</H3> </H3>
</Reveal> </Reveal>
@@ -127,18 +128,18 @@ export default function WebsitesPage() {
<div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8"> <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400"> <LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
Jede Seite wird vorab gerendert und über ein CDN ausgeliefert. Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "} sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
<span className="text-slate-900">Reproduzierbar.</span> Websites sind auf maximale Geschwindigkeit optimiert.
</LeadText> </LeadText>
</Reveal> </Reveal>
<Reveal delay={0.4}> <Reveal delay={0.4}>
<IconList className="space-y-2 md:space-y-4"> <IconList className="space-y-2 md:space-y-4">
{[ {[
"Server-Side Rendering für sofortige Inhalte", "Sofortiger Seitenaufbau ohne Verzögerung",
"Automatische Bild-Optimierung (WebP, AVIF)", "Automatische Bild-Optimierung für Smartphones",
"Lighthouse-Score 90+ als Mindeststandard", "Bessere Google-Platzierung (SEO) durch Top-Speed",
"Core Web Vitals im grünen Bereich", "Höhere Zufriedenheit bei Ihren Besuchern",
].map((item, i) => ( ].map((item, i) => (
<IconListItem key={i} bullet> <IconListItem key={i} bullet>
<LeadText className="text-base md:text-xl"> <LeadText className="text-base md:text-xl">
@@ -158,11 +159,11 @@ export default function WebsitesPage() {
className="text-center group py-10 md:py-12" 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"> <div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
90+ 100%
</div> </div>
<Label className="mt-4">Lighthouse Score</Label> <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"> <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
PERFORMANCE · ACCESSIBILITY · SEO SCHNELL · SICHER · ZUVERLÄSSIG
</span> </span>
</Card> </Card>
</Reveal> </Reveal>
@@ -174,27 +175,24 @@ export default function WebsitesPage() {
{/* 03: Code-Qualität */} {/* 03: Code-Qualität */}
<Section <Section
number="03" number="03"
title="Code" title="Qualität"
borderTop borderTop
illustration={<SolidFoundation className="w-24 h-24" />} illustration={<SolidFoundation className="w-24 h-24" />}
> >
<div className="space-y-8 md:space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Keine Plugins. <br /> Handarbeit statt <br />
<span className="text-slate-400">Keine Abhängigkeiten.</span> <span className="text-slate-400">Fertigbausatz.</span>
</H3> </H3>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400"> <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
Ihre Website besteht aus{" "} Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
<span className="text-slate-900">Ihrem Code</span>. Kein Themes, die ständig aktualisiert werden müssen.
WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
nachvollziehbar.
</LeadText> </LeadText>
</Reveal> </Reveal>
{/* Git Branch Visualization */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<Reveal delay={0.4}> <Reveal delay={0.4}>
<CodeSnippet variant="git" /> <CodeSnippet variant="git" />
@@ -203,21 +201,22 @@ export default function WebsitesPage() {
<div className="space-y-4 md:space-y-6"> <div className="space-y-4 md:space-y-6">
<Card variant="glass" padding="normal" className="group"> <Card variant="glass" padding="normal" className="group">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-slate-900">Versionskontrolle</Label> <Label className="text-slate-900">
Saubere Programmierung
</Label>
<BodyText> <BodyText>
Jede Änderung ist dokumentiert. Rollbacks in Sekunden. Ihre Website wird von Grund auf solide entwickelt. Kein
Kein wer hat das kaputt gemacht?". unnötiger Ballast, der die Seite verlangsamt oder
angreifbar macht.
</BodyText> </BodyText>
</div> </div>
</Card> </Card>
<Card variant="glass" padding="normal" className="group"> <Card variant="glass" padding="normal" className="group">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-slate-900"> <Label className="text-slate-900">Zukunftssicher</Label>
Automatisches Deployment
</Label>
<BodyText> <BodyText>
Code wird geprüft, getestet und automatisch live Moderne Technologien garantieren, dass Ihre Website auch
geschaltet. Ohne manuellen Eingriff. in ein paar Jahren noch perfekt und fehlerfrei läuft.
</BodyText> </BodyText>
</div> </div>
</Card> </Card>
@@ -227,10 +226,10 @@ export default function WebsitesPage() {
</div> </div>
</Section> </Section>
{/* 04: Content-System */} {/* 04: Content-System -> Sorglos Paket */}
<Section <Section
number="04" number="04"
title="Inhalte" title="Das Sorglos-Paket"
borderTop borderTop
variant="gray" variant="gray"
illustration={<LayerSeparation className="w-24 h-24" />} illustration={<LayerSeparation className="w-24 h-24" />}
@@ -241,12 +240,12 @@ export default function WebsitesPage() {
<Reveal> <Reveal>
<div className="space-y-4"> <div className="space-y-4">
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs"> <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
ARCHITECTURAL SEPARATION NULL AUFWAND FÜR SIE
</MonoLabel> </MonoLabel>
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter"> <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
Inhalte pflegen <br /> Sie haben Besseres <br />
<span className="text-slate-400 italic font-serif"> <span className="text-slate-400 italic font-serif">
ohne Angst. zu tun.
</span> </span>
</H3> </H3>
</div> </div>
@@ -255,12 +254,11 @@ export default function WebsitesPage() {
<Reveal delay={0.2}> <Reveal delay={0.2}>
<div className="space-y-6"> <div className="space-y-6">
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl"> <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
Vergessen Sie zerschossene Layouts nach einem Textupdate. Bilder tauschen, Texte anpassen, Sicherheitsupdates
Meine Websites trennen{" "} einspielen? Darum kümmern Sie sich nie wieder. Das{" "}
<span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8"> <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
Daten von Design erledige ich.
</span> </span>
.
</LeadText> </LeadText>
</div> </div>
</Reveal> </Reveal>
@@ -277,14 +275,14 @@ export default function WebsitesPage() {
<Reveal delay={0.5}> <Reveal delay={0.5}>
<div className="space-y-4"> <div className="space-y-4">
<BodyText className="text-slate-500 leading-relaxed"> <BodyText className="text-slate-500 leading-relaxed">
Durch eine krisenfeste Headless-Architektur (Directus) Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
bewegen Sie sich in einem geschützten Sandkasten während Sie eine Änderung brauchen, schreiben Sie mir einfach eine
das Frontend-System die visuelle Integrität Ihrer Marke kurze Nachricht. Kein kompliziertes
garantiert. Content-Management-System (CMS), keine Schulungen.
</BodyText> </BodyText>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map( {["Änderungen inklusive", "Technik-Wartung", "Hosting"].map(
(tag, i) => ( (tag, i) => (
<div <div
key={i} key={i}
@@ -301,16 +299,16 @@ export default function WebsitesPage() {
<Reveal delay={0.6}> <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="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"> <div className="flex justify-between items-center text-white/90">
<span>PROTOCOL</span> <span>SERVICE_LEVEL</span>
<span className="text-green-500 font-bold">ENFORCED</span> <span className="text-green-500 font-bold">ACTIVE</span>
</div> </div>
<p className="leading-tight"> <p className="leading-tight">
Website architecture validates all CMS payloads against the Schicken Sie einfach eine E-Mail mit den neuen Texten oder
design schema before rendering. Bildern.
</p> </p>
<div className="pt-2 border-t border-white/10 flex items-center justify-between"> <div className="pt-2 border-t border-white/10 flex items-center justify-between">
<span>INTEGRITY</span> <span>STRESS</span>
<span className="text-white">100%</span> <span className="text-white">0%</span>
</div> </div>
</div> </div>
</Reveal> </Reveal>
@@ -334,14 +332,15 @@ export default function WebsitesPage() {
<div className="max-w-4xl space-y-6"> <div className="max-w-4xl space-y-6">
<Reveal> <Reveal>
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter"> <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
Was Sie konkret <br /> Ihre fertige <br />
<span className="text-slate-400">bekommen.</span> <span className="text-slate-400">Website.</span>
</H3> </H3>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl"> <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
Keine halben Sachen. Ich liefere Ihnen ein schlüsselfertiges Professionell, schnell und wartungsfrei. Sie bekommen eine
System mit voller Kontrolle und Transparenz. schlüsselfertige Lösung, die Ihr Unternehmen optimal
präsentiert.
</LeadText> </LeadText>
</Reveal> </Reveal>
</div> </div>
@@ -364,7 +363,7 @@ export default function WebsitesPage() {
href="/contact" href="/contact"
className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10" className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
> >
Projekt anfragen Kostenlos anfragen
</Button> </Button>
</div> </div>
</Reveal> </Reveal>

View File

@@ -54,7 +54,7 @@ export const HeroSection: React.FC = () => {
<div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" /> <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
</div> </div>
<span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase"> <span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
Digital_Architect // v.2026 Webentwicklung // Fixpreis
</span> </span>
</motion.div> </motion.div>
@@ -83,16 +83,16 @@ export const HeroSection: React.FC = () => {
className="flex flex-col items-center gap-6 md:gap-8 lg:gap-12" className="flex flex-col items-center gap-6 md:gap-8 lg:gap-12"
> >
<p className="text-base md:text-xl lg:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4"> <p className="text-base md:text-xl lg:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
Ein Entwickler. Ein Ansprechpartner.{" "} Ohne Agentur, ohne Baukasten, ohne Stress.{" "}
<br className="hidden md:block" /> <br className="hidden md:block" />
<span className="text-slate-900 font-bold tracking-tight"> <span className="text-slate-900 font-bold tracking-tight">
Systematische Architekturen für das Web. Ein Entwickler. Fixpreis. Fertig.
</span> </span>
</p> </p>
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0"> <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
<Button href="/contact" size="large" className="w-full md:w-auto"> <Button href="/contact" size="large" className="w-full md:w-auto">
Projekt anfragen Kostenlos anfragen
</Button> </Button>
<Button <Button
href="/websites" href="/websites"
@@ -100,7 +100,7 @@ export const HeroSection: React.FC = () => {
size="large" size="large"
className="w-full md:w-auto" className="w-full md:w-auto"
> >
Prozess ansehen So funktioniert's
</Button> </Button>
</div> </div>
</motion.div> </motion.div>
@@ -111,12 +111,12 @@ export const HeroSection: React.FC = () => {
<div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" /> <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
<div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group"> <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
<span className="text-[10px] font-mono tracking-widest text-slate-400"> <span className="text-[10px] font-mono tracking-widest text-slate-400">
POS_TRANSMISSION_001 MARC_MINTEL_DEV
</span> </span>
</div> </div>
<div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right"> <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
<span className="text-[10px] font-mono tracking-widest text-slate-400"> <span className="text-[10px] font-mono tracking-widest text-slate-400">
EST_2026 // M-ARCH FRANKFURT // 2026
</span> </span>
</div> </div>

7
test-middleware.js Normal file
View File

@@ -0,0 +1,7 @@
const remainingPath =
"wp-content/cache/breeze-minification/css/breeze_klz-cables-com-1-10895.css";
const directory = "klz-cables.com";
const targetPath = remainingPath.startsWith(`assets/${directory}/`)
? `/${remainingPath}`
: `/assets/${directory}/${remainingPath}`;
console.log(`/showcase/${directory}${targetPath}`);