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

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}