Cap landing-page Early Beginner teaser to six subjects
This commit is contained in:
Dan committed
1 parent
52363fc107
commit
4b0807719e
1 file changed
+124
-121
+124
-121
@@ -1,121 +1,124 @@
|
||||
import Link from "next/link";
|
||||
import SiteNav from "@/components/SiteNav";
|
||||
import FishSlideshow from "@/components/FishSlideshow";
|
||||
import { LEVELS, getSubjects, FISH_OUTLINE_LESSON, FISH_DETAIL_LESSON } from "@/lib/curriculum";
|
||||
|
||||
const FREE_SLUG = "fish-outline";
|
||||
|
||||
export default function Home() {
|
||||
// Build a coloring-book "video" preview from the fish outline + detail lines
|
||||
const fishSteps = [...FISH_OUTLINE_LESSON.steps, ...FISH_DETAIL_LESSON.steps];
|
||||
let cum = "";
|
||||
const slides = fishSteps.map((s, i) => {
|
||||
cum += (s.lines || []).join("\n") + "\n";
|
||||
return { n: i + 1, title: s.title, instruction: s.instruction, cumulativeSvg: cum };
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<main>
|
||||
<section className="section">
|
||||
<div className="container" style={{ textAlign: "center" }}>
|
||||
<div className="pill role" style={{ marginBottom: 14 }}>🆓 Free & open source · 🔒 No data collected, ever</div>
|
||||
<h1>Learn to draw, one line at a time</h1>
|
||||
<p className="muted" style={{ fontSize: "1.2rem", maxWidth: 640, margin: "0 auto 24px" }}>
|
||||
DrawIt teaches kids to draw with simple, friendly steps — built for iPads and tablets. Each
|
||||
picture has an <strong>Outline</strong> lesson, a <strong>Details</strong> lesson, and a fun
|
||||
<strong> Color it!</strong> lesson. <strong>The first lesson is free</strong> — create an account to unlock the rest.
|
||||
</p>
|
||||
<div className="row" style={{ justifyContent: "center" }}>
|
||||
<Link href={`/learn/early-beginner/${FREE_SLUG}`} className="btn big">🐟 Try the first lesson free</Link>
|
||||
<Link href="/signup" className="btn secondary big">Create a free account</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" style={{ background: "var(--surface)", borderBlock: "1px solid var(--line)" }}>
|
||||
<div className="container">
|
||||
<h2 className="center">Watch it drawn, line by line 🐟</h2>
|
||||
<p className="center muted" style={{ maxWidth: 560, margin: "0 auto 26px" }}>
|
||||
Lessons draw each line slowly so kids can follow along, like a coloring book that builds itself.
|
||||
</p>
|
||||
<FishSlideshow steps={slides} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="center">Start free — unlock everything with an account</h2>
|
||||
<p className="center muted" style={{ maxWidth: 600, margin: "0 auto 26px" }}>
|
||||
The first lesson (Fish → Outline) is free to try. A free account unlocks the rest, saves your
|
||||
progress, and lets you earn badges and keep your drawings.
|
||||
</p>
|
||||
<div className="stack">
|
||||
{LEVELS.map((lvl, idx) => {
|
||||
const subjects = getSubjects(lvl.key);
|
||||
const isFirst = lvl.key === "early-beginner";
|
||||
return (
|
||||
<div className="card" key={lvl.key}>
|
||||
<div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h3 style={{ margin: 0 }}>{lvl.emoji} {idx + 1}. {lvl.name}</h3>
|
||||
{!isFirst && <span className="pill pending">🔒 Account needed</span>}
|
||||
</div>
|
||||
<p className="muted" style={{ marginTop: 6 }}>{lvl.blurb}</p>
|
||||
{isFirst && subjects.length > 0 && (
|
||||
<div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", marginTop: 8 }}>
|
||||
{subjects.map((subj) => {
|
||||
const first = subj.lessons[0];
|
||||
const free = first.slug === FREE_SLUG;
|
||||
return (
|
||||
<Link key={subj.key} href={free ? `/learn/${first.level}/${first.slug}` : "/signup"} style={card(!free)}>
|
||||
<span style={tag(free)}>{free ? "Free" : "🔒"}</span>
|
||||
<div style={{ fontSize: "1.8rem" }}>{subj.emoji}</div>
|
||||
<strong style={{ display: "block", paddingRight: 40 }}>{subj.name}</strong>
|
||||
<p className="muted" style={{ margin: "4px 0 0", fontSize: "0.85rem" }}>
|
||||
{free ? "Outline · free to try" : "Create an account to unlock"}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{!isFirst && (
|
||||
<Link href="/signup" style={{ ...card(true), marginTop: 8, display: "block" }}>
|
||||
<span style={tag(false)}>🔒</span>
|
||||
<strong>Unlock {lvl.name}</strong>
|
||||
<p className="muted" style={{ margin: "4px 0 0", fontSize: "0.85rem" }}>Create a free account to explore.</p>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="center" style={{ marginTop: 26 }}>
|
||||
<Link href="/signup" className="btn big">Create a free account</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--line)" }}>
|
||||
<div className="container">
|
||||
<h2 className="center">How DrawIt works</h2>
|
||||
<div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", marginTop: 18 }}>
|
||||
<div className="card"><h3>✏️ Outline → Details</h3><p className="muted">Trace the coloring-book outline, then add the details that bring it to life.</p></div>
|
||||
<div className="card"><h3>🎨 Color it in</h3><p className="muted">Finish with the coloring studio — color, shade, and make it your own.</p></div>
|
||||
<div className="card"><h3>🔒 Private by design</h3><p className="muted">No analytics, no trackers, no data sold or shared. Just drawing.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer className="site">DrawIt · Free & open source · No data collected. Made for young artists. 🎨</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function card(locked: boolean): React.CSSProperties {
|
||||
return { position: "relative", textDecoration: "none", color: "inherit", background: "var(--surface)", borderRadius: "var(--radius)", border: "2px solid var(--line)", padding: 18, opacity: locked ? 0.6 : 1, filter: locked ? "grayscale(0.7)" : "none" };
|
||||
}
|
||||
function tag(free: boolean): React.CSSProperties {
|
||||
return { position: "absolute", top: 12, right: 12, fontWeight: 800, fontSize: "0.8rem", padding: "3px 10px", borderRadius: 999, background: free ? "#e8f7ee" : "#f0ebf7", color: free ? "#1f7a45" : "var(--ink-soft)" };
|
||||
}
|
||||
import Link from "next/link";
|
||||
import SiteNav from "@/components/SiteNav";
|
||||
import FishSlideshow from "@/components/FishSlideshow";
|
||||
import { LEVELS, getSubjects, FISH_OUTLINE_LESSON, FISH_DETAIL_LESSON } from "@/lib/curriculum";
|
||||
|
||||
const FREE_SLUG = "fish-outline";
|
||||
|
||||
export default function Home() {
|
||||
// Build a coloring-book "video" preview from the fish outline + detail lines
|
||||
const fishSteps = [...FISH_OUTLINE_LESSON.steps, ...FISH_DETAIL_LESSON.steps];
|
||||
let cum = "";
|
||||
const slides = fishSteps.map((s, i) => {
|
||||
cum += (s.lines || []).join("\n") + "\n";
|
||||
return { n: i + 1, title: s.title, instruction: s.instruction, cumulativeSvg: cum };
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<main>
|
||||
<section className="section">
|
||||
<div className="container" style={{ textAlign: "center" }}>
|
||||
<div className="pill role" style={{ marginBottom: 14 }}>🆓 Free & open source · 🔒 No data collected, ever</div>
|
||||
<h1>Learn to draw, one line at a time</h1>
|
||||
<p className="muted" style={{ fontSize: "1.2rem", maxWidth: 640, margin: "0 auto 24px" }}>
|
||||
DrawIt teaches kids to draw with simple, friendly steps — built for iPads and tablets. Each
|
||||
picture has an <strong>Outline</strong> lesson, a <strong>Details</strong> lesson, and a fun
|
||||
<strong> Color it!</strong> lesson. <strong>The first lesson is free</strong> — create an account to unlock the rest.
|
||||
</p>
|
||||
<div className="row" style={{ justifyContent: "center" }}>
|
||||
<Link href={`/learn/early-beginner/${FREE_SLUG}`} className="btn big">🐟 Try the first lesson free</Link>
|
||||
<Link href="/signup" className="btn secondary big">Create a free account</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" style={{ background: "var(--surface)", borderBlock: "1px solid var(--line)" }}>
|
||||
<div className="container">
|
||||
<h2 className="center">Watch it drawn, line by line 🐟</h2>
|
||||
<p className="center muted" style={{ maxWidth: 560, margin: "0 auto 26px" }}>
|
||||
Lessons draw each line slowly so kids can follow along, like a coloring book that builds itself.
|
||||
</p>
|
||||
<FishSlideshow steps={slides} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="center">Start free — unlock everything with an account</h2>
|
||||
<p className="center muted" style={{ maxWidth: 600, margin: "0 auto 26px" }}>
|
||||
The first lesson (Fish → Outline) is free to try. A free account unlocks the rest, saves your
|
||||
progress, and lets you earn badges and keep your drawings.
|
||||
</p>
|
||||
<div className="stack">
|
||||
{LEVELS.map((lvl, idx) => {
|
||||
const subjects = getSubjects(lvl.key);
|
||||
const isFirst = lvl.key === "early-beginner";
|
||||
return (
|
||||
<div className="card" key={lvl.key}>
|
||||
<div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
|
||||
<h3 style={{ margin: 0 }}>{lvl.emoji} {idx + 1}. {lvl.name}</h3>
|
||||
{!isFirst && <span className="pill pending">🔒 Account needed</span>}
|
||||
</div>
|
||||
<p className="muted" style={{ marginTop: 6 }}>{lvl.blurb}</p>
|
||||
{isFirst && subjects.length > 0 && (
|
||||
<div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", marginTop: 8 }}>
|
||||
{subjects.slice(0, 6).map((subj) => {
|
||||
const first = subj.lessons[0];
|
||||
const free = first.slug === FREE_SLUG;
|
||||
return (
|
||||
<Link key={subj.key} href={free ? `/learn/${first.level}/${first.slug}` : "/signup"} style={card(!free)}>
|
||||
<span style={tag(free)}>{free ? "Free" : "🔒"}</span>
|
||||
<div style={{ fontSize: "1.8rem" }}>{subj.emoji}</div>
|
||||
<strong style={{ display: "block", paddingRight: 40 }}>{subj.name}</strong>
|
||||
<p className="muted" style={{ margin: "4px 0 0", fontSize: "0.85rem" }}>
|
||||
{free ? "Outline · free to try" : "Create an account to unlock"}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{isFirst && subjects.length > 6 && (
|
||||
<p className="muted" style={{ marginTop: 10, fontSize: "0.9rem" }}>…and lots more — shapes, animals, clothes, faces and more inside.</p>
|
||||
)}
|
||||
{!isFirst && (
|
||||
<Link href="/signup" style={{ ...card(true), marginTop: 8, display: "block" }}>
|
||||
<span style={tag(false)}>🔒</span>
|
||||
<strong>Unlock {lvl.name}</strong>
|
||||
<p className="muted" style={{ margin: "4px 0 0", fontSize: "0.85rem" }}>Create a free account to explore.</p>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="center" style={{ marginTop: 26 }}>
|
||||
<Link href="/signup" className="btn big">Create a free account</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--line)" }}>
|
||||
<div className="container">
|
||||
<h2 className="center">How DrawIt works</h2>
|
||||
<div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", marginTop: 18 }}>
|
||||
<div className="card"><h3>✏️ Outline → Details</h3><p className="muted">Trace the coloring-book outline, then add the details that bring it to life.</p></div>
|
||||
<div className="card"><h3>🎨 Color it in</h3><p className="muted">Finish with the coloring studio — color, shade, and make it your own.</p></div>
|
||||
<div className="card"><h3>🔒 Private by design</h3><p className="muted">No analytics, no trackers, no data sold or shared. Just drawing.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer className="site">DrawIt · Free & open source · No data collected. Made for young artists. 🎨</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function card(locked: boolean): React.CSSProperties {
|
||||
return { position: "relative", textDecoration: "none", color: "inherit", background: "var(--surface)", borderRadius: "var(--radius)", border: "2px solid var(--line)", padding: 18, opacity: locked ? 0.6 : 1, filter: locked ? "grayscale(0.7)" : "none" };
|
||||
}
|
||||
function tag(free: boolean): React.CSSProperties {
|
||||
return { position: "absolute", top: 12, right: 12, fontWeight: 800, fontSize: "0.8rem", padding: "3px 10px", borderRadius: 999, background: free ? "#e8f7ee" : "#f0ebf7", color: free ? "#1f7a45" : "var(--ink-soft)" };
|
||||
}
|
||||
Reference in new issue
Block a user