Template
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/react"
|
|
|
|
import { ThemeToggle } from "@/components/layout/theme-toggle"
|
|
import { Brand } from "@/components/shared/brand"
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/86 backdrop-blur-xl supports-[backdrop-filter]:bg-background/74">
|
|
<div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-5 sm:px-8">
|
|
<a href="#top" aria-label="Vertex home">
|
|
<Brand />
|
|
</a>
|
|
<nav aria-label="Main navigation" className="hidden items-center gap-8 md:flex lg:gap-10">
|
|
{[
|
|
["Products", "#features"],
|
|
["Models", "#models"],
|
|
["Features", "#features"],
|
|
["Pricing", "#pricing"],
|
|
["Docs", "#developers"],
|
|
].map(([label, href]) => (
|
|
<a
|
|
key={label}
|
|
href={href}
|
|
className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{label}
|
|
{label === "Products" && <RiArrowDownSLine className="size-3" />}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
<a
|
|
href="#pricing"
|
|
className="hidden h-9 items-center gap-1.5 rounded-sm bg-blue-600 px-4 text-xs font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.28)] transition hover:bg-blue-500 sm:inline-flex"
|
|
>
|
|
Get started <RiArrowRightSLine className="size-3.5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|