x

apps/website/src/components/Footer.tsx

@@ -61,7 +61,7 @@ export default function Footer({
         {/* Col 1 — Brand */}
         <div className="space-y-6">
           <div className="text-2xl font-bold tracking-widest">
-            {brandName} <span className="text-sm font-semibold italic text-pop-pink">Essential</span>
+            {brandName}
           </div>
           <p className="text-sm leading-relaxed text-gray-600">
             {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}

apps/website/src/components/Navbar.tsx

@@ -111,22 +111,42 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   }, [])
 
   useEffect(() => {
+    let animationFrameId: number;
+    const navElement = navRef.current;
+
     const updateNavBottom = () => {
-      if (navRef.current) {
-        const bottom = navRef.current.getBoundingClientRect().bottom
+      if (navElement) {
+        const bottom = navElement.getBoundingClientRect().bottom
         document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
       }
     }
 
     updateNavBottom()
+
     window.addEventListener('scroll', updateNavBottom, { passive: true })
     window.addEventListener('resize', updateNavBottom)
 
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(updateNavBottom);
+    });
+
+    if (navElement) {
+      observer.observe(navElement);
+      navElement.addEventListener('transitionend', updateNavBottom);
+    }
+    observer.observe(document.body);
+
     return () => {
       window.removeEventListener('scroll', updateNavBottom)
       window.removeEventListener('resize', updateNavBottom)
+      observer.disconnect()
+      if (navElement) {
+        navElement.removeEventListener('transitionend', updateNavBottom);
+      }
+      cancelAnimationFrame(animationFrameId);
     }
-  }, [])
+  }, [scrolled])
 
   useEffect(() => {
     document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
@@ -143,7 +163,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     }
   }
 
-  const iconButtonClass = 'rounded-full p-1.5 text-pop-black/65 transition-all hover:bg-pop-bg hover:text-pop-pink md:p-2'
+  const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5'
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
   const brandName = settings?.brandName || 'HomAroma'
 
@@ -151,7 +171,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     <>
       <nav
         ref={navRef}
-        className={`fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
+        data-scrolled={scrolled}
+        className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
           scrolled
             ? 'bg-white/95 shadow-lg shadow-black/5 backdrop-blur-xl'
             : 'bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none'
@@ -164,7 +185,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
               onClick={() => setMobileOpen(false)}
               className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl"
             >
-              {brandName} <span className="hidden text-xs font-light not-italic text-pop-black/55 md:inline md:text-sm">Essential</span>
+              {brandName}
             </Link>
           </div>
 
@@ -262,7 +283,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                   onClick={loginWithLine}
                   className="ml-2 rounded-full bg-[#00B900] px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-all duration-300 hover:bg-[#009900]"
                 >
-                  LINE Login
+                  {t('nav.login', 'เข้าสู่ระบบด้วย LINE')}
                 </button>
               )}
             </div>

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -7,6 +7,9 @@ import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
 import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
 import { useLang } from '../../hooks/useLang'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay } from 'swiper/modules'
+import 'swiper/css'
 
 type DynamicPageRendererProps = {
   sections: PageSection[]
@@ -68,16 +71,31 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const slides = Array.isArray(payload.slides) ? payload.slides : []
+  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
+  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
+  const speed = typeof payload.speed === 'number' ? payload.speed : 3000
+
   if (!slides.length) return null
 
   return (
-    <section className="bg-pop-black px-4 py-3 text-center text-sm font-semibold tracking-wide text-white">
-      {slides.map((slide, index) => (
-        <span key={index} className={index === 0 ? '' : 'hidden md:inline'}>
-          {index > 0 && <span className="mx-4 text-white/30">/</span>}
-          {localizedFromRecord({ slide }, 'slide', resolvedLang)}
-        </span>
-      ))}
+    <section 
+      className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
+      style={{ backgroundColor, color: textColor }}
+    >
+      <Swiper
+        modules={[Autoplay]}
+        autoplay={{ delay: speed, disableOnInteraction: false }}
+        loop={slides.length > 1}
+        className="w-full select-none"
+      >
+        {slides.map((slide, index) => (
+          <SwiperSlide key={index} className="flex items-center justify-center">
+            <span className="inline-block truncate max-w-full">
+              {localizedFromRecord({ slide }, 'slide', resolvedLang)}
+            </span>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </section>
   )
 }

apps/website/src/components/navigation/DesktopMegaMenu.tsx

@@ -44,7 +44,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
               className={`flex items-center gap-1 border-b py-2 transition-colors ${
                 isOpen || isActive
                   ? 'border-pop-pink text-pop-black'
-                  : 'border-transparent text-pop-black/65 hover:border-pop-pink hover:text-pop-black'
+                  : 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black'
               }`}
             >
               {getLocalizedMenuText(item.label, lang)}