fix(website): eliminate story scroll dead zones and blank space with continuous progress engine
This commit is contained in:
Your Name committed
1 parent
9a5a30778e
commit
25cbe3549e
3 files changed
+340
-195
No files matched your search
@@ -123,48 +123,48 @@ function ProductMainSection({
|
||||
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
|
||||
const storyTheme = (payload.storyTheme as string) || 'dark'
|
||||
const storyTheme = (payload.storyTheme as string) || 'light'
|
||||
|
||||
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>
|
||||
)}
|
||||
<div className="mx-auto max-w-7xl px-6 pt-28 md:pt-32">
|
||||
<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}
|
||||
/>
|
||||
<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>
|
||||
<AddToCartSection product={product} showBrandMeta={showBrandMeta} />
|
||||
</section>
|
||||
</div>
|
||||
</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}
|
||||
storyTheme={storyTheme}
|
||||
/>
|
||||
</div>
|
||||
{/* Full-Bleed Cinematic Scrollytelling Story Showcase */}
|
||||
<CinematicStoryScroll
|
||||
product={product}
|
||||
heroImage={storyHeroImage}
|
||||
scenes={storyScenes}
|
||||
lang="th"
|
||||
endCtaTitle={endCtaTitle}
|
||||
endCtaButtonText={endCtaButtonText}
|
||||
storyTheme={storyTheme}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -174,40 +174,40 @@ function ProductMainSection({
|
||||
|
||||
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>
|
||||
)}
|
||||
<div className="mx-auto max-w-7xl px-6 pt-28 md:pt-32">
|
||||
<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}
|
||||
/>
|
||||
<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>
|
||||
<AddToCartSection product={product} showBrandMeta={showBrandMeta} />
|
||||
</section>
|
||||
</div>
|
||||
</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>
|
||||
{/* Full-Bleed Apple Watch Style Keynote & Finishes Tour Showcase */}
|
||||
<AppleWatchShowcase
|
||||
product={product}
|
||||
heroImage={storyHeroImage}
|
||||
lang="th"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -594,12 +594,21 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
const sectionShellClass = `mx-auto max-w-7xl px-6 ${index === 0 ? 'pt-28 md:pt-32' : 'pt-8'} pb-8`
|
||||
|
||||
switch (section.type.toUpperCase()) {
|
||||
case 'PRODUCT_MAIN':
|
||||
case 'PRODUCT_MAIN': {
|
||||
const rawLayout = typeof payload.layoutMode === 'string' ? payload.layoutMode : 'standard'
|
||||
if (rawLayout === 'story_scroll' || rawLayout === 'apple_watch_tour' || rawLayout === 'apple_keynote') {
|
||||
return (
|
||||
<div key={section.id} className="w-full">
|
||||
<ProductMainSection product={product} productName={productName} categoryName={categoryName} imageUrl={imageUrl} payload={payload} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key={section.id} className={sectionShellClass}>
|
||||
<ProductMainSection product={product} productName={productName} categoryName={categoryName} imageUrl={imageUrl} payload={payload} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
case 'PRODUCT_DETAILS':
|
||||
return (
|
||||
<div key={section.id} className={sectionShellClass}>
|
||||
|
||||
Reference in new issue
Block a user