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
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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
7
test-middleware.js
Normal 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}`);
|
||||||
Reference in New Issue
Block a user