x

apps/spa/src/pages/CustomPage.tsx

@@ -12,6 +12,13 @@ export default function CustomPage() {
   const [loading, setLoading] = useState(true);
   const [categoriesLoading, setCategoriesLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const announcementSections = sections.filter(
+    (section) => section.isActive && section.type.toUpperCase() === 'ANNOUNCEMENT_BAR'
+  );
+  const topOffsetClassName = announcementSections.length > 0 ? 'top-[32px] md:top-[40px]' : 'top-0';
+  const contentSections = sections.filter(
+    (section) => !(section.isActive && section.type.toUpperCase() === 'ANNOUNCEMENT_BAR')
+  );
 
   useEffect(() => {
     const fetchCategories = async () => {
@@ -56,7 +63,15 @@ export default function CustomPage() {
 
   return (
     <div className="min-h-screen bg-[#FDFDF9] text-[#1F3D2D]">
-      <Navbar categories={categories} />
+      {announcementSections.map((section) => (
+        <DynamicPageRenderer
+          key={section.id}
+          sections={[section]}
+          categories={categories}
+          categoriesLoading={categoriesLoading}
+        />
+      ))}
+      <Navbar categories={categories} topOffsetClassName={topOffsetClassName} />
 
       {loading ? (
         <div className="min-h-[60vh] flex items-center justify-center">
@@ -78,9 +93,9 @@ export default function CustomPage() {
           </Link>
         </div>
       ) : (
-        <div className="animate-fade-in">
+        <div className={`animate-fade-in ${announcementSections.length > 0 ? 'pt-[32px] md:pt-[40px]' : ''}`}>
           <DynamicPageRenderer
-            sections={sections}
+            sections={contentSections}
             categories={categories}
             categoriesLoading={categoriesLoading}
           />