Add login-page site gate and refresh marketing site for complex-care positioning.
Replace HTTP Basic Auth with a branded /login flow and signed session cookie, using Next.js 16's proxy convention for route protection. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
+117
-32
@@ -1,48 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { FileText, Home, Menu, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { FileText } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { MedscribeLogo } from "~/components/medscribe-logo";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const navLinks = [
|
||||
{ href: "/#features", label: "Features" },
|
||||
{ href: "/#privacy", label: "Privacy" },
|
||||
{ href: "/#impact", label: "Impact" },
|
||||
{ href: "/executive-summary", label: "Summary" },
|
||||
{ href: "/", label: "About", icon: Home },
|
||||
{ href: "/executive-summary", label: "Summary", icon: FileText },
|
||||
];
|
||||
|
||||
export function SiteHeader() {
|
||||
const pathname = usePathname();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="print-hidden sticky top-3 z-50 px-3 sm:px-6">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 rounded-full border border-border-soft/80 bg-canvas/82 px-4 shadow-[0_10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md sm:px-5">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center text-foreground transition-opacity hover:opacity-80"
|
||||
aria-label="Medscribe home"
|
||||
<div className="relative mx-auto max-w-5xl">
|
||||
<div className="flex h-14 items-center justify-between gap-4 rounded-full border border-border-soft/80 bg-canvas/82 px-4 shadow-[0_10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md sm:px-5">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center text-foreground transition-opacity hover:opacity-80"
|
||||
aria-label="Medscribe home"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<MedscribeLogo className="h-7 w-[88px]" />
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-6 text-sm sm:flex">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = link.href === pathname;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
"relative py-1 transition-colors",
|
||||
isActive
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{link.label}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute inset-x-0 -bottom-0.5 h-0.5 origin-center rounded-full bg-primary transition-transform duration-200",
|
||||
isActive ? "scale-x-100" : "scale-x-0",
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="relative size-6 text-muted-foreground transition-colors hover:text-foreground focus:outline-none sm:hidden"
|
||||
aria-label={isOpen ? "Close menu" : "Open menu"}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<Menu
|
||||
className={cn(
|
||||
"absolute inset-0 transition-opacity duration-200",
|
||||
isOpen ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
<X
|
||||
className={cn(
|
||||
"absolute inset-0 transition-opacity duration-200",
|
||||
isOpen ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile dropdown */}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-0 top-16 overflow-hidden rounded-2xl border border-border-soft/80 bg-canvas/95 shadow-[0_10px_30px_rgba(15,23,42,0.12)] backdrop-blur-md transition-all duration-200 sm:hidden",
|
||||
isOpen
|
||||
? "pointer-events-auto opacity-100"
|
||||
: "pointer-events-none -translate-y-1 opacity-0",
|
||||
)}
|
||||
>
|
||||
<MedscribeLogo className="h-7 w-[88px]" />
|
||||
</Link>
|
||||
<nav className="flex flex-col p-2">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = link.href === pathname;
|
||||
const Icon = link.icon;
|
||||
|
||||
<nav className="hidden items-center gap-5 text-sm text-muted-foreground md:flex">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<Button asChild size="sm" className="h-8 rounded-full px-3">
|
||||
<a href="/executive-summary">
|
||||
<FileText className="size-4" />
|
||||
<span className="hidden sm:inline">Executive summary</span>
|
||||
<span className="sm:hidden">Summary</span>
|
||||
</a>
|
||||
</Button>
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-primary-light/60 text-foreground"
|
||||
: "text-muted-foreground hover:bg-surface-soft hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 -z-10 bg-canvas/30 backdrop-blur-sm transition-opacity duration-200 sm:hidden",
|
||||
isOpen ? "opacity-100" : "pointer-events-none opacity-0",
|
||||
)}
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden
|
||||
/>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user