From b641acbeb718aefef9356efa534f3bd0c68ebac9 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 4 Oct 2026 06:51:38 +0700
Subject: [PATCH] x

---
 apps/website/src/app/[lang]/[slug]/page.tsx | 23 ++++-----------------
 apps/website/src/app/[lang]/page.tsx        | 18 ++++------------
 apps/website/src/lib/cms-sections.ts        | 16 ++++++++++++--
 3 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/apps/website/src/app/[lang]/[slug]/page.tsx b/apps/website/src/app/[lang]/[slug]/page.tsx
index 12f9285..e5cd950 100644
--- a/apps/website/src/app/[lang]/[slug]/page.tsx
+++ b/apps/website/src/app/[lang]/[slug]/page.tsx
@@ -4,7 +4,6 @@ import { generateSeoMetadata } from '@/lib/seo'
 
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import { getCategoriesResult, getCmsPageResult } from '@/lib/cms'
-import { splitCmsLayoutSections } from '@/lib/cms-sections'
 
 // lang is extracted from params
 const reservedSlugs = new Set([
@@ -88,28 +87,14 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
   if (!page.isPublished) notFound()
 
   const categories = categoriesResult.ok ? categoriesResult.data : []
-  const sections = page.sections?.filter((section) => section.isActive) ?? []
-
-  if (!categoriesResult.ok) {
-    console.error(`[website-cms] categories unavailable for CMS page "${slug}": ${categoriesResult.error}`)
-  }
-
-  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
+  const sections = (page.sections ?? [])
+    .filter((section) => section.isActive)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 
   return (
     <main className="min-h-[70vh] bg-surface-page text-text-main">
       {sections.length > 0 ? (
-        <>
-          {announcementSections.length > 0 && (
-            <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
-          )}
-          {heroSections.length > 0 && (
-            <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
-          )}
-          {bottomSections.length > 0 && (
-            <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
-          )}
-        </>
+        <DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
       ) : (
         <div className="mx-auto max-w-4xl px-6 py-24 text-center">
           <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-primary"></p>
diff --git a/apps/website/src/app/[lang]/page.tsx b/apps/website/src/app/[lang]/page.tsx
index 1c76299..d3db00a 100644
--- a/apps/website/src/app/[lang]/page.tsx
+++ b/apps/website/src/app/[lang]/page.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import { getCategories, getCmsPage, getStoreSettings } from '@/lib/cms'
-import { splitCmsLayoutSections } from '@/lib/cms-sections'
 
 type Props = {
   params: Promise<{ lang: string }>
@@ -46,23 +45,14 @@ export default async function HomePage({ params }: Props) {
     getCmsPage('home', lang),
   ])
 
-  const sections = page?.sections ?? []
-  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
+  const sections = (page?.sections ?? [])
+    .filter((section) => section.isActive)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 
   return (
     <div className="min-h-screen bg-surface-page text-text-main">
       {sections.length > 0 ? (
-        <>
-          {announcementSections.length > 0 && (
-            <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
-          )}
-          {heroSections.length > 0 && (
-            <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
-          )}
-          {bottomSections.length > 0 && (
-            <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
-          )}
-        </>
+        <DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
       ) : (
         <section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center">
           <p className="mb-4 ui-eyebrow">
diff --git a/apps/website/src/lib/cms-sections.ts b/apps/website/src/lib/cms-sections.ts
index 59532c3..d712361 100644
--- a/apps/website/src/lib/cms-sections.ts
+++ b/apps/website/src/lib/cms-sections.ts
@@ -1,14 +1,26 @@
 import type { PageSection } from '@homaroma/types'
 
 const announcementTypes = new Set(['ANNOUNCEMENT_BAR', 'ANNOUNCEMENT_BAR_MINIMAL'])
-const heroTypes = new Set(['HERO', 'BANNER'])
+const heroTypes = new Set([
+  'HERO',
+  'HERO_V2',
+  'HERO_VIDEO',
+  'HERO_CAROUSEL',
+  'HERO_ARTICLE',
+  'HERO_MINIMAL',
+  'HERO_SPLIT_MINIMAL',
+  'HERO_VIDEO_MINIMAL',
+  'BANNER',
+])
 
 function sectionType(section: PageSection) {
   return section.type.toUpperCase()
 }
 
 export function splitCmsLayoutSections(sections: PageSection[]) {
-  const activeSections = sections.filter((section) => section.isActive)
+  const activeSections = sections
+    .filter((section) => section.isActive)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 
   return {
     announcementSections: activeSections.filter((section) => announcementTypes.has(sectionType(section))),