updated sections design and content

src/components/ScrollStack.tsx

@@ -27,6 +27,7 @@ interface ScrollStackProps {
   scaleDuration?: number;
   rotationAmount?: number;
   blurAmount?: number;
+  hideBehind?: boolean;
   useWindowScroll?: boolean;
   onStackComplete?: () => void;
 }
@@ -42,6 +43,7 @@ const ScrollStack = ({
   baseScale = 0.85,
   rotationAmount = 0,
   blurAmount = 0,
+  hideBehind = false,
   useWindowScroll = false,
   onStackComplete,
 }: ScrollStackProps) => {
@@ -122,6 +124,14 @@ const ScrollStack = ({
 
     const endElementTop = endTopRef.current;
 
+    // Which card is currently on top of the stack (used for blur + hide-behind)
+    let topCardIndex = 0;
+    for (let j = 0; j < cardsRef.current.length; j++) {
+      const jCardTop = cardTopsRef.current[j] ?? 0;
+      const jTriggerStart = jCardTop - stackPositionPx - itemStackDistance * j;
+      if (scrollTop >= jTriggerStart) topCardIndex = j;
+    }
+
     cardsRef.current.forEach((card, i) => {
       if (!card) return;
 
@@ -137,20 +147,14 @@ const ScrollStack = ({
       const rotation = rotationAmount ? i * rotationAmount * scaleProgress : 0;
 
       let blur = 0;
-      if (blurAmount) {
-        let topCardIndex = 0;
-        for (let j = 0; j < cardsRef.current.length; j++) {
-          const jCardTop = cardTopsRef.current[j] ?? 0;
-          const jTriggerStart = jCardTop - stackPositionPx - itemStackDistance * j;
-          if (scrollTop >= jTriggerStart) {
-            topCardIndex = j;
-          }
-        }
+      if (blurAmount && i < topCardIndex) {
+        const depthInStack = topCardIndex - i;
+        blur = Math.max(0, depthInStack * blurAmount);
+      }
 
-        if (i < topCardIndex) {
-          const depthInStack = topCardIndex - i;
-          blur = Math.max(0, depthInStack * blurAmount);
-        }
+      // Hide cards stacked behind the current top card entirely
+      if (hideBehind) {
+        card.style.opacity = i < topCardIndex ? '0' : '1';
       }
 
       let translateY = 0;
@@ -207,6 +211,7 @@ const ScrollStack = ({
     baseScale,
     rotationAmount,
     blurAmount,
+    hideBehind,
     useWindowScroll,
     onStackComplete,
     calculateProgress,