87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Search, ShoppingCart } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="border-b bg-card">
|
|
<div className="container mx-auto px-4">
|
|
{/* Top bar with logo and utility links */}
|
|
<div className="flex items-center justify-between py-4">
|
|
<Link href="/" className="flex items-center">
|
|
<Image src="/logo.png" alt="Paper Presents" width={280} height={50} className="h-12 w-auto" priority />
|
|
</Link>
|
|
|
|
<nav className="hidden md:flex items-center gap-6">
|
|
<Link href="/our-promise" className="text-sm hover:text-primary transition-colors">
|
|
Our Promise
|
|
</Link>
|
|
<Link href="/faq" className="text-sm hover:text-primary transition-colors">
|
|
FAQ
|
|
</Link>
|
|
<Link href="/about" className="text-sm hover:text-primary transition-colors">
|
|
About Us
|
|
</Link>
|
|
<Link href="/contact" className="text-sm hover:text-primary transition-colors">
|
|
Contact Us
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<Input type="search" placeholder="Search..." className="w-48" />
|
|
<Button size="icon" variant="ghost">
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<Button size="icon" variant="ghost" className="relative">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
<span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center">
|
|
0
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main navigation */}
|
|
<nav className="border-t py-3">
|
|
<ul className="flex flex-wrap items-center justify-center gap-6 text-sm">
|
|
<li></li>
|
|
|
|
<li>
|
|
<Link href="/our-cards" className="hover:text-primary transition-colors font-medium">
|
|
Our Cards
|
|
</Link>
|
|
</li>
|
|
<li className="text-muted-foreground">|</li>
|
|
<li>
|
|
<Link href="/your-occasions" className="hover:text-primary transition-colors font-medium">
|
|
Your Occasions
|
|
</Link>
|
|
</li>
|
|
<li className="text-muted-foreground">|</li>
|
|
<li>
|
|
<Link href="/custom-cards" className="hover:text-primary transition-colors font-medium">
|
|
Custom Cards
|
|
</Link>
|
|
</li>
|
|
<li className="text-muted-foreground">|</li>
|
|
<li>
|
|
<Link href="/wholesale" className="hover:text-primary transition-colors font-medium">
|
|
Wholesale Orders
|
|
</Link>
|
|
</li>
|
|
<li className="ml-auto">
|
|
<Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
|
<Link href="/checkout">Checkout</Link>
|
|
</Button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|