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
This commit is contained in:
2026-06-02 16:22:37 +00:00
parent 6feac9bb9a
commit 1bf8f32525
+79 -27
View File
@@ -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>