fix scroll smooth

src/components/sections/Workflow1.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import OptimizationSection from "../optimization/OptimizationSection";
 
 export default function Workflow1() {
   const [activeSlide, setActiveSlide] = useState(0);
+  const [paused, setPaused] = useState(false);
 
   const slides = [
     {
@@ -22,6 +23,16 @@ export default function Workflow1() {
     }
   ];
 
+  // Auto-advance the carousel every 5s, infinite loop. Keyed on activeSlide so any
+  // manual selection resets the timer; pauses while the user hovers the card.
+  useEffect(() => {
+    if (paused) return;
+    const id = setTimeout(() => {
+      setActiveSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+    return () => clearTimeout(id);
+  }, [activeSlide, paused, slides.length]);
+
   return (
     <section className="dm-wf1" aria-label="Workflow 1 — Impact of Optimisation & Performance">
 
@@ -30,7 +41,7 @@ export default function Workflow1() {
 
       {/* ── Bottom sub-section: Performance content, flush + colour-matched to the
              optimisation section above so the whole workflow reads as one container ── */}
-      <div className="dm-wf1-card">
+      <div className="dm-wf1-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
         {/* Left Column: Overlapping Chevron Graphic */}
         <div className="dm-workflow-left">
           <svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">
@@ -105,6 +116,12 @@ const styles = `
   margin: 0 auto 0;
 }
 
+/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
+   this wrapper and the nested .dm-opt are sections, so that 96px top+bottom stacked
+   into large empty bands above / between the workflows. These are full-bleed pinned
+   experiences whose cards butt together via their own insets — no section padding. */
+.dm-wf1, .dm-wf1 .dm-opt { padding-top: 0; padding-bottom: 0; }
+
 /* Performance card — aligned to the optimisation card (20px side insets),
    navy-matched, flat top, rounded bottom, pulled up to close the seam. */
 .dm-wf1-card {
@@ -115,8 +132,10 @@ const styles = `
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-top: none;
   border-radius: 0 0 42px 42px;
-  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
-  padding: 48px 60px;
+  /* No shadow: this card is flush under the optimisation card and merges with it as one
+     continuous container — a shadow here would re-introduce a dark band at the seam. */
+  box-shadow: none;
+  padding: 36px 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;