quarternary added

app/lessons/unit-6-number-system/quaternary/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useState } from "react";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { QuaternaryToDenaryExplorer } from "@/components/explorers/quaternary-to-denary-explorer";
+import { DenaryToQuaternaryExplorer } from "@/components/explorers/denary-to-quaternary-explorer";
+
+type Mode = "quaternary-to-denary" | "denary-to-quaternary";
+
+const MODES: { key: Mode; label: string }[] = [
+  { key: "quaternary-to-denary", label: "Quaternary → Denary" },
+  { key: "denary-to-quaternary", label: "Denary → Quaternary" },
+];
+
+export default function QuaternaryPage() {
+  const [mode, setMode] = useState<Mode>("quaternary-to-denary");
+
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 6: Number System", href: "/lessons/unit-6-number-system" },
+          { label: "Quaternary" },
+        ]}
+      />
+
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          {mode === "quaternary-to-denary"
+            ? "Quaternary → Denary Converter"
+            : "Denary → Quaternary Converter"}
+        </h1>
+        <p className="mt-2 text-muted">
+          {mode === "quaternary-to-denary"
+            ? "Same shape, different base — explore place value in powers of 4."
+            : "Divide by 4. Track the remainder. Read bottom-up."}
+        </p>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {MODES.map((m) => (
+          <button
+            key={m.key}
+            onClick={() => setMode(m.key)}
+            className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
+              mode === m.key
+                ? "border-unit-6 bg-unit-6 text-white"
+                : "border-unit-6/40 text-unit-6 hover:bg-unit-6-light"
+            }`}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+
+      {mode === "quaternary-to-denary" ? (
+        <QuaternaryToDenaryExplorer />
+      ) : (
+        <DenaryToQuaternaryExplorer />
+      )}
+    </div>
+  );
+}