feat: Add static assets and content for the KLZ Cables showcase.
This commit is contained in:
353
app/case-studies/klz-cables/page.tsx
Normal file
353
app/case-studies/klz-cables/page.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { PageHeader } from '../../../src/components/PageHeader';
|
||||
import { Reveal } from '../../../src/components/Reveal';
|
||||
import { H2, H3, H4, LeadText, BodyText, Label } 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';
|
||||
|
||||
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">
|
||||
<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>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl space-y-10">
|
||||
<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>
|
||||
</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>
|
||||
</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."
|
||||
/>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
<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."
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Container>
|
||||
</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>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<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
|
||||
</MotionButton>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
88
app/case-studies/page.tsx
Normal file
88
app/case-studies/page.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { PageHeader } from '../../src/components/PageHeader';
|
||||
import { Section } from '../../src/components/Section';
|
||||
import { Reveal } from '../../src/components/Reveal';
|
||||
import { H3, LeadText, Label } from '../../src/components/Typography';
|
||||
import { BackgroundGrid, Card, Container } from '../../src/components/Layout';
|
||||
import { MotionButton } from '../../src/components/Button';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function CaseStudiesPage() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
|
||||
<BackgroundGrid />
|
||||
|
||||
<PageHeader
|
||||
title={<>Case Studies: <br /><span className="text-slate-200">Qualität in jedem Detail.</span></>}
|
||||
description="Ein Blick hinter die Kulissen ausgewählter Projekte. Von der ersten Idee bis zum fertigen Hochleistungssystem."
|
||||
backLink={{ href: '/', label: 'Zurück' }}
|
||||
backgroundSymbol="C"
|
||||
/>
|
||||
|
||||
<Section number="01" title="Projekte" borderTop>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<Reveal>
|
||||
<Card variant="white" className="group overflow-hidden">
|
||||
<div className="aspect-video relative overflow-hidden rounded-xl mb-8 bg-slate-100 border border-slate-100">
|
||||
{/* We'll use a placeholder or a screenshot if available.
|
||||
Since we have the cloned site, we could technically iframe a preview here too,
|
||||
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"
|
||||
alt="KLZ Cables Logo"
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full h-auto max-w-[240px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label>Infrastructure & Energy</Label>
|
||||
<H3 className="group-hover:text-[#0117bf] transition-colors">KLZ Cables – Modernisierung eines Energie-Portals</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>
|
||||
|
||||
<div className="pt-4">
|
||||
<MotionButton href="/case-studies/klz-cables">
|
||||
Case Study lesen
|
||||
</MotionButton>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}>
|
||||
<div className="h-full flex flex-col justify-center border-2 border-dashed border-slate-100 rounded-3xl p-12 text-center space-y-4">
|
||||
<Label>Demnächst</Label>
|
||||
<H3 className="text-slate-200">Weitere Projekte sind in Arbeit.</H3>
|
||||
<LeadText className="text-base italic">
|
||||
Ich dokumentiere gerade weitere spannende Projekte aus den Bereichen SaaS, E-Commerce und Systemarchitektur.
|
||||
</LeadText>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section number="02" title="Philosophie" borderTop variant="gray">
|
||||
<div className="max-w-3xl space-y-8">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl leading-tight">
|
||||
Warum ich Case Studies zeige? <br />
|
||||
<span className="text-slate-200">Weil Code mehr als Text ist.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-xl">
|
||||
In diesen Case Studies geht es nicht nur um bunte Bilder. Es geht um die technischen Entscheidungen, die ein Projekt erfolgreich machen. Schnelle Ladezeiten, SEO-Exzellenz und wartbarer Code sind keine Zufälle, sondern das Ergebnis von präziser Planung.
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
app/technologies/[slug]/content.tsx
Normal file
99
app/technologies/[slug]/content.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Container } from '../../../src/components/Layout';
|
||||
import { Label } from '../../../src/components/Typography';
|
||||
import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
|
||||
import { technologies } from './data';
|
||||
|
||||
export default function TechnologyContent({ slug }: { slug: string }) {
|
||||
const tech = technologies[slug];
|
||||
|
||||
if (!tech) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
|
||||
<Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Icon = tech.icon;
|
||||
|
||||
return (
|
||||
<div className="bg-white min-h-screen text-slate-900 pb-24">
|
||||
<div className="bg-slate-50 border-b border-slate-200">
|
||||
<Container className="py-24">
|
||||
<Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-start gap-8">
|
||||
<div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
|
||||
<Icon className="w-12 h-12" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
|
||||
<p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<Container className="py-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
||||
<div className="lg:col-span-8 space-y-12">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4">What is it?</h2>
|
||||
<p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
|
||||
<Zap className="w-6 h-6 text-amber-500" /> Why I use it
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{tech.benefits.map((benefit, i) => (
|
||||
<div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
|
||||
<Check className="w-5 h-5 text-green-600 shrink-0" />
|
||||
<span className="font-medium text-slate-700">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
|
||||
<Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
|
||||
<p className="text-lg text-slate-700 leading-relaxed">
|
||||
{tech.customerValue}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 space-y-8">
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
|
||||
<h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
|
||||
<div className="space-y-2">
|
||||
{tech.related.map((item) => (
|
||||
<Link
|
||||
key={item.slug}
|
||||
href={`/technologies/${item.slug}`}
|
||||
className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
|
||||
>
|
||||
<span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
|
||||
<ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
app/technologies/[slug]/data.tsx
Normal file
105
app/technologies/[slug]/data.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { Layers, Code, Database, Palette, Terminal } from 'lucide-react';
|
||||
|
||||
export interface TechInfo {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
icon: any; // React.ElementType
|
||||
benefits: string[];
|
||||
customerValue: string;
|
||||
color: string;
|
||||
related: { name: string; slug: string }[];
|
||||
}
|
||||
|
||||
export const technologies: Record<string, TechInfo> = {
|
||||
'next-js-14': {
|
||||
title: 'Next.js 14',
|
||||
subtitle: 'The React Framework for the Web',
|
||||
description: 'Next.js 14 is the latest version of the industry-leading framework for building high-performance web applications. It allows me to create fast, scalable, and search-engine-friendly websites by rendering content on the server before sending it to your users.',
|
||||
icon: Layers,
|
||||
benefits: [
|
||||
'Lightning-fast page loads with Server Components',
|
||||
'Automatic image optimization',
|
||||
'Instant navigation between pages',
|
||||
'Top-tier SEO (Search Engine Optimization) out of the box'
|
||||
],
|
||||
customerValue: 'For my clients, Next.js means a website that ranks higher on Google, keeps visitors engaged with instant interactions, and scales effortlessly as your traffic grows.',
|
||||
color: 'bg-black text-white',
|
||||
related: [
|
||||
{ name: 'TypeScript', slug: 'typescript' },
|
||||
{ name: 'React', slug: 'react' }
|
||||
]
|
||||
},
|
||||
'typescript': {
|
||||
title: 'TypeScript',
|
||||
subtitle: 'JavaScript with Syntax for Types',
|
||||
description: 'TypeScript adds a powerful type system to JavaScript, catching errors before they ever reach production. It acts as a safety net for your code, ensuring that data flows exactly as expected through your entire application.',
|
||||
icon: Code,
|
||||
benefits: [
|
||||
'Eliminates whole categories of common bugs',
|
||||
'Makes large codebases easier to maintain',
|
||||
'Improves developer productivity and code confidence',
|
||||
'Ensures critical data integrity'
|
||||
],
|
||||
customerValue: 'Using TypeScript means your application is robust and reliable from day one. It dramatically reduces the risk of "runtime errors" that could crash your site, saving time and money on bug fixes down the line.',
|
||||
color: 'bg-blue-600 text-white',
|
||||
related: [
|
||||
{ name: 'Directus CMS', slug: 'directus-cms' },
|
||||
{ name: 'Next.js 14', slug: 'next-js-14' }
|
||||
]
|
||||
},
|
||||
'directus-cms': {
|
||||
title: 'Directus CMS',
|
||||
subtitle: 'The Open Data Platform',
|
||||
description: 'Directus is a modern, headless Content Management System (CMS) that instantly turns any database into a beautiful, easy-to-use application for managing your content. Unlike traditional CMSs, it doesn\'t dictate how your website looks.',
|
||||
icon: Database,
|
||||
benefits: [
|
||||
'Intuitive interface for non-technical editors',
|
||||
'Complete freedom regarding front-end design',
|
||||
'Real-time updates and live previews',
|
||||
'Highly secure and role-based access control'
|
||||
],
|
||||
customerValue: 'Directus gives you full control over your content without needing a developer for every text change. It separates your data from the design, ensuring your website can evolve visually without rebuilding your entire content library.',
|
||||
color: 'bg-purple-600 text-white',
|
||||
related: [
|
||||
{ name: 'Next.js 14', slug: 'next-js-14' },
|
||||
{ name: 'Tailwind CSS', slug: 'tailwind-css' }
|
||||
]
|
||||
},
|
||||
'tailwind-css': {
|
||||
title: 'Tailwind CSS',
|
||||
subtitle: 'Utility-First CSS Framework',
|
||||
description: 'Tailwind CSS is a utility-first framework that allows me to build custom designs directly in markup. It eliminates the need for bulky, overriding stylesheets and ensures a consistent design system across every page.',
|
||||
icon: Palette,
|
||||
benefits: [
|
||||
'Rapid UI development and prototyping',
|
||||
'Consistent spacing, colors, and typography',
|
||||
'Highly optimized final bundle size (only includes used styles)',
|
||||
'Responsive design made simple'
|
||||
],
|
||||
customerValue: 'Tailwind ensures your brand looks pixel-perfect on every device. It also results in incredibly small CSS files, meaning your site loads faster for users on mobile networks.',
|
||||
color: 'bg-cyan-500 text-white',
|
||||
related: [
|
||||
{ name: 'React', slug: 'react' },
|
||||
{ name: 'Next.js 14', slug: 'next-js-14' }
|
||||
]
|
||||
},
|
||||
'react': {
|
||||
title: 'React',
|
||||
subtitle: 'The Library for Web and Native User Interfaces',
|
||||
description: 'React is the core library powering Next.js. It lets me build encapsulated components that manage their own state, then compose them to make complex UIs.',
|
||||
icon: Terminal,
|
||||
benefits: [
|
||||
'Component-based architecture for reuse',
|
||||
'Efficient updates and rendering',
|
||||
'Rich ecosystem of libraries and tools',
|
||||
'Strong community support'
|
||||
],
|
||||
customerValue: 'React enables rich, app-like interactions on your website. Whether it\'s a complex dashboard or a smooth animation, React makes it possible to build dynamic experiences that feel instantaneous.',
|
||||
color: 'bg-blue-400 text-white',
|
||||
related: [
|
||||
{ name: 'Next.js 14', slug: 'next-js-14' },
|
||||
{ name: 'Tailwind CSS', slug: 'tailwind-css' }
|
||||
]
|
||||
}
|
||||
};
|
||||
14
app/technologies/[slug]/page.tsx
Normal file
14
app/technologies/[slug]/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { technologies } from './data';
|
||||
import TechnologyContent from './content';
|
||||
|
||||
export default function TechnologyPage({ params }: { params: { slug: string } }) {
|
||||
return <TechnologyContent slug={params.slug} />;
|
||||
}
|
||||
|
||||
// Generate static params for these dynamic routes
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(technologies).map((slug) => ({
|
||||
slug,
|
||||
}));
|
||||
}
|
||||
Reference in New Issue
Block a user