klz case study
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m14s
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m14s
This commit is contained in:
@@ -1,347 +1,322 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { PageHeader } from '../../../src/components/PageHeader';
|
||||
import { Section } from '../../../src/components/Section';
|
||||
import { Reveal } from '../../../src/components/Reveal';
|
||||
import { H2, H3, H4, LeadText, BodyText, Label } from '../../../src/components/Typography';
|
||||
import { H1, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography';
|
||||
import { BackgroundGrid, Container } from '../../../src/components/Layout';
|
||||
import { IframeSection } from '../../../src/components/IframeSection';
|
||||
import { MotionButton } from '../../../src/components/Button';
|
||||
import { cn } from '../../../src/utils/cn';
|
||||
import { Check, Zap, Shield, Globe, Layout, Cpu, Smartphone, Truck, Users, MessageSquare } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { IframeSection } from '../../../src/components/IframeSection';
|
||||
import { HeroArchitecture } from '../../../src/components/Landing/Illustrations/HeroArchitecture';
|
||||
import {
|
||||
Activity,
|
||||
Database,
|
||||
Layout,
|
||||
Users,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
ShieldCheck,
|
||||
ShoppingBag,
|
||||
Globe2,
|
||||
Settings,
|
||||
Search,
|
||||
Monitor
|
||||
} from 'lucide-react';
|
||||
|
||||
/**
|
||||
* AMBILIGHT GLOW COMPONENT
|
||||
*/
|
||||
const AmbilightGlow: React.FC<{ color?: string; opacity?: string }> = ({
|
||||
color = "rgba(148, 163, 184, 0.15)",
|
||||
opacity = "opacity-40"
|
||||
}) => (
|
||||
<div
|
||||
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`}
|
||||
style={{ background: `radial-gradient(circle, ${color} 0%, transparent 75%)` }}
|
||||
/>
|
||||
);
|
||||
|
||||
export default function KLZCablesCaseStudy() {
|
||||
const showcasePath = "/showcase/klz-cables/index.html";
|
||||
|
||||
return (
|
||||
<div className="bg-white min-h-screen font-sans selection:bg-slate-200 dark:bg-slate-900 overflow-x-hidden text-slate-900">
|
||||
<div className="flex flex-col bg-slate-50 relative min-h-screen selection:bg-slate-900 selection:text-white">
|
||||
<BackgroundGrid />
|
||||
|
||||
{/* Hero Section - Immersive Presentation */}
|
||||
<section className="relative min-h-[90vh] flex items-center pt-20 overflow-hidden bg-slate-50">
|
||||
{/* Immersive Background: Technical Blueprint */}
|
||||
<div className="absolute inset-0 pointer-events-none z-0">
|
||||
<IframeSection
|
||||
src={showcasePath}
|
||||
height="120%"
|
||||
desktopWidth={1920}
|
||||
allowScroll={false}
|
||||
minimal
|
||||
className="h-full opacity-[0.12] grayscale scale-110 blur-[8px]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-white via-white/80 to-transparent backdrop-blur-[12px]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,transparent,white_70%)] backdrop-blur-[4px]" />
|
||||
</div>
|
||||
{/* --- HERO: PURE INDUSTRIAL TYPOGRAPHY --- */}
|
||||
<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" />
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl space-y-10">
|
||||
|
||||
<Container variant="narrow" className="relative z-10">
|
||||
<div className="space-y-20">
|
||||
<Reveal>
|
||||
<div className="inline-flex items-center gap-3 px-4 py-1.5 rounded-full bg-slate-900 text-white text-[10px] font-black tracking-[0.2em] uppercase mb-4 shadow-xl shadow-slate-900/20">
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
Project Archive 01
|
||||
</div>
|
||||
<h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-slate-900 leading-[0.8] mb-4">
|
||||
KLZ <span className="text-slate-200">CABLES</span>
|
||||
</h1>
|
||||
<p className="text-2xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-tight">
|
||||
Breaking the limitations of legacy WordPress for a <span className="text-slate-900">global power infrastructure leader.</span>
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.4}>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link href="/technologies/next-js-14" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
|
||||
NEXT.JS 14
|
||||
</Link>
|
||||
<Link href="/technologies/typescript" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
|
||||
TYPESCRIPT
|
||||
</Link>
|
||||
<Link href="/technologies/directus-cms" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
|
||||
DIRECTUS
|
||||
</Link>
|
||||
<Link href="/technologies/tailwind-css" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
|
||||
TAILWIND
|
||||
</Link>
|
||||
<div className="inline-flex items-center gap-6">
|
||||
<div className="w-12 h-px bg-slate-900" />
|
||||
<div className="space-y-1">
|
||||
<MonoLabel className="text-slate-900 tracking-[0.4em]">PROJECT // SYSTEM OPTIMIZATION</MonoLabel>
|
||||
<Label className="text-[10px] text-slate-400">HARDENED WORDPRESS // PERFORMANCE STACK</Label>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Section 01: The Migration Strategy */}
|
||||
<section className="py-32 bg-white">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="space-y-10">
|
||||
<Reveal>
|
||||
<div className="text-[10px] font-black tracking-[0.3em] text-slate-400 uppercase">Legacy Out. Architecture In.</div>
|
||||
<H2 className="text-7xl font-black tracking-tighter leading-none mb-8">WP is not specialized.</H2>
|
||||
<LeadText className="text-slate-500">
|
||||
WordPress was slowing down KLZ's global growth. They needed a technical foundation that understands structured industrial data.
|
||||
</LeadText>
|
||||
<div className="grid grid-cols-2 gap-10 pt-8">
|
||||
<div className="space-y-2 border-l-2 border-slate-900 pl-6">
|
||||
<div className="text-4xl font-black text-slate-900">3x</div>
|
||||
<div className="text-xs font-bold text-slate-400 uppercase tracking-widest">Faster Load</div>
|
||||
</div>
|
||||
<div className="space-y-2 border-l-2 border-slate-200 pl-6">
|
||||
<div className="text-4xl font-black text-slate-900">0</div>
|
||||
<div className="text-xs font-bold text-slate-400 uppercase tracking-widest">Plugins Needed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-10">
|
||||
<MotionButton href="/technologies/next-js-14" variant="outline" className="rounded-2xl px-8" showArrow={false}>
|
||||
Explore the Stack
|
||||
</MotionButton>
|
||||
<Reveal delay={0.1}>
|
||||
<H1 className="text-7xl md:text-[10rem] tracking-tighter leading-[0.8] font-bold">
|
||||
KLZ Cables <br />
|
||||
<span className="text-slate-200">2025 Case Study.</span>
|
||||
</H1>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}>
|
||||
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-16">
|
||||
<LeadText className="text-2xl md:text-5xl leading-tight text-slate-900 font-medium">
|
||||
Engineering a <br />
|
||||
<span className="text-slate-400">Low-Latency Global System.</span>
|
||||
</LeadText>
|
||||
<BodyText className="mt-10 text-xl text-slate-500 max-w-xl leading-relaxed">
|
||||
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.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Reveal delay={0.3}>
|
||||
<div className="space-y-6">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll={true}
|
||||
perspective
|
||||
rotate={-5}
|
||||
title="The Global Hub"
|
||||
description="Full-width industrial presentation for decision makers."
|
||||
/>
|
||||
<Reveal delay={0.3}>
|
||||
<div className="flex flex-wrap gap-12 md:gap-24 pt-16 border-t border-slate-100">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-slate-400">Cache Performance</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 bg-green-500 rounded-full" />
|
||||
<span className="text-2xl font-bold font-mono text-slate-900">< 30ms TTFB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-slate-400">Stack Hardening</Label>
|
||||
<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" />
|
||||
<span>WP + Varnish</span>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Section 02: Localization & Global Reach */}
|
||||
<section className="py-32 bg-slate-900 text-white overflow-hidden">
|
||||
<Container>
|
||||
<div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20">
|
||||
<Reveal>
|
||||
<Label className="text-slate-500 mb-4 tracking-[0.4em]">MULTI-LANG INFRASTRUCTURE</Label>
|
||||
<H2 className="text-6xl font-black text-white leading-none">Global Native.</H2>
|
||||
<LeadText className="text-slate-400 mt-6">
|
||||
KLZ Cables operates from Germany with a global reach. I implemented a headless localization strategy that serves both markets without data duplication.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="space-y-32">
|
||||
<Reveal className="relative group">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/de/start/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
perspective
|
||||
rotate={5}
|
||||
title="DE: German Expertise"
|
||||
description="Engineered for the domestic power grid."
|
||||
className="grayscale-0 group-hover:scale-[1.01] transition-all duration-700"
|
||||
/>
|
||||
<div className="absolute top-1/2 left-4 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl">Deutsch</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2} className="relative group">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
perspective
|
||||
rotate={-5}
|
||||
title="EN: International Standard"
|
||||
description="Supporting global energy projects."
|
||||
className="grayscale-0 group-hover:scale-[1.01] transition-all duration-700"
|
||||
/>
|
||||
<div className="absolute top-1/2 right-4 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl">English</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Section 03: Product Engineering Detail */}
|
||||
<section className="py-32 bg-white relative">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-start">
|
||||
<div className="lg:col-span-4 sticky top-32 space-y-10">
|
||||
<Reveal>
|
||||
<Label className="text-slate-400 tracking-[0.3em]">CABLE TAXONOMY</Label>
|
||||
<H2 className="text-6xl font-black tracking-tighter leading-none">Engineering Accuracy.</H2>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
Each cable has hundreds of attributes. I designed a technical layout that makes "NA2XS(F)2Y" specs as readable as a news article.
|
||||
</BodyText>
|
||||
<ul className="space-y-6 pt-6">
|
||||
<li className="flex gap-4 items-start">
|
||||
<div className="w-12 h-12 shrink-0 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black">01</div>
|
||||
<div>
|
||||
<h4 className="font-black text-slate-900">Dynamic Tables</h4>
|
||||
<p className="text-sm text-slate-400">Spec-sheets generated from CMS data.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-4 items-start">
|
||||
<div className="w-12 h-12 shrink-0 bg-slate-100 rounded-2xl flex items-center justify-center text-slate-900 font-black">02</div>
|
||||
<div>
|
||||
<h4 className="font-black text-slate-900">Category Logic</h4>
|
||||
<p className="text-sm text-slate-400">Low, Medium, and High Voltage separation.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-8 space-y-32 pt-10 lg:pt-0">
|
||||
<Reveal delay={0.3}>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/power-cables/low-voltage-cables/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
perspective
|
||||
rotate={5}
|
||||
title="Low Voltage Detail"
|
||||
description="Focus on NA2XY performance data."
|
||||
/>
|
||||
</Reveal>
|
||||
<Reveal delay={0.5}>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/power-cables/medium-voltage-cables/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
perspective
|
||||
rotate={-5}
|
||||
title="Medium Voltage Overview"
|
||||
description="Grid distribution infrastructure."
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Section 04: Performance Visualization */}
|
||||
<section className="py-32 bg-slate-50 border-y border-slate-200">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="order-2 lg:order-1">
|
||||
<Reveal>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
{ l: 'Performance', v: '99', c: 'text-green-500' },
|
||||
{ l: 'Accessibility', v: '100', c: 'text-green-500' },
|
||||
{ l: 'Best Practices', v: '100', c: 'text-green-500' },
|
||||
{ l: 'SEO', v: '98', c: 'text-green-500' }
|
||||
].map((m, i) => (
|
||||
<div key={i} className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm text-center">
|
||||
<div className={cn("text-5xl font-black mb-1", m.c)}>{m.v}</div>
|
||||
<div className="text-[10px] font-black tracking-widest uppercase text-slate-400">{m.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
<div className="order-1 lg:order-2 space-y-8">
|
||||
<Reveal>
|
||||
<Label className="text-slate-400 tracking-[0.3em]">METRICS THAT MATTER</Label>
|
||||
<H2 className="text-6xl font-black leading-none">Speed is a Feature.</H2>
|
||||
<BodyText className="text-slate-500 text-lg">
|
||||
For industrial B2B, time is money. Slow websites lose contracts. I delivered a 100% static-first architecture that delivers technical data instantly, anywhere in the world.
|
||||
</BodyText>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Section 05: Brand & Communication */}
|
||||
<section className="py-32 bg-white">
|
||||
<Container>
|
||||
<div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20">
|
||||
{/* --- SECTION 01: THE ARCHITECTURE --- */}
|
||||
<Section
|
||||
number="01"
|
||||
title="Architecture & Protocol Hardening"
|
||||
borderBottom
|
||||
containerVariant="normal"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-24 lg:gap-40 items-start">
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<Label className="text-slate-400 tracking-[0.4em] mb-4">BRAND TRUST</Label>
|
||||
<H2 className="text-6xl font-black leading-none">Industrial Confidence.</H2>
|
||||
<LeadText className="text-slate-500 mt-6">
|
||||
A high-tech website must feel high-tech. I evolved the KLZ Cables visual language while maintaining the trust they've built over decades.
|
||||
</LeadText>
|
||||
<H3 className="text-4xl md:text-5xl">
|
||||
Headless <br />Orchestration.
|
||||
</H3>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-8">
|
||||
<BodyText className="text-xl leading-relaxed font-serif italic text-slate-500">
|
||||
Enterprise B2B systems often suffer from protocol overhead and legacy technical debt.
|
||||
</BodyText>
|
||||
<BodyText className="text-lg 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 <30ms time-to-first-byte (TTFB) even under heavy industrial query loads.
|
||||
</BodyText>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="space-y-32">
|
||||
<Reveal>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/klz-news/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
title="Dynamic News"
|
||||
description="Instantly updated via Directus."
|
||||
/>
|
||||
</Reveal>
|
||||
<div className="space-y-8">
|
||||
<Reveal delay={0.2}>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/team/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
title="Expert Team"
|
||||
description="Human-centric B2B sales."
|
||||
/>
|
||||
</Reveal>
|
||||
<Reveal delay={0.4}>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/contact/index.html"
|
||||
height="700px"
|
||||
desktopWidth={1440}
|
||||
browserFrame
|
||||
allowScroll
|
||||
title="Lead Gen"
|
||||
description="Frictionless contact workflows."
|
||||
/>
|
||||
<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">
|
||||
<div className="space-y-6 relative z-10">
|
||||
<Label className="text-slate-900">System Metriken</Label>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache' },
|
||||
{ label: 'Analytics', desc: 'Independent Analytics (Privacy First)' },
|
||||
{ label: 'Custom Core', desc: 'REST via Native PHP Snippets' }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="space-y-2 border-b border-slate-100 pb-4 last:border-0 last:pb-0">
|
||||
<MonoLabel className="text-[9px] text-slate-400">{item.label}</MonoLabel>
|
||||
<BodyText className="text-sm font-bold text-slate-900">{item.desc}</BodyText>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- VISTA 01: CINEMATIC LANDING --- */}
|
||||
<section className="py-24 bg-slate-100 border-y border-slate-200 overflow-hidden relative">
|
||||
<div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<Reveal>
|
||||
<div className="relative mb-12 px-4 md:px-12 flex justify-between items-end">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-slate-500">Architecture Validation</Label>
|
||||
<H3 className="text-5xl md:text-7xl tracking-tighter">Performance Metrics.</H3>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2} width="100%" className="w-full">
|
||||
<div className="relative group w-full px-4 lg:px-12">
|
||||
<div className="relative w-full aspect-[16/9] md:aspect-[21/9] lg:aspect-[16/10] overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/index.html"
|
||||
height="100%"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
browserFrame
|
||||
className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA - Apple Style */}
|
||||
<section className="py-48 bg-slate-900 overflow-hidden relative">
|
||||
{/* Background Tech Skew */}
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 grayscale pointer-events-none translate-x-1/4 -skew-x-12">
|
||||
<IframeSection src={showcasePath} height="100%" desktopWidth={1200} minimal />
|
||||
</div>
|
||||
{/* --- SECTION 03: CATALOG --- */}
|
||||
<Section
|
||||
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>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<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"
|
||||
variant="white"
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
|
||||
<Reveal>
|
||||
<div className="space-y-6">
|
||||
<Label className="text-slate-400">Asset Pipelines</Label>
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">Technical Data Integrity.</H3>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1}>
|
||||
<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.
|
||||
</BodyText>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.2} width="100%">
|
||||
<div className="relative w-full group">
|
||||
<div className="relative w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
|
||||
height="1000px"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
offsetY={100}
|
||||
browserFrame
|
||||
className="w-full transition-all duration-1000 no-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- SECTION 05: TEAM & TRUST --- */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Ergebnis"
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="space-y-16 text-center">
|
||||
<Reveal>
|
||||
<div className="max-w-2xl space-y-12">
|
||||
<h2 className="text-7xl md:text-9xl font-black tracking-tighter text-white leading-[0.8]">
|
||||
READY TO <br />
|
||||
<span className="text-slate-600">UPGRADE?</span>
|
||||
</h2>
|
||||
<p className="text-2xl text-slate-400 font-medium">
|
||||
I don't just build websites. I build industrial-grade digital infrastructure. Let's discuss your next project.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<MotionButton href="/contact" className="bg-white text-slate-900 hover:bg-slate-100 rounded-2xl px-12 py-6 text-base" showArrow={false}>
|
||||
Start your Project
|
||||
</MotionButton>
|
||||
<MotionButton href="/case-studies" variant="outline" className="text-white border-white/20 hover:border-white rounded-2xl px-12 py-6 text-base" showArrow={false}>
|
||||
View more Cases
|
||||
<H3 className="text-5xl md:text-8xl tracking-tighter">Infrastructural ROI.</H3>
|
||||
<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.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2} width="100%">
|
||||
<div className="relative group max-w-6xl mx-auto">
|
||||
<div className="relative block w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables/team.html"
|
||||
height="850px"
|
||||
desktopWidth={1440}
|
||||
allowScroll
|
||||
browserFrame
|
||||
className="w-full h-full no-scrollbar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* --- FINAL CTA --- */}
|
||||
<section className="py-40 md:py-60 bg-white relative overflow-hidden">
|
||||
<BackgroundGrid />
|
||||
<Container variant="narrow" className="relative z-10 text-center">
|
||||
<Reveal>
|
||||
<div className="space-y-16">
|
||||
<MonoLabel className="text-slate-400">MISSION CRITICAL INFRASTRUCTURE COMPLETED</MonoLabel>
|
||||
<H3 className="text-6xl md:text-9xl tracking-tighter leading-none font-bold">
|
||||
Digitale <br />
|
||||
<span className="text-slate-200">Exzellenz.</span>
|
||||
</H3>
|
||||
<div className="pt-12">
|
||||
<MotionButton href="/contact" variant="outline" className="px-12 py-6 text-xl group border-2">
|
||||
System-Analyse anfragen
|
||||
<ArrowRight className="inline-block ml-3 w-6 h-6 group-hover:translate-x-3 transition-transform duration-500" />
|
||||
</MotionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function CaseStudiesPage() {
|
||||
but a static image or a styled div is more standard for a card. */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-[#0117bf] transition-transform duration-700 group-hover:scale-105 p-12">
|
||||
<Image
|
||||
src="/showcase/klz-cables/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
|
||||
src="/showcase/klz-cables/assets/img/white_logo_transparent_background.svg"
|
||||
alt="KLZ Cables Logo"
|
||||
width={200}
|
||||
height={200}
|
||||
@@ -42,7 +42,7 @@ export default function CaseStudiesPage() {
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label>Infrastructure & Energy</Label>
|
||||
<H3 className="group-hover:text-[#0117bf] transition-colors">KLZ Cables – Modernisierung eines Energie-Portals</H3>
|
||||
<H3 className="group-hover:text-slate-900 transition-colors">KLZ Cables – Digitaler Netzbau</H3>
|
||||
<LeadText className="text-base line-clamp-3">
|
||||
Wie wir eine komplexe WordPress-Struktur in ein performantes, sauberes und langlebiges Web-System verwandelt haben. Fokus auf Performance, SEO und Benutzerführung.
|
||||
</LeadText>
|
||||
|
||||
@@ -7,14 +7,19 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
@apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-sans font-bold text-slate-900 tracking-tighter;
|
||||
}
|
||||
|
||||
@@ -42,27 +47,28 @@
|
||||
@apply text-xl md:text-2xl text-slate-600 mb-6 leading-relaxed;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
@apply text-slate-900 hover:text-slate-700 transition-colors no-underline;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply ml-5 mb-4;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
|
||||
code:not([class*='language-']) {
|
||||
@apply bg-slate-50 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] text-slate-800 border border-slate-100;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
@apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Focus states */
|
||||
a:focus,
|
||||
button:focus,
|
||||
@@ -80,6 +86,7 @@
|
||||
|
||||
/* Components - Tailwind utility classes */
|
||||
@layer components {
|
||||
|
||||
/* Legacy hooks required by tests */
|
||||
.file-example {
|
||||
@apply w-full;
|
||||
@@ -104,7 +111,7 @@
|
||||
|
||||
.search-box {
|
||||
@apply w-full px-6 py-4 border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-400 transition-all duration-300;
|
||||
background: rgba(255,255,255,0.9);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -133,40 +140,40 @@
|
||||
.article-header {
|
||||
@apply mb-12;
|
||||
}
|
||||
|
||||
|
||||
.article-title {
|
||||
@apply text-4xl md:text-5xl font-bold mb-3;
|
||||
}
|
||||
|
||||
|
||||
.article-meta {
|
||||
@apply text-sm text-slate-500 font-sans mb-5;
|
||||
}
|
||||
|
||||
|
||||
.article-content {
|
||||
@apply text-lg leading-relaxed;
|
||||
}
|
||||
|
||||
|
||||
.article-content p {
|
||||
@apply mb-5;
|
||||
}
|
||||
|
||||
|
||||
.article-content h2 {
|
||||
@apply text-2xl font-bold mt-8 mb-3;
|
||||
}
|
||||
|
||||
|
||||
.article-content h3 {
|
||||
@apply text-xl font-bold mt-6 mb-2;
|
||||
}
|
||||
|
||||
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
@apply ml-6 mb-5;
|
||||
}
|
||||
|
||||
|
||||
.article-content li {
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
|
||||
.article-content blockquote {
|
||||
@apply border-l-2 border-slate-400 pl-4 italic text-slate-600 my-5 text-lg;
|
||||
}
|
||||
@@ -184,14 +191,16 @@
|
||||
@apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
|
||||
}
|
||||
|
||||
/* Hide scrollbars */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
/* Hide scrollbars but keep functionality */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
@@ -265,7 +274,7 @@
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
@@ -275,6 +284,7 @@
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
|
||||
.floating-back-to-top,
|
||||
.reading-progress-bar {
|
||||
display: none !important;
|
||||
@@ -325,6 +335,7 @@
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
@@ -384,18 +395,15 @@
|
||||
z-index: -1;
|
||||
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
linear-gradient(180deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0) 20%,
|
||||
rgba(253, 230, 138, 0.70) 20%,
|
||||
rgba(253, 230, 138, 0.70) 100%
|
||||
);
|
||||
rgba(253, 230, 138, 0.70) 100%);
|
||||
|
||||
transform-origin: left center;
|
||||
transform:
|
||||
rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
|
||||
skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
|
||||
rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
|
||||
|
||||
filter: saturate(1.05);
|
||||
}
|
||||
@@ -411,30 +419,26 @@
|
||||
z-index: -1;
|
||||
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
linear-gradient(90deg,
|
||||
rgba(253, 230, 138, 0.00) 0%,
|
||||
rgba(253, 230, 138, 0.60) 8%,
|
||||
rgba(253, 230, 138, 0.55) 60%,
|
||||
rgba(253, 230, 138, 0.35) 100%
|
||||
);
|
||||
rgba(253, 230, 138, 0.35) 100%);
|
||||
|
||||
opacity: 0.75;
|
||||
mix-blend-mode: multiply;
|
||||
transform:
|
||||
rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
|
||||
translateY(0.02em);
|
||||
rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) translateY(0.02em);
|
||||
|
||||
mask-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
linear-gradient(180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 20%,
|
||||
rgba(0, 0, 0, 1) 100%
|
||||
);
|
||||
rgba(0, 0, 0, 1) 100%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
|
||||
.post-link:hover .marker-title::before,
|
||||
.post-link:hover .marker-title::after {
|
||||
filter: saturate(1.08) contrast(1.02);
|
||||
@@ -496,7 +500,7 @@
|
||||
--bg-color: #ffffff;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow: none;
|
||||
|
||||
|
||||
margin: 1.5rem 0;
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
@@ -515,7 +519,8 @@
|
||||
.generic-embed[data-type="video"] .embed-wrapper {
|
||||
aspect-ratio: 16/9;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
padding-bottom: 56.25%;
|
||||
/* 16:9 */
|
||||
}
|
||||
|
||||
.generic-embed[data-type="video"] .embed-wrapper iframe {
|
||||
@@ -577,11 +582,11 @@
|
||||
.generic-embed {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.embed-fallback {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.embed-wrapper:hover {
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
@@ -684,4 +689,4 @@ pre:has(code[class*='language-']) {
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #db2777;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user