blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-StackCards/Component.tsx

@@ -1,473 +1,474 @@
-'use client'
-
-import React, { useLayoutEffect, useRef, useState } from 'react'
-import Image from 'next/image'
-import * as LucideIcons from 'lucide-react'
-import { ArrowRight } from 'lucide-react'
-import gsap from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-type Media = { url?: string | null; alt?: string | null; [key: string]: any }
-
-import RichText from '@/components/RichText'
-
-if (typeof window !== 'undefined') {
-  gsap.registerPlugin(ScrollTrigger)
-}
-
-const ACCENTS = {
-  lime: { hex: '#84cc16', rgb: '132,204,22' },
-  purple: { hex: '#9803e2', rgb: '152,3,226' },
-} as const
-
-type AccentVariant = keyof typeof ACCENTS
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === 'string' && src.startsWith('/api/media/file/')
-}
-
-function DynamicIcon({
-  name,
-  size = 22,
-  ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
-  if (!name) return null
-
-  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
-
-  if (!Icon) return null
-
-  return <Icon size={size} {...props} />
-}
-
-interface TagItem {
-  id?: string | null
-  tag: string
-}
-
-interface CardItem {
-  id?: string | null
-  iconName?: string | null
-  number?: string | null
-  title?: string | null
-  content?: unknown
-  statValue?: string | null
-  statLabel?: string | null
-  tags?: TagItem[] | null
-  ctaLabel?: string | null
-  ctaHref?: string | null
-  accentVariant?: AccentVariant | null
-  image?: Media | string | null
-}
-
-interface DDStackCardsProps {
-  cards?: CardItem[] | null
-
-  cardOffset?: number | null
-  initialStickyTop?: number | null
-  depthZ?: number | null
-  scaleStep?: number | null
-
-  cardOffsetTablet?: number | null
-  initialStickyTopTablet?: number | null
-  depthZTablet?: number | null
-  scaleStepTablet?: number | null
-
-  cardOffsetMobile?: number | null
-  initialStickyTopMobile?: number | null
-  depthZMobile?: number | null
-  scaleStepMobile?: number | null
-
-  sectionId?: string | null
-  [key: string]: unknown
-}
-
-type ResponsiveStackValues = {
-  cardOffset: number
-  initialStickyTop: number
-  depthZ: number
-  scaleStep: number
-}
-
-function getResponsiveStackValues({
-  cardOffset,
-  initialStickyTop,
-  depthZ,
-  scaleStep,
-  cardOffsetTablet,
-  initialStickyTopTablet,
-  depthZTablet,
-  scaleStepTablet,
-  cardOffsetMobile,
-  initialStickyTopMobile,
-  depthZMobile,
-  scaleStepMobile,
-}: DDStackCardsProps): ResponsiveStackValues {
-  const desktopValues = {
-    cardOffset: typeof cardOffset === 'number' ? cardOffset : 14,
-    initialStickyTop: typeof initialStickyTop === 'number' ? initialStickyTop : 0,
-    depthZ: typeof depthZ === 'number' ? depthZ : 40,
-    scaleStep: typeof scaleStep === 'number' ? scaleStep : 0.18,
-  }
-
-  if (typeof window === 'undefined') return desktopValues
-
-  const tabletValues = {
-    cardOffset:
-      typeof cardOffsetTablet === 'number'
-        ? cardOffsetTablet
-        : Math.max(8, desktopValues.cardOffset * 0.75),
-    initialStickyTop:
-      typeof initialStickyTopTablet === 'number'
-        ? initialStickyTopTablet
-        : desktopValues.initialStickyTop,
-    depthZ:
-      typeof depthZTablet === 'number' ? depthZTablet : Math.max(16, desktopValues.depthZ * 0.65),
-    scaleStep:
-      typeof scaleStepTablet === 'number'
-        ? scaleStepTablet
-        : Math.min(desktopValues.scaleStep, 0.08),
-  }
-
-  const mobileValues = {
-    cardOffset:
-      typeof cardOffsetMobile === 'number'
-        ? cardOffsetMobile
-        : Math.max(6, desktopValues.cardOffset * 0.5),
-    initialStickyTop:
-      typeof initialStickyTopMobile === 'number'
-        ? initialStickyTopMobile
-        : desktopValues.initialStickyTop,
-    depthZ:
-      typeof depthZMobile === 'number' ? depthZMobile : Math.max(8, desktopValues.depthZ * 0.35),
-    scaleStep:
-      typeof scaleStepMobile === 'number'
-        ? scaleStepMobile
-        : Math.min(desktopValues.scaleStep, 0.045),
-  }
-
-  if (window.matchMedia('(max-width: 767px)').matches) return mobileValues
-  if (window.matchMedia('(max-width: 1023px)').matches) return tabletValues
-
-  return desktopValues
-}
-
-export function DDStackCards(props: DDStackCardsProps) {
-  const { cards, sectionId } = props
-
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const cardRefs = useRef<(HTMLElement | null)[]>([])
-  const [layoutValues, setLayoutValues] = useState<ResponsiveStackValues>(() => ({
-    cardOffset: typeof props.cardOffset === 'number' ? props.cardOffset : 14,
-    initialStickyTop: typeof props.initialStickyTop === 'number' ? props.initialStickyTop : 0,
-    depthZ: typeof props.depthZ === 'number' ? props.depthZ : 40,
-    scaleStep: typeof props.scaleStep === 'number' ? props.scaleStep : 0.18,
-  }))
-
-  useLayoutEffect(() => {
-    const updateValues = () => {
-      setLayoutValues(getResponsiveStackValues(props))
-    }
-
-    updateValues()
-
-    window.addEventListener('resize', updateValues)
-
-    return () => {
-      window.removeEventListener('resize', updateValues)
-    }
-  }, [
-    props.cardOffset,
-    props.initialStickyTop,
-    props.depthZ,
-    props.scaleStep,
-    props.cardOffsetTablet,
-    props.initialStickyTopTablet,
-    props.depthZTablet,
-    props.scaleStepTablet,
-    props.cardOffsetMobile,
-    props.initialStickyTopMobile,
-    props.depthZMobile,
-    props.scaleStepMobile,
-  ])
-
-  useLayoutEffect(() => {
-    const timer = window.setTimeout(() => {
-      const wrapper = wrapperRef.current
-      const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[]
-
-      if (!wrapper || !cardEls.length) return
-
-      const ctx = gsap.context(() => {
-        gsap.set(wrapper, {
-          autoAlpha: 1,
-          willChange: 'opacity',
-        })
-
-        gsap.set(cardEls, {
-          transformPerspective: 1200,
-          transformOrigin: 'top center',
-        })
-
-        cardEls.forEach((card, i) => {
-          for (let j = i + 1; j < cardEls.length; j++) {
-            const step = j - i
-            const prevStep = step - 1
-            const triggerStickyTop =
-              layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset
-
-            gsap.fromTo(
-              card,
-              {
-                scale: 1 - prevStep * layoutValues.scaleStep,
-                z: -prevStep * layoutValues.depthZ,
-              },
-              {
-                scale: 1 - step * layoutValues.scaleStep,
-                z: -step * layoutValues.depthZ,
-                force3D: true,
-                filter: `brightness(${Math.max(0.65, 1 - step * 0.06)})`,
-                borderRadius: '20px',
-                immediateRender: false,
-                scrollTrigger: {
-                  trigger: cardEls[j],
-                  start: `top ${triggerStickyTop + layoutValues.cardOffset}px`,
-                  end: `top ${triggerStickyTop}px`,
-                  scrub: true,
-                  invalidateOnRefresh: true,
-                },
-              },
-            )
-          }
-        })
-
-        const lastCard = cardEls[cardEls.length - 1]
-
-        gsap.to(wrapper, {
-          autoAlpha: 0,
-          ease: 'none',
-          scrollTrigger: {
-            trigger: lastCard,
-            start: 'top top',
-            end: () => `+=${window.innerHeight * 0.3}`,
-            scrub: true,
-            invalidateOnRefresh: true,
-          },
-        })
-
-        requestAnimationFrame(() => {
-          ScrollTrigger.refresh()
-        })
-      }, wrapper)
-
-      return () => ctx.revert()
-    }, 120)
-
-    return () => {
-      window.clearTimeout(timer)
-    }
-  }, [
-    layoutValues.cardOffset,
-    layoutValues.initialStickyTop,
-    layoutValues.depthZ,
-    layoutValues.scaleStep,
-  ])
-
-  if (!cards?.length) return null
-
-  const totalCards = cards.length
-
-  return (
-    <section
-      ref={wrapperRef}
-      className="stack-cards-block relative w-full invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
-    >
-      {cards.map((card, i) => {
-        const accent = ACCENTS[card.accentVariant ?? 'lime']
-        const cardMedia =
-          card.image && typeof card.image === 'object' ? (card.image as Media) : null
-
-        return (
-          <section
-            key={card.id ?? i}
-            id={i === 0 ? (sectionId ?? undefined) : undefined}
-            ref={(el) => {
-              cardRefs.current[i] = el
-            }}
-            className="stack-card renderblock-container !sticky w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
-            style={{
-              top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
-              zIndex: i + 1,
-              willChange: 'transform',
-            }}
-          >
-            <div
-              className="relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl"
-              style={{
-                background: 'rgb(8 8 10 / 90%)',
-                border: '1px solid rgba(255,255,255,0.07)',
-                backdropFilter: 'blur(8px)',
-              }}
-            >
-              <div
-                className="absolute left-0 right-0 top-0 h-px"
-                style={{
-                  background: `linear-gradient(90deg, transparent, rgba(${accent.rgb},0.5), transparent)`,
-                }}
-              />
-
-              <div className="grid min-h-70 grid-cols-[1fr_5.5rem] sm:grid-cols-[1fr_8rem] md:min-h-85 md:grid-cols-[1fr_auto]">
-                <div className="stackcard-bg flex flex-col justify-between p-6 md:p-10 lg:p-14">
-                  <div>
-                    <div className="mb-6 flex items-start justify-between md:mb-8">
-                      <div className="flex items-center gap-3 md:gap-4">
-                        <div
-                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl md:h-12 md:w-12"
-                          style={{
-                            background: `rgba(${accent.rgb},0.1)`,
-                            border: `1px solid rgba(${accent.rgb},0.25)`,
-                          }}
-                        >
-                          <span style={{ color: accent.hex }}>
-                            <DynamicIcon className="shrink-0" name={card.iconName} size={20} />
-                          </span>
-                        </div>
-
-                        <div>
-                          {card.number && (
-                            <div
-                              className="mb-0.5 text-[10px] font-black uppercase tracking-widest md:text-xs"
-                              style={{ color: `rgba(${accent.rgb},0.6)` }}
-                            >
-                              {card.number} / {String(totalCards).padStart(2, '0')}
-                            </div>
-                          )}
-
-                          {card.title && (
-                            <h3 className="text-xl font-extrabold tracking-tight text-stone-50/80 md:text-2xl lg:text-3xl">
-                              {card.title}
-                            </h3>
-                          )}
-                        </div>
-                      </div>
-
-                      {(card.statValue || card.statLabel) && (
-                        <div className="hidden flex-col items-end md:flex">
-                          {card.statValue && (
-                            <span
-                              className="text-4xl font-black leading-none"
-                              style={{ color: accent.hex }}
-                            >
-                              {card.statValue}
-                            </span>
-                          )}
-
-                          {card.statLabel && (
-                            <span
-                              className="mt-1 text-xs"
-                              style={{ color: 'rgba(255,255,255,0.3)' }}
-                            >
-                              {card.statLabel}
-                            </span>
-                          )}
-                        </div>
-                      )}
-                    </div>
-
-                    {card.content ? (
-                      <RichText
-                        data={card.content as any}
-                        enableProse={false}
-                        enableGutter={false}
-                        className="max-w-xl text-sm leading-relaxed text-stone-200 dark:text-stone-200 md:text-base"
-                        style={{ color: 'rgba(255,255,255,0.45)' }}
-                      />
-                    ) : null}
-                  </div>
-
-                  <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center md:mt-8">
-                    {card.tags && card.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {card.tags.map((tagItem, ti) => (
-                          <span
-                            key={tagItem.id ?? ti}
-                            className="rounded-full px-3 py-1 text-xs font-semibold"
-                            style={{
-                              background: `rgba(${accent.rgb},0.07)`,
-                              border: `1px solid rgba(${accent.rgb},0.18)`,
-                              color: accent.hex,
-                            }}
-                          >
-                            {tagItem.tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-
-                    {card.ctaLabel && (
-                      <a
-                        href={card.ctaHref ?? '#'}
-                        className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
-                        style={{ color: accent.hex }}
-                      >
-                        {card.ctaLabel}
-                        <ArrowRight
-                          size={14}
-                          className="transition-transform group-hover:translate-x-1"
-                          style={{ color: accent.hex }}
-                        />
-                      </a>
-                    )}
-                  </div>
-                </div>
-
-                <div
-                  className="relative flex w-22 items-center justify-center overflow-hidden sm:w-32 md:w-48 lg:w-64 xl:w-80"
-                  style={{
-                    borderLeft: `1px solid rgba(${accent.rgb},0.08)`,
-                    background: `linear-gradient(135deg, rgba(${accent.rgb},0.04) 0%, transparent 100%)`,
-                  }}
-                >
-                  <div
-                    className="absolute inset-0"
-                    style={{
-                      background: `radial-gradient(ellipse at 50% 50%, rgba(${accent.rgb},0.25) 0%, transparent 70%)`,
-                    }}
-                  />
-
-                  {isLocalImageSrc(cardMedia?.url) ? (
-                    <Image
-                      src={cardMedia.url}
-                      alt={cardMedia.alt ?? card.title ?? ''}
-                      fill
-                      className="relative z-10 object-cover opacity-80"
-                      sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
-                    />
-                  ) : (
-                    <>
-                      <span className="relative z-10" style={{ color: `rgba(${accent.rgb},1)` }}>
-                        <DynamicIcon className="shrink-0" name={card.iconName} size={96} />
-                      </span>
-
-                      {card.number && (
-                        <div
-                          className="absolute bottom-4 right-6 select-none font-black leading-none"
-                          style={{
-                            fontSize: '80px',
-                            color: `rgba(${accent.rgb},0.2)`,
-                          }}
-                        >
-                          {card.number}
-                        </div>
-                      )}
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-          </section>
-        )
-      })}
-    </section>
-  )
-}
-
+'use client'
+
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import Image from 'next/image'
+import * as LucideIcons from 'lucide-react'
+import { ArrowRight } from 'lucide-react'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+type Media = { url?: string | null; alt?: string | null; [key: string]: any }
+
+import RichText from '@/components/RichText'
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
+}
+
+const ACCENTS = {
+  lime: { hex: '#84cc16', rgb: '132,204,22' },
+  purple: { hex: '#9803e2', rgb: '152,3,226' },
+} as const
+
+type AccentVariant = keyof typeof ACCENTS
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function DynamicIcon({
+  name,
+  size = 22,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+
+  if (!Icon) return null
+
+  return <Icon size={size} {...props} />
+}
+
+interface TagItem {
+  id?: string | null
+  tag: string
+}
+
+interface CardItem {
+  id?: string | null
+  iconName?: string | null
+  number?: string | null
+  title?: string | null
+  content?: unknown
+  statValue?: string | null
+  statLabel?: string | null
+  tags?: TagItem[] | null
+  ctaLabel?: string | null
+  ctaHref?: string | null
+  accentVariant?: AccentVariant | null
+  image?: Media | string | null
+}
+
+interface DDStackCardsProps {
+  cards?: CardItem[] | null
+
+  cardOffset?: number | null
+  initialStickyTop?: number | null
+  depthZ?: number | null
+  scaleStep?: number | null
+
+  cardOffsetTablet?: number | null
+  initialStickyTopTablet?: number | null
+  depthZTablet?: number | null
+  scaleStepTablet?: number | null
+
+  cardOffsetMobile?: number | null
+  initialStickyTopMobile?: number | null
+  depthZMobile?: number | null
+  scaleStepMobile?: number | null
+
+  sectionId?: string | null
+  [key: string]: unknown
+}
+
+type ResponsiveStackValues = {
+  cardOffset: number
+  initialStickyTop: number
+  depthZ: number
+  scaleStep: number
+}
+
+function getResponsiveStackValues({
+  cardOffset,
+  initialStickyTop,
+  depthZ,
+  scaleStep,
+  cardOffsetTablet,
+  initialStickyTopTablet,
+  depthZTablet,
+  scaleStepTablet,
+  cardOffsetMobile,
+  initialStickyTopMobile,
+  depthZMobile,
+  scaleStepMobile,
+}: DDStackCardsProps): ResponsiveStackValues {
+  const desktopValues = {
+    cardOffset: typeof cardOffset === 'number' ? cardOffset : 14,
+    initialStickyTop: typeof initialStickyTop === 'number' ? initialStickyTop : 0,
+    depthZ: typeof depthZ === 'number' ? depthZ : 40,
+    scaleStep: typeof scaleStep === 'number' ? scaleStep : 0.18,
+  }
+
+  if (typeof window === 'undefined') return desktopValues
+
+  const tabletValues = {
+    cardOffset:
+      typeof cardOffsetTablet === 'number'
+        ? cardOffsetTablet
+        : Math.max(8, desktopValues.cardOffset * 0.75),
+    initialStickyTop:
+      typeof initialStickyTopTablet === 'number'
+        ? initialStickyTopTablet
+        : desktopValues.initialStickyTop,
+    depthZ:
+      typeof depthZTablet === 'number' ? depthZTablet : Math.max(16, desktopValues.depthZ * 0.65),
+    scaleStep:
+      typeof scaleStepTablet === 'number'
+        ? scaleStepTablet
+        : Math.min(desktopValues.scaleStep, 0.08),
+  }
+
+  const mobileValues = {
+    cardOffset:
+      typeof cardOffsetMobile === 'number'
+        ? cardOffsetMobile
+        : Math.max(6, desktopValues.cardOffset * 0.5),
+    initialStickyTop:
+      typeof initialStickyTopMobile === 'number'
+        ? initialStickyTopMobile
+        : desktopValues.initialStickyTop,
+    depthZ:
+      typeof depthZMobile === 'number' ? depthZMobile : Math.max(8, desktopValues.depthZ * 0.35),
+    scaleStep:
+      typeof scaleStepMobile === 'number'
+        ? scaleStepMobile
+        : Math.min(desktopValues.scaleStep, 0.045),
+  }
+
+  if (window.matchMedia('(max-width: 767px)').matches) return mobileValues
+  if (window.matchMedia('(max-width: 1023px)').matches) return tabletValues
+
+  return desktopValues
+}
+
+export function DDStackCards(props: DDStackCardsProps) {
+  const { cards, sectionId } = props
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const cardRefs = useRef<(HTMLElement | null)[]>([])
+  const [layoutValues, setLayoutValues] = useState<ResponsiveStackValues>(() => ({
+    cardOffset: typeof props.cardOffset === 'number' ? props.cardOffset : 14,
+    initialStickyTop: typeof props.initialStickyTop === 'number' ? props.initialStickyTop : 0,
+    depthZ: typeof props.depthZ === 'number' ? props.depthZ : 40,
+    scaleStep: typeof props.scaleStep === 'number' ? props.scaleStep : 0.18,
+  }))
+
+  useLayoutEffect(() => {
+    const updateValues = () => {
+      setLayoutValues(getResponsiveStackValues(props))
+    }
+
+    updateValues()
+
+    window.addEventListener('resize', updateValues)
+
+    return () => {
+      window.removeEventListener('resize', updateValues)
+    }
+  }, [
+    props.cardOffset,
+    props.initialStickyTop,
+    props.depthZ,
+    props.scaleStep,
+    props.cardOffsetTablet,
+    props.initialStickyTopTablet,
+    props.depthZTablet,
+    props.scaleStepTablet,
+    props.cardOffsetMobile,
+    props.initialStickyTopMobile,
+    props.depthZMobile,
+    props.scaleStepMobile,
+  ])
+
+  useLayoutEffect(() => {
+    const timer = window.setTimeout(() => {
+      const wrapper = wrapperRef.current
+      const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[]
+      const surfaceEls = cardEls
+        .map((card) => card.querySelector<HTMLElement>('.stack-card-surface'))
+        .filter(Boolean) as HTMLElement[]
+
+      if (!wrapper || !cardEls.length || surfaceEls.length !== cardEls.length) return
+
+      const ctx = gsap.context(() => {
+        gsap.set(wrapper, {
+          autoAlpha: 1,
+          willChange: 'opacity',
+        })
+
+        gsap.set(surfaceEls, {
+          transformPerspective: 1200,
+          transformOrigin: 'top center',
+        })
+
+        cardEls.forEach((_card, i) => {
+          for (let j = i + 1; j < cardEls.length; j++) {
+            const step = j - i
+            const prevStep = step - 1
+            const triggerStickyTop =
+              layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset
+
+            gsap.fromTo(
+              surfaceEls[i],
+              {
+                scale: 1 - prevStep * layoutValues.scaleStep,
+                z: -prevStep * layoutValues.depthZ,
+              },
+              {
+                scale: 1 - step * layoutValues.scaleStep,
+                z: -step * layoutValues.depthZ,
+                force3D: true,
+                borderRadius: '20px',
+                immediateRender: false,
+                scrollTrigger: {
+                  trigger: cardEls[j],
+                  start: `top ${triggerStickyTop + layoutValues.cardOffset}px`,
+                  end: `top ${triggerStickyTop}px`,
+                  scrub: true,
+                  invalidateOnRefresh: true,
+                },
+              },
+            )
+          }
+        })
+
+        const lastCard = cardEls[cardEls.length - 1]
+
+        gsap.to(wrapper, {
+          autoAlpha: 0,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: lastCard,
+            start: 'top top',
+            end: () => `+=${window.innerHeight * 0.3}`,
+            scrub: true,
+            invalidateOnRefresh: true,
+          },
+        })
+
+        requestAnimationFrame(() => {
+          ScrollTrigger.refresh()
+        })
+      }, wrapper)
+
+      return () => ctx.revert()
+    }, 120)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [
+    layoutValues.cardOffset,
+    layoutValues.initialStickyTop,
+    layoutValues.depthZ,
+    layoutValues.scaleStep,
+  ])
+
+  if (!cards?.length) return null
+
+  const totalCards = cards.length
+
+  return (
+    <>
+      <style>{'body:has(.stack-cards-block) { overflow-x: clip; }'}</style>
+      <section ref={wrapperRef} className="stack-cards-block relative w-full">
+        {cards.map((card, i) => {
+          const accent = ACCENTS[card.accentVariant ?? 'lime']
+          const cardMedia =
+            card.image && typeof card.image === 'object' ? (card.image as Media) : null
+
+          return (
+            <section
+              key={card.id ?? i}
+              id={i === 0 ? (sectionId ?? undefined) : undefined}
+              ref={(el) => {
+                cardRefs.current[i] = el
+              }}
+              className="stack-card renderblock-container sticky w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
+              style={{
+                top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
+                zIndex: i + 1,
+              }}
+            >
+              {i === 0 ? '' : null}
+              <div
+                className="stack-card-surface relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
+                style={{
+                  background: 'rgb(8 8 10 / 90%)',
+                  border: '1px solid rgba(255,255,255,0.07)',
+                  backdropFilter: 'blur(8px)',
+                }}
+              >
+                <div
+                  className="absolute left-0 right-0 top-0 h-px"
+                  style={{
+                    background: `linear-gradient(90deg, transparent, rgba(${accent.rgb},0.5), transparent)`,
+                  }}
+                />
+
+                <div className="grid min-h-70 grid-cols-[1fr_5.5rem] sm:grid-cols-[1fr_8rem] md:min-h-85 md:grid-cols-[1fr_auto]">
+                  <div className="stackcard-bg flex flex-col justify-between p-6 md:p-10 lg:p-14">
+                    <div>
+                      <div className="mb-6 flex items-start justify-between md:mb-8">
+                        <div className="flex items-center gap-3 md:gap-4">
+                          <div
+                            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl md:h-12 md:w-12"
+                            style={{
+                              background: `rgba(${accent.rgb},0.1)`,
+                              border: `1px solid rgba(${accent.rgb},0.25)`,
+                            }}
+                          >
+                            <span style={{ color: accent.hex }}>
+                              <DynamicIcon className="shrink-0" name={card.iconName} size={20} />
+                            </span>
+                          </div>
+
+                          <div>
+                            {card.number && (
+                              <div
+                                className="mb-0.5 text-xs font-black uppercase tracking-widest md:text-xs"
+                                style={{ color: `rgba(${accent.rgb},0.6)` }}
+                              >
+                                {card.number} / {String(totalCards).padStart(2, '0')}
+                              </div>
+                            )}
+
+                            {card.title && (
+                              <h3 className="text-xl font-extrabold tracking-tight text-stone-50/80 md:text-2xl lg:text-3xl">
+                                {card.title}
+                              </h3>
+                            )}
+                          </div>
+                        </div>
+
+                        {(card.statValue || card.statLabel) && (
+                          <div className="hidden flex-col items-end md:flex">
+                            {card.statValue && (
+                              <span
+                                className="text-4xl font-black leading-none"
+                                style={{ color: accent.hex }}
+                              >
+                                {card.statValue}
+                              </span>
+                            )}
+
+                            {card.statLabel && (
+                              <span
+                                className="mt-1 text-xs"
+                                style={{ color: 'rgba(255,255,255,0.3)' }}
+                              >
+                                {card.statLabel}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+
+                      {card.content ? (
+                        <RichText
+                          data={card.content as any}
+                          enableProse={false}
+                          enableGutter={false}
+                          className="max-w-xl text-sm leading-relaxed text-stone-800 dark:text-stone-200 md:text-base"
+                          style={{ color: 'rgba(255,255,255,0.45)' }}
+                        />
+                      ) : null}
+                    </div>
+
+                    <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center md:mt-8">
+                      {card.tags && card.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-2">
+                          {card.tags.map((tagItem, ti) => (
+                            <span
+                              key={tagItem.id ?? ti}
+                              className="rounded-full px-3 py-1 text-xs font-semibold"
+                              style={{
+                                background: `rgba(${accent.rgb},0.07)`,
+                                border: `1px solid rgba(${accent.rgb},0.18)`,
+                                color: accent.hex,
+                              }}
+                            >
+                              {tagItem.tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+
+                      {card.ctaLabel && (
+                        <a
+                          href={card.ctaHref ?? '#'}
+                          className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
+                          style={{ color: accent.hex }}
+                        >
+                          {card.ctaLabel}
+                          <ArrowRight
+                            size={14}
+                            className="transition-transform group-hover:translate-x-1"
+                            style={{ color: accent.hex }}
+                          />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+
+                  <div
+                    className="relative flex w-22 items-center justify-center overflow-hidden sm:w-32 md:w-48 lg:w-64 xl:w-80"
+                    style={{
+                      borderLeft: `1px solid rgba(${accent.rgb},0.08)`,
+                      background: `linear-gradient(135deg, rgba(${accent.rgb},0.04) 0%, transparent 100%)`,
+                    }}
+                  >
+                    <div
+                      className="absolute inset-0"
+                      style={{
+                        background: `radial-gradient(ellipse at 50% 50%, rgba(${accent.rgb},0.25) 0%, transparent 70%)`,
+                      }}
+                    />
+
+                    {isLocalImageSrc(cardMedia?.url) ? (
+                      <Image
+                        src={cardMedia.url}
+                        alt={cardMedia.alt ?? card.title ?? ''}
+                        fill
+                        className="relative z-10 object-cover opacity-80 invert dark:invert-0"
+                        sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
+                      />
+                    ) : (
+                      <>
+                        <span className="relative z-10" style={{ color: `rgba(${accent.rgb},1)` }}>
+                          <DynamicIcon className="shrink-0" name={card.iconName} size={96} />
+                        </span>
+
+                        {card.number && (
+                          <div
+                            className="absolute bottom-4 right-6 select-none font-black leading-none"
+                            style={{
+                              fontSize: '80px',
+                              color: `rgba(${accent.rgb},0.2)`,
+                            }}
+                          >
+                            {card.number}
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </section>
+          )
+        })}
+      </section>
+    </>
+  )
+}