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 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)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
) : (
|
|
||||||
<Link href="/" className="text-lg font-semibold tracking-tight text-white hover:text-emerald-400 transition-colors">
|
{/* Navigation */}
|
||||||
Route Commerce
|
<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>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<nav className="flex items-center gap-6 text-sm font-medium text-zinc-400">
|
{/* Theme Toggle */}
|
||||||
<Link href="/tuxedo" className="hover:text-white transition-colors">
|
|
||||||
Tuxedo
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link href="/indian-river-direct" className="hover:text-white transition-colors">
|
|
||||||
IRD
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link href="/admin" className="hover:text-white transition-colors">
|
|
||||||
Admin
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|||||||
Reference in New Issue
Block a user