front page enhancements
This commit is contained in:
@@ -14,7 +14,6 @@ export default function LessonsOverview() {
|
|||||||
<div className="mb-4 flex items-center gap-3">
|
<div className="mb-4 flex items-center gap-3">
|
||||||
<Badge variant={unit.color}>Unit {unit.number}</Badge>
|
<Badge variant={unit.color}>Unit {unit.number}</Badge>
|
||||||
<h2 className="text-xl font-semibold">{unit.title}</h2>
|
<h2 className="text-xl font-semibold">{unit.title}</h2>
|
||||||
<span className="hidden text-sm text-muted sm:inline">{unit.weeks}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
{unit.topics.map((topic) => (
|
{unit.topics.map((topic) => (
|
||||||
@@ -22,8 +21,7 @@ export default function LessonsOverview() {
|
|||||||
<Card accent={unit.color} hover className="group h-full">
|
<Card accent={unit.color} hover className="group h-full">
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
<div className="flex items-center justify-between text-xs text-muted">
|
<div className="flex items-center justify-end text-xs text-muted">
|
||||||
<span>Week {topic.week}</span>
|
|
||||||
<span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
<span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||||
Explore
|
Explore
|
||||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit1Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-1" className="mb-3">Unit 1 — {unit.weeks}</Badge>
|
<Badge variant="unit-1" className="mb-3">Unit 1</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit1Overview() {
|
|||||||
<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)]">
|
<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}
|
{i + 1}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit2Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-2" className="mb-3">Unit 2 — {unit.weeks}</Badge>
|
<Badge variant="unit-2" className="mb-3">Unit 2</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit2Overview() {
|
|||||||
<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)]">
|
<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}
|
{i + 7}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit3Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-3" className="mb-3">Unit 3 — {unit.weeks}</Badge>
|
<Badge variant="unit-3" className="mb-3">Unit 3</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit3Overview() {
|
|||||||
<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)]">
|
<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}
|
{i + 10}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit4Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-4" className="mb-3">Unit 4 — {unit.weeks}</Badge>
|
<Badge variant="unit-4" className="mb-3">Unit 4</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit4Overview() {
|
|||||||
<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)]">
|
<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)}
|
{String.fromCharCode(97 + i)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit5Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-5" className="mb-3">Unit 5 — {unit.weeks}</Badge>
|
<Badge variant="unit-5" className="mb-3">Unit 5</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit5Overview() {
|
|||||||
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-5-light text-xs font-bold text-unit-5-dark shadow-[var(--shadow-sm)]">
|
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-5-light text-xs font-bold text-unit-5-dark shadow-[var(--shadow-sm)]">
|
||||||
{i + 1}
|
{i + 1}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Unit6Overview() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<div className="mb-10">
|
<div className="mb-10">
|
||||||
<Badge variant="unit-6" className="mb-3">Unit 6 — {unit.weeks}</Badge>
|
<Badge variant="unit-6" className="mb-3">Unit 6</Badge>
|
||||||
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
||||||
<p className="text-muted leading-relaxed">{unit.description}</p>
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,6 @@ export default function Unit6Overview() {
|
|||||||
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-6-light text-xs font-bold text-unit-6-dark shadow-[var(--shadow-sm)]">
|
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-6-light text-xs font-bold text-unit-6-dark shadow-[var(--shadow-sm)]">
|
||||||
{i + 1}
|
{i + 1}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
||||||
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
||||||
|
|||||||
10
app/page.tsx
10
app/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
|
|||||||
import { Header } from "@/components/layout/header";
|
import { Header } from "@/components/layout/header";
|
||||||
import { Footer } from "@/components/layout/footer";
|
import { Footer } from "@/components/layout/footer";
|
||||||
import { curriculum } from "@/lib/curriculum";
|
import { curriculum } from "@/lib/curriculum";
|
||||||
|
import { TopicArt } from "@/components/home/topic-art";
|
||||||
|
|
||||||
const unitStyles = {
|
const unitStyles = {
|
||||||
"unit-1": {
|
"unit-1": {
|
||||||
@@ -104,7 +105,6 @@ export default function Home() {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-2 text-sm font-semibold text-[#35508b]">{unit.description}</p>
|
<p className="mt-2 text-sm font-semibold text-[#35508b]">{unit.description}</p>
|
||||||
<p className="mt-2 text-xs font-bold uppercase tracking-wide text-[#4262aa]">{unit.weeks}</p>
|
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -121,11 +121,9 @@ export default function Home() {
|
|||||||
href={`/lessons/${unit.slug}/${topic.slug}`}
|
href={`/lessons/${unit.slug}/${topic.slug}`}
|
||||||
className="rounded-sm border border-[#8ea9df] bg-white p-2 transition-transform hover:-translate-y-0.5 hover:shadow-md"
|
className="rounded-sm border border-[#8ea9df] bg-white p-2 transition-transform hover:-translate-y-0.5 hover:shadow-md"
|
||||||
>
|
>
|
||||||
<div className={`game-thumb-grid mb-2 flex aspect-[4/3] flex-col justify-between rounded-sm bg-gradient-to-br p-2 text-white ${topicTiles[index % topicTiles.length]}`}>
|
<div className={`game-thumb-grid relative mb-2 flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-sm bg-gradient-to-br p-2 text-white ${topicTiles[index % topicTiles.length]}`}>
|
||||||
<span className="w-fit rounded-sm bg-black/25 px-1.5 py-0.5 text-[10px] font-extrabold uppercase tracking-wide">
|
<TopicArt unitSlug={unit.slug} topicSlug={topic.slug} />
|
||||||
Week {topic.week}
|
<span className="relative text-center text-xs font-extrabold leading-tight [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
|
||||||
</span>
|
|
||||||
<span className="text-center text-xs font-extrabold leading-tight">
|
|
||||||
{topic.shortTitle}
|
{topic.shortTitle}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
222
components/home/topic-art.tsx
Normal file
222
components/home/topic-art.tsx
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decorative SVG artwork for the Topic Explorer tiles on the landing page.
|
||||||
|
* Each topic gets a simple math-themed illustration drawn in white over the
|
||||||
|
* tile's gradient background.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function Frame({ children }: { children: ReactNode }) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 75"
|
||||||
|
className="pointer-events-none absolute inset-0 h-full w-full"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<circle cx="88" cy="8" r="14" fill="white" opacity="0.08" />
|
||||||
|
<circle cx="8" cy="66" r="18" fill="white" opacity="0.08" />
|
||||||
|
{children}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const glyphText = {
|
||||||
|
fill: "white",
|
||||||
|
fontWeight: 800,
|
||||||
|
fontFamily: "inherit",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const art: Record<string, ReactNode> = {
|
||||||
|
// Unit 1 — Fractions
|
||||||
|
"unit-1-fractions/add-subtract": (
|
||||||
|
<>
|
||||||
|
<circle cx="30" cy="32" r="15" fill="white" opacity="0.3" />
|
||||||
|
<path d="M30 17 A15 15 0 0 1 45 32 L30 32 Z" fill="white" opacity="0.9" />
|
||||||
|
<text x="63" y="32" fontSize="22" textAnchor="middle" dominantBaseline="middle" {...glyphText}>+</text>
|
||||||
|
<text x="82" y="32" fontSize="22" textAnchor="middle" dominantBaseline="middle" {...glyphText}>−</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-1-fractions/multiply": (
|
||||||
|
<>
|
||||||
|
<text x="30" y="20" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>1</text>
|
||||||
|
<rect x="20" y="28" width="20" height="3" rx="1.5" fill="white" />
|
||||||
|
<text x="30" y="44" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>2</text>
|
||||||
|
<text x="52" y="32" fontSize="20" textAnchor="middle" dominantBaseline="middle" {...glyphText}>×</text>
|
||||||
|
<text x="73" y="20" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>3</text>
|
||||||
|
<rect x="63" y="28" width="20" height="3" rx="1.5" fill="white" />
|
||||||
|
<text x="73" y="44" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>4</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-1-fractions/divide": (
|
||||||
|
<>
|
||||||
|
<circle cx="50" cy="16" r="5" fill="white" />
|
||||||
|
<rect x="26" y="29" width="48" height="5" rx="2.5" fill="white" />
|
||||||
|
<circle cx="50" cy="47" r="5" fill="white" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-1-fractions/mixed-operations": (
|
||||||
|
<>
|
||||||
|
<text x="22" y="32" fontSize="30" textAnchor="middle" dominantBaseline="middle" {...glyphText}>(</text>
|
||||||
|
<text x="42" y="32" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>+</text>
|
||||||
|
<text x="58" y="32" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>×</text>
|
||||||
|
<text x="78" y="32" fontSize="30" textAnchor="middle" dominantBaseline="middle" {...glyphText}>)</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-1-fractions/fraction-of-quantity": (
|
||||||
|
<>
|
||||||
|
{[0, 1, 2, 3].map((col) =>
|
||||||
|
[0, 1].map((row) => (
|
||||||
|
<circle
|
||||||
|
key={`${col}-${row}`}
|
||||||
|
cx={26 + col * 16}
|
||||||
|
cy={24 + row * 16}
|
||||||
|
r="6"
|
||||||
|
fill="white"
|
||||||
|
opacity={col < 2 ? 0.95 : 0.3}
|
||||||
|
/>
|
||||||
|
)),
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-1-fractions/whole-from-fractions": (
|
||||||
|
<>
|
||||||
|
<path d="M50 32 L50 14 A18 18 0 1 1 35 47 Z" fill="white" opacity="0.9" />
|
||||||
|
<path d="M50 32 L50 14 A18 18 0 0 0 35 47 Z" fill="white" opacity="0.25" />
|
||||||
|
<text x="40" y="29" fontSize="12" textAnchor="middle" dominantBaseline="middle" {...glyphText}>?</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Unit 2 — Decimals
|
||||||
|
"unit-2-decimals/compare-order": (
|
||||||
|
<>
|
||||||
|
<text x="26" y="32" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>0.3</text>
|
||||||
|
<text x="50" y="32" fontSize="22" textAnchor="middle" dominantBaseline="middle" {...glyphText}><</text>
|
||||||
|
<text x="74" y="32" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>0.7</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-2-decimals/approximate": (
|
||||||
|
<>
|
||||||
|
<text x="50" y="30" fontSize="34" textAnchor="middle" dominantBaseline="middle" {...glyphText}>≈</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-2-decimals/standard-form": (
|
||||||
|
<>
|
||||||
|
<text x="34" y="34" fontSize="18" textAnchor="middle" dominantBaseline="middle" {...glyphText}>×10</text>
|
||||||
|
<text x="62" y="22" fontSize="12" textAnchor="middle" dominantBaseline="middle" {...glyphText}>n</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Unit 3 — Decimal Operations
|
||||||
|
"unit-3-decimal-operations/convert": (
|
||||||
|
<>
|
||||||
|
<text x="26" y="20" fontSize="10" textAnchor="middle" dominantBaseline="middle" {...glyphText}>1</text>
|
||||||
|
<rect x="19" y="25" width="14" height="2.5" rx="1.25" fill="white" />
|
||||||
|
<text x="26" y="35" fontSize="10" textAnchor="middle" dominantBaseline="middle" {...glyphText}>2</text>
|
||||||
|
<path d="M40 22 H62 M62 22 l-5 -4 M62 22 l-5 4" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<path d="M62 36 H40 M40 36 l5 -4 M40 36 l5 4" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<text x="77" y="28" fontSize="13" textAnchor="middle" dominantBaseline="middle" {...glyphText}>0.5</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-3-decimal-operations/add-subtract": (
|
||||||
|
<>
|
||||||
|
<text x="56" y="18" fontSize="13" textAnchor="end" dominantBaseline="middle" {...glyphText}>2.50</text>
|
||||||
|
<text x="56" y="34" fontSize="13" textAnchor="end" dominantBaseline="middle" {...glyphText}>1.25</text>
|
||||||
|
<text x="28" y="34" fontSize="13" textAnchor="middle" dominantBaseline="middle" {...glyphText}>+</text>
|
||||||
|
<rect x="22" y="42" width="38" height="2.5" rx="1.25" fill="white" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-3-decimal-operations/multiply-divide": (
|
||||||
|
<>
|
||||||
|
<text x="34" y="30" fontSize="24" textAnchor="middle" dominantBaseline="middle" {...glyphText}>×</text>
|
||||||
|
<text x="66" y="30" fontSize="24" textAnchor="middle" dominantBaseline="middle" {...glyphText}>÷</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Unit 4 — Ratio & Proportion
|
||||||
|
"unit-4-ratio-proportion/define-ratio": (
|
||||||
|
<>
|
||||||
|
<circle cx="26" cy="24" r="6" fill="white" />
|
||||||
|
<circle cx="26" cy="40" r="6" fill="white" />
|
||||||
|
<text x="48" y="31" fontSize="22" textAnchor="middle" dominantBaseline="middle" {...glyphText}>:</text>
|
||||||
|
<circle cx="68" cy="18" r="6" fill="white" opacity="0.85" />
|
||||||
|
<circle cx="68" cy="32" r="6" fill="white" opacity="0.85" />
|
||||||
|
<circle cx="68" cy="46" r="6" fill="white" opacity="0.85" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-4-ratio-proportion/fractions-and-ratios": (
|
||||||
|
<>
|
||||||
|
<text x="28" y="20" fontSize="12" textAnchor="middle" dominantBaseline="middle" {...glyphText}>1</text>
|
||||||
|
<rect x="20" y="26" width="16" height="2.5" rx="1.25" fill="white" />
|
||||||
|
<text x="28" y="37" fontSize="12" textAnchor="middle" dominantBaseline="middle" {...glyphText}>3</text>
|
||||||
|
<text x="50" y="28" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>=</text>
|
||||||
|
<text x="72" y="28" fontSize="15" textAnchor="middle" dominantBaseline="middle" {...glyphText}>1:2</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-4-ratio-proportion/simplify-ratios": (
|
||||||
|
<>
|
||||||
|
<text x="24" y="30" fontSize="14" textAnchor="middle" dominantBaseline="middle" {...glyphText}>6:9</text>
|
||||||
|
<path d="M42 30 H60 M60 30 l-5 -4 M60 30 l-5 4" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<text x="76" y="30" fontSize="15" textAnchor="middle" dominantBaseline="middle" {...glyphText}>2:3</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-4-ratio-proportion/divide-in-ratio": (
|
||||||
|
<>
|
||||||
|
<rect x="18" y="24" width="26" height="14" rx="2" fill="white" opacity="0.95" />
|
||||||
|
<rect x="46" y="24" width="13" height="14" rx="2" fill="white" opacity="0.6" />
|
||||||
|
<rect x="61" y="24" width="13" height="14" rx="2" fill="white" opacity="0.6" />
|
||||||
|
<text x="46" y="52" fontSize="12" textAnchor="middle" dominantBaseline="middle" {...glyphText}>2 : 1 : 1</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-4-ratio-proportion/word-problems": (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M26 14 h48 a5 5 0 0 1 5 5 v22 a5 5 0 0 1 -5 5 H44 l-9 9 v-9 h-9 a5 5 0 0 1 -5 -5 V19 a5 5 0 0 1 5 -5 Z"
|
||||||
|
fill="white"
|
||||||
|
opacity="0.3"
|
||||||
|
/>
|
||||||
|
<text x="50" y="30" fontSize="18" textAnchor="middle" dominantBaseline="middle" {...glyphText}>?</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Unit 5 — Integers
|
||||||
|
"unit-5-integers/add-subtract": (
|
||||||
|
<>
|
||||||
|
<path d="M14 36 H86 M20 36 v-6 M35 36 v-6 M50 36 v-8 M65 36 v-6 M80 36 v-6" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<text x="20" y="20" fontSize="10" textAnchor="middle" dominantBaseline="middle" {...glyphText}>−2</text>
|
||||||
|
<text x="50" y="18" fontSize="10" textAnchor="middle" dominantBaseline="middle" {...glyphText}>0</text>
|
||||||
|
<text x="80" y="20" fontSize="10" textAnchor="middle" dominantBaseline="middle" {...glyphText}>+2</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-5-integers/multiply-divide": (
|
||||||
|
<>
|
||||||
|
<text x="30" y="24" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>−×−</text>
|
||||||
|
<path d="M58 24 H72 M72 24 l-4 -3 M72 24 l-4 3" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<text x="82" y="24" fontSize="16" textAnchor="middle" dominantBaseline="middle" {...glyphText}>+</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Unit 6 — Number System
|
||||||
|
"unit-6-number-system/binary": (
|
||||||
|
<>
|
||||||
|
<text x="50" y="24" fontSize="16" textAnchor="middle" dominantBaseline="middle" letterSpacing="3" {...glyphText}>1011</text>
|
||||||
|
<text x="50" y="44" fontSize="11" textAnchor="middle" dominantBaseline="middle" opacity="0.8" {...glyphText}>base 2</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
"unit-6-number-system/quaternary": (
|
||||||
|
<>
|
||||||
|
<text x="50" y="24" fontSize="16" textAnchor="middle" dominantBaseline="middle" letterSpacing="3" {...glyphText}>1230</text>
|
||||||
|
<text x="50" y="44" fontSize="11" textAnchor="middle" dominantBaseline="middle" opacity="0.8" {...glyphText}>base 4</text>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
const fallback: ReactNode = (
|
||||||
|
<>
|
||||||
|
<circle cx="34" cy="30" r="10" fill="white" opacity="0.6" />
|
||||||
|
<rect x="56" y="20" width="20" height="20" rx="3" fill="white" opacity="0.6" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export function TopicArt({ unitSlug, topicSlug }: { unitSlug: string; topicSlug: string }) {
|
||||||
|
return <Frame>{art[`${unitSlug}/${topicSlug}`] ?? fallback}</Frame>;
|
||||||
|
}
|
||||||
@@ -22,7 +22,7 @@ export function Header() {
|
|||||||
</Link>
|
</Link>
|
||||||
<div className="flex items-center gap-2 text-xs font-bold sm:text-sm">
|
<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">Ages 12-16</span>
|
||||||
<span className="rounded-full bg-[#1a49b6] px-3 py-1">Form 1 Term 2</span>
|
<span className="rounded-full bg-[#1a49b6] px-3 py-1">Form 1</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav className="flex flex-wrap gap-1 bg-[#1b49b5] px-2 pb-2 pt-1">
|
<nav className="flex flex-wrap gap-1 bg-[#1b49b5] px-2 pb-2 pt-1">
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ export interface Topic {
|
|||||||
slug: string;
|
slug: string;
|
||||||
title: string;
|
title: string;
|
||||||
shortTitle: string;
|
shortTitle: string;
|
||||||
week: number;
|
|
||||||
description: string;
|
description: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -11,7 +10,6 @@ export interface Unit {
|
|||||||
slug: string;
|
slug: string;
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
weeks: string;
|
|
||||||
color: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6";
|
color: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6";
|
||||||
topics: Topic[];
|
topics: Topic[];
|
||||||
}
|
}
|
||||||
@@ -22,49 +20,42 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-1-fractions",
|
slug: "unit-1-fractions",
|
||||||
title: "Fractions",
|
title: "Fractions",
|
||||||
description: "Add, subtract, multiply, divide fractions and apply to quantities",
|
description: "Add, subtract, multiply, divide fractions and apply to quantities",
|
||||||
weeks: "Weeks 1-3",
|
|
||||||
color: "unit-1",
|
color: "unit-1",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "add-subtract",
|
slug: "add-subtract",
|
||||||
title: "Add and Subtract Fractions",
|
title: "Add and Subtract Fractions",
|
||||||
shortTitle: "Add & Subtract",
|
shortTitle: "Add & Subtract",
|
||||||
week: 1,
|
|
||||||
description: "Common and uncommon denominators, Butterfly Method",
|
description: "Common and uncommon denominators, Butterfly Method",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "multiply",
|
slug: "multiply",
|
||||||
title: "Multiply Fractions",
|
title: "Multiply Fractions",
|
||||||
shortTitle: "Multiply",
|
shortTitle: "Multiply",
|
||||||
week: 1,
|
|
||||||
description: "Multiply numerators and denominators, simplify",
|
description: "Multiply numerators and denominators, simplify",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "divide",
|
slug: "divide",
|
||||||
title: "Divide Fractions",
|
title: "Divide Fractions",
|
||||||
shortTitle: "Divide",
|
shortTitle: "Divide",
|
||||||
week: 1,
|
|
||||||
description: "Invert and multiply (reciprocal method)",
|
description: "Invert and multiply (reciprocal method)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "mixed-operations",
|
slug: "mixed-operations",
|
||||||
title: "Mixed Operations (BODMAS)",
|
title: "Mixed Operations (BODMAS)",
|
||||||
shortTitle: "BODMAS",
|
shortTitle: "BODMAS",
|
||||||
week: 2,
|
|
||||||
description: "Order of operations with fractions",
|
description: "Order of operations with fractions",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "fraction-of-quantity",
|
slug: "fraction-of-quantity",
|
||||||
title: "Fraction of a Quantity",
|
title: "Fraction of a Quantity",
|
||||||
shortTitle: "Of a Quantity",
|
shortTitle: "Of a Quantity",
|
||||||
week: 3,
|
|
||||||
description: "Calculate a fraction of a given amount",
|
description: "Calculate a fraction of a given amount",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "whole-from-fractions",
|
slug: "whole-from-fractions",
|
||||||
title: "Calculate the Whole from Fractions",
|
title: "Calculate the Whole from Fractions",
|
||||||
shortTitle: "Find the Whole",
|
shortTitle: "Find the Whole",
|
||||||
week: 3,
|
|
||||||
description: "Find the whole when given a part and its fraction",
|
description: "Find the whole when given a part and its fraction",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -74,28 +65,24 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-2-decimals",
|
slug: "unit-2-decimals",
|
||||||
title: "Decimals",
|
title: "Decimals",
|
||||||
description: "Compare, order, round decimals and express in standard form",
|
description: "Compare, order, round decimals and express in standard form",
|
||||||
weeks: "Weeks 4-5",
|
|
||||||
color: "unit-2",
|
color: "unit-2",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "compare-order",
|
slug: "compare-order",
|
||||||
title: "Compare and Order Decimals",
|
title: "Compare and Order Decimals",
|
||||||
shortTitle: "Compare & Order",
|
shortTitle: "Compare & Order",
|
||||||
week: 4,
|
|
||||||
description: "Place value, ascending, descending, greater/less than",
|
description: "Place value, ascending, descending, greater/less than",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "approximate",
|
slug: "approximate",
|
||||||
title: "Approximate Decimals",
|
title: "Approximate Decimals",
|
||||||
shortTitle: "Approximation",
|
shortTitle: "Approximation",
|
||||||
week: 4,
|
|
||||||
description: "Round to whole numbers, decimal places, significant figures",
|
description: "Round to whole numbers, decimal places, significant figures",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "standard-form",
|
slug: "standard-form",
|
||||||
title: "Standard Form (Scientific Notation)",
|
title: "Standard Form (Scientific Notation)",
|
||||||
shortTitle: "Standard Form",
|
shortTitle: "Standard Form",
|
||||||
week: 5,
|
|
||||||
description: "Express numbers as a × 10^n",
|
description: "Express numbers as a × 10^n",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -105,28 +92,24 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-3-decimal-operations",
|
slug: "unit-3-decimal-operations",
|
||||||
title: "Decimal Operations",
|
title: "Decimal Operations",
|
||||||
description: "Convert, add, subtract, multiply and divide decimals",
|
description: "Convert, add, subtract, multiply and divide decimals",
|
||||||
weeks: "Weeks 6-7",
|
|
||||||
color: "unit-3",
|
color: "unit-3",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "convert",
|
slug: "convert",
|
||||||
title: "Convert Decimals and Fractions",
|
title: "Convert Decimals and Fractions",
|
||||||
shortTitle: "Convert",
|
shortTitle: "Convert",
|
||||||
week: 6,
|
|
||||||
description: "Decimals to fractions and fractions to decimals",
|
description: "Decimals to fractions and fractions to decimals",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "add-subtract",
|
slug: "add-subtract",
|
||||||
title: "Add and Subtract Decimals",
|
title: "Add and Subtract Decimals",
|
||||||
shortTitle: "Add & Subtract",
|
shortTitle: "Add & Subtract",
|
||||||
week: 6,
|
|
||||||
description: "Align decimal points, insert zeros as placeholders",
|
description: "Align decimal points, insert zeros as placeholders",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "multiply-divide",
|
slug: "multiply-divide",
|
||||||
title: "Multiply and Divide Decimals",
|
title: "Multiply and Divide Decimals",
|
||||||
shortTitle: "Multiply & Divide",
|
shortTitle: "Multiply & Divide",
|
||||||
week: 7,
|
|
||||||
description: "By powers of 10, whole numbers, and decimals",
|
description: "By powers of 10, whole numbers, and decimals",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -136,42 +119,36 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-4-ratio-proportion",
|
slug: "unit-4-ratio-proportion",
|
||||||
title: "Ratio & Proportion",
|
title: "Ratio & Proportion",
|
||||||
description: "Define, simplify, and apply ratios to solve problems",
|
description: "Define, simplify, and apply ratios to solve problems",
|
||||||
weeks: "Weeks 8-9",
|
|
||||||
color: "unit-4",
|
color: "unit-4",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "define-ratio",
|
slug: "define-ratio",
|
||||||
title: "Define a Ratio",
|
title: "Define a Ratio",
|
||||||
shortTitle: "Define Ratio",
|
shortTitle: "Define Ratio",
|
||||||
week: 8,
|
|
||||||
description: "Relationship between two or more quantities",
|
description: "Relationship between two or more quantities",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "fractions-and-ratios",
|
slug: "fractions-and-ratios",
|
||||||
title: "Fractions and Ratios",
|
title: "Fractions and Ratios",
|
||||||
shortTitle: "Fractions & Ratios",
|
shortTitle: "Fractions & Ratios",
|
||||||
week: 8,
|
|
||||||
description: "Understand the relationship between fractions and ratios",
|
description: "Understand the relationship between fractions and ratios",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "simplify-ratios",
|
slug: "simplify-ratios",
|
||||||
title: "Simplify Ratios",
|
title: "Simplify Ratios",
|
||||||
shortTitle: "Simplify",
|
shortTitle: "Simplify",
|
||||||
week: 8,
|
|
||||||
description: "Write ratios in their simplest form",
|
description: "Write ratios in their simplest form",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "divide-in-ratio",
|
slug: "divide-in-ratio",
|
||||||
title: "Divide a Quantity in a Given Ratio",
|
title: "Divide a Quantity in a Given Ratio",
|
||||||
shortTitle: "Divide in Ratio",
|
shortTitle: "Divide in Ratio",
|
||||||
week: 9,
|
|
||||||
description: "Share amounts using ratios",
|
description: "Share amounts using ratios",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "word-problems",
|
slug: "word-problems",
|
||||||
title: "Proportional Parts Word Problems",
|
title: "Proportional Parts Word Problems",
|
||||||
shortTitle: "Word Problems",
|
shortTitle: "Word Problems",
|
||||||
week: 9,
|
|
||||||
description: "Solve real-world problems with ratios",
|
description: "Solve real-world problems with ratios",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -181,21 +158,18 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-5-integers",
|
slug: "unit-5-integers",
|
||||||
title: "Integers",
|
title: "Integers",
|
||||||
description: "Add, subtract, multiply, divide integers and apply to real-world problems",
|
description: "Add, subtract, multiply, divide integers and apply to real-world problems",
|
||||||
weeks: "Weeks 2-4",
|
|
||||||
color: "unit-5",
|
color: "unit-5",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "add-subtract",
|
slug: "add-subtract",
|
||||||
title: "Add and Subtract Integers",
|
title: "Add and Subtract Integers",
|
||||||
shortTitle: "Add & Subtract",
|
shortTitle: "Add & Subtract",
|
||||||
week: 2,
|
|
||||||
description: "Use number lines and sign rules to add and subtract positive and negative numbers",
|
description: "Use number lines and sign rules to add and subtract positive and negative numbers",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "multiply-divide",
|
slug: "multiply-divide",
|
||||||
title: "Multiply and Divide Integers",
|
title: "Multiply and Divide Integers",
|
||||||
shortTitle: "Multiply & Divide",
|
shortTitle: "Multiply & Divide",
|
||||||
week: 3,
|
|
||||||
description: "Sign rules for multiplication and division with real-world thermometer problems",
|
description: "Sign rules for multiplication and division with real-world thermometer problems",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -205,21 +179,18 @@ export const curriculum: Unit[] = [
|
|||||||
slug: "unit-6-number-system",
|
slug: "unit-6-number-system",
|
||||||
title: "Number System",
|
title: "Number System",
|
||||||
description: "Explore how numbers can be written in different bases, beyond the everyday denary system",
|
description: "Explore how numbers can be written in different bases, beyond the everyday denary system",
|
||||||
weeks: "Week 10",
|
|
||||||
color: "unit-6",
|
color: "unit-6",
|
||||||
topics: [
|
topics: [
|
||||||
{
|
{
|
||||||
slug: "binary",
|
slug: "binary",
|
||||||
title: "Binary Numbers",
|
title: "Binary Numbers",
|
||||||
shortTitle: "Binary",
|
shortTitle: "Binary",
|
||||||
week: 10,
|
|
||||||
description: "Place value in base 2 and converting binary numbers to denary (decimal)",
|
description: "Place value in base 2 and converting binary numbers to denary (decimal)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
slug: "quaternary",
|
slug: "quaternary",
|
||||||
title: "Quaternary Numbers",
|
title: "Quaternary Numbers",
|
||||||
shortTitle: "Quaternary",
|
shortTitle: "Quaternary",
|
||||||
week: 10,
|
|
||||||
description: "Place value in base 4 and converting between quaternary and denary (decimal)",
|
description: "Place value in base 4 and converting between quaternary and denary (decimal)",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user