x

apps/website/src/app/[lang]/products/[slug]/page.tsx

@@ -11,6 +11,8 @@ import ProductGallery from '@/components/ProductGallery'
 import ProductHeroCarousel from '@/components/ProductHeroCarousel'
 import ProductDivider from '@/components/ProductDivider'
 import ProductStickyPurchaseBar from '@/components/ProductStickyPurchaseBar'
+import CinematicStoryScroll from '@/components/CinematicStoryScroll'
+import AppleWatchShowcase from '@/components/AppleWatchShowcase'
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import ProductCard from '@/components/ProductCard'
 import { getCategoriesResult, getProduct, getProductDetailSectionsResult, getProductResult, getProductReviewsResult, getProductsResult, getStoreSettings, getStoreSettingsResult, type ProductReview } from '@/lib/cms'
@@ -99,7 +101,14 @@ function ProductMainSection({
   imageUrl: string
   payload: Record<string, unknown>
 }) {
-  const layoutMode = payload.layoutMode === 'sticky_gallery' ? 'sticky_gallery' : 'standard'
+  const rawLayout = typeof payload.layoutMode === 'string' ? payload.layoutMode : 'standard'
+  const layoutMode = rawLayout === 'story_scroll'
+    ? 'story_scroll'
+    : rawLayout === 'apple_watch_tour' || rawLayout === 'apple_keynote'
+      ? 'apple_watch_tour'
+      : rawLayout === 'sticky_gallery'
+        ? 'sticky_gallery'
+        : 'standard'
   const galleryBehavior = payload.galleryBehavior === 'stacked' ? 'stacked' : 'carousel'
   const purchaseCardSticky = payload.purchaseCardSticky !== false
   const showBreadcrumbs = payload.showBreadcrumbs !== false
@@ -109,6 +118,98 @@ function ProductMainSection({
     ? images
     : [{ id: -1, url: imageUrl, mobileUrl: null, order: 0 }]
 
+  if (layoutMode === 'story_scroll') {
+    const storyHeroImage = (payload.storyHeroImage as string) || undefined
+    const storyScenes = Array.isArray(payload.storyScenes) ? (payload.storyScenes as any[]) : undefined
+    const endCtaTitle = (payload.endCtaTitle as string) || undefined
+    const endCtaButtonText = (payload.endCtaButtonText as string) || undefined
+
+    return (
+      <div className="space-y-12">
+        <div id="product-purchase-top" className="space-y-8 scroll-mt-24">
+          {showBreadcrumbs && (
+            <nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text/70">
+              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+              <span>/</span>
+              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+              <span>/</span>
+              <Link href={`/category/${product.category.id}`} className="transition hover:text-brand-primary">
+                {categoryName}
+              </Link>
+              <span>/</span>
+              <span className="text-text-main">{productName}</span>
+            </nav>
+          )}
+
+          <section className="grid gap-10 md:grid-cols-2 md:items-start md:gap-16">
+            <ProductGallery
+              images={galleryImages}
+              productName={productName}
+              categoryName={categoryName}
+            />
+
+            <AddToCartSection product={product} showBrandMeta={showBrandMeta} />
+          </section>
+        </div>
+
+        {/* Cinematic Scrollytelling Story Showcase */}
+        <div className="-mx-4 sm:-mx-6 lg:-mx-8 xl:-mx-12">
+          <CinematicStoryScroll
+            product={product}
+            heroImage={storyHeroImage}
+            scenes={storyScenes}
+            lang="th"
+            endCtaTitle={endCtaTitle}
+            endCtaButtonText={endCtaButtonText}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  if (layoutMode === 'apple_watch_tour') {
+    const storyHeroImage = (payload.storyHeroImage as string) || undefined
+
+    return (
+      <div className="space-y-12">
+        <div id="product-purchase-top" className="space-y-8 scroll-mt-24">
+          {showBreadcrumbs && (
+            <nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text/70">
+              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+              <span>/</span>
+              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+              <span>/</span>
+              <Link href={`/category/${product.category.id}`} className="transition hover:text-brand-primary">
+                {categoryName}
+              </Link>
+              <span>/</span>
+              <span className="text-text-main">{productName}</span>
+            </nav>
+          )}
+
+          <section className="grid gap-10 md:grid-cols-2 md:items-start md:gap-16">
+            <ProductGallery
+              images={galleryImages}
+              productName={productName}
+              categoryName={categoryName}
+            />
+
+            <AddToCartSection product={product} showBrandMeta={showBrandMeta} />
+          </section>
+        </div>
+
+        {/* Apple Watch Style Keynote & Finishes Tour Showcase */}
+        <div className="-mx-4 sm:-mx-6 lg:-mx-8 xl:-mx-12">
+          <AppleWatchShowcase
+            product={product}
+            heroImage={storyHeroImage}
+            lang="th"
+          />
+        </div>
+      </div>
+    )
+  }
+
   if (layoutMode === 'sticky_gallery') {
     return (
       <div className="space-y-8">