Implement shared top nav

- Added NavBar component and integrated it across Home, People, and Projects pages.
- Replaced page-specific navs with the shared NavBar to ensure consistency.
- Adjusted landing page to render NavBar in the top-right with dark variant; updated People page header to use the shared NavBar; updated Research and Index pages accordingly.

X-Lovable-Edit-ID: edt-49f916b4-966c-4cce-853a-88e5fb1ac654

Author: lovable-dev[bot]

src/components/NavBar.tsx

@@ -0,0 +1,45 @@
+import { Link, useLocation } from "react-router-dom";
+
+const links = [
+  { label: "home", to: "/" },
+  { label: "people", to: "/people" },
+  { label: "projects", to: "/research" },
+];
+
+interface NavBarProps {
+  variant?: "dark" | "light";
+}
+
+const NavBar = ({ variant = "dark" }: NavBarProps) => {
+  const { pathname } = useLocation();
+
+  const textClass =
+    variant === "dark"
+      ? "text-foreground/80 hover:text-foreground"
+      : "text-foreground/60 hover:text-foreground";
+
+  const activeClass =
+    variant === "dark"
+      ? "text-foreground underline underline-offset-4"
+      : "text-foreground underline underline-offset-4";
+
+  return (
+    <nav className="flex items-center gap-8 font-mono-display text-base tracking-wide">
+      {links.map((link) => {
+        const isActive =
+          link.to === "/" ? pathname === "/" : pathname.startsWith(link.to);
+        return (
+          <Link
+            key={link.to}
+            to={link.to}
+            className={`transition-colors ${isActive ? activeClass : textClass}`}
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default NavBar;

src/pages/Index.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { Link } from "react-router-dom";
+import NavBar from "@/components/NavBar";
 
 const Index = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -22,13 +22,9 @@ const Index = () => {
       </div>
 
       {/* Navigation */}
-      <nav className="relative z-10 flex justify-end px-8 pt-6 sm:px-16 lg:px-24">
-        <div className="flex items-center gap-8 font-mono-display text-base tracking-wide text-foreground/80">
-          <Link to="/" className="transition-colors hover:text-foreground">home</Link>
-          <Link to="/people" className="transition-colors hover:text-foreground">people</Link>
-          <Link to="/research" className="transition-colors hover:text-foreground">projects</Link>
-        </div>
-      </nav>
+      <div className="relative z-10 flex justify-end px-8 pt-6 sm:px-16 lg:px-24">
+        <NavBar variant="dark" />
+      </div>
 
       {/* Content */}
       <main className="relative z-10 flex min-h-[calc(100vh-4rem)] flex-col justify-center px-8 sm:px-16 lg:px-24">

src/pages/People.tsx

@@ -1,6 +1,5 @@
 import { people } from "@/data/people";
-import { ArrowLeft, ExternalLink } from "lucide-react";
-import { Link } from "react-router-dom";
+import NavBar from "@/components/NavBar";
 
 const currentMembers = people.filter((p) => p.category === "current");
 const alumni = people.filter((p) => p.category === "alumni");
@@ -11,21 +10,7 @@ const People = () => {
       {/* header */}
       <header className="sticky top-0 z-20 bg-background/95 backdrop-blur-sm">
         <div className="mx-auto max-w-[1200px] px-8 py-5 flex items-center justify-between">
-          <Link
-            to="/"
-            className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <ArrowLeft className="h-3.5 w-3.5" />
-            home
-          </Link>
-          <nav className="flex items-center gap-6">
-            <Link
-              to="/research"
-              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-            >
-              research
-            </Link>
-          </nav>
+          <NavBar variant="light" />
         </div>
       </header>
 

src/pages/Research.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo } from "react";
 import { publications, type Tag } from "@/data/publications";
-import { Search, ArrowLeft, ExternalLink, Award } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Search, ExternalLink } from "lucide-react";
+import NavBar from "@/components/NavBar";
 
 const ALL_TAGS: Tag[] = ["human", "ai systems", "privacy", "security", "trust"];
 
@@ -43,13 +43,7 @@ const Research = () => {
       {/* header */}
       <header className="sticky top-0 z-20 bg-background/95 backdrop-blur-sm">
         <div className="mx-auto max-w-[1200px] px-8 py-5 flex items-center justify-between">
-          <Link
-            to="/"
-            className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <ArrowLeft className="h-3.5 w-3.5" />
-            Home
-          </Link>
+          <NavBar variant="light" />
           <nav className="flex items-center gap-6">
             {ALL_TAGS.map((tag) => (
               <button