x

apps/spa/src/components/DynamicHeroArticle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface DynamicHeroArticleProps {
   payload: any;
 }

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import ProductCard from './ProductCard';

apps/spa/src/components/DynamicQuoteCallout.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface DynamicQuoteCalloutProps {
   payload: any;
 }

apps/spa/src/components/DynamicScentNotesBreakdown.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface DynamicScentNotesBreakdownProps {
   payload: any;
 }

apps/spa/src/components/Navbar.tsx

@@ -10,9 +10,10 @@ import { useTranslation } from 'react-i18next'
 
 interface NavbarProps {
   categories?: Category[]
+  topOffsetClassName?: string
 }
 
-export default function Navbar({ categories = [] }: NavbarProps) {
+export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }: NavbarProps) {
   const [searchOpen, setSearchOpen] = useState(false)
   const [mobileOpen, setMobileOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
@@ -71,7 +72,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
     <>
       {/* ── NAVBAR BAR ── */}
       <nav
-        className={`fixed top-0 w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center bg-white/80 backdrop-blur-xl border-b border-black/5 ${
+        className={`fixed ${topOffsetClassName} w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center bg-white/80 backdrop-blur-xl border-b border-black/5 ${
           scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none'
         }`}
       >

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}
           />