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

"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 } 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.com/assets/klz-cables.com/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-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>
      </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>
  );
}