feat(cms): add Interactive 360 Turntable and Macro Zoom Showcase block

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -18,6 +18,7 @@ import ScrollReveal from '../ScrollReveal'
 import PageDivider from '../PageDivider'
 import CinematicStoryScroll from '../CinematicStoryScroll'
 import AppleWatchShowcase from '../AppleWatchShowcase'
+import Interactive360Showcase from '../Interactive360Showcase'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
@@ -2839,6 +2840,36 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
             )
           }
 
+                    case 'INTERACTIVE_360_SHOWCASE':
+          case 'TURNTABLE_3D_SHOWCASE':
+          case 'TURNTABLE_360': {
+            return (
+              <div key={section.id} className="w-full">
+                <Interactive360Showcase
+                  spriteSheetUrl={(payload.spriteSheetUrl as string) || '/images/3d/sprocket-views.png'}
+                  detailImageUrl={(payload.detailImageUrl as string) || '/images/3d/sprocket-detail.png'}
+                  columns={Number(payload.columns) || 4}
+                  rows={Number(payload.rows) || 4}
+                  eyebrow={payload.eyebrow as string | undefined}
+                  title={payload.title as string | undefined}
+                  subtitle={payload.subtitle as string | undefined}
+                  detailKicker={payload.detailKicker as string | undefined}
+                  detailTitle={payload.detailTitle as string | undefined}
+                  detailCaption={payload.detailCaption as string | undefined}
+                  productName={payload.productName as string | undefined}
+                  productBadge={payload.productBadge as string | undefined}
+                  specs={Array.isArray(payload.specs) ? (payload.specs as any) : undefined}
+                  endCtaTitle={payload.endCtaTitle as string | undefined}
+                  endCtaButtonText={payload.endCtaButtonText as string | undefined}
+                  endCtaLink={payload.endCtaLink as string | undefined}
+                  theme={(payload.theme as 'dark' | 'light') || 'dark'}
+                  accentColor={(payload.accentColor as string) || '#d5ff63'}
+                  lang={lang}
+                />
+              </div>
+            )
+          }
+
           case 'CINEMATIC_STORY_SCROLL':
           case 'STORY_SCROLL': {
             const rawTheme = payload.storyTheme as string | undefined