Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
89 lines
4.9 KiB
TypeScript
89 lines
4.9 KiB
TypeScript
'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/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>
|
||
</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>
|
||
);
|
||
}
|