1 files changed, 130 insertions, 0 deletions
diff --git a/components/site-header.tsx b/components/site-header.tsx
new file mode 100644
index 0000000..4d6df15
--- /dev/null
+++ b/components/site-header.tsx
@@ -0,0 +1,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>
+  );
+}