Initial Commit
This commit is contained in:
182
app/page.tsx
182
app/page.tsx
@@ -1,65 +1,133 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Header } from "@/components/layout/header";
|
||||
import { Footer } from "@/components/layout/footer";
|
||||
import { curriculum } from "@/lib/curriculum";
|
||||
|
||||
const unitStyles = {
|
||||
"unit-1": {
|
||||
tile: "from-[#4e95ff] to-[#1f63ea]",
|
||||
unitCard: "border-[#8cb2ff] bg-[#eaf2ff]",
|
||||
chip: "bg-[#2059cc]",
|
||||
},
|
||||
"unit-2": {
|
||||
tile: "from-[#29c6c5] to-[#0f8d8c]",
|
||||
unitCard: "border-[#89e5dd] bg-[#eafffb]",
|
||||
chip: "bg-[#0f8d8c]",
|
||||
},
|
||||
"unit-3": {
|
||||
tile: "from-[#ffab55] to-[#e97617]",
|
||||
unitCard: "border-[#ffd2a3] bg-[#fff4e8]",
|
||||
chip: "bg-[#d26a17]",
|
||||
},
|
||||
"unit-4": {
|
||||
tile: "from-[#ff5f85] to-[#d11b56]",
|
||||
unitCard: "border-[#ffb2c7] bg-[#fff0f4]",
|
||||
chip: "bg-[#c6174e]",
|
||||
},
|
||||
};
|
||||
|
||||
const topicTiles = [
|
||||
"from-[#4e95ff] via-[#357fe9] to-[#1f63ea]",
|
||||
"from-[#2ac3be] via-[#1da8a3] to-[#0f8d8c]",
|
||||
"from-[#ffb067] via-[#f2913a] to-[#d86e16]",
|
||||
"from-[#ff6f98] via-[#ef3d72] to-[#cb1c54]",
|
||||
"from-[#7d95ff] via-[#6078f2] to-[#3f56d9]",
|
||||
"from-[#4ccf7b] via-[#2fb45f] to-[#1f944b]",
|
||||
"from-[#ff8f8f] via-[#f26b6b] to-[#d94545]",
|
||||
"from-[#5eb7ff] via-[#3f99ef] to-[#2a7fda]",
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const allTopics = curriculum.flatMap((unit) =>
|
||||
unit.topics.map((topic) => ({
|
||||
unit,
|
||||
topic,
|
||||
})),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
<div className="playground-bg flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="playground-frame mx-auto w-full max-w-6xl flex-1 px-3 pb-10 sm:px-5">
|
||||
<section className="mt-4 rounded-md border-2 border-[#1f50bf] bg-[#f1f6ff] p-4 sm:p-6">
|
||||
<p className="text-center text-sm font-bold text-[#26438b]">
|
||||
Interactive maths practice for secondary school students
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<h1 className="mt-2 text-center text-3xl font-extrabold text-[#17367d] sm:text-5xl">
|
||||
Math Topics Students Love to Explore
|
||||
</h1>
|
||||
<p className="mx-auto mt-3 max-w-3xl text-center text-sm font-semibold text-[#33508e] sm:text-base">
|
||||
Explore each topic with visual examples, short explanations, and guided lessons.
|
||||
Pick a unit, jump into a topic, and start solving.
|
||||
</p>
|
||||
<div className="mt-5 flex flex-wrap items-center justify-center gap-3">
|
||||
<Link
|
||||
href="/lessons"
|
||||
className="rounded-sm bg-[#e6503e] px-5 py-2.5 text-sm font-extrabold text-white shadow-md transition-colors hover:bg-[#cc4231]"
|
||||
>
|
||||
Browse Lessons
|
||||
</Link>
|
||||
<Link
|
||||
href="/practice"
|
||||
className="rounded-sm bg-[#0e9d50] px-5 py-2.5 text-sm font-extrabold text-white shadow-md transition-colors hover:bg-[#0c7f41]"
|
||||
>
|
||||
Start Practice
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-5">
|
||||
<h2 className="section-ribbon rounded-sm px-3 py-2 text-lg font-extrabold sm:text-xl">
|
||||
Unit Worlds
|
||||
</h2>
|
||||
<div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{curriculum.map((unit) => (
|
||||
<Link
|
||||
key={unit.slug}
|
||||
href={`/lessons/${unit.slug}`}
|
||||
className={`rounded-md border-2 p-3 transition-transform hover:-translate-y-0.5 ${unitStyles[unit.color].unitCard}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="text-lg font-extrabold text-[#142f75]">{unit.title}</h3>
|
||||
<span className={`rounded-full px-2 py-1 text-xs font-extrabold text-white ${unitStyles[unit.color].chip}`}>
|
||||
Unit {unit.number}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="section-ribbon rounded-sm px-3 py-2 text-lg font-extrabold sm:text-xl">
|
||||
Topic Explorer
|
||||
</h2>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
{allTopics.map(({ unit, topic }, index) => (
|
||||
<Link
|
||||
key={`${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"
|
||||
>
|
||||
<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]}`}>
|
||||
<span className="w-fit rounded-sm bg-black/25 px-1.5 py-0.5 text-[10px] font-extrabold uppercase tracking-wide">
|
||||
Week {topic.week}
|
||||
</span>
|
||||
<span className="text-center text-xs font-extrabold leading-tight">
|
||||
{topic.shortTitle}
|
||||
</span>
|
||||
</div>
|
||||
<p className="min-h-[2.5rem] text-xs font-extrabold text-[#193981]">
|
||||
{topic.title}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user