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 Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useCart } from "@/context/CartContext";
import ThemeToggle from "@/components/shared/ThemeToggle"; import ThemeToggle from "@/components/shared/ThemeToggle";
const BRAND_NAMES: Record<string, string> = { const BRAND_NAMES: Record<string, string> = {
@@ -11,44 +10,97 @@ const BRAND_NAMES: Record<string, string> = {
}; };
export default function SiteHeader() { export default function SiteHeader() {
const { cart } = useCart();
const pathname = usePathname(); const pathname = usePathname();
const showBrandName = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct"); const showBrandName = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct");
const brandKey = pathname?.split("/")[1]; const brandKey = pathname?.split("/")[1];
const brandName = brandKey ? BRAND_NAMES[brandKey] : null; 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 ( return (
<header className="glass border-b border-white/10 sticky top-0 z-50"> <header
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4"> className="sticky top-0 z-50 border-b backdrop-blur-xl"
{showBrandName && brandName ? ( style={{
<Link href={`/${brandKey}`} className="text-lg font-semibold tracking-tight text-white hover:text-emerald-400 transition-colors"> backgroundColor: "rgba(250, 248, 245, 0.85)",
{brandName} borderColor: "rgba(107, 143, 113, 0.15)",
</Link> }}
) : ( >
<Link href="/" className="text-lg font-semibold tracking-tight text-white hover:text-emerald-400 transition-colors"> {/* Google Fonts */}
Route Commerce <style jsx global>{`
</Link> @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"> <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">
<Link href="/tuxedo" className="hover:text-white transition-colors"> {/* Logo */}
Tuxedo <Link href="/" className="flex items-center gap-2.5 group">
</Link> <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"> {/* Navigation */}
IRD <nav className="flex items-center gap-5 sm:gap-6">
</Link> {/* 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 {!isAdminRoute && (
</Link> <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 /> <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> </nav>
</div> </div>
</header> </header>