x

apps/spa/src/components/Footer.tsx

@@ -11,6 +11,7 @@ export default function Footer({ categories = [] }: FooterProps) {
   const [exploreMenu, setExploreMenu] = useState<MenuItem[]>([])
   const [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
   const [settings, setSettings] = useState<StoreSettings | null>(null)
+  const brandName = settings?.brandName || 'HomAroma'
 
   const translateMenuLabel = (item: MenuItem) => {
     const lang = localStorage.getItem('homaroma_lang') || 'en'
@@ -64,7 +65,7 @@ export default function Footer({ categories = [] }: FooterProps) {
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
         <div className="space-y-6">
           <div className="text-2xl font-bold tracking-widest">
-            HomAroma <span className="text-cyan-glow text-sm font-light italic">Essential</span>
+            {brandName} <span className="text-cyan-glow text-sm font-light italic">Essential</span>
           </div>
           <p className="text-slate-500 text-sm leading-relaxed">
             {settings?.footerDescription || t('footer.catchphrase')}
@@ -135,7 +136,7 @@ export default function Footer({ categories = [] }: FooterProps) {
 
           <div className="pt-4">
             <p className="text-[10px] text-slate-600 uppercase tracking-widest">
-              {settings?.footerCopyrightText || `© ${new Date().getFullYear()} HomAroma. ${t('footer.rights')}`}
+              {settings?.footerCopyrightText || `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
             </p>
           </div>
         </div>

apps/spa/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link, useNavigate } from 'react-router-dom'
 import { useState, useEffect, useRef } from 'react'
-import { type Category } from '../types'
+import { API_BASE, type Category, type StoreSettings } from '../types'
 import { ShoppingBag, Menu as MenuIcon, X, Heart, Globe, Check } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
 import { useWishlistStore } from '../store/wishlistStore'
@@ -26,6 +26,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
   const [hasAnnouncement, setHasAnnouncement] = useState(false)
+  const [settings, setSettings] = useState<StoreSettings | null>(null)
   const navigate = useNavigate()
   
   const { toggleCart, getCartCount } = useCartStore()
@@ -74,6 +75,15 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
     }
   }, [fetchMegaMenu])
 
+  useEffect(() => {
+    fetch(`${API_BASE}/settings`)
+      .then((response) => (response.ok ? response.json() : null))
+      .then((data: StoreSettings | null) => {
+        if (data) setSettings(data)
+      })
+      .catch((error) => console.error('Failed to fetch store settings', error))
+  }, [])
+
   // Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
   useEffect(() => {
     const updateNavBottom = () => {
@@ -112,6 +122,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
     : (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')
 
   const finalTopClassName = scrolled ? 'top-0' : computedOffset
+  const brandName = settings?.brandName || 'HomAroma'
 
   return (
     <>
@@ -127,7 +138,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
           {/* Left: Logo */}
           <div className="flex items-center shrink-0">
             <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-spa-forest uppercase italic shrink-0">
-              HomAroma <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
+              {brandName} <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
             </Link>
           </div>