blob: 4d6df153a2556517f277fa18cd0bebc412c4025f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Menu } from "lucide-react";
import { Logo } from "@/components/logo";
import { Button, buttonVariants } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { nav } from "@/lib/content";
import { cn } from "@/lib/utils";
export function SiteHeader() {
const pathname = usePathname();
const [open, setOpen] = useState(false);
return (
<header className="sticky top-0 z-40 border-b border-white/10 bg-background/40 backdrop-blur-2xl">
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-5 sm:px-8">
<Link href="/" aria-label="The Agentic Cloud home" className="min-w-0">
<Logo className="max-[420px]:[&>span:last-child]:hidden" />
</Link>
<nav className="hidden items-center gap-6 lg:flex">
{nav.map((item) => (
<Link
key={item.href}
href={item.href}
className={cn(
"text-sm transition-colors hover:text-foreground",
pathname === item.href || pathname.startsWith(`${item.href}/`)
? "text-foreground"
: "text-muted-foreground"
)}
>
{item.label}
</Link>
))}
</nav>
<div className="hidden items-center gap-2 lg:flex">
<Link
href="/about"
className={cn(
buttonVariants({ variant: "ghost" }),
"h-8 px-3 text-muted-foreground"
)}
>
About
</Link>
<Link
href="/request-access"
className={cn(buttonVariants(), "h-8 px-3.5")}
>
Request access
</Link>
</div>
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger
nativeButton={false}
render={
<Button
variant="ghost"
size="icon"
className="lg:hidden"
aria-label="Open menu"
/>
}
>
<Menu className="size-5" />
</SheetTrigger>
<SheetContent side="right" className="bg-background">
<SheetHeader>
<SheetTitle className="font-sans text-left text-sm font-medium tracking-tight">
The Agentic Cloud
</SheetTitle>
</SheetHeader>
<nav className="flex flex-col gap-1 px-4">
{nav.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setOpen(false)}
className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
>
{item.label}
</Link>
))}
<Link
href="/about"
onClick={() => setOpen(false)}
className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
>
About
</Link>
<Link
href="/careers"
onClick={() => setOpen(false)}
className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
>
Careers
</Link>
<Link
href="/trust"
onClick={() => setOpen(false)}
className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
>
Trust
</Link>
<Link
href="/request-access"
onClick={() => setOpen(false)}
className={cn(
buttonVariants(),
"mt-4 h-10 justify-center px-4"
)}
>
Request access
</Link>
</nav>
</SheetContent>
</Sheet>
</div>
</header>
);
}
|
