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

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/web/app/case-studies/page.tsx
View File

@@ -38,29 +38,31 @@ export default function CaseStudiesPage() {
variant="glass"
padding="none"
techBorder
className="overflow-hidden relative group min-h-[500px] flex flex-col md:flex-row"
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-8 md:p-12 relative z-10 flex flex-col justify-between">
<div className="space-y-8">
<div className="flex items-center gap-4">
<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-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
className="h-6 md:h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
/>
<div className="h-px w-12 bg-slate-100" />
<Label className="text-slate-400">Case Study 2025</Label>
<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-4">
<H3 className="text-4xl md:text-6xl tracking-tighter">
<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-lg md:text-xl max-w-xl leading-relaxed">
<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">
{" "}
@@ -70,12 +72,12 @@ export default function CaseStudiesPage() {
</LeadText>
</div>
<div className="flex flex-wrap gap-2 pt-2">
<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.5 py-1 border border-slate-100 bg-white/50 rounded-md text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
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>
@@ -84,8 +86,8 @@ export default function CaseStudiesPage() {
</div>
</div>
<div className="pt-12">
<div className="inline-flex items-center gap-3 text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
<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>
@@ -93,11 +95,11 @@ export default function CaseStudiesPage() {
</div>
{/* Right Column: Visual/Technical Decor */}
<div className="w-full md:w-1/3 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-[8px] p-4 flex flex-col gap-1 overflow-hidden">
<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: 10 })
{Array.from({ length: 15 })
.map((_, j) => (
<span
key={j}
@@ -116,7 +118,7 @@ export default function CaseStudiesPage() {
</div>
{/* Abstract "Cable" lines */}
<div className="absolute inset-0 flex items-center justify-center p-12">
<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
@@ -131,7 +133,7 @@ export default function CaseStudiesPage() {
</div>
</div>
<div className="absolute bottom-8 right-8 text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
<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>
@@ -149,12 +151,12 @@ export default function CaseStudiesPage() {
techBorder
className="text-center relative overflow-hidden group"
>
<div className="relative z-10 space-y-6 py-8">
<div className="flex items-center justify-center gap-3">
<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-3xl text-slate-400">
<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">