feat: implement industrial optimizations, hybrid dev workflow, and simplified reveal animations

apps/web/app/about/page.tsx

@@ -48,14 +48,14 @@ export default function AboutPage() {
                 <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">
+                <div className="relative w-40 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 relative aspect-square">
                     <Image
-                      src="/header.webp"
+                      src="https://img.infra.mintel.me/unsafe/rs:fill:800:800/plain/https://picsum.photos/seed/marc/800/800"
                       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"
+                      fill
+                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
+                      unoptimized
                     />
                   </div>
                 </div>

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

@@ -25,33 +25,7 @@ import {
   Layers,
 } from "lucide-react";
 
-/**
- * TECHNICAL MARKER COMPONENT
- * Implements the "hand-drawn marker" effect from STYLEGUIDE.md
- * Updated: Only yellow marker as requested.
- */
-const Marker: React.FC<{ children: React.ReactNode; delay?: number }> = ({
-  children,
-  delay = 0,
-}) => {
-  return (
-    <span className="relative inline-block px-1">
-      <motion.span
-        initial={{ scaleX: 0, opacity: 0 }}
-        whileInView={{ scaleX: 1, opacity: 1 }}
-        viewport={{ once: true }}
-        transition={{
-          duration: 1.2,
-          delay: delay + 0.1,
-          ease: [0.23, 1, 0.32, 1],
-        }}
-        className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu bg-[rgba(255,235,59,0.95)] origin-left"
-        aria-hidden="true"
-      />
-      {children}
-    </span>
-  );
-};
+import { Marker } from "../../../src/components/Marker";
 
 export default function KLZCablesCaseStudy() {
   const { scrollYProgress } = useScroll();
@@ -170,9 +144,9 @@ export default function KLZCablesCaseStudy() {
                 <BodyText className="text-xl text-slate-600 leading-relaxed">
                   Ich habe die KLZ-Architektur radikal auf einen entkoppelten
                   High-Performance-Stack umgestellt. WordPress fungiert hier
-                  nicht als CMS-Baukasten, sondern als{" "}
-                  <Marker delay={0.3}>Headless JSON-Provider</Marker>. Durch die
-                  Implementierung nativer PHP-Microservices und den Verzicht auf
+                  nicht als CMS-Baukasten, sondern speichert alle technischen
+                  Attribute in einer zentralen relationalen Instanz. Durch die
+                  Implementierung nativer PHP-Services und den Verzicht auf
                   volatile Drittanbieter-Plugins wurde ein System geschaffen,
                   das keine technologischen Überraschungen zulässt.{" "}
                   <Marker delay={0.5}>Stability by Design.</Marker>
@@ -316,7 +290,6 @@ export default function KLZCablesCaseStudy() {
         </div>
       </Section>
 
-      {/* --- SECTION 03: COMMERCE --- */}
       <Section
         number="03"
         title="Katalog-Architektur"
@@ -338,7 +311,7 @@ export default function KLZCablesCaseStudy() {
               <motion.div
                 whileHover={{ scale: 1.01 }}
                 transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                className="relative h-[650px] w-full overflow-visible group"
+                className="relative h-[650px] w-full overflow-hidden group"
               >
                 <IframeSection
                   src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
@@ -467,8 +440,9 @@ export default function KLZCablesCaseStudy() {
         title="Lead Engineering"
         variant="white"
         containerVariant="wide"
+        className="!pb-32"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
           <div className="lg:col-span-7">
             <Reveal direction="left" scale={0.98} blur>
               <motion.div
@@ -569,9 +543,10 @@ export default function KLZCablesCaseStudy() {
                 <MotionButton
                   href="/contact"
                   variant="outline"
+                  showArrow={false}
                   className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
                 >
-                  System-Analyse anfragen
+                  Architektur-Audit anfragen
                   <ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
                 </MotionButton>
               </Reveal>

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

@@ -36,7 +36,7 @@ export default function CaseStudiesPage() {
                     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"
+                    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}

apps/web/app/contact/page.tsx

@@ -1,32 +1,36 @@
-import * as React from 'react';
-import { Reveal } from '../../src/components/Reveal';
-import { PageHeader } from '../../src/components/PageHeader';
-import { Section } from '../../src/components/Section';
-import { ContactForm } from '../../src/components/ContactForm';
+import * as React from "react";
+import { Reveal } from "../../src/components/Reveal";
+import { PageHeader } from "../../src/components/PageHeader";
+import { Section } from "../../src/components/Section";
+import { ContactForm } from "../../src/components/ContactForm";
 
 export default function ContactPage() {
   return (
     <div className="flex flex-col gap-12 py-12 md:py-24">
       <PageHeader
-        title={<>Projekt <br /><span className="text-slate-200">konfigurieren.</span></>}
+        title={
+          <>
+            Projekt <br />
+            <span className="text-slate-200">konfigurieren.</span>
+          </>
+        }
         description="Nutzen Sie den Konfigurator für eine erste Einschätzung oder schreiben Sie mir direkt eine Email."
-        backLink={{ href: '/', label: 'Zurück' }}
+        backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="?"
       />
 
-      <Section number="01" title="Konfigurator" containerVariant="wide" className="!py-12">
+      <Section title="Konfigurator" containerVariant="wide" className="!py-12">
         <ContactForm />
       </Section>
 
-      <Section number="02" title="Direkt" className="!py-12">
+      <Section title="Direkt" className="!py-12">
         <div className="grid grid-cols-1 gap-24">
           <Reveal delay={0.4}>
             <div className="space-y-8">
-              <a 
-                href="mailto:marc@mintel.me" 
-                className="group block space-y-2"
-              >
-                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
+              <a href="mailto:marc@mintel.me" className="group block space-y-2">
+                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">
+                  Email
+                </span>
                 <p className="text-3xl md:text-6xl font-bold text-slate-900 border-b border-slate-100 group-hover:border-slate-900 transition-all duration-500 pb-6 tracking-tighter">
                   marc@mintel.me
                 </p>

apps/web/app/page.tsx

@@ -9,18 +9,25 @@ import {
   ConceptWebsite,
   DifferenceIllustration,
   HeroArchitecture,
-  HeroMainIllustration
-} from '../src/components/Landing';
-import { Reveal } from '../src/components/Reveal';
-import { Section } from '../src/components/Section';
-import { H1, H3, LeadText, BodyText, MonoLabel, Label } from '../src/components/Typography';
-import { BackgroundGrid, Card, Container } from '../src/components/Layout';
-import { Button } from '../src/components/Button';
+  HeroMainIllustration,
+} from "../src/components/Landing";
+import { Reveal } from "../src/components/Reveal";
+import { Marker } from "../src/components/Marker";
+import { Section } from "../src/components/Section";
+import {
+  H1,
+  H3,
+  LeadText,
+  BodyText,
+  MonoLabel,
+  Label,
+} from "../src/components/Typography";
+import { BackgroundGrid, Card, Container } from "../src/components/Layout";
+import { Button } from "../src/components/Button";
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-
       <BackgroundGrid />
 
       {/* Hero Section */}
@@ -33,7 +40,9 @@ export default function LandingPage() {
                 <div className="space-y-8">
                   <div className="flex items-center gap-4">
                     <div className="w-8 h-px bg-slate-900"></div>
-                    <MonoLabel className="text-slate-900">Digital Architect</MonoLabel>
+                    <MonoLabel className="text-slate-900">
+                      Digital Architect
+                    </MonoLabel>
                   </div>
                   <H1 className="text-6xl md:text-8xl">
                     Websites <br />
@@ -54,7 +63,10 @@ export default function LandingPage() {
                 <HeroArchitecture className="w-full h-full" />
               </div>
 
-              <Reveal delay={0.2} className="w-full h-full flex items-center justify-center">
+              <Reveal
+                delay={0.2}
+                className="w-full h-full flex items-center justify-center"
+              >
                 <div className="relative w-full h-full flex items-center justify-center pointer-events-none">
                   <HeroMainIllustration className="w-full h-full scale-110 md:scale-125 origin-center" />
                 </div>
@@ -65,16 +77,14 @@ export default function LandingPage() {
       </section>
 
       {/* Section 02: The Promise */}
-      <Section
-        number="02"
-        title="Das Versprechen"
-        borderTop
-      >
+      <Section number="02" title="Das Versprechen" borderTop>
         <div className="space-y-16 relative">
           <Reveal>
             <H3 className="max-w-3xl">
               Schluss mit aufgeblähten Prozessen. <br />
-              <span className="text-slate-200">Ich reduziere auf das Wesentliche.</span>
+              <span className="text-slate-200">
+                Ich reduziere auf das Wesentliche.
+              </span>
             </H3>
           </Reveal>
 
@@ -86,10 +96,22 @@ export default function LandingPage() {
                 </div>
                 <ul className="space-y-6">
                   {[
-                    { text: 'Direkte Kommunikation ohne Umwege', icon: <ConceptCommunication className="w-12 h-12" /> },
-                    { text: 'Schnelle Prototypen statt langer Konzepte', icon: <ConceptPrototyping className="w-12 h-12" /> },
-                    { text: 'Sauberer Code, der auch morgen noch läuft', icon: <ConceptCode className="w-12 h-12" /> },
-                    { text: 'Fixpreise für volle Budgetsicherheit', icon: <ConceptPrice className="w-12 h-12" /> }
+                    {
+                      text: "Direkte Kommunikation ohne Umwege",
+                      icon: <ConceptCommunication className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Schnelle Prototypen statt langer Konzepte",
+                      icon: <ConceptPrototyping className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Sauberer Code, der auch morgen noch läuft",
+                      icon: <ConceptCode className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Fixpreise für volle Budgetsicherheit",
+                      icon: <ConceptPrice className="w-12 h-12" />,
+                    },
                   ].map((item, i) => (
                     <li key={i} className="flex items-center gap-6 group">
                       <div className="shrink-0 transition-transform duration-500 group-hover:scale-110">
@@ -109,14 +131,19 @@ export default function LandingPage() {
                 </div>
                 <ul className="space-y-4">
                   {[
-                    'Endlose Workshops ohne Ergebnis',
-                    'PowerPoint-Schlachten',
-                    'Outsourcing an Billig-Anbieter',
-                    'Wartungsverträge mit versteckten Kosten'
+                    "Endlose Workshops ohne Ergebnis",
+                    "PowerPoint-Schlachten",
+                    "Outsourcing an Billig-Anbieter",
+                    "Wartungsverträge mit versteckten Kosten",
                   ].map((item, i) => (
-                    <li key={i} className="flex items-start gap-3 decoration-slate-200 line-through">
+                    <li
+                      key={i}
+                      className="flex items-start gap-3 decoration-slate-200 line-through"
+                    >
                       <span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
-                      <LeadText className="text-slate-400 text-lg">{item}</LeadText>
+                      <LeadText className="text-slate-400 text-lg">
+                        {item}
+                      </LeadText>
                     </li>
                   ))}
                 </ul>
@@ -127,17 +154,15 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 03: The Difference */}
-      <Section
-        number="03"
-        title="Der Unterschied"
-        variant="white"
-        borderTop
-      >
+      <Section number="03" title="Der Unterschied" variant="white" borderTop>
         <div className="space-y-16 relative">
           <div className="flex flex-col md:flex-row gap-12 items-center">
             <Reveal className="flex-1">
               <LeadText className="text-2xl md:text-3xl leading-tight max-w-2xl relative z-10 text-slate-400">
-                Ich arbeite nicht gegen die Zeit, sondern <span className="text-slate-900">für das Ergebnis.</span> Mein Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von Prozessen.
+                Ich arbeite nicht gegen die Zeit, sondern{" "}
+                <span className="text-slate-900">für das Ergebnis.</span> Mein
+                Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von
+                Prozessen.
               </LeadText>
             </Reveal>
             <Reveal delay={0.2} className="w-full md:w-72 shrink-0">
@@ -168,11 +193,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 04: Target Group */}
-      <Section
-        number="04"
-        title="Zielgruppe"
-        borderTop
-      >
+      <Section number="04" title="Zielgruppe" borderTop>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
           <Reveal>
             <Card variant="dark" padding="normal" className="group">
@@ -180,13 +201,19 @@ export default function LandingPage() {
                 <div className="w-16 h-16 bg-white/5 rounded-xl flex items-center justify-center border border-white/10">
                   <ConceptPrice className="w-8 h-8" />
                 </div>
-                <H3 className="text-white text-3xl">Unternehmer & <br />Geschäftsführer</H3>
+                <H3 className="text-white text-3xl">
+                  Unternehmer & <br />
+                  Geschäftsführer
+                </H3>
                 <LeadText className="text-slate-400 text-lg">
-                  "Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details."
+                  "Ich brauche eine Lösung, die funktioniert. Ich habe keine
+                  Zeit für technische Details."
                 </LeadText>
               </div>
               <div className="pt-8 border-t border-white/5 mt-8">
-                <Label className="group-hover:text-white transition-colors">Perfekt für Sie</Label>
+                <Label className="group-hover:text-white transition-colors">
+                  Perfekt für Sie
+                </Label>
               </div>
             </Card>
           </Reveal>
@@ -196,13 +223,19 @@ export default function LandingPage() {
                 <div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
                   <ConceptWebsite className="w-8 h-8" />
                 </div>
-                <H3 className="text-3xl">Marketing & <br />Vertrieb</H3>
+                <H3 className="text-3xl">
+                  Marketing & <br />
+                  Vertrieb
+                </H3>
                 <LeadText className="text-slate-400 text-lg">
-                  "Wir brauchen Landingpages und Tools, um unsere Ziele zu erreichen. Schnell und zuverlässig."
+                  "Wir brauchen Landingpages und Tools, um unsere Ziele zu
+                  erreichen. Schnell und zuverlässig."
                 </LeadText>
               </div>
               <div className="pt-8 border-t border-slate-50 mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">Perfekt für Sie</Label>
+                <Label className="group-hover:text-slate-900 transition-colors">
+                  Perfekt für Sie
+                </Label>
               </div>
             </Card>
           </Reveal>
@@ -210,12 +243,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 05: Services */}
-      <Section
-        number="05"
-        title="Leistungen"
-        variant="gray"
-        borderTop
-      >
+      <Section number="05" title="Leistungen" variant="gray" borderTop>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
           <Reveal delay={0.1}>
             <Card variant="white" padding="small" className="group">
@@ -225,10 +253,14 @@ export default function LandingPage() {
               <div className="space-y-4">
                 <H3 className="text-2xl">Websites</H3>
                 <BodyText>
-                  High-Performance Websites. Maßgeschneiderte Architektur statt Baukasten.
+                  High-Performance Websites. Maßgeschneiderte Architektur statt
+                  Baukasten.
                 </BodyText>
                 <div className="pt-4">
-                  <a href="/websites" className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all">
+                  <a
+                    href="/websites"
+                    className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all"
+                  >
                     Details
                   </a>
                 </div>
@@ -237,14 +269,19 @@ export default function LandingPage() {
           </Reveal>
 
           <Reveal delay={0.3}>
-            <Card variant="white" padding="small" className="group mt-8 md:mt-0">
+            <Card
+              variant="white"
+              padding="small"
+              className="group mt-8 md:mt-0"
+            >
               <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                 <ConceptSystem className="w-8 h-8" />
               </div>
               <div className="space-y-4">
                 <H3 className="text-2xl">Systeme</H3>
                 <BodyText>
-                  Web-Applikationen, Portale, interne Tools. Wenn Standard an Grenzen stößt.
+                  Web-Applikationen, Portale, interne Tools. Wenn Standard an
+                  Grenzen stößt.
                 </BodyText>
               </div>
             </Card>
@@ -258,7 +295,8 @@ export default function LandingPage() {
               <div className="space-y-4">
                 <H3 className="text-2xl">Automatisierung</H3>
                 <BodyText>
-                  Verbindung von Tools, automatische Prozesse, Daten-Synchronisation.
+                  Verbindung von Tools, automatische Prozesse,
+                  Daten-Synchronisation.
                 </BodyText>
               </div>
             </Card>
@@ -267,11 +305,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 06: Contact */}
-      <Section
-        number="06"
-        title="Kontakt"
-        borderTop
-      >
+      <Section number="06" title="Kontakt" borderTop>
         <div className="relative py-12" id="contact">
           <Reveal>
             <div className="space-y-16">
@@ -283,7 +317,8 @@ export default function LandingPage() {
               <div className="flex flex-col md:flex-row gap-16 items-start relative z-10">
                 <div className="space-y-8 flex-1">
                   <LeadText className="text-2xl md:text-3xl text-slate-400">
-                    Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von <span className="text-slate-900">24 Stunden</span>.
+                    Schreiben Sie mir kurz, worum es geht. Ich melde mich{" "}
+                    <span className="text-slate-900">zeitnah</span> bei Ihnen.
                   </LeadText>
                   <div className="pt-4">
                     <a
@@ -301,7 +336,9 @@ export default function LandingPage() {
                     <Label className="text-slate-900">Verfügbarkeit</Label>
                   </div>
                   <BodyText className="text-base leading-snug">
-                    Aktuell nehme ich Projekte für <span className="font-bold text-slate-900">Q2 2026</span> an.
+                    Aktuell nehme ich Projekte für{" "}
+                    <span className="font-bold text-slate-900">Q2 2026</span>{" "}
+                    an.
                   </BodyText>
                 </div>
               </div>