src/App.tsx

@@ -1,12 +1,15 @@
 import { Routes, Route } from "react-router-dom";
 import HomePage from "@/pages/HomePage";
 import ProductsPage from "@/pages/ProductsPage";
+import MainLayout from "@/components/layout/MainLayout";
 
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/products" element={<ProductsPage />} />
+      <Route element={<MainLayout />}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/products" element={<ProductsPage />} />
+      </Route>
     </Routes>
   );
-}
+}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import Navbar from "@/components/ui/Navbar";
+
+export default function MainLayout() {
+  return (
+    <>
+      <Navbar />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+}

src/components/ui/Navbar.tsx

@@ -0,0 +1,24 @@
+import { Link, NavLink } from "react-router-dom";
+
+export default function Navbar() {
+  const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
+    `text-base transition-colors hover:text-[color:var(--primary-cta)] ${isActive ? 'text-[color:var(--primary-cta)]' : 'text-[color:var(--foreground)]'}`;
+
+  return (
+    <header className="py-6 bg-[color:var(--background)] border-b border-[color:var(--accent)]">
+      <div className="w-content-width mx-auto flex justify-between items-center">
+        <Link to="/" className="text-2xl font-bold text-[color:var(--foreground)]">
+          ACME
+        </Link>
+        <nav className="flex gap-8 items-center">
+          <NavLink to="/" className={navLinkClasses} end>
+            Home
+          </NavLink>
+          <NavLink to="/products" className={navLinkClasses}>
+            Products
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+}