Rotimi Best
2a82abfa21
Full spec for ordered, sequentially unlocked, bundle-priced learning paths, plus 16 clickable prototypes (public org site, learner LMS, and teacher workspace) built on the packages/ui tokens and the minimal org-landing theme. The prototypes are the UX source of truth; start at prototypes/learning-paths/index.html. Also adds the write-prd skill codifying the clarify -> write -> prototype workflow.
156 lines
9.4 KiB
HTML
156 lines
9.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Learning Paths — Acme Academy</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="landing-theme.css" />
|
||
<script>
|
||
if (localStorage.cioTheme === 'dark' || (!localStorage.cioTheme && matchMedia('(prefers-color-scheme: dark)').matches))
|
||
document.documentElement.classList.add('dark');
|
||
</script>
|
||
<style>
|
||
.compact-hero { padding: 52px 0 44px; }
|
||
.compact-hero h1 { font-size: clamp(28px, 4.5vw, 40px); }
|
||
.search { max-width: 560px; margin: 0 auto; position: relative; }
|
||
.search input {
|
||
width: 100%; font: inherit; font-size: 15px; padding: 12px 16px 12px 44px;
|
||
border: 1px solid var(--landing-border); background: var(--landing-card); color: var(--landing-fg);
|
||
border-radius: var(--landing-radius-button); outline: none;
|
||
}
|
||
.search input:focus { border-color: var(--landing-accent); }
|
||
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke-width: 2; color: var(--landing-fg-muted); }
|
||
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; padding: 40px 0 72px; }
|
||
.filters { position: sticky; top: 20px; align-self: start; padding: 20px; }
|
||
.filters h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--landing-fg-muted); font-weight: 600; margin: 0 0 10px; }
|
||
.filters .grp { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--landing-border); }
|
||
.filters .grp:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
||
.f-opt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--landing-border); padding: 8px 12px; font-size: 14px; margin-bottom: 6px; cursor: pointer; border-radius: 6px; }
|
||
.f-opt:hover { background: var(--landing-card-soft); }
|
||
.f-opt input { accent-color: var(--landing-accent); margin: 0; }
|
||
.f-opt .n { margin-left: auto; font-size: 12px; color: var(--landing-fg-muted); }
|
||
.results { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
|
||
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .filters { position: static; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="lp-nav-outer">
|
||
<nav class="lp-nav">
|
||
<a class="lp-nav-brand" href="org-landing.html"><span class="lp-nav-logo">A</span>Acme Academy</a>
|
||
<div class="lp-nav-links">
|
||
<a class="active" href="public-paths.html">Learning Paths</a>
|
||
<a href="org-landing.html#courses">Courses</a>
|
||
<a class="lp-nav-auth" href="lms-home.html">Login</a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<header class="lp-hero compact-hero">
|
||
<div class="lp-hero-dots"></div>
|
||
<div class="lp-hero-inner">
|
||
<h1>Learning Paths</h1>
|
||
<p class="sub" style="margin-bottom: 26px">Guided multi-course tracks with one enrollment, ordered courses, and a certificate at the end.</p>
|
||
<div class="search">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input placeholder="Search learning paths…" />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="lp-wrap layout">
|
||
<!-- filters -->
|
||
<aside class="lp-card filters">
|
||
<div class="grp">
|
||
<h3>Topic</h3>
|
||
<label class="f-opt"><input type="checkbox" checked />Engineering<span class="n tnum">1</span></label>
|
||
<label class="f-opt"><input type="checkbox" checked />Data<span class="n tnum">1</span></label>
|
||
<label class="f-opt"><input type="checkbox" checked />Product<span class="n tnum">1</span></label>
|
||
</div>
|
||
<div class="grp">
|
||
<h3>Pricing</h3>
|
||
<label class="f-opt"><input type="checkbox" checked />Paid<span class="n tnum">3</span></label>
|
||
<label class="f-opt"><input type="checkbox" />Free<span class="n tnum">0</span></label>
|
||
</div>
|
||
<div class="grp">
|
||
<h3>Length</h3>
|
||
<label class="f-opt"><input type="checkbox" />Under 20 hours<span class="n tnum">1</span></label>
|
||
<label class="f-opt"><input type="checkbox" />20–40 hours<span class="n tnum">2</span></label>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- results -->
|
||
<div class="results">
|
||
<a class="lp-card lp-course-card" href="public-path.html">
|
||
<span class="lp-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Learning Path</span>
|
||
<h3>Frontend Engineering Bootcamp</h3>
|
||
<p class="desc">Five courses, one path — from your first HTML tag to a deployed React capstone. Learn in order, build real projects, earn a certificate.</p>
|
||
<div class="lp-meta-row">
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>5 courses</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>~38 hours</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>942 enrolled</span>
|
||
<span class="lp-save tnum">Save $81</span>
|
||
<span class="price tnum">$199 <s>$280</s></span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="lp-card lp-course-card" href="public-path.html">
|
||
<span class="lp-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Learning Path</span>
|
||
<h3>Data Science with Python</h3>
|
||
<p class="desc">From Python basics to applied machine learning — pandas, visualization, and a real analysis project, in a fixed order that builds week over week.</p>
|
||
<div class="lp-meta-row">
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>4 courses</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>~30 hours</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>418 enrolled</span>
|
||
<span class="lp-save tnum">Save $53</span>
|
||
<span class="price tnum">$159 <s>$212</s></span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="lp-card lp-course-card" href="public-path.html">
|
||
<span class="lp-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Learning Path</span>
|
||
<h3>Product Management Fundamentals</h3>
|
||
<p class="desc">Discovery, prioritization, delivery, and stakeholder craft — a five-course track for new and aspiring PMs.</p>
|
||
<div class="lp-meta-row">
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>5 courses</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>~18 hours</span>
|
||
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>207 enrolled</span>
|
||
<span class="lp-save tnum">Save $46</span>
|
||
<span class="price tnum">$129 <s>$175</s></span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="lp-footer">
|
||
<div class="lp-wrap lp-footer-grid">
|
||
<div>
|
||
<div class="brand"><span class="lp-nav-logo" style="width: 26px; height: 26px; font-size: 12px">A</span>Acme Academy</div>
|
||
<p class="copy">© 2026 Acme Academy</p>
|
||
</div>
|
||
<div>
|
||
<h4>Learn</h4>
|
||
<a href="public-paths.html">Learning Paths</a>
|
||
<a href="org-landing.html#courses">Courses</a>
|
||
</div>
|
||
<div>
|
||
<h4>Academy</h4>
|
||
<a href="#">About</a>
|
||
<a href="lms-home.html">Login</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<button class="lp-theme-btn" id="theme" title="Toggle theme" aria-label="Toggle theme">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||
</button>
|
||
|
||
<script>
|
||
document.getElementById('theme').onclick = () => {
|
||
const dark = document.documentElement.classList.toggle('dark');
|
||
localStorage.cioTheme = dark ? 'dark' : 'light';
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|