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

feat: Introduce Marker component and update KLZ Cables case study content, styling, and German localization.
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 1m17s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-02 12:52:28 +01:00
parent 0a4a1f4762
commit 1fadba6297
5 changed files with 310 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
app/case-studies/klz-cables/page.tsx
View File

@@ -1,13 +1,13 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';
import { Section } from '../../../src/components/Section'; import { Section } from '../../../src/components/Section';
import { Reveal } from '../../../src/components/Reveal'; import { Reveal } from '../../../src/components/Reveal';
import { H1, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography'; import { H1, H2, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography';
import { BackgroundGrid, Container } from '../../../src/components/Layout'; import { BackgroundGrid, Container } from '../../../src/components/Layout';
import { MotionButton } from '../../../src/components/Button'; import { MotionButton } from '../../../src/components/Button';
import { IframeSection } from '../../../src/components/IframeSection'; import { IframeSection } from '../../../src/components/IframeSection';
import { HeroArchitecture } from '../../../src/components/Landing/Illustrations/HeroArchitecture';
import { import {
Activity, Activity,
Database, Database,
@@ -16,84 +16,109 @@ import {
ArrowRight, ArrowRight,
Zap, Zap,
ShieldCheck, ShieldCheck,
ShoppingBag,
Globe2, Globe2,
Settings, Settings,
Search, Search,
Monitor Monitor,
Cpu,
Server,
Layers
} from 'lucide-react'; } from 'lucide-react';
/** /**
* AMBILIGHT GLOW COMPONENT * TECHNICAL MARKER COMPONENT
* Implements the "hand-drawn marker" effect from STYLEGUIDE.md
* Updated: Only yellow marker as requested.
*/ */
const AmbilightGlow: React.FC<{ color?: string; opacity?: string }> = ({ const Marker: React.FC<{ children: React.ReactNode; delay?: number }> = ({
color = "rgba(148, 163, 184, 0.15)", children,
opacity = "opacity-40" delay = 0
}) => ( }) => {
<div return (
className={`absolute -inset-24 lg:-inset-40 blur-[100px] lg:blur-[160px] pointer-events-none ${opacity} z-0 transition-opacity duration-1000 group-hover:opacity-70`} <span className="relative inline-block px-1">
style={{ background: `radial-gradient(circle, ${color} 0%, transparent 75%)` }} <motion.span
/> initial={{ scaleX: 0, opacity: 0 }}
); whileInView={{ scaleX: 1, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: delay + 0.3, ease: [0.16, 1, 0.3, 1] }}
className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu bg-[rgba(255,235,59,0.95)] origin-left"
aria-hidden="true"
/>
{children}
</span>
);
};
export default function KLZCablesCaseStudy() { 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 ( return (
<div className="flex flex-col bg-slate-50 relative min-h-screen selection:bg-slate-900 selection:text-white"> <div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
<BackgroundGrid /> <motion.div style={{ opacity: heroOpacity }} className="fixed inset-0 z-0 pointer-events-none">
<BackgroundGrid />
{/* --- HERO: PURE INDUSTRIAL TYPOGRAPHY --- */} </motion.div>
<section className="relative min-h-[90vh] flex items-center pt-32 overflow-hidden border-b border-slate-200 bg-white">
{/* TECHNICAL GRID MOTIF */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_70%_50%,#000_20%,transparent_100%)] pointer-events-none" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(15,23,42,0.02)_0%,transparent_50%)] pointer-events-none" />
{/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
<section className="relative min-h-[40vh] 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"> <Container variant="narrow" className="relative z-10">
<div className="space-y-20"> <div className="space-y-12">
<Reveal> <Reveal direction="down" blur>
<div className="inline-flex items-center gap-6"> <div className="inline-flex items-center gap-6">
<div className="w-12 h-px bg-slate-900" /> <motion.div
initial={{ width: 0 }}
whileInView={{ width: 48 }}
transition={{ duration: 1, ease: "circOut" }}
className="h-px bg-slate-900"
/>
<div className="space-y-1"> <div className="space-y-1">
<MonoLabel className="text-slate-900 tracking-[0.4em]">PROJECT // SYSTEM OPTIMIZATION</MonoLabel> <MonoLabel className="text-slate-900 tracking-[0.4em]">SYSTEM-ARCHITEKTUR // 2025</MonoLabel>
<Label className="text-[10px] text-slate-400">HARDENED WORDPRESS // PERFORMANCE STACK</Label> <Label className="text-[10px] text-slate-400 font-mono">HARDENED WORDPRESS // VARNISH STACK</Label>
</div> </div>
</div> </div>
</Reveal> </Reveal>
<div className="space-y-10"> <div className="space-y-12">
<Reveal delay={0.1}> <Reveal delay={0.1} direction="up" scale={0.95} blur>
<H1 className="text-7xl md:text-[10rem] tracking-tighter leading-[0.8] font-bold"> <H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
KLZ Cables <br /> KLZ Cables<br />
<span className="text-slate-200">2025 Case Study.</span> <span className="text-slate-100">Case Study.</span>
</H1> </H1>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2} direction="right" blur>
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-16"> <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
<LeadText className="text-2xl md:text-5xl leading-tight text-slate-900 font-medium"> <LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
Engineering a <br /> Engineering eines <br />
<span className="text-slate-400">Low-Latency Global System.</span> <Marker delay={0.2}>B2B Commerce Systems.</Marker>
</LeadText> </LeadText>
<BodyText className="mt-10 text-xl text-slate-500 max-w-xl leading-relaxed"> <BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
I reconstructed the digital spine for KLZ Cables. For a leader in high-voltage infrastructure, I delivered a high-performance system designed for technical precision rather than simple marketing—a hardened tool for complex cable engineering. Vom statischen Altsystem zum industriellen Standard. Ich habe das KLZ-System auf das Wesentliche reduziert: Hardened Infrastructure, parametrische Datenpflege und zero maintenance.
</BodyText> </BodyText>
</div> </div>
</Reveal> </Reveal>
</div> </div>
<Reveal delay={0.3}> <Reveal delay={0.4} direction="up" scale={0.9} blur>
<div className="flex flex-wrap gap-12 md:gap-24 pt-16 border-t border-slate-100"> <div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
<div className="space-y-3"> <div className="space-y-2">
<Label className="text-slate-400">Cache Performance</Label> <Label className="text-slate-400">Data Integrity</Label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2.5 h-2.5 bg-green-500 rounded-full" /> <div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
<span className="text-2xl font-bold font-mono text-slate-900">&lt; 30ms TTFB</span> <span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">Relational Data</span>
</div> </div>
</div> </div>
<div className="space-y-3"> <div className="space-y-2">
<Label className="text-slate-400">Stack Hardening</Label> <Label className="text-slate-400">Security Layer</Label>
<div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900"> <div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
<ShieldCheck className="w-6 h-6 text-green-500" /> <ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
<span>WP + Varnish</span> <span>WP + Varnish</span>
</div> </div>
</div> </div>
@@ -103,135 +128,102 @@ export default function KLZCablesCaseStudy() {
</Container> </Container>
</section> </section>
{/* --- SECTION 01: THE ARCHITECTURE --- */} {/* --- SECTION 01: ARCHITECTURE --- */}
<Section <Section
number="01" number="01"
title="Architecture & Protocol Hardening" title="System-Hardening & Logic"
borderBottom borderBottom
containerVariant="normal" containerVariant="normal"
> >
<div className="grid grid-cols-1 md:grid-cols-2 gap-24 lg:gap-40 items-start"> <div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
<div className="space-y-12"> <div className="md:col-span-12 mb-12">
<Reveal> <Reveal direction="left" blur>
<H3 className="text-4xl md:text-5xl"> <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
Headless <br />Orchestration. Architektur- <br />Refactor.
</H3> </H2>
</Reveal> </Reveal>
<Reveal delay={0.1}> </div>
<div className="space-y-8"> <div className="md:col-span-7 space-y-12">
<BodyText className="text-xl leading-relaxed font-serif italic text-slate-500"> <Reveal delay={0.1} direction="up" blur>
Enterprise B2B systems often suffer from protocol overhead and legacy technical debt. <div className="space-y-10">
<BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
Vom statischen HTML zur zentralen Daten-Instanz.
</BodyText> </BodyText>
<BodyText className="text-lg text-slate-600 leading-relaxed"> <BodyText className="text-xl text-slate-600 leading-relaxed">
I ruthlessly refactored the KLZ architecture to a decoupled, high-performance stack. By stripping the traditional theme layer, WordPress now functions strictly as a headless JSON provider. A multi-tier **Varnish cache layer** offloads 98% of traffic, while native PHP micro-services handle mission-critical REST logic, ensuring a &lt;30ms time-to-first-byte (TTFB) even under heavy industrial query loads. Ich habe die KLZ-Architektur radikal auf einen entkoppelten High-Performance-Stack umgestellt. WordPress fungiert hier nicht als CMS-Baukasten, sondern als <Marker delay={0.3}>Headless JSON-Provider</Marker>. Durch die Implementierung nativer PHP-Microservices und den Verzicht auf volatile Drittanbieter-Plugins wurde ein System geschaffen, das keine technologischen Überraschungen zulässt. <Marker delay={0.5}>Stability by Design.</Marker>
</BodyText> </BodyText>
</div> </div>
</Reveal> </Reveal>
</div> </div>
<div className="space-y-8"> <div className="md:col-span-5 relative">
<Reveal delay={0.2}> <Reveal delay={0.3} direction="right" scale={0.95} blur>
<div className="p-10 bg-white rounded-[2rem] border border-slate-200 shadow-sm space-y-12 relative overflow-hidden group hover:border-slate-900 transition-colors duration-700"> <motion.div
<div className="space-y-6 relative z-10"> whileHover={{ y: -5, scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 25 }}
className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left"
>
<div className="space-y-8 relative z-10">
<Label className="text-slate-900">System Metriken</Label> <Label className="text-slate-900">System Metriken</Label>
<div className="space-y-6"> <div className="space-y-8">
{[ {[
{ label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache' }, { label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache', icon: <Server className="w-5 h-5 text-slate-400" /> },
{ label: 'Analytics', desc: 'Independent Analytics (Privacy First)' }, { label: 'Analytics', desc: 'Independent (Global Data Compliance)', icon: <Activity className="w-5 h-5 text-slate-400" /> },
{ label: 'Custom Core', desc: 'REST via Native PHP Snippets' } { label: 'Custom Core', desc: 'REST via Native Services', icon: <Cpu className="w-5 h-5 text-slate-400" /> }
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="space-y-2 border-b border-slate-100 pb-4 last:border-0 last:pb-0"> <motion.div
<MonoLabel className="text-[9px] text-slate-400">{item.label}</MonoLabel> key={i}
<BodyText className="text-sm font-bold text-slate-900">{item.desc}</BodyText> initial={{ x: -20, opacity: 0 }}
</div> whileInView={{ x: 0, opacity: 1 }}
transition={{ delay: 0.5 + (i * 0.1), duration: 0.5 }}
className="flex 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-[10px] text-slate-400">{item.label}</MonoLabel>
<BodyText className="text-base font-bold text-slate-900">{item.desc}</BodyText>
</div>
</motion.div>
))} ))}
</div> </div>
</div> </div>
</div> </motion.div>
</Reveal> </Reveal>
</div> </div>
</div> </div>
</Section> </Section>
{/* --- VISTA 01: CINEMATIC LANDING --- */} {/* --- SHOWCASE: LANDING --- */}
<section className="py-24 bg-slate-100 border-y border-slate-200 overflow-hidden relative"> <section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
<div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
<Reveal> <Reveal direction="none" blur>
<div className="relative mb-12 px-4 md:px-12 flex justify-between items-end"> <div className="relative mb-16 flex justify-between items-end">
<div className="space-y-4"> <div className="space-y-6">
<Label className="text-slate-500">Architecture Validation</Label> <Label className="text-slate-500">Infrastructure Validation</Label>
<H3 className="text-5xl md:text-7xl tracking-tighter">Performance Metrics.</H3> <H3 className="text-5xl md:text-8xl tracking-tighter">Global Hub.</H3>
</div> </div>
</div> </div>
</Reveal> </Reveal>
<Reveal delay={0.2} width="100%" direction="up" scale={1.05} blur>
<Reveal delay={0.2} width="100%" className="w-full"> <motion.div
<div className="relative group w-full px-4 lg:px-12"> whileHover={{ scale: 1.01 }}
<div className="relative w-full aspect-[16/9] md:aspect-[21/9] lg:aspect-[16/10] overflow-visible"> transition={{ type: "spring", stiffness: 200, damping: 20 }}
<IframeSection >
src="/showcase/klz-cables/index.html" <IframeSection
height="100%" src="/showcase/klz-cables/index.html"
desktopWidth={1920} height="850px"
allowScroll desktopWidth={1920}
browserFrame allowScroll
className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar" browserFrame
/> className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
</div> />
</div> </motion.div>
</Reveal> </Reveal>
</div> </div>
</section> </section>
{/* --- SECTION 03: CATALOG --- */} {/* --- SECTION 02: TECHNICAL DETAIL --- */}
<Section <Section
number="02" number="02"
title="Daten-Struktur"
borderBottom
containerVariant="wide"
>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
<Reveal>
<H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
Parametric <br />Commerce Engine.
</H3>
</Reveal>
</div>
<div className="lg:col-span-8 relative group">
<Reveal width="100%">
<div className="relative h-[650px] w-full overflow-visible group">
<IframeSection
src="/showcase/klz-cables/power-cables.html"
height="100%"
desktopWidth={1920}
allowScroll
browserFrame
className="h-full w-full transition-all duration-700 no-scrollbar"
/>
</div>
</Reveal>
</div>
<div className="lg:col-span-4 space-y-10 relative z-10">
<Reveal delay={0.2}>
<div className="space-y-6">
<Label className="text-slate-400">Schema Optimization</Label>
<LeadText className="text-lg">
I reduced a complex, multi-variable WooCommerce data structure to a parametric interface. Using optimized SQL indices and localized edge caching, engineers can now drill down through 200+ high-voltage variants in real-time, reaching critical technical specifications in under two clicks.
</LeadText>
<div className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm">
<Zap className="w-6 h-6 text-slate-400 mb-4" />
<BodyText className="text-sm font-medium">Real-time configuration across 200+ SKU variants.</BodyText>
</div>
</div>
</Reveal>
</div>
</div>
</Section>
{/* --- SECTION 04: TECHNICAL DETAIL --- */}
<Section
number="03"
title="Asset Management" title="Asset Management"
variant="white" variant="white"
borderBottom borderBottom
@@ -239,21 +231,25 @@ export default function KLZCablesCaseStudy() {
> >
<div className="grid grid-cols-1 gap-16"> <div className="grid grid-cols-1 gap-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
<Reveal> <Reveal direction="left" blur>
<div className="space-y-6"> <div className="space-y-6">
<Label className="text-slate-400">Asset Pipelines</Label> <Label className="text-slate-400">Asset Pipelines</Label>
<H3 className="text-4xl md:text-6xl tracking-tighter">Technical Data Integrity.</H3> <H3 className="text-4xl md:text-6xl tracking-tighter">Automated Documentation.</H3>
</div> </div>
</Reveal> </Reveal>
<Reveal delay={0.1}> <Reveal delay={0.1} direction="right" blur>
<BodyText className="text-xl text-slate-500 pb-2 font-serif italic"> <BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
For high-voltage N2XS(F)2Y cables, data fidelity is a safety requirement. I engineered an automated asset pipeline that generates and validates technical data-sheets server-side, ensuring perfect parity between the engineering specs and the globally distributed system. 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> </BodyText>
</Reveal> </Reveal>
</div> </div>
<Reveal delay={0.2} width="100%"> <Reveal delay={0.2} width="100%" direction="up" scale={0.95} blur>
<div className="relative w-full group"> <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"> <div className="relative w-full overflow-visible">
<IframeSection <IframeSection
src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html" src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
@@ -265,12 +261,67 @@ export default function KLZCablesCaseStudy() {
className="w-full transition-all duration-1000 no-scrollbar" className="w-full transition-all duration-1000 no-scrollbar"
/> />
</div> </div>
</div> </motion.div>
</Reveal> </Reveal>
</div> </div>
</Section> </Section>
{/* --- SECTION 05: TEAM & TRUST --- */} {/* --- SECTION 03: COMMERCE --- */}
<Section
number="03"
title="Katalog-Architektur"
borderBottom
containerVariant="wide"
>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
<Reveal direction="down" blur>
<H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
Fokus auf <br /><Marker delay={0.2}>Spezifikationen.</Marker>
</H3>
</Reveal>
</div>
<div className="lg:col-span-8 relative group">
<Reveal width="100%" direction="left" scale={0.95} blur>
<motion.div
whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative h-[650px] w-full overflow-visible group"
>
<IframeSection
src="/showcase/klz-cables/power-cables.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-6">
<Label className="text-slate-400">Katalog-Struktur</Label>
<LeadText className="text-lg">
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-8 bg-white border border-slate-200 rounded-3xl shadow-sm"
>
<Layers className="w-6 h-6 text-slate-400 mb-4" />
<BodyText className="text-sm font-medium">Strukturierte Aufbereitung technischer Produktdaten.</BodyText>
</motion.div>
</div>
</Reveal>
</div>
</div>
</Section>
{/* --- SECTION 04: TEAM & TRUST --- */}
<Section <Section
number="04" number="04"
title="Ergebnis" title="Ergebnis"
@@ -278,19 +329,19 @@ export default function KLZCablesCaseStudy() {
containerVariant="wide" containerVariant="wide"
> >
<div className="space-y-16 text-center"> <div className="space-y-16 text-center">
<Reveal> <Reveal direction="up" blur>
<H3 className="text-5xl md:text-8xl tracking-tighter">Infrastructural ROI.</H3> <H3 className="text-5xl md:text-8xl tracking-tighter">System-Lifecycle.</H3>
<LeadText className="mx-auto max-w-2xl pt-6 text-xl"> <LeadText className="mx-auto max-w-2xl pt-6 text-xl">
By migrating from a bloated legacy monolithic stack to a high-performant industrial platform, I established KLZ Cables as the technical benchmark in the renewable energy sector. 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> </LeadText>
</Reveal> </Reveal>
<Reveal delay={0.2} width="100%"> <Reveal delay={0.2} width="100%" direction="up" scale={0.9} blur>
<div className="relative group max-w-6xl mx-auto"> <div className="relative group w-full text-left">
<div className="relative block w-full overflow-visible"> <div className="relative block w-full overflow-visible">
<IframeSection <IframeSection
src="/showcase/klz-cables/team.html" src="/showcase/klz-cables/team.html"
height="850px" height="1100px"
desktopWidth={1440} desktopWidth={1440}
allowScroll allowScroll
browserFrame browserFrame
@@ -302,27 +353,58 @@ export default function KLZCablesCaseStudy() {
</div> </div>
</Section> </Section>
{/* --- FINAL CTA --- */} {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
<section className="py-40 md:py-60 bg-white relative overflow-hidden"> <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
<BackgroundGrid /> <BackgroundGrid />
<Container variant="narrow" className="relative z-10 text-center"> <Container variant="normal" className="relative z-10">
<Reveal> <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
<div className="space-y-16"> <div className="space-y-12">
<MonoLabel className="text-slate-400">MISSION CRITICAL INFRASTRUCTURE COMPLETED</MonoLabel> <Reveal direction="left" blur>
<H3 className="text-6xl md:text-9xl tracking-tighter leading-none font-bold"> <div className="space-y-4">
Digitale <br /> <MonoLabel className="text-slate-400 tracking-[0.4em]">CONSULTING // ENGINEERING</MonoLabel>
<span className="text-slate-200">Exzellenz.</span> <H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold">
</H3> Architektur <br />
<div className="pt-12"> <span className="text-slate-100">ohne Altlasten.</span>
<MotionButton href="/contact" variant="outline" className="px-12 py-6 text-xl group border-2"> </H2>
System-Analyse anfragen </div>
<ArrowRight className="inline-block ml-3 w-6 h-6 group-hover:translate-x-3 transition-transform duration-500" /> </Reveal>
</MotionButton> <Reveal delay={0.2} direction="left" blur>
</div> <BodyText className="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>
</Reveal>
<div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm">
<Reveal direction="right" blur>
<div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono 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-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-3 group/item">
<MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">{item.title}</MonoLabel>
<BodyText className="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">
<MotionButton href="/contact" variant="outline" className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700">
System-Analyse anfragen
<ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
</MotionButton>
</Reveal>
</div>
</div>
</Container> </Container>
</section> </section>
</div> </div>
); );
} }

2
cloned-websites/klz-cables_com/assets/klz-cables.com/wp-content/cache/breeze-minification/css/breeze_klz-cables-com-1-10895.css vendored
View File

File diff suppressed because one or more lines are too long

4
cloned-websites/klz-cables_com/index.html
View File

File diff suppressed because one or more lines are too long

57
src/components/Reveal.tsx
View File

@@ -1,23 +1,29 @@
'use client'; 'use client';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { motion, useInView, useAnimation, Variant } from 'framer-motion'; import { motion, useInView, useAnimation, Variants } from 'framer-motion';
interface RevealProps { interface RevealProps {
children: React.ReactNode; children: React.ReactNode;
width?: 'fit-content' | '100%'; width?: 'fit-content' | '100%';
delay?: number; delay?: number;
className?: string; className?: string;
direction?: 'up' | 'down' | 'left' | 'right' | 'none';
scale?: number;
blur?: boolean;
} }
export const Reveal: React.FC<RevealProps> = ({ export const Reveal: React.FC<RevealProps> = ({
children, children,
width = 'fit-content', width = 'fit-content',
delay = 0.25, delay = 0.25,
className = "" className = "",
direction = 'up',
scale = 1,
blur = false
}) => { }) => {
const ref = useRef(null); const ref = useRef(null);
const isInView = useInView(ref, { once: true }); const isInView = useInView(ref, { once: true, margin: "-10%" });
const mainControls = useAnimation(); const mainControls = useAnimation();
useEffect(() => { useEffect(() => {
@@ -26,16 +32,47 @@ export const Reveal: React.FC<RevealProps> = ({
} }
}, [isInView, mainControls]); }, [isInView, mainControls]);
const getDirectionOffset = () => {
switch (direction) {
case 'up': return { y: 15 };
case 'down': return { y: -15 };
case 'left': return { x: 15 };
case 'right': return { x: -15 };
default: return {};
}
};
const variants: Variants = {
hidden: {
opacity: 0,
...getDirectionOffset(),
scale: scale !== 1 ? scale : 1,
filter: blur ? "blur(8px)" : "blur(0px)"
},
visible: {
opacity: 1,
y: 0,
x: 0,
scale: 1,
filter: "blur(0px)"
},
};
return ( return (
<div ref={ref} style={{ position: "relative", width }} className={className}> <div ref={ref} style={{ position: "relative", width }} className={className}>
<motion.div <motion.div
variants={{ variants={variants}
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden" initial="hidden"
animate={mainControls} animate={mainControls}
transition={{ duration: 0.5, delay: delay, type: "spring", stiffness: 100, damping: 20 }} transition={{
duration: 1.2,
delay: delay,
type: "spring",
stiffness: 40,
damping: 20,
mass: 1,
opacity: { duration: 1, ease: [0.22, 1, 0.36, 1] }
}}
> >
{children} {children}
</motion.div> </motion.div>

2
src/components/ShareModal.tsx
View File

@@ -65,7 +65,7 @@ export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps
</button> </button>
</div> </div>
{typeof navigator !== 'undefined' && navigator.share && ( {typeof navigator !== 'undefined' && !!navigator.share && (
<button <button
onClick={handleNativeShare} onClick={handleNativeShare}
className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all" className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all"