178 lines
7.7 KiB
TypeScript
178 lines
7.7 KiB
TypeScript
"use client";
|
||
|
||
import { PageHeader } from "../../src/components/PageHeader";
|
||
import { Section } from "../../src/components/Section";
|
||
import { Reveal } from "../../src/components/Reveal";
|
||
import { H3, LeadText, BodyText, Label } from "../../src/components/Typography";
|
||
import { Card } from "../../src/components/Layout";
|
||
import { Button } from "../../src/components/Button";
|
||
import { GradientMesh, 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 />
|
||
|
||
<PageHeader
|
||
title={
|
||
<>
|
||
Case <span className="text-slate-400">Studies.</span>
|
||
</>
|
||
}
|
||
description="Ergebnisse statt Versprechen. Was ich gebaut habe und was es bewirkt."
|
||
backgroundSymbol="C"
|
||
/>
|
||
|
||
{/* Featured Case Study */}
|
||
<Section
|
||
number="01"
|
||
title="Showcase"
|
||
borderTop
|
||
effects={<GradientMesh variant="metallic" className="opacity-70" />}
|
||
>
|
||
<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">
|
||
<img
|
||
src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
|
||
alt="KLZ Logo"
|
||
className="h-6 md:h-8 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>
|
||
</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>
|
||
);
|
||
}
|