Initial Commit

app/lessons/layout.tsx

@@ -0,0 +1,28 @@
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
+import { Sidebar } from "@/components/layout/sidebar";
+import { MobileNav } from "@/components/layout/mobile-nav";
+
+export default function LessonsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="playground-bg flex min-h-screen flex-col">
+      <Header />
+      <div className="playground-frame relative mx-auto flex w-full max-w-6xl flex-1">
+        <Sidebar />
+        <main className="flex-1 bg-white">
+          <div className="relative p-4 lg:hidden">
+            <MobileNav />
+          </div>
+          <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+            {children}
+          </div>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  );
+}

app/lessons/page.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import { curriculum } from "@/lib/curriculum";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export default function LessonsOverview() {
+  return (
+    <div>
+      <h1 className="mb-2 text-3xl font-bold tracking-tight">All Topics</h1>
+      <p className="mb-10 text-muted">Form 1, Term 2 &mdash; Select a topic to explore</p>
+
+      {curriculum.map((unit) => (
+        <section key={unit.slug} className="mb-12">
+          <div className="mb-4 flex items-center gap-3">
+            <Badge variant={unit.color}>Unit {unit.number}</Badge>
+            <h2 className="text-xl font-semibold">{unit.title}</h2>
+            <span className="hidden text-sm text-muted sm:inline">{unit.weeks}</span>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {unit.topics.map((topic) => (
+              <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
+                <Card accent={unit.color} hover className="group h-full">
+                  <h3 className="mb-1 font-semibold">{topic.title}</h3>
+                  <p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
+                  <div className="flex items-center justify-between text-xs text-muted">
+                    <span>Week {topic.week}</span>
+                    <span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                      Explore
+                      <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </span>
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

app/lessons/unit-1-fractions/add-subtract/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { FractionOperationExplorer } from "@/components/explorers/fraction-operation-explorer";
+
+export default function AddSubtractPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "Add & Subtract" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Add and Subtract Fractions</h1>
+
+      <FractionOperationExplorer />
+    </div>
+  );
+}

app/lessons/unit-1-fractions/divide/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { FractionOperationExplorer } from "@/components/explorers/fraction-operation-explorer";
+
+export default function DividePage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "Divide" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Divide Fractions</h1>
+
+      <FractionOperationExplorer />
+    </div>
+  );
+}

app/lessons/unit-1-fractions/fraction-of-quantity/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { FractionQuantityExplorer } from "@/components/explorers/fraction-quantity-explorer";
+
+export default function FractionOfQuantityPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "Of a Quantity" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Fraction of a Quantity</h1>
+
+      <FractionQuantityExplorer />
+    </div>
+  );
+}

app/lessons/unit-1-fractions/mixed-operations/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { BODMASExplorer } from "@/components/explorers/bodmas-explorer";
+
+export default function MixedOperationsPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "BODMAS" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Mixed Operations (BODMAS)</h1>
+
+      <BODMASExplorer />
+    </div>
+  );
+}

app/lessons/unit-1-fractions/multiply/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { FractionOperationExplorer } from "@/components/explorers/fraction-operation-explorer";
+
+export default function MultiplyPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "Multiply" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Multiply Fractions</h1>
+
+      <FractionOperationExplorer />
+    </div>
+  );
+}

app/lessons/unit-1-fractions/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { curriculum } from "@/lib/curriculum";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+
+export default function Unit1Overview() {
+  const unit = curriculum[0];
+
+  return (
+    <div>
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: `Unit 1: ${unit.title}` },
+        ]}
+      />
+      <div className="mb-10">
+        <Badge variant="unit-1" className="mb-3">Unit 1 &mdash; {unit.weeks}</Badge>
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
+        <p className="text-muted leading-relaxed">{unit.description}</p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {unit.topics.map((topic, i) => (
+          <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
+            <Card accent="unit-1" hover className="group h-full">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-1-light text-xs font-bold text-unit-1-dark shadow-[var(--shadow-sm)]">
+                  {i + 1}
+                </span>
+                <span className="text-xs text-muted">Week {topic.week}</span>
+              </div>
+              <h3 className="mb-1 font-semibold">{topic.title}</h3>
+              <p className="text-sm leading-relaxed text-muted">{topic.description}</p>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

app/lessons/unit-1-fractions/whole-from-fractions/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { FractionQuantityExplorer } from "@/components/explorers/fraction-quantity-explorer";
+
+export default function WholeFromFractionsPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 1: Fractions", href: "/lessons/unit-1-fractions" },
+          { label: "Find the Whole" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Calculate the Whole from Fractions</h1>
+
+      <FractionQuantityExplorer />
+    </div>
+  );
+}

app/lessons/unit-2-decimals/approximate/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RoundingExplorer } from "@/components/explorers/rounding-explorer";
+
+export default function ApproximatePage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 2: Decimals", href: "/lessons/unit-2-decimals" },
+          { label: "Approximate" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Approximate Decimals</h1>
+
+      <RoundingExplorer />
+    </div>
+  );
+}

app/lessons/unit-2-decimals/compare-order/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { DecimalOrderExplorer } from "@/components/explorers/decimal-order-explorer";
+
+export default function CompareOrderPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 2: Decimals", href: "/lessons/unit-2-decimals" },
+          { label: "Compare & Order" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Compare and Order Decimals</h1>
+
+      <DecimalOrderExplorer />
+    </div>
+  );
+}

app/lessons/unit-2-decimals/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { curriculum } from "@/lib/curriculum";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+
+export default function Unit2Overview() {
+  const unit = curriculum[1];
+
+  return (
+    <div>
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: `Unit 2: ${unit.title}` },
+        ]}
+      />
+      <div className="mb-10">
+        <Badge variant="unit-2" className="mb-3">Unit 2 &mdash; {unit.weeks}</Badge>
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
+        <p className="text-muted leading-relaxed">{unit.description}</p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {unit.topics.map((topic, i) => (
+          <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
+            <Card accent="unit-2" hover className="group h-full">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-2-light text-xs font-bold text-unit-2-dark shadow-[var(--shadow-sm)]">
+                  {i + 7}
+                </span>
+                <span className="text-xs text-muted">Week {topic.week}</span>
+              </div>
+              <h3 className="mb-1 font-semibold">{topic.title}</h3>
+              <p className="text-sm leading-relaxed text-muted">{topic.description}</p>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

app/lessons/unit-2-decimals/standard-form/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { StandardFormExplorer } from "@/components/explorers/standard-form-explorer";
+
+export default function StandardFormPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 2: Decimals", href: "/lessons/unit-2-decimals" },
+          { label: "Standard Form" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Standard Form (Scientific Notation)</h1>
+
+      <StandardFormExplorer />
+    </div>
+  );
+}

app/lessons/unit-3-decimal-operations/add-subtract/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { DecimalArithmeticExplorer } from "@/components/explorers/decimal-arithmetic-explorer";
+
+export default function AddSubtractPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 3: Decimal Operations", href: "/lessons/unit-3-decimal-operations" },
+          { label: "Add & Subtract" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Add and Subtract Decimals</h1>
+
+      <DecimalArithmeticExplorer />
+    </div>
+  );
+}

app/lessons/unit-3-decimal-operations/convert/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { ConversionExplorer } from "@/components/explorers/conversion-explorer";
+
+export default function ConvertPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 3: Decimal Operations", href: "/lessons/unit-3-decimal-operations" },
+          { label: "Convert" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Convert Decimals and Fractions</h1>
+
+      <ConversionExplorer />
+    </div>
+  );
+}

app/lessons/unit-3-decimal-operations/multiply-divide/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { DecimalArithmeticExplorer } from "@/components/explorers/decimal-arithmetic-explorer";
+
+export default function MultiplyDividePage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 3: Decimal Operations", href: "/lessons/unit-3-decimal-operations" },
+          { label: "Multiply & Divide" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Multiply and Divide Decimals</h1>
+
+      <DecimalArithmeticExplorer />
+    </div>
+  );
+}

app/lessons/unit-3-decimal-operations/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { curriculum } from "@/lib/curriculum";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+
+export default function Unit3Overview() {
+  const unit = curriculum[2];
+
+  return (
+    <div>
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: `Unit 3: ${unit.title}` },
+        ]}
+      />
+      <div className="mb-10">
+        <Badge variant="unit-3" className="mb-3">Unit 3 &mdash; {unit.weeks}</Badge>
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
+        <p className="text-muted leading-relaxed">{unit.description}</p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {unit.topics.map((topic, i) => (
+          <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
+            <Card accent="unit-3" hover className="group h-full">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-3-light text-xs font-bold text-unit-3-dark shadow-[var(--shadow-sm)]">
+                  {i + 10}
+                </span>
+                <span className="text-xs text-muted">Week {topic.week}</span>
+              </div>
+              <h3 className="mb-1 font-semibold">{topic.title}</h3>
+              <p className="text-sm leading-relaxed text-muted">{topic.description}</p>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/define-ratio/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RatioExplorer } from "@/components/explorers/ratio-explorer";
+
+export default function DefineRatioPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 4: Ratio & Proportion", href: "/lessons/unit-4-ratio-proportion" },
+          { label: "Define Ratio" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Define a Ratio</h1>
+
+      <RatioExplorer />
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/divide-in-ratio/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RatioExplorer } from "@/components/explorers/ratio-explorer";
+
+export default function DivideInRatioPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 4: Ratio & Proportion", href: "/lessons/unit-4-ratio-proportion" },
+          { label: "Divide in Ratio" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Divide a Quantity in a Given Ratio</h1>
+
+      <RatioExplorer />
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/fractions-and-ratios/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RatioExplorer } from "@/components/explorers/ratio-explorer";
+
+export default function FractionsAndRatiosPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 4: Ratio & Proportion", href: "/lessons/unit-4-ratio-proportion" },
+          { label: "Fractions & Ratios" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Fractions and Ratios</h1>
+
+      <RatioExplorer />
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { curriculum } from "@/lib/curriculum";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+
+export default function Unit4Overview() {
+  const unit = curriculum[3];
+
+  return (
+    <div>
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: `Unit 4: ${unit.title}` },
+        ]}
+      />
+      <div className="mb-10">
+        <Badge variant="unit-4" className="mb-3">Unit 4 &mdash; {unit.weeks}</Badge>
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
+        <p className="text-muted leading-relaxed">{unit.description}</p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {unit.topics.map((topic, i) => (
+          <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
+            <Card accent="unit-4" hover className="group h-full">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-4-light text-xs font-bold text-unit-4-dark shadow-[var(--shadow-sm)]">
+                  {String.fromCharCode(97 + i)}
+                </span>
+                <span className="text-xs text-muted">Week {topic.week}</span>
+              </div>
+              <h3 className="mb-1 font-semibold">{topic.title}</h3>
+              <p className="text-sm leading-relaxed text-muted">{topic.description}</p>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/simplify-ratios/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RatioExplorer } from "@/components/explorers/ratio-explorer";
+
+export default function SimplifyRatiosPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 4: Ratio & Proportion", href: "/lessons/unit-4-ratio-proportion" },
+          { label: "Simplify Ratios" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Simplify Ratios</h1>
+
+      <RatioExplorer />
+    </div>
+  );
+}

app/lessons/unit-4-ratio-proportion/word-problems/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RatioExplorer } from "@/components/explorers/ratio-explorer";
+
+export default function WordProblemsPage() {
+  return (
+    <div className="space-y-8">
+      <Breadcrumbs
+        items={[
+          { label: "Lessons", href: "/lessons" },
+          { label: "Unit 4: Ratio & Proportion", href: "/lessons/unit-4-ratio-proportion" },
+          { label: "Word Problems" },
+        ]}
+      />
+
+      <h1 className="text-3xl font-bold tracking-tight">Proportional Parts Word Problems</h1>
+
+      <RatioExplorer />
+    </div>
+  );
+}