Template
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { Logo } from '@/components/site/logo';
|
|
import { MobileNavigation } from '@/components/site/mobile-navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const navigationItems = [
|
|
{ label: 'Products', href: '#', description: 'Everything you need to ship' },
|
|
{ label: 'Solutions', href: '#', description: 'Built for teams of every size' },
|
|
{ label: 'Resources', href: '#', description: 'Guides, templates, and changelog' },
|
|
{ label: 'Docs', href: '#', description: 'Your first deploy starts here' },
|
|
{ label: 'Pricing', href: '#', description: 'Start free. Scale at your pace.' },
|
|
];
|
|
|
|
export function Navbar() {
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-white/10 bg-black/70 backdrop-blur-xl">
|
|
<nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
|
|
<div className="flex items-center gap-8">
|
|
<Logo />
|
|
<ul className="hidden items-center gap-6 md:flex">
|
|
{navigationItems.map(({ label, href }) => (
|
|
<li key={label}>
|
|
<a
|
|
href={href}
|
|
className="text-sm text-white/60 transition-colors hover:text-white"
|
|
>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="ghost"
|
|
className="hidden text-white/70 hover:bg-white/5 hover:text-white sm:inline-flex"
|
|
>
|
|
<a href="#">Log In</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="hidden rounded-full bg-white text-black hover:bg-white/90 sm:inline-flex"
|
|
>
|
|
<a href="#">Sign Up</a>
|
|
</Button>
|
|
<MobileNavigation items={navigationItems} />
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|