x

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

@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
 
 import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
 import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
+import { splitCmsLayoutSections } from '../../lib/cms-sections'
 
 const lang = 'all'
 
@@ -78,10 +79,22 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
     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-pop-bg">
       {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-pop-pink">HomAroma</p>

apps/website/src/app/globals.css

@@ -85,3 +85,12 @@ html {
   border-radius: 16px;
   box-shadow: var(--shadow-brutal);
 }
+
+/* Announcement Bar Layout Shifting via CSS :has() */
+body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
+  top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
+}
+
+body:has(.announcement-bar) .global-main {
+  padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
+}

apps/website/src/app/layout.tsx

@@ -89,7 +89,7 @@ export default async function RootLayout({
       <body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
-          <main className="pt-[72px]">
+          <main className="global-main pt-[72px]">
             {children}
           </main>
           <Footer

apps/website/src/app/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import DynamicPageRenderer from '../components/dynamic/DynamicPageRenderer'
 import { getCategories, getCmsPage } from '../lib/cms'
+import { splitCmsLayoutSections } from '../lib/cms-sections'
 
 const lang = 'all'
 
@@ -20,11 +21,22 @@ export default async function HomePage() {
   ])
 
   const sections = page?.sections ?? []
+  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
 
   return (
     <div className="min-h-screen bg-pop-bg">
       {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 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">