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>

apps/web/src/components/ContactForm.tsx

@@ -537,8 +537,8 @@ export function ContactForm({
             Anfrage gesendet!
           </h2>
           <p className="text-slate-400 text-2xl max-w-2xl mx-auto leading-relaxed">
-            Vielen Dank, {state.name.split(" ")[0]}. Ich melde mich innerhalb
-            von 24 Stunden bei Ihnen.
+            Vielen Dank, {state.name.split(" ")[0]}. Ich melde mich zeitnah bei
+            Ihnen.
           </p>
         </div>
         <button

apps/web/src/components/Landing/ComparisonRow.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { ArrowRight } from 'lucide-react';
-import { Reveal } from '../Reveal';
-import { Label, H3, LeadText } from '../Typography';
+import * as React from "react";
+import { ArrowRight } from "lucide-react";
+import { Reveal } from "../Reveal";
+import { Label, H3, LeadText } from "../Typography";
 
 interface ComparisonRowProps {
   negativeLabel: string;
@@ -22,27 +22,27 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
 }) => {
   return (
     <Reveal delay={delay}>
-      <div className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 md:gap-12 items-center`}>
+      <div
+        className={`flex flex-col ${reverse ? "md:flex-row-reverse" : "md:flex-row"} gap-8 md:gap-12 items-center`}
+      >
         <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
-          <Label className="mb-4 line-through decoration-slate-200">
+          <Label className="mb-4 line-through decoration-red-500">
             {negativeLabel}
           </Label>
-          <LeadText className="line-through decoration-slate-200 leading-snug">
+          <LeadText className="line-through decoration-red-500 leading-snug">
             {negativeText}
           </LeadText>
         </div>
 
         <div className="shrink-0">
-          <ArrowRight className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? 'rotate-180' : ''}`} />
+          <ArrowRight
+            className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? "rotate-180" : ""}`}
+          />
         </div>
 
         <div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
-          <Label className="text-slate-900 mb-4">
-            {positiveLabel}
-          </Label>
-          <H3 className="text-2xl md:text-3xl">
-            {positiveText}
-          </H3>
+          <Label className="text-slate-900 mb-4">{positiveLabel}</Label>
+          <H3 className="text-2xl md:text-3xl">{positiveText}</H3>
         </div>
       </div>
     </Reveal>

apps/web/src/components/Marker.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+/**
+ * TECHNICAL MARKER COMPONENT
+ * Implements the "hand-drawn marker" effect.
+ * Animates in when entering the viewport.
+ */
+interface MarkerProps {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+  color?: string;
+}
+
+export const Marker: React.FC<MarkerProps> = ({
+  children,
+  delay = 0,
+  className = "",
+  color = "rgba(255,235,59,0.95)",
+}) => {
+  return (
+    <span className={`relative inline-block px-1 ${className}`}>
+      <motion.span
+        initial={{ scaleX: 0, opacity: 0 }}
+        whileInView={{ scaleX: 1, opacity: 1 }}
+        viewport={{ once: true, margin: "-5%" }}
+        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 origin-left"
+        style={{ backgroundColor: color }}
+        aria-hidden="true"
+      />
+      {children}
+    </span>
+  );
+};

apps/web/src/components/Reveal.tsx

@@ -1,26 +1,26 @@
-'use client';
+"use client";
 
-import React, { useEffect, useRef } from 'react';
-import { motion, useInView, useAnimation, Variants } from 'framer-motion';
+import React, { useEffect, useRef } from "react";
+import { motion, useInView, useAnimation, Variants } from "framer-motion";
 
 interface RevealProps {
   children: React.ReactNode;
-  width?: 'fit-content' | '100%';
+  width?: "fit-content" | "100%";
   delay?: number;
   className?: string;
-  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  direction?: "up" | "down" | "left" | "right" | "none";
   scale?: number;
   blur?: boolean;
 }
 
 export const Reveal: React.FC<RevealProps> = ({
   children,
-  width = 'fit-content',
+  width = "fit-content",
   delay = 0.25,
   className = "",
-  direction = 'up',
+  direction = "up",
   scale = 1,
-  blur = false
+  blur = false,
 }) => {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: "-10%" });
@@ -32,31 +32,18 @@ export const Reveal: React.FC<RevealProps> = ({
     }
   }, [isInView, mainControls]);
 
-  const getDirectionOffset = () => {
-    switch (direction) {
-      case 'up': return { y: 20 };
-      case 'down': return { y: -20 };
-      case 'left': return { x: 20 };
-      case 'right': return { x: -20 };
-      default: return {};
-    }
-  };
-
   const variants: Variants = {
     hidden: {
       opacity: 0,
-      ...getDirectionOffset(),
-      scale: scale !== 1 ? scale : 0.99,
-      rotateX: direction === 'up' ? 2 : direction === 'down' ? -2 : 0,
-      rotateY: direction === 'left' ? -2 : direction === 'right' ? 2 : 0,
+      y: direction === "up" ? 10 : direction === "down" ? -10 : 0,
+      x: direction === "left" ? 10 : direction === "right" ? -10 : 0,
+      scale: scale !== 1 ? scale : 1,
     },
     visible: {
       opacity: 1,
       y: 0,
       x: 0,
       scale: 1,
-      rotateX: 0,
-      rotateY: 0,
     },
   };
 
@@ -66,7 +53,6 @@ export const Reveal: React.FC<RevealProps> = ({
       style={{
         position: "relative",
         width,
-        perspective: "1000px"
       }}
       className={className}
     >
@@ -76,13 +62,13 @@ export const Reveal: React.FC<RevealProps> = ({
         animate={mainControls}
         style={{ transformStyle: "preserve-3d" }}
         transition={{
-          duration: 0.8,
+          duration: 0.4,
           delay: delay,
           type: "spring",
-          stiffness: 70,
-          damping: 24,
+          stiffness: 260,
+          damping: 20,
           mass: 1,
-          opacity: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }
+          opacity: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
         }}
       >
         {children}

docker-compose.dev.yml

@@ -0,0 +1,90 @@
+services:
+  app:
+    # Lighweight proxy to bridge Traefik to local host (HMR support)
+    image: alpine/socat
+    restart: always
+    command: tcp-listen:3000,fork,reuseaddr tcp:host.docker.internal:3000
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    networks:
+      - default
+      - infra
+    labels:
+      - "traefik.enable=true"
+      - 'traefik.http.routers.${PROJECT_NAME:-mintel-me}-web.rule=${TRAEFIK_HOST_RULE:-Host("${TRAEFIK_HOST:-mintel.localhost}")}'
+      - "traefik.http.routers.${PROJECT_NAME:-mintel-me}-web.entrypoints=web"
+      - 'traefik.http.routers.${PROJECT_NAME:-mintel-me}.rule=${TRAEFIK_HOST_RULE:-Host("${TRAEFIK_HOST:-mintel.localhost}")}'
+      - "traefik.http.routers.${PROJECT_NAME:-mintel-me}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.services.${PROJECT_NAME:-mintel-me}.loadbalancer.server.port=3000"
+      - "traefik.docker.network=infra"
+
+  gatekeeper:
+    profiles: ["gatekeeper"]
+    image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
+    container_name: ${PROJECT_NAME:-mintel-me}-gatekeeper
+    restart: always
+    networks:
+      infra:
+        aliases:
+          - ${PROJECT_NAME:-mintel-me}-gatekeeper
+    env_file:
+      - .env
+    environment:
+      PORT: 3000
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.services.${PROJECT_NAME:-mintel-me}-gatekeeper.loadbalancer.server.port=3000"
+      - "traefik.docker.network=infra"
+
+  directus:
+    image: registry.infra.mintel.me/mintel/directus:latest
+    restart: always
+    networks:
+      - default
+      - infra
+    env_file:
+      - .env
+    environment:
+      KEY: ${DIRECTUS_KEY}
+      SECRET: ${DIRECTUS_SECRET}
+      DB_CLIENT: "pg"
+      DB_HOST: "directus-db"
+      DB_PORT: "5432"
+      DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
+      DB_USER: ${DIRECTUS_DB_USER:-directus}
+      DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+      PUBLIC_URL: ${DIRECTUS_URL:-https://cms.mintel.me}
+    volumes:
+      - ./directus/uploads:/directus/uploads
+      - ./directus/extensions:/directus/extensions
+      - ./directus/schema:/directus/schema
+      - ./directus/migrations:/directus/migrations
+    labels:
+      - "traefik.enable=true"
+      - 'traefik.http.routers.${PROJECT_NAME:-mintel-me}-directus.rule=${TRAEFIK_DIRECTUS_RULE:-Host("${DIRECTUS_HOST:-cms.mintel.localhost}")}'
+      - "traefik.http.routers.${PROJECT_NAME:-mintel-me}-directus.entrypoints=web"
+      - "traefik.http.services.${PROJECT_NAME:-mintel-me}-directus.loadbalancer.server.port=8055"
+      - "traefik.docker.network=infra"
+
+  directus-db:
+    image: postgres:15-alpine
+    restart: always
+    networks:
+      - default
+    env_file:
+      - .env
+    environment:
+      POSTGRES_DB: ${DIRECTUS_DB_NAME:-directus}
+      POSTGRES_USER: ${DIRECTUS_DB_USER:-directus}
+      POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
+    volumes:
+      - directus-db-data:/var/lib/postgresql/data
+
+networks:
+  default:
+    name: ${PROJECT_NAME:-mintel-me}-internal
+  infra:
+    external: true
+
+volumes:
+  directus-db-data:

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "packageManager": "pnpm@10.18.3",
   "scripts": {
-    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://mintel.localhost\\n🗄️  CMS:      http://cms.mintel.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up app directus directus-db gatekeeper",
+    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://mintel.localhost\\n🗄️  CMS:      http://cms.mintel.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n' && docker-compose -f docker-compose.dev.yml down --remove-orphans && (docker-compose -f docker-compose.dev.yml up app directus directus-db gatekeeper & pnpm -r dev)",
     "dev:local": "pnpm -r dev",
     "build": "pnpm -r build",
     "start": "pnpm -r start",