x

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) ?? []
+  const sections = (page.sections ?? [])
-
+    .filter((section) => section.isActive)
-  if (!categoriesResult.ok) {
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-    console.error(`[website-cms] categories unavailable for CMS page "${slug}": ${categoriesResult.error}`)
-  }
-
-  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
 
   return (
     <main className="min-h-[70vh] bg-surface-page text-text-main">
       {sections.length > 0 ? (
-        <>
+        <DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
-          {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} />
-          )}
-        </>
       ) : (
         <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>

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 sections = (page?.sections ?? [])
-  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(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 ? (
-        <>
+        <DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
-          {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} />
-          )}
-        </>
       ) : (
         <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">

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))),