chore: stabilize apps/web (lint, build, typecheck fixes)

apps/web/app/about/page.tsx

@@ -1,23 +1,28 @@
-import * as React from 'react';
-import Image from 'next/image';
-import { PageHeader } from '../../src/components/PageHeader';
-import { Section } from '../../src/components/Section';
-import { Reveal } from '../../src/components/Reveal';
-import { 
-  ExperienceIllustration, 
-  ResponsibilityIllustration, 
+import Image from "next/image";
+import { PageHeader } from "../../src/components/PageHeader";
+import { Section } from "../../src/components/Section";
+import { Reveal } from "../../src/components/Reveal";
+import {
+  ExperienceIllustration,
+  ResponsibilityIllustration,
   ResultIllustration,
   ConceptSystem,
-  ConceptTarget,
   ContactIllustration,
   HeroLines,
   ParticleNetwork,
-  GridLines
-} from '../../src/components/Landing';
-import { Check } from 'lucide-react';
-import { H3, H4, LeadText, BodyText, Label, MonoLabel } from '../../src/components/Typography';
-import { BackgroundGrid, Card, Container } from '../../src/components/Layout';
-import { Button } from '../../src/components/Button';
+  GridLines,
+} from "../../src/components/Landing";
+import { Check } from "lucide-react";
+import {
+  H3,
+  H4,
+  LeadText,
+  BodyText,
+  Label,
+  MonoLabel,
+} from "../../src/components/Typography";
+import { BackgroundGrid, Card, Container } from "../../src/components/Layout";
+import { Button } from "../../src/components/Button";
 
 export default function AboutPage() {
   return (
@@ -29,12 +34,12 @@ export default function AboutPage() {
       {/* Hero Section */}
       <section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
         <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
-            <HeroLines className="w-full h-full" />
+          <HeroLines className="w-full h-full" />
         </div>
         <div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
-            <GridLines />
+          <GridLines />
         </div>
-        
+
         <Container variant="narrow" className="relative z-10">
           <div className="flex flex-col items-center text-center space-y-12">
             <Reveal>
@@ -42,12 +47,14 @@ export default function AboutPage() {
                 {/* Structural rings around avatar */}
                 <div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
                 <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
-                
+
                 <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <div className="w-full h-full rounded-full overflow-hidden">
-                    <img
+                    <Image
                       src="/header.webp"
                       alt="Marc Mintel"
+                      width={160}
+                      height={160}
                       className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
                     />
                   </div>
@@ -58,13 +65,19 @@ export default function AboutPage() {
             <div className="space-y-6 max-w-3xl">
               <Reveal delay={0.1}>
                 <div className="flex items-center justify-center gap-4 mb-4">
-                    <div className="h-px w-8 bg-slate-900"></div>
-                    <MonoLabel className="text-slate-900">Digital Architect</MonoLabel>
-                    <div className="h-px w-8 bg-slate-900"></div>
+                  <div className="h-px w-8 bg-slate-900"></div>
+                  <MonoLabel className="text-slate-900">
+                    Digital Architect
+                  </MonoLabel>
+                  <div className="h-px w-8 bg-slate-900"></div>
                 </div>
               </Reveal>
-              <PageHeader 
-                title={<>Über <span className="text-slate-200">mich.</span></>}
+              <PageHeader
+                title={
+                  <>
+                    Über <span className="text-slate-200">mich.</span>
+                  </>
+                }
                 description="Warum ich tue, was ich tue – und wie Sie davon profitieren."
                 className="pt-0 md:pt-0"
               />
@@ -87,7 +100,9 @@ export default function AboutPage() {
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               15 Jahre Web-Entwicklung. <br />
-              <span className="text-slate-200">Vom Designer zum Architekten.</span>
+              <span className="text-slate-200">
+                Vom Designer zum Architekten.
+              </span>
             </H3>
           </Reveal>
 
@@ -95,13 +110,17 @@ export default function AboutPage() {
             <Reveal delay={0.1}>
               <div className="space-y-8">
                 <LeadText className="text-xl md:text-2xl text-slate-400">
-                  Ich habe Agenturen, Konzerne und Startups von innen gesehen. Dabei habe ich gelernt, what really counts: <span className="text-slate-900">Ergebnisse, nicht Prozesse.</span>
+                  Ich habe Agenturen, Konzerne und Startups von innen gesehen.
+                  Dabei habe ich gelernt, what really counts:{" "}
+                  <span className="text-slate-900">
+                    Ergebnisse, nicht Prozesse.
+                  </span>
                 </LeadText>
                 <ul className="space-y-4">
                   {[
-                    'Komplexe Systeme vereinfacht',
-                    'Performance-Probleme gelöst',
-                    'Nachhaltige Software-Architekturen gebaut'
+                    "Komplexe Systeme vereinfacht",
+                    "Performance-Probleme gelöst",
+                    "Nachhaltige Software-Architekturen gebaut",
                   ].map((item, i) => (
                     <li key={i} className="flex items-center gap-4 group">
                       <div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
@@ -112,11 +131,22 @@ export default function AboutPage() {
               </div>
             </Reveal>
             <Reveal delay={0.2}>
-              <Card variant="gray" hover={false} padding="normal" className="group">
-                <H4 className="text-2xl mb-6">Mein Fokus heute: Direkte Zusammenarbeit ohne Reibungsverluste.</H4>
+              <Card
+                variant="gray"
+                hover={false}
+                padding="normal"
+                className="group"
+              >
+                <H4 className="text-2xl mb-6">
+                  Mein Fokus heute: Direkte Zusammenarbeit ohne
+                  Reibungsverluste.
+                </H4>
                 <div className="flex flex-wrap gap-3">
-                  {['Effizient', 'Pragmatisch', 'Verlässlich'].map((tag, i) => (
-                    <span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm">
+                  {["Effizient", "Pragmatisch", "Verlässlich"].map((tag, i) => (
+                    <span
+                      key={i}
+                      className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm"
+                    >
                       <Label className="text-slate-900">{tag}</Label>
                     </span>
                   ))}
@@ -147,14 +177,24 @@ export default function AboutPage() {
             <div className="md:col-span-8 space-y-8">
               <Reveal delay={0.1}>
                 <LeadText className="text-xl md:text-2xl text-slate-400">
-                  In der klassischen Agenturwelt verschwindet Verantwortung oft hinter Hierarchien. Bei mir gibt es nur <span className="text-slate-900">einen Ansprechpartner:</span> Mich.
+                  In der klassischen Agenturwelt verschwindet Verantwortung oft
+                  hinter Hierarchien. Bei mir gibt es nur{" "}
+                  <span className="text-slate-900">einen Ansprechpartner:</span>{" "}
+                  Mich.
                 </LeadText>
               </Reveal>
               <Reveal delay={0.2}>
-                <Card variant="white" padding="normal" className="flex flex-row items-start gap-6 group">
-                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold text-xl group-hover:rotate-12 transition-transform duration-500">!</div>
+                <Card
+                  variant="white"
+                  padding="normal"
+                  className="flex flex-row items-start gap-6 group"
+                >
+                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold text-xl group-hover:rotate-12 transition-transform duration-500">
+                    !
+                  </div>
                   <BodyText className="text-slate-900 font-medium text-lg md:text-xl leading-relaxed">
-                    Ich übernehme die volle Verantwortung für die technische Umsetzung und Qualität Ihres Projekts. Ohne Ausreden.
+                    Ich übernehme die volle Verantwortung für die technische
+                    Umsetzung und Qualität Ihres Projekts. Ohne Ausreden.
                   </BodyText>
                 </Card>
               </Reveal>
@@ -182,11 +222,20 @@ export default function AboutPage() {
             <div className="space-y-8">
               <Reveal delay={0.1}>
                 <LeadText className="text-xl text-slate-400">
-                  Ich baue keine Wegwerf-Produkte. Meine Systeme sind so konzipiert, dass sie mit Ihrem Unternehmen <span className="text-slate-900">wachsen können.</span>
+                  Ich baue keine Wegwerf-Produkte. Meine Systeme sind so
+                  konzipiert, dass sie mit Ihrem Unternehmen{" "}
+                  <span className="text-slate-900">wachsen können.</span>
                 </LeadText>
               </Reveal>
               <div className="grid grid-cols-2 gap-4">
-                {['Skalierbar', 'Wartbar', 'Performant', 'Sicher', 'Unabhängig', 'Zukunftssicher'].map((item, i) => (
+                {[
+                  "Skalierbar",
+                  "Wartbar",
+                  "Performant",
+                  "Sicher",
+                  "Unabhängig",
+                  "Zukunftssicher",
+                ].map((item, i) => (
                   <Reveal key={i} delay={0.2 + i * 0.05}>
                     <div className="flex items-center gap-3 group">
                       <div className="w-5 h-5 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-slate-900 transition-colors duration-500">
@@ -199,11 +248,18 @@ export default function AboutPage() {
               </div>
             </div>
             <Reveal delay={0.3}>
-              <Card variant="dark" padding="normal" className="relative rounded-2xl overflow-hidden group">
+              <Card
+                variant="dark"
+                padding="normal"
+                className="relative rounded-2xl overflow-hidden group"
+              >
                 <div className="absolute top-0 right-0 w-48 h-48 bg-white/5 -translate-y-24 translate-x-24 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-1000" />
-                <H4 className="text-white text-2xl mb-6 relative z-10">Kein Vendor Lock-in.</H4>
+                <H4 className="text-white text-2xl mb-6 relative z-10">
+                  Kein Vendor Lock-in.
+                </H4>
                 <LeadText className="text-slate-400 text-lg relative z-10 leading-relaxed">
-                  Sie behalten die volle Kontrolle über Ihren Code und Ihre Daten. Keine Abhängigkeit von proprietären Systemen.
+                  Sie behalten die volle Kontrolle über Ihren Code und Ihre
+                  Daten. Keine Abhängigkeit von proprietären Systemen.
                 </LeadText>
               </Card>
             </Reveal>
@@ -231,9 +287,19 @@ export default function AboutPage() {
               <div className="space-y-6">
                 <Label>Kein:</Label>
                 <div className="flex flex-wrap gap-3">
-                  {['Agentur-Zirkus', 'Meeting-Marathon', 'Ticket-Wahnsinn', 'CMS-Frust'].map((item, i) => (
-                    <span key={i} className="px-4 py-2 border border-slate-100 rounded-full bg-slate-50/50">
-                      <BodyText className="text-slate-400 line-through text-base mb-0">{item}</BodyText>
+                  {[
+                    "Agentur-Zirkus",
+                    "Meeting-Marathon",
+                    "Ticket-Wahnsinn",
+                    "CMS-Frust",
+                  ].map((item, i) => (
+                    <span
+                      key={i}
+                      className="px-4 py-2 border border-slate-100 rounded-full bg-slate-50/50"
+                    >
+                      <BodyText className="text-slate-400 line-through text-base mb-0">
+                        {item}
+                      </BodyText>
                     </span>
                   ))}
                 </div>
@@ -244,9 +310,18 @@ export default function AboutPage() {
                 <Label className="text-slate-900">Sondern:</Label>
                 <div className="space-y-8">
                   {[
-                    { label: 'Direkte Kommunikation', desc: 'Kurze Wege, schnelle Entscheidungen.' },
-                    { label: 'Echte Expertise', desc: 'Fundiertes Wissen aus 15 Jahren Praxis.' },
-                    { label: 'Messbare Qualität', desc: 'Code, der hält, was er verspricht.' }
+                    {
+                      label: "Direkte Kommunikation",
+                      desc: "Kurze Wege, schnelle Entscheidungen.",
+                    },
+                    {
+                      label: "Echte Expertise",
+                      desc: "Fundiertes Wissen aus 15 Jahren Praxis.",
+                    },
+                    {
+                      label: "Messbare Qualität",
+                      desc: "Code, der hält, was er verspricht.",
+                    },
                   ].map((item, i) => (
                     <Reveal key={i} delay={0.2 + i * 0.1}>
                       <div className="flex gap-6 items-start group">
@@ -255,7 +330,9 @@ export default function AboutPage() {
                         </div>
                         <div className="space-y-1">
                           <H4 className="text-xl">{item.label}</H4>
-                          <BodyText className="text-base text-slate-400">{item.desc}</BodyText>
+                          <BodyText className="text-base text-slate-400">
+                            {item.desc}
+                          </BodyText>
                         </div>
                       </div>
                     </Reveal>
@@ -283,18 +360,22 @@ export default function AboutPage() {
             </H3>
           </Reveal>
 
-          <Card variant="white" hover={false} padding="large" className="rounded-3xl shadow-xl relative overflow-hidden group">
+          <Card
+            variant="white"
+            hover={false}
+            padding="large"
+            className="rounded-3xl shadow-xl relative overflow-hidden group"
+          >
             <div className="absolute top-0 right-0 w-96 h-96 bg-slate-50 -translate-y-1/2 translate-x-1/2 rounded-full blur-[80px] group-hover:bg-slate-100 transition-colors duration-1000" />
-            
+
             <div className="relative z-10 space-y-8">
               <LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
-                Lassen Sie uns gemeinsam etwas bauen, das <span className="text-slate-900">wirklich funktioniert.</span>
+                Lassen Sie uns gemeinsam etwas bauen, das{" "}
+                <span className="text-slate-900">wirklich funktioniert.</span>
               </LeadText>
-              
+
               <div className="pt-4">
-                <Button href="/contact">
-                  Projekt anfragen
-                </Button>
+                <Button href="/contact">Projekt anfragen</Button>
               </div>
             </div>
           </Card>

apps/web/app/blog/[slug]/page.tsx

@@ -1,17 +1,19 @@
-import * as React from 'react';
-import { notFound } from 'next/navigation';
-import { blogPosts } from '../../../src/data/blogPosts';
-import { Tag } from '../../../src/components/Tag';
-import { CodeBlock } from '../../../src/components/ArticleBlockquote';
-import { H2 } from '../../../src/components/ArticleHeading';
-import { Paragraph, LeadParagraph } from '../../../src/components/ArticleParagraph';
-import { UL, LI } from '../../../src/components/ArticleList';
-import { FileExamplesList } from '../../../src/components/FileExamplesList';
-import { FileExampleManager } from '../../../src/data/fileExamples';
-import { BlogPostClient } from '../../../src/components/BlogPostClient';
-import { PageHeader } from '../../../src/components/PageHeader';
-import { Section } from '../../../src/components/Section';
-import { Reveal } from '../../../src/components/Reveal';
+import * as React from "react";
+import { notFound } from "next/navigation";
+import { blogPosts } from "../../../src/data/blogPosts";
+import { Tag } from "../../../src/components/Tag";
+import { CodeBlock } from "../../../src/components/ArticleBlockquote";
+import { H2 } from "../../../src/components/ArticleHeading";
+import {
+  Paragraph,
+  LeadParagraph,
+} from "../../../src/components/ArticleParagraph";
+import { UL, LI } from "../../../src/components/ArticleList";
+import { FileExamplesList } from "../../../src/components/FileExamplesList";
+import { FileExampleManager } from "../../../src/data/fileExamples";
+import { BlogPostClient } from "../../../src/components/BlogPostClient";
+import { PageHeader } from "../../../src/components/PageHeader";
+import { Section } from "../../../src/components/Section";
 
 export async function generateStaticParams() {
   return blogPosts.map((post) => ({
@@ -19,7 +21,11 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
   const { slug } = await params;
   const post = blogPosts.find((p) => p.slug === slug);
 
@@ -27,17 +33,23 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     notFound();
   }
 
-  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric'
+  const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
   });
 
   const wordCount = post.description.split(/\s+/).length + 100;
   const readingTime = Math.max(1, Math.ceil(wordCount / 200));
 
-  const showFileExamples = post.tags?.some(tag =>
-    ['architecture', 'design-patterns', 'system-design', 'docker', 'deployment'].includes(tag)
+  const showFileExamples = post.tags?.some((tag) =>
+    [
+      "architecture",
+      "design-patterns",
+      "system-design",
+      "docker",
+      "deployment",
+    ].includes(tag),
   );
 
   // Load file examples for the post
@@ -59,10 +71,10 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     <div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
       <BlogPostClient readingTime={readingTime} title={post.title} />
 
-      <PageHeader 
+      <PageHeader
         title={post.title}
         description={post.description}
-        backLink={{ href: '/blog', label: 'Zurück zum Blog' }}
+        backLink={{ href: "/blog", label: "Zurück zum Blog" }}
         backgroundSymbol="B"
       />
 
@@ -83,14 +95,16 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
               </div>
             )}
 
-            {slug === 'first-note' && (
+            {slug === "first-note" && (
               <>
                 <LeadParagraph>
-                  This blog is a public notebook. It's where I document things I learn, problems I solve, and tools I test.
+                  This blog is a public notebook. It's where I document things I
+                  learn, problems I solve, and tools I test.
                 </LeadParagraph>
                 <H2>Why write in public?</H2>
                 <Paragraph>
-                  I forget things. Writing them down helps. Making them public helps me think more clearly and might help someone else.
+                  I forget things. Writing them down helps. Making them public
+                  helps me think more clearly and might help someone else.
                 </Paragraph>
                 <H2>What to expect</H2>
                 <UL>
@@ -101,91 +115,114 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
                 </UL>
               </>
             )}
-            
-            {slug === 'debugging-tips' && (
+
+            {slug === "debugging-tips" && (
               <>
                 <LeadParagraph>
-                  Sometimes the simplest debugging tool is the best one. Print statements get a bad reputation, but they're often exactly what you need.
+                  Sometimes the simplest debugging tool is the best one. Print
+                  statements get a bad reputation, but they're often exactly
+                  what you need.
                 </LeadParagraph>
                 <H2>Why print statements work</H2>
                 <Paragraph>
-                  Debuggers are powerful, but they change how your code runs. Print statements don't.
+                  Debuggers are powerful, but they change how your code runs.
+                  Print statements don't.
                 </Paragraph>
                 <CodeBlock language="python" showLineNumbers={true}>
-{`def process_data(data):
+                  {`def process_data(data):
     print(f"Processing {len(data)} items")
     result = expensive_operation(data)
     print(f"Operation result: {result}")
     return result`}
                 </CodeBlock>
-                
+
                 <H2>Complete examples</H2>
                 <Paragraph>
-                  Here are some practical file examples you can copy and download. These include proper error handling and logging.
+                  Here are some practical file examples you can copy and
+                  download. These include proper error handling and logging.
                 </Paragraph>
-                
+
                 <div className="my-8">
                   <FileExamplesList groups={groups} />
                 </div>
               </>
             )}
 
-            {slug === 'architecture-patterns' && (
+            {slug === "architecture-patterns" && (
               <>
                 <LeadParagraph>
-                  Good software architecture is about making the right decisions early. Here are some patterns I've found useful in production systems.
+                  Good software architecture is about making the right decisions
+                  early. Here are some patterns I've found useful in production
+                  systems.
                 </LeadParagraph>
                 <H2>Repository Pattern</H2>
                 <Paragraph>
-                  The repository pattern provides a clean separation between your business logic and data access layer. It makes your code more testable and maintainable.
+                  The repository pattern provides a clean separation between
+                  your business logic and data access layer. It makes your code
+                  more testable and maintainable.
                 </Paragraph>
-                
+
                 <H2>Service Layer</H2>
                 <Paragraph>
-                  Services orchestrate business logic and coordinate between repositories and domain events. They keep your controllers thin and your business rules organized.
+                  Services orchestrate business logic and coordinate between
+                  repositories and domain events. They keep your controllers
+                  thin and your business rules organized.
                 </Paragraph>
-                
+
                 <H2>Domain Events</H2>
                 <Paragraph>
-                  Domain events help you decouple components and react to changes in your system. They're essential for building scalable, event-driven architectures.
+                  Domain events help you decouple components and react to
+                  changes in your system. They're essential for building
+                  scalable, event-driven architectures.
                 </Paragraph>
-                
+
                 <H2>Complete examples</H2>
                 <Paragraph>
-                  These TypeScript examples demonstrate modern architecture patterns for scalable applications. You can copy them directly into your project.
+                  These TypeScript examples demonstrate modern architecture
+                  patterns for scalable applications. You can copy them directly
+                  into your project.
                 </Paragraph>
-                
+
                 <div className="my-8">
                   <FileExamplesList groups={groups} />
                 </div>
               </>
             )}
 
-            {slug === 'docker-deployment' && (
+            {slug === "docker-deployment" && (
               <>
                 <LeadParagraph>
-                  Docker has become the standard for containerizing applications. Here's how to set up production-ready deployments that are secure, efficient, and maintainable.
+                  Docker has become the standard for containerizing
+                  applications. Here's how to set up production-ready
+                  deployments that are secure, efficient, and maintainable.
                 </LeadParagraph>
                 <H2>Multi-stage builds</H2>
                 <Paragraph>
-                  Multi-stage builds keep your production images small and secure by separating build and runtime environments. This reduces attack surface and speeds up deployments.
+                  Multi-stage builds keep your production images small and
+                  secure by separating build and runtime environments. This
+                  reduces attack surface and speeds up deployments.
                 </Paragraph>
-                
+
                 <H2>Health checks and monitoring</H2>
                 <Paragraph>
-                  Proper health checks ensure your containers are running correctly. Combined with restart policies, this gives you resilient, self-healing deployments.
+                  Proper health checks ensure your containers are running
+                  correctly. Combined with restart policies, this gives you
+                  resilient, self-healing deployments.
                 </Paragraph>
-                
+
                 <H2>Orchestration with Docker Compose</H2>
                 <Paragraph>
-                  Docker Compose makes it easy to manage multi-service applications in development and production. Define services, networks, and volumes in a single file.
+                  Docker Compose makes it easy to manage multi-service
+                  applications in development and production. Define services,
+                  networks, and volumes in a single file.
                 </Paragraph>
-                
+
                 <H2>Complete examples</H2>
                 <Paragraph>
-                  These Docker configurations are production-ready. Use them as a starting point for your own deployments.
+                  These Docker configurations are production-ready. Use them as
+                  a starting point for your own deployments.
                 </Paragraph>
-                
+
                 <div className="my-8">
                   <FileExamplesList groups={groups} />
                 </div>

apps/web/app/case-studies/page.tsx

@@ -1,88 +1,105 @@
-'use client';
+"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';
+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 } 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 />
+  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"
-            />
+      <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. 
+      <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/assets/img/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-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>
-
-                                <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 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/assets/img/white_logo_transparent_background.svg"
+                    alt="KLZ Cables Logo"
+                    width={200}
+                    height={200}
+                    className="w-full h-auto max-w-[240px]"
+                  />
                 </div>
-            </Section>
+              </div>
 
-            <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 className="space-y-4">
+                <Label>Infrastructure & Energy</Label>
+                <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>
+
+                <div className="pt-4">
+                  <MotionButton href="/case-studies/klz-cables">
+                    Case Study lesen
+                  </MotionButton>
                 </div>
-            </Section>
+              </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>
+  );
 }