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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user