|
1 | 1 | import Link from "next/link"; |
2 | | -import { PageShell } from "@/components/site/page-shell"; |
| 2 | + |
| 3 | +const sections = [ |
| 4 | + { |
| 5 | + title: "Authoring", |
| 6 | + items: [ |
| 7 | + "Define course structure with concepts, sections, and dependencies.", |
| 8 | + "Review generated content before it reaches learners.", |
| 9 | + "Publish changes without rebuilding your own delivery platform.", |
| 10 | + ], |
| 11 | + }, |
| 12 | + { |
| 13 | + title: "Operations", |
| 14 | + items: [ |
| 15 | + "Manage brands, API keys, and learner billing from the creator app.", |
| 16 | + "Use one platform runtime for learner delivery and revenue operations.", |
| 17 | + "Keep the flagship site separate from the white-label learner surfaces.", |
| 18 | + ], |
| 19 | + }, |
| 20 | +]; |
| 21 | + |
| 22 | +const docLinks = [ |
| 23 | + { title: "CLI Reference", href: "https://graspful.ai/docs/cli", description: "Install, authenticate, and run course commands from your terminal." }, |
| 24 | + { title: "Course Schema", href: "https://graspful.ai/docs/course-schema", description: "YAML structure for courses, concepts, knowledge points, and problems." }, |
| 25 | + { title: "Brand Schema", href: "https://graspful.ai/docs/brand-schema", description: "Configure your academy theme, domain, and landing page." }, |
| 26 | + { title: "Glossary", href: "https://graspful.ai/docs/glossary", description: "Key terms: concepts, knowledge points, mastery, diagnostics, and more." }, |
| 27 | +]; |
3 | 28 |
|
4 | 29 | export default function DocsPage() { |
5 | 30 | return ( |
6 | | - <PageShell |
7 | | - eyebrow="Documentation" |
8 | | - title="Guidance for creator teams" |
9 | | - intro="Use Graspful with structured course definitions, source material, and AI-assisted authoring workflows." |
10 | | - > |
11 | | - <div> |
12 | | - <h2 className="section-heading">Authoring</h2> |
13 | | - <ul className="plain-list"> |
14 | | - <li>Define course structure with concepts, sections, and dependencies.</li> |
15 | | - <li>Review generated content before it reaches learners.</li> |
16 | | - <li>Publish changes without rebuilding your own delivery platform.</li> |
17 | | - </ul> |
18 | | - </div> |
19 | | - <div> |
20 | | - <h2 className="section-heading">Operations</h2> |
21 | | - <ul className="plain-list"> |
22 | | - <li>Manage brands, API keys, and learner billing from the creator app.</li> |
23 | | - <li>Use one platform runtime for learner delivery and revenue operations.</li> |
24 | | - <li>Keep the flagship site separate from the white-label learner surfaces.</li> |
25 | | - </ul> |
26 | | - <Link href="/docs" className="button"> |
27 | | - Open product docs |
28 | | - </Link> |
29 | | - </div> |
30 | | - </PageShell> |
| 31 | + <main id="main-content" className="pt-24"> |
| 32 | + <section className="py-16 bg-muted/50"> |
| 33 | + <div className="mx-auto max-w-6xl px-6"> |
| 34 | + <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2"> |
| 35 | + Documentation |
| 36 | + </p> |
| 37 | + <h1 className="text-4xl font-bold tracking-tight text-foreground mb-4"> |
| 38 | + Getting started |
| 39 | + </h1> |
| 40 | + <p className="text-lg text-muted-foreground max-w-2xl"> |
| 41 | + Everything you need to build and publish adaptive courses with |
| 42 | + Graspful. |
| 43 | + </p> |
| 44 | + </div> |
| 45 | + </section> |
| 46 | + <section className="py-16"> |
| 47 | + <div className="mx-auto max-w-6xl px-6"> |
| 48 | + <div className="grid gap-5 sm:grid-cols-2 mb-12"> |
| 49 | + {sections.map((section) => ( |
| 50 | + <div |
| 51 | + key={section.title} |
| 52 | + className="rounded-2xl border border-border/50 bg-card p-10 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg" |
| 53 | + > |
| 54 | + <h2 className="text-lg font-semibold text-foreground mb-4"> |
| 55 | + {section.title} |
| 56 | + </h2> |
| 57 | + <ul className="space-y-2 text-muted-foreground text-sm leading-relaxed list-none p-0 m-0"> |
| 58 | + {section.items.map((item) => ( |
| 59 | + <li key={item} className="flex gap-2"> |
| 60 | + <span className="text-primary shrink-0">✓</span> |
| 61 | + {item} |
| 62 | + </li> |
| 63 | + ))} |
| 64 | + </ul> |
| 65 | + </div> |
| 66 | + ))} |
| 67 | + </div> |
| 68 | + <h2 className="text-2xl font-bold tracking-tight text-foreground mb-6"> |
| 69 | + Reference |
| 70 | + </h2> |
| 71 | + <div className="grid gap-5 sm:grid-cols-2"> |
| 72 | + {docLinks.map((doc) => ( |
| 73 | + <Link |
| 74 | + key={doc.href} |
| 75 | + href={doc.href} |
| 76 | + className="rounded-2xl border border-border/50 bg-card p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg no-underline group" |
| 77 | + > |
| 78 | + <h3 className="text-base font-semibold text-foreground mb-1 group-hover:text-primary transition-colors"> |
| 79 | + {doc.title} → |
| 80 | + </h3> |
| 81 | + <p className="text-sm text-muted-foreground leading-relaxed"> |
| 82 | + {doc.description} |
| 83 | + </p> |
| 84 | + </Link> |
| 85 | + ))} |
| 86 | + </div> |
| 87 | + </div> |
| 88 | + </section> |
| 89 | + </main> |
31 | 90 | ); |
32 | 91 | } |
0 commit comments