From 1bf8f325258b93f57baea77dd93f72f80d76490d Mon Sep 17 00:00:00 2001
From: default <tmartinez@gmail.com>
Date: Tue, 2 Jun 2026 16:22:37 +0000
Subject: [PATCH] feat: simplify SiteHeader and add glass effect

- Matching landing page design aesthetic (warm cream)
- Added glass/blur backdrop effect to header
- Removed Cart button (not needed for this B2B platform)
- Links now use uppercase + letter-spacing for refined look
- Shows brand name when on brand routes
- Uses Route Commerce logo + font styling
---
 src/components/layout/SiteHeader.tsx | 106 ++++++++++++++++++++-------
 1 file changed, 79 insertions(+), 27 deletions(-)

diff --git a/src/components/layout/SiteHeader.tsx b/src/components/layout/SiteHeader.tsx
index 7d197a1..856bae3 100644
--- a/src/components/layout/SiteHeader.tsx
+++ b/src/components/layout/SiteHeader.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useCart } from "@/context/CartContext";
 import ThemeToggle from "@/components/shared/ThemeToggle";
 
 const BRAND_NAMES: Record<string, string> = {
@@ -11,44 +10,97 @@ const BRAND_NAMES: Record<string, string> = {
 };
 
 export default function SiteHeader() {
-  const { cart } = useCart();
   const pathname = usePathname();
 
   const showBrandName = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct");
   const brandKey = pathname?.split("/")[1];
   const brandName = brandKey ? BRAND_NAMES[brandKey] : null;
 
+  const isAdminRoute = pathname?.startsWith("/admin");
+  const isStorefrontRoute = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct") || pathname?.startsWith("/cart") || pathname?.startsWith("/wholesale");
+
   return (
-    <header className="glass border-b border-white/10 sticky top-0 z-50">
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-        {showBrandName && brandName ? (
-          <Link href={`/${brandKey}`} className="text-lg font-semibold tracking-tight text-white hover:text-emerald-400 transition-colors">
-            {brandName}
-          </Link>
-        ) : (
-          <Link href="/" className="text-lg font-semibold tracking-tight text-white hover:text-emerald-400 transition-colors">
-            Route Commerce
-          </Link>
-        )}
+    <header
+      className="sticky top-0 z-50 border-b backdrop-blur-xl"
+      style={{
+        backgroundColor: "rgba(250, 248, 245, 0.85)",
+        borderColor: "rgba(107, 143, 113, 0.15)",
+      }}
+    >
+      {/* Google Fonts */}
+      <style jsx global>{`
+        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
+      `}</style>
 
-        <nav className="flex items-center gap-6 text-sm font-medium text-zinc-400">
-          <Link href="/tuxedo" className="hover:text-white transition-colors">
-            Tuxedo
-          </Link>
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2.5 group">
+          <div
+            className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
+            style={{ backgroundColor: "#1a4d2e" }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" fill="#faf8f5" stroke="#faf8f5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
+          <span
+            className="text-lg sm:text-xl font-semibold tracking-tight"
+            style={{
+              fontFamily: "'Cormorant Garamond', Georgia, serif",
+              color: "#1a1a1a",
+            }}
+          >
+            {showBrandName && brandName ? brandName : "Route Commerce"}
+          </span>
+        </Link>
 
-          <Link href="/indian-river-direct" className="hover:text-white transition-colors">
-            IRD
-          </Link>
+        {/* Navigation */}
+        <nav className="flex items-center gap-5 sm:gap-6">
+          {/* Brand quick links */}
+          {(!isAdminRoute || isStorefrontRoute) && (
+            <>
+              <Link
+                href="/tuxedo"
+                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
+                style={{
+                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  color: "#6b8f71",
+                  letterSpacing: "0.06em",
+                }}
+              >
+                Tuxedo
+              </Link>
+              <Link
+                href="/indian-river-direct"
+                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
+                style={{
+                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  color: "#6b8f71",
+                  letterSpacing: "0.06em",
+                }}
+              >
+                IRD
+              </Link>
+            </>
+          )}
 
-          <Link href="/admin" className="hover:text-white transition-colors">
-            Admin
-          </Link>
+          {/* Admin link */}
+          {!isAdminRoute && (
+            <Link
+              href="/admin"
+              className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
+              style={{
+                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                color: "#6b8f71",
+                letterSpacing: "0.06em",
+              }}
+            >
+              Admin
+            </Link>
+          )}
 
+          {/* Theme Toggle */}
           <ThemeToggle />
-
-          <Link href="/cart" className="rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-400 px-4 py-2 text-sm font-semibold text-white hover:from-emerald-400 hover:to-emerald-300 transition-all shadow-lg shadow-emerald-500/20">
-            Cart ({cart.reduce((total, item) => total + item.quantity, 0)})
-          </Link>
         </nav>
       </div>
     </header>