refactor: centralize data fetching in layout components

app/components/layout/Header/HeaderBottom.tsx

@@ -12,6 +12,7 @@ interface HeaderBottomProps {
     onToggleSearch: () => void;
     menuItems: any[];
     isLoading: boolean;
+    logo: { light: string; dark: string; alt: string } | null;
 }
 
 const HeaderBottom: React.FC<HeaderBottomProps> = ({
@@ -20,7 +21,18 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({
     onToggleSearch,
     menuItems,
     isLoading,
+    logo,
 }) => {
+    // Helper function to resolve logo URL
+    const getLogoUrl = (path: string | undefined) => {
+        if (!path) return "/assets/img/logo/black-logo.svg";
+        if (path.startsWith("http")) return path;
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+        return `${apiUrl}${path}`;
+    };
+
+    const logoSrc = getLogoUrl(logo?.light);
+
     return (
         <header id="header-sticky" className="header-1">
             <div className="container-fluid">
@@ -29,7 +41,11 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({
                         <div className="header-left">
                             <div className="logo">
                                 <Link href="/" className="header-logo-2">
-                                    <img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
+                                    <img 
+                                        src={logoSrc} 
+                                        alt={logo?.alt || "logo-img"} 
+                                        style={{ maxHeight: "4rem" }}
+                                    />
                                 </Link>
                             </div>
                             <div className="mean__menu-wrapper">