From 9b10f401f42abfe615a28359e933eb3bd7ba4933 Mon Sep 17 00:00:00 2001
From: Krystie <krystie@openclaw.local>
Date: Wed, 12 Aug 2026 17:58:08 -0700
Subject: [PATCH] Use wide brand logo (icon+wordmark as one image) in
 navbar/footer

---
 src/components/Footer.tsx | 5 ++---
 src/components/Navbar.tsx | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6164cba..65c8cb0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -51,9 +51,8 @@ export default function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
           {/* Brand Section */}
           <div>
-            <Link href="/" className="flex items-center gap-2 font-bold text-lg text-brand-400 hover:text-brand-300 transition-colors mb-4">
-              <Image src="/images/brand-logo.png" alt="DashCaddy" width={28} height={28} className="rounded" />
-              <span>DashCaddy</span>
+            <Link href="/" className="flex items-center transition-opacity hover:opacity-80 mb-4">
+              <Image src="/images/brand-wide-light.png" alt="DashCaddy" width={160} height={53} className="h-9 w-auto" />
             </Link>
             <p className="text-surface-400 text-sm leading-relaxed mb-4">
               Self-hosted Docker dashboard with automatic SSL, DNS, and reverse proxy. Making self-hosting beautiful and effortless.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d0e4478..7e729c6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -19,9 +19,8 @@ export default function Navbar() {
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
-          <Link href="/" className="flex items-center gap-2 font-bold text-xl text-brand-400 transition-opacity hover:opacity-80">
-            <Image src="/images/brand-logo.png" alt="DashCaddy" width={32} height={32} className="rounded-lg" priority />
-            <span>DashCaddy</span>
+          <Link href="/" className="flex items-center transition-opacity hover:opacity-80">
+            <Image src="/images/brand-wide-light.png" alt="DashCaddy" width={180} height={60} className="h-10 w-auto" priority />
           </Link>
 
           {/* Desktop Navigation */}