mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): correct relative imports in opengraph-image routes
Some checks failed
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🏗️ Build (push) Failing after 8m32s
Details
Build & Deploy / 🔍 Prepare (push) Successful in 18s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m33s
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-23 01:14:16 +01:00
parent 43564d1bba
commit 95a8b702fe
35 changed files with 387 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

640
apps/web/app/(site)/case-studies/klz-cables/page.tsx Normal file
View File

@@ -0,0 +1,640 @@
"use client";
import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Section } from "@/src/components/Section";
import { Reveal } from "@/src/components/Reveal";
import {
H1,
H2,
H3,
LeadText,
Label,
MonoLabel,
BodyText,
} from "@/src/components/Typography";
import { BackgroundGrid, Container } from "@/src/components/Layout";
import Link from "next/link";
import { Button } from "@/src/components/Button";
import { IframeSection } from "@/src/components/IframeSection";
import {
Activity,
ArrowRight,
ArrowLeft,
ShieldCheck,
Cpu,
Server,
Layers,
} from "lucide-react";
import { Marker } from "@/src/components/Marker";
import { GlitchText } from "@/src/components/GlitchText";
export default function KLZCablesCaseStudy() {
const { scrollYProgress } = useScroll();
const heroY = useTransform(scrollYProgress, [0, 0.2], [0, -20]);
const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
const gridRotate = useTransform(scrollYProgress, [0, 1], [0, 2]);
return (
<div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
<motion.div
style={{ opacity: heroOpacity }}
className="fixed inset-0 z-0 pointer-events-none"
>
<BackgroundGrid />
</motion.div>
{/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
<section className="relative min-h-[30vh] md:min-h-[40vh] py-10 md:py-20 overflow-hidden border-b border-slate-100 bg-white">
<motion.div
style={{ y: heroY, rotate: gridRotate }}
className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
/>
<Container variant="narrow" className="relative z-10">
<Reveal>
<Link
href="/case-studies"
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
>
<ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
Zurück
</Link>
</Reveal>
<div className="space-y-12">
<Reveal direction="down" blur>
<div className="inline-flex items-center gap-6">
<motion.div
initial={{ width: 0 }}
whileInView={{ width: 48 }}
transition={{ duration: 1, ease: "circOut" }}
className="h-px bg-slate-900"
/>
<div className="space-y-1">
<MonoLabel className="text-slate-900 tracking-[0.4em]">
SYSTEM-ARCHITEKTUR // 2025
</MonoLabel>
<Label className="text-[10px] text-slate-400 font-mono">
HARDENED WORDPRESS // VARNISH STACK
</Label>
</div>
</div>
</Reveal>
<div className="space-y-8 md:space-y-12">
<GlitchText
as="h1"
className="text-4xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
>
KLZ Cables
</GlitchText>
<br className="hidden md:block" />
<span className="text-slate-100 text-3xl md:text-6xl font-bold tracking-tighter">
Case Study.
</span>
<Reveal delay={0.2} direction="right" blur>
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
<LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
Engineering eines <br className="hidden md:block" />
<Marker delay={0.2}>Systems.</Marker>
</LeadText>
<BodyText className="mt-4 md:mt-6 text-base md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
Vom statischen Altsystem zum industriellen Standard. Ich
habe das KLZ-System auf das Wesentliche reduziert: Hardened
Infrastructure, parametrische Datenpflege und zero
maintenance.
</BodyText>
</div>
</Reveal>
</div>
<Reveal delay={0.4} direction="up" scale={0.98} blur>
<div className="flex flex-wrap gap-8 md:gap-24 pt-6 md:pt-12 border-t border-slate-100">
<div className="space-y-1 md:space-y-2">
<Label className="text-slate-400 text-[10px] md:text-xs">
Data Integrity
</Label>
<div className="flex items-center gap-2 md:gap-3">
<div className="w-2 h-2 md:w-2.5 md:h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
<span className="text-base md:text-2xl font-bold font-mono text-slate-900 tracking-tight">
Relational Data
</span>
</div>
</div>
<div className="space-y-1 md:space-y-2">
<Label className="text-slate-400 text-[10px] md:text-xs">
Security Layer
</Label>
<div className="flex items-center gap-2 md:gap-3 text-base md:text-2xl font-bold font-mono text-slate-900">
<ShieldCheck className="w-5 h-5 md:w-6 md:h-6 text-[rgba(129,199,132,1)]" />
<span>WP + Varnish</span>
</div>
</div>
</div>
</Reveal>
</div>
</Container>
</section>
{/* --- SECTION 01: ARCHITECTURE --- */}
<Section
number="01"
title="System-Hardening & Logic"
borderBottom
containerVariant="normal"
>
{/* Binary overlay background */}
<div className="absolute top-0 right-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block">
{Array.from({ length: 5 }).map((_, i) => (
<div key={i}>01001101 01001001 01001110 01010100</div>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-24 items-start">
<div className="md:col-span-12 mb-4 md:mb-12">
<H2 className="text-3xl md:text-8xl tracking-tighter mb-4 md:mb-12">
<GlitchText>Architektur-</GlitchText> <br />
Refactor.
</H2>
</div>
<div className="md:col-span-7 space-y-8 md:space-y-12">
<Reveal delay={0.1} direction="up" blur>
<div className="space-y-6 md:space-y-10">
<BodyText className="text-xl md:text-2xl leading-relaxed font-serif italic text-slate-500">
Vom statischen HTML zur zentralen Daten-Instanz.
</BodyText>
<BodyText className="text-lg md:text-xl text-slate-600 leading-relaxed">
Ich habe die KLZ-Architektur radikal auf einen entkoppelten
High-Performance-Stack umgestellt. WordPress fungiert hier
nicht als CMS-Baukasten, sondern speichert alle technischen
Attribute in einer zentralen relationalen Instanz. Durch die
Implementierung nativer PHP-Services und den Verzicht auf
volatile Drittanbieter-Plugins wurde ein System geschaffen,
das keine technologischen Überraschungen zulässt. Stability by{" "}
<Marker delay={0.5}>Design.</Marker>
</BodyText>
</div>
</Reveal>
</div>
<div className="md:col-span-5 relative mt-8 md:mt-0">
<Reveal delay={0.3} direction="right" scale={0.98} blur>
<motion.div
whileHover={{ y: -5, scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 25 }}
className="p-6 md:p-12 bg-slate-50 rounded-[2.5rem] md:rounded-[3rem] border border-slate-100 space-y-6 md:space-y-12 relative overflow-hidden group shadow-sm text-left"
>
<div className="space-y-6 md:space-y-8 relative z-10">
<Label className="text-slate-900">System Metriken</Label>
<div className="space-y-6 md:space-y-8">
{[
{
label: "Edge Caching",
desc: "Varnish + W3TC Object Cache",
icon: <Server className="w-5 h-5 text-slate-400" />,
},
{
label: "Analytics",
desc: "Independent (Global Data Compliance)",
icon: <Activity className="w-5 h-5 text-slate-400" />,
},
{
label: "Custom Core",
desc: "REST via Native Services",
icon: <Cpu className="w-5 h-5 text-slate-400" />,
},
].map((item, i) => (
<Reveal
key={i}
direction="right"
delay={0.5 + i * 0.1}
width="100%"
className="flex gap-4 md:gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
>
<div className="shrink-0 mt-1">{item.icon}</div>
<div className="space-y-1">
<MonoLabel className="text-[9px] md:text-[10px] text-slate-400">
{item.label}
</MonoLabel>
<BodyText className="text-base font-bold text-slate-900">
{item.desc}
</BodyText>
</div>
</Reveal>
))}
</div>
</div>
</motion.div>
</Reveal>
</div>
</div>
</Section>
{/* --- SHOWCASE: LANDING --- */}
<section className="py-12 md:py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
<div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
<Reveal direction="none" blur>
<div className="relative mb-8 md:mb-16 flex justify-between items-end">
<div className="space-y-6">
<Label className="text-slate-500">
Infrastructure Validation
</Label>
<H3 className="text-3xl md:text-8xl tracking-tighter">
<GlitchText>Global Hub.</GlitchText>
</H3>
</div>
{/* Binary overlay left */}
<div className="absolute left-0 bottom-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block group-hover:opacity-10 transition-opacity duration-1000">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i}>HANDSHAKE_0x00{i}A // SYNC_ACTIVE</div>
))}
</div>
</div>
</Reveal>
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
<motion.div
whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
>
<IframeSection
src="/showcase/klz-cables.com/index.html"
height="400px"
mobileHeight="350px"
desktopHeight="850px"
desktopWidth={1920}
allowScroll
browserFrame
className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
/>
</motion.div>
</Reveal>
</div>
</section>
{/* --- SECTION 02: TECHNICAL DETAIL --- */}
<Section
number="02"
title="Asset Management"
variant="white"
borderBottom
containerVariant="wide"
>
<div className="grid grid-cols-1 gap-8 md:gap-16">
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-24 items-end">
<div className="md:col-span-8">
<Reveal direction="left" blur>
<div className="space-y-6 md:space-y-12">
<Label className="text-slate-400 text-xs md:text-sm">
Asset Pipelines
</Label>
<H3 className="text-2xl md:text-6xl tracking-tighter">
Automated Documentation.
</H3>
</div>
</Reveal>
</div>
<Reveal delay={0.1} direction="right" blur>
<BodyText className="text-lg md:text-xl text-slate-500 pb-2 font-serif italic leading-relaxed">
Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine
Sicherheitsanforderung. Ich habe eine automatisierte
Asset-Pipeline entwickelt, die technische Datenblätter
serverseitig generiert und validiert.
</BodyText>
</Reveal>
</div>
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
<motion.div
whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative w-full group"
>
<div className="relative w-full overflow-visible">
<IframeSection
src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
height="450px"
mobileHeight="400px"
desktopHeight="1000px"
desktopWidth={1920}
allowScroll
offsetY={100}
browserFrame
className="w-full transition-all duration-1000 no-scrollbar"
/>
</div>
</motion.div>
</Reveal>
</div>
</Section>
<Section
number="03"
title="Katalog-Architektur"
borderBottom
containerVariant="wide"
>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
<div className="lg:col-span-12 mb-4 md:mb-12 text-center lg:text-left relative z-10">
<H3 className="text-3xl md:text-6xl max-w-4xl tracking-tighter">
Fokus auf <br />
<Marker delay={0.2}>Spezifikationen.</Marker>
</H3>
</div>
<div className="lg:col-span-8 relative group">
<Reveal width="100%" direction="left" scale={0.98} blur>
<motion.div
whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative h-[400px] md:h-[650px] w-full overflow-hidden group"
>
<IframeSection
src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
height="100%"
desktopWidth={1920}
allowScroll
browserFrame
className="h-full w-full transition-all duration-700 no-scrollbar"
/>
</motion.div>
</Reveal>
</div>
<div className="lg:col-span-4 space-y-10 relative z-10">
<Reveal delay={0.2} direction="right" blur>
<div className="space-y-4 md:space-y-6">
<Label className="text-slate-400">Katalog-Struktur</Label>
<LeadText className="text-base md:text-lg leading-relaxed">
Der Produktbereich wurde konsequent auf die Bedürfnisse
technischer Planer optimiert. Klare Hierarchien und der
Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
Zugriff auf Kabel-Parameter und Datenblätter.
</LeadText>
<motion.div
whileHover={{ x: 10 }}
className="p-5 md:p-8 bg-white border border-slate-200 rounded-2xl md:rounded-3xl shadow-sm"
>
<Layers className="w-5 h-5 md:w-6 md:h-6 text-slate-400 mb-3 md:mb-4" />
<BodyText className="text-sm font-medium">
Strukturierte Aufbereitung technischer Produktdaten.
</BodyText>
</motion.div>
</div>
</Reveal>
</div>
</div>
</Section>
{/* --- SECTION 04: CONTENT ENGINE --- */}
<Section
number="04"
title="Content Strategy"
variant="white"
borderBottom
containerVariant="wide"
>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
<Reveal direction="left" blur>
<div className="space-y-6">
<Label className="text-slate-400">Knowledge Transfer</Label>
<H3 className="text-3xl md:text-6xl tracking-tighter">
Insights & News.
</H3>
<BodyText className="text-xl text-slate-500 font-serif italic">
Die News-Engine dient als technischer Hub für
Industrie-Standards. Durch die Implementierung eines
performanten Blog-Systems wird Fachwissen direkt an die
Zielgruppe kommuniziert.
</BodyText>
</div>
</Reveal>
</div>
<div className="lg:col-span-8 order-1 lg:order-2">
<Reveal width="100%" direction="right" scale={0.98} blur>
<motion.div
whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative h-[450px] md:h-[700px] w-full"
>
<IframeSection
src="/showcase/klz-cables.com/blog.html"
height="100%"
desktopWidth={1600}
allowScroll
browserFrame
className="h-full w-full no-scrollbar"
/>
</motion.div>
</Reveal>
</div>
</div>
</Section>
{/* --- SECTION 05: TEAM & TRUST --- */}
<Section
number="05"
title="Ergebnis"
borderBottom
containerVariant="wide"
>
<div className="space-y-10 md:space-y-16 text-center">
<Reveal direction="up" blur>
<H3 className="text-3xl md:text-8xl tracking-tighter">
System-Lifecycle.
</H3>
<LeadText className="mx-auto max-w-2xl pt-2 md:pt-6 text-lg md:text-xl leading-relaxed">
Die Migration von einer statischen Datei-Struktur zu einer
zentralisierten Daten-Instanz eliminiert technische Schulden und
manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
Architektur, die technische Datentreue über den gesamten
Produkt-Lifecycle sicherstellt.
</LeadText>
</Reveal>
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
<div className="relative group w-full text-left">
<div className="relative block w-full overflow-visible">
<IframeSection
src="/showcase/klz-cables.com/team.html"
height="450px"
mobileHeight="400px"
desktopHeight="1100px"
desktopWidth={1440}
allowScroll
browserFrame
className="w-full h-full no-scrollbar"
/>
</div>
</div>
</Reveal>
</div>
</Section>
{/* --- SECTION 06: CONVERSION --- */}
<Section
number="06"
title="Lead Engineering"
variant="white"
containerVariant="wide"
className="!pb-32"
>
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24 items-center">
<div className="md:col-span-6 md:order-2">
<Reveal direction="left" blur>
<div className="space-y-6">
<Label className="text-slate-400">Interaction Layer</Label>
<H3 className="text-3xl md:text-7xl tracking-tighter text-slate-900 leading-[1.1]">
Direkter Draht.
</H3>
<BodyText className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed">
Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein
deterministischer Kanal zwischen technischem Bedarf und
individueller Beratung – ohne Umwege, ohne Rauschen.
</BodyText>
</div>
</Reveal>
<Reveal delay={0.2} direction="left" blur>
<div className="grid grid-cols-2 gap-8 border-t border-slate-100 pt-10">
<div className="space-y-2">
<MonoLabel className="text-slate-400 text-[9px]">
RESPONSE_TIME
</MonoLabel>
<div className="text-xl font-bold text-slate-900 font-mono">
&lt; 120ms
</div>
</div>
<div className="space-y-2">
<MonoLabel className="text-slate-400 text-[9px]">
PROTOCOL
</MonoLabel>
<div className="text-xl font-bold text-slate-900 font-mono">
mTLS
</div>
</div>
<div className="space-y-2">
<MonoLabel className="text-slate-400 text-[9px]">
AVAILABILITY
</MonoLabel>
<div className="text-xl font-bold text-[rgba(129,199,132,1)] font-mono">
99.9%
</div>
</div>
<div className="space-y-2">
<MonoLabel className="text-slate-400 text-[9px]">
ENCRYPTION
</MonoLabel>
<div className="text-xl font-bold text-slate-900 font-mono">
AES-256
</div>
</div>
</div>
</Reveal>
</div>
<div className="lg:col-span-7">
<Reveal direction="right" scale={0.98} blur>
<motion.div
whileHover={{ scale: 1.002 }}
transition={{ type: "spring", stiffness: 100, damping: 30 }}
className="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-200/50 ring-1 ring-slate-100"
>
<IframeSection
src="/showcase/klz-cables.com/contact.html"
height="450px"
mobileHeight="400px"
desktopHeight="750px"
desktopWidth={1200}
mobileWidth={390}
allowScroll
browserFrame
className="w-full no-scrollbar"
/>
</motion.div>
</Reveal>
</div>
</div>
</Section>
{/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
<section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
<BackgroundGrid />
<Container variant="normal" className="relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
<div className="space-y-8 md:space-y-12">
<Reveal direction="left" blur>
<div className="space-y-3 md:space-y-6">
<MonoLabel className="text-slate-400 tracking-[0.2em] md:tracking-[0.4em]">
CONSULTING // ENGINEERING
</MonoLabel>
<H2 className="text-4xl md:text-8xl tracking-tighter leading-none font-bold">
Architektur <br />
<span className="text-slate-100">ohne Altlasten.</span>
</H2>
</div>
</Reveal>
<Reveal delay={0.2} direction="left" blur>
<BodyText className="text-xl md:text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
Vom Prototyp zum industriellen Standard. Ich entwickle
digitale Infrastrukturen, die technische Freiheit und
operative Stabilität garantieren – wartungsfrei und
skalierbar.
</BodyText>
</Reveal>
</div>
<div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-6 md:p-14 rounded-[3.5rem] space-y-10 md:space-y-12 relative group shadow-sm">
<Reveal direction="right" blur>
<div className="inline-flex items-center gap-2 md:gap-3 px-3 py-1.5 md:px-4 md:py-2 bg-white rounded-full border border-slate-200 mb-4 md:mb-8 font-mono text-[9px] md:text-[10px] tracking-widest text-slate-500 uppercase">
<div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
Operational Excellence
</div>
<div className="space-y-8 md:space-y-10">
{[
{
title: "Hardened Infrastructure",
desc: "Zentralisierte Datenpflege und entkoppelte WordPress-Instanzen.",
},
{
title: "Automated Data Pipelines",
desc: "Validierung technischer Spezifikationen ohne manuelle Eingriffe.",
},
{
title: "Maintenance-Free Core",
desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
},
].map((item, i) => (
<div
key={i}
className="space-y-2 md:space-y-3 group/item text-left"
>
<MonoLabel className="text-[9px] md:text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
{item.title}
</MonoLabel>
<BodyText className="text-base md:text-lg font-bold text-slate-900 leading-tight">
{item.desc}
</BodyText>
</div>
))}
</div>
</Reveal>
<Reveal delay={0.5} direction="up" blur className="pt-6">
<Button
href="/contact"
variant="outline"
showArrow={false}
className="w-full py-6 md:py-8 text-base md:text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
>
Jetzt anfragen
<ArrowRight className="inline-block ml-3 md:ml-4 w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-4 transition-transform duration-700" />
</Button>
</Reveal>
</div>
</div>
</Container>
</section>
</div>
);
}

178
apps/web/app/(site)/case-studies/page.tsx Normal file
View File

@@ -0,0 +1,178 @@
"use client";
import Image from "next/image";
import { Section } from "@/src/components/Section";
import { Reveal } from "@/src/components/Reveal";
import { H3, LeadText, Label, BodyText } from "@/src/components/Typography";
import { Card } from "@/src/components/Layout";
import { Button } from "@/src/components/Button";
import { AbstractCircuit } from "@/src/components/Effects";
import { ArrowRight } from "lucide-react";
import { motion } from "framer-motion";
export default function CaseStudiesPage() {
return (
<div className="flex flex-col bg-white overflow-hidden relative">
<AbstractCircuit />
{/* Featured Case Study Hero */}
<Section className="pt-24 pb-12 md:pt-40 md:pb-24">
<div className="space-y-12 md:space-y-24">
<Reveal>
<div className="space-y-6 max-w-4xl">
<H3 className="text-4xl md:text-8xl tracking-tighter leading-none">
Case <span className="text-slate-400">Studies.</span>
</H3>
<LeadText className="text-lg md:text-2xl text-slate-400 max-w-2xl">
Ergebnisse statt Versprechen. Dokumentierte Architektur-Lösungen
für komplexe Anforderungen.
</LeadText>
</div>
</Reveal>
<Reveal>
<a href="/case-studies/klz-cables" className="block group">
<Card
variant="glass"
padding="none"
techBorder
className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
>
{/* Brand Gradient Background */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />
{/* Left Column: Content */}
<div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
<div className="space-y-4 md:space-y-8">
<div className="flex items-center gap-3 md:gap-4">
<Image
src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
alt="KLZ Logo"
width={32}
height={32}
className="h-6 md:h-8 w-auto invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
/>
<div className="h-px w-8 md:w-12 bg-slate-100" />
<Label className="text-slate-400 text-[9px] md:text-[10px]">
Case Study 2025
</Label>
</div>
<div className="space-y-3 md:space-y-4">
<H3 className="text-3xl md:text-6xl tracking-tighter">
KLZ <span className="text-slate-300">Cables</span>
</H3>
<LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
Engineering eines industriellen B2B-Systems mit
<span className="text-slate-900 font-medium">
{" "}
automatisierter Asset-Pipeline
</span>{" "}
und hochperformantem Headless-Stack.
</LeadText>
</div>
<div className="flex flex-wrap gap-2 pt-1 md:pt-2">
{["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
(tag, i) => (
<span
key={i}
className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
>
{tag}
</span>
),
)}
</div>
</div>
<div className="pt-8 md:pt-12">
<div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
<span>EXPLORE PROJECT</span>
<ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
</div>
</div>
</div>
{/* Right Column: Visual/Technical Decor */}
<div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
<div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
{Array.from({ length: 40 }).map((_, i) => (
<div key={i} className="whitespace-nowrap">
{Array.from({ length: 15 })
.map((_, j) => (
<span
key={j}
className={
Math.random() > 0.5
? "text-slate-900"
: "text-slate-400"
}
>
{Math.floor(Math.random() * 2)}
</span>
))
.join(" ")}
</div>
))}
</div>
{/* Abstract "Cable" lines */}
<div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
<div className="w-full h-full relative">
{[1, 2, 3].map((v) => (
<motion.div
key={v}
initial={{ scaleY: 0 }}
whileInView={{ scaleY: 1 }}
transition={{ duration: 2, delay: 0.5 + v * 0.2 }}
className="absolute inset-y-0 border-r border-slate-200 origin-top"
style={{ right: `${v * 25}%` }}
/>
))}
</div>
</div>
<div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
Industrial Grade
</div>
</div>
</Card>
</a>
</Reveal>
</div>
</Section>
{/* Coming Soon */}
<Section number="02" title="Kommt bald" borderTop>
<Reveal>
<Card
variant="glass"
padding="large"
techBorder
className="text-center relative overflow-hidden group"
>
<div className="relative z-10 space-y-4 py-4 md:py-8">
<div className="flex items-center justify-center gap-2 md:gap-3">
<div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" />
<Label className="text-slate-400">In Arbeit</Label>
</div>
<H3 className="text-2xl md:text-3xl text-slate-400">
Weitere Case Studies in Kürze.
</H3>
<BodyText className="text-slate-400 max-w-md mx-auto">
Ich dokumentiere laufende Projekte – schauen Sie bald wieder
vorbei oder kontaktieren Sie mich direkt.
</BodyText>
<div className="pt-4">
<Button href="/contact" variant="outline">
Kontakt aufnehmen
</Button>
</div>
</div>
</Card>
</Reveal>
</Section>
</div>
);
}