Initial Commit

components/layout/header.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+
+const navItems = [
+  { href: "/", label: "Home", className: "bg-[#e0483d] hover:bg-[#cb3a30]" },
+  { href: "/lessons", label: "Lessons", className: "bg-[#f08b24] hover:bg-[#d97706]" },
+  { href: "/practice", label: "Practice", className: "bg-[#1faa59] hover:bg-[#168845]" },
+];
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 border-b-4 border-[#1c4ab7] bg-[#2f65e8] text-white">
+      <div className="mx-auto max-w-6xl playground-frame border-b-0 border-t-0 bg-[#2f65e8] shadow-none">
+        <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
+          <Link href="/" className="group flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#ffd043] text-[#10308a] shadow-md">
+              <span className="text-lg font-extrabold">C</span>
+            </div>
+            <div className="rounded-md bg-white px-2.5 py-1 leading-none shadow-sm">
+              <p className="text-2xl font-extrabold tracking-tight text-[#17367d]">Cabrits</p>
+              <p className="text-xs font-bold uppercase tracking-[0.14em] text-[#3a5ea8]">Math Playground</p>
+            </div>
+          </Link>
+          <div className="flex items-center gap-2 text-xs font-bold sm:text-sm">
+            <span className="rounded-full bg-[#1a49b6] px-3 py-1">Ages 12-16</span>
+            <span className="rounded-full bg-[#1a49b6] px-3 py-1">Form 1 Term 2</span>
+          </div>
+        </div>
+        <nav className="flex flex-wrap gap-1 bg-[#1b49b5] px-2 pb-2 pt-1">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`rounded-sm px-4 py-2 text-sm font-extrabold text-white transition-colors ${item.className}`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </header>
+  );
+}