From ccf76fed0a4e0662111eb88e967d20db3b18170d Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 14 Oct 2025 03:38:50 +0000 Subject: [PATCH] Create curriculum docs page cgen-edee2208eca54ee59020c166f9b42713 --- client/pages/docs/DocsCurriculum.tsx | 612 +++++++++++++++++++++++++++ 1 file changed, 612 insertions(+) create mode 100644 client/pages/docs/DocsCurriculum.tsx diff --git a/client/pages/docs/DocsCurriculum.tsx b/client/pages/docs/DocsCurriculum.tsx new file mode 100644 index 00000000..0d928ec6 --- /dev/null +++ b/client/pages/docs/DocsCurriculum.tsx @@ -0,0 +1,612 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { Badge } from "@/components/ui/badge"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { Link } from "react-router-dom"; +import { + ArrowRight, + BookOpenCheck, + Calculator, + Compass, + GraduationCap, + Layers, + Lightbulb, + ListChecks, + Sparkles, + Target, + Timer, +} from "lucide-react"; + +interface CurriculumLesson { + title: string; + summary: string; + format: "article" | "video" | "interactive" | "assignment"; + path: string; + duration: string; +} + +interface CurriculumModule { + id: string; + title: string; + description: string; + duration: string; + level: "foundation" | "builder" | "advanced"; + focus: string[]; + learningGoals: string[]; + lessons: CurriculumLesson[]; + capstone?: { + title: string; + summary: string; + brief: string; + }; +} + +const moduleLevelStyles: Record = { + foundation: "bg-emerald-500/10 text-emerald-200 border-emerald-500/40", + builder: "bg-sky-500/10 text-sky-200 border-sky-500/40", + advanced: "bg-purple-500/10 text-purple-200 border-purple-500/40", +}; + +const lessonFormatCopy: Record = { + article: "Article", + video: "Video Walkthrough", + interactive: "Interactive Lab", + assignment: "Hands-on Assignment", +}; + +const curriculumModules: CurriculumModule[] = [ + { + id: "foundations", + title: "AeThex Foundations", + description: + "Establish core mastery of the AeThex platform, from environment setup to shipping your first interactive experience.", + duration: "2.5 hrs", + level: "foundation", + focus: ["Workspace onboarding", "Project scaffolding", "Passport + identity"], + learningGoals: [ + "Configure a production-ready AeThex project", + "Understand AeThex Passport, identity, and role models", + "Publish your first interactive deployment", + ], + lessons: [ + { + title: "Platform Orientation", + summary: + "Tour the AeThex workspace, dashboards, and navigation patterns.", + format: "video", + path: "/docs/getting-started", + duration: "20 min", + }, + { + title: "Project Blueprint Setup", + summary: + "Create a new AeThex project, connect Supabase, and configure environments.", + format: "article", + path: "/docs/getting-started#setup-workflow", + duration: "35 min", + }, + { + title: "Passport Fundamentals", + summary: + "Implement profiles, achievements, and realm roles using AeThex Passport APIs.", + format: "interactive", + path: "/docs/platform#identity-and-passports", + duration: "40 min", + }, + { + title: "Launch Checklist", + summary: + "Deploy to Netlify/Vercel and validate observability before inviting users.", + format: "assignment", + path: "/docs/platform#deployments", + duration: "35 min", + }, + ], + capstone: { + title: "Foundations Launch Sprint", + summary: + "Ship a small but complete AeThex experience showcasing authentication, feed updates, and deployment.", + brief: + "Assemble a two-week plan outlining features, success metrics, and deployment artifacts for stakeholders.", + }, + }, + { + id: "builder", + title: "Product Builder Track", + description: + "Design and scale collaborative communities with AeThex real-time tooling, automations, and membership flows.", + duration: "3 hrs", + level: "builder", + focus: ["Community feed", "Workflow automations", "Admin control center"], + learningGoals: [ + "Compose a modular community feed that reacts to Supabase events", + "Automate onboarding with roles, achievements, and curriculum progression", + "Operate with observability dashboards and admin tooling", + ], + lessons: [ + { + title: "Community Signal Architecture", + summary: + "Use AeThex feed primitives and Supabase realtime to orchestrate community updates.", + format: "article", + path: "/docs/examples#community-system", + duration: "45 min", + }, + { + title: "Automation + Achievements", + summary: + "Award achievements, loyalty, and XP with the AeThex achievements API and workflows.", + format: "interactive", + path: "/docs/platform#achievements-and-xp", + duration: "35 min", + }, + { + title: "Admin Command Center", + summary: + "Extend the AeThex admin panel with custom moderation queues and analytics.", + format: "video", + path: "/docs/platform#admin-suite", + duration: "30 min", + }, + { + title: "Signals & Telemetry", + summary: + "Instrument logging, error tracking, and telemetry to monitor user health.", + format: "article", + path: "/docs/integrations#observability", + duration: "30 min", + }, + ], + capstone: { + title: "Community Activation Plan", + summary: + "Design a 30-day activation playbook tying curriculum progress to community KPIs.", + brief: + "Deliver a Notion or Builder CMS doc with milestones, safety checks, and escalation paths.", + }, + }, + { + id: "advanced", + title: "Advanced Ops & Ecosystems", + description: + "Engineer large-scale AeThex deployments that blend AI-guided creation, marketplace integrations, and monetization.", + duration: "3.5 hrs", + level: "advanced", + focus: ["AI pipelines", "Marketplace", "Monetization"], + learningGoals: [ + "Compose AI assistive flows with AeThex Labs tooling", + "Integrate third-party marketplaces and billing systems", + "Secure and monitor enterprise-grade deployments", + ], + lessons: [ + { + title: "AI Studio Workflows", + summary: + "Orchestrate AI-assisted creation using AeThex Labs pipelines and guardrails.", + format: "interactive", + path: "/docs/labs", + duration: "50 min", + }, + { + title: "Marketplace + Billing", + summary: + "Connect Neon/Postgres data, Stripe monetization, and Zapier automations.", + format: "article", + path: "/docs/integrations#billing-automation", + duration: "40 min", + }, + { + title: "Enterprise Security Patterns", + summary: + "Apply RBAC, audit trails, and secret rotation with AeThex security primitives.", + format: "video", + path: "/docs/platform#security", + duration: "35 min", + }, + { + title: "Reliability Playbooks", + summary: + "Craft on-call runbooks tied to AeThex Status, SLO monitors, and incident response.", + format: "assignment", + path: "/docs/status", + duration: "40 min", + }, + ], + capstone: { + title: "Ecosystem Expansion Brief", + summary: + "Design a new revenue program connecting creators, partners, and automation pipelines.", + brief: + "Submit a partner enablement checklist, monetization targets, and KPI dashboards in AeThex.", + }, + }, +]; + +const curriculumHighlights = [ + { + title: "Structured tracks", + description: "Modular progression from foundations to advanced operations.", + icon: Layers, + }, + { + title: "Project-based milestones", + description: "Each module culminates in a capstone aligned to AeThex deliverables.", + icon: Target, + }, + { + title: "Built with real data", + description: "Lessons reference live dashboards, Passport identities, and Supabase schemas.", + icon: Lightbulb, + }, +]; + +const curriculumStats = [ + { + label: "Total guided time", + value: "9 hrs", + icon: Timer, + }, + { + label: "Capstone projects", + value: "3", + icon: ListChecks, + }, + { + label: "Certifications unlocked", + value: "AeThex Builder, Operator", + icon: GraduationCap, + }, +]; + +const supplementalResources = [ + { + title: "AeThex Playbooks", + description: "Download ready-made GTM, community, and growth playbooks to complement each module.", + cta: "Browse playbooks", + href: "/docs/examples#playbooks", + }, + { + title: "Live Mentorship Sessions", + description: "Join weekly office hours with AeThex engineers and producers to review your progress.", + cta: "Reserve a seat", + href: "/mentorship", + }, + { + title: "Certification Exams", + description: "Validate mastery with AeThex Builder and Operator certifications once you finish the track.", + cta: "View certification guide", + href: "/docs/platform#certification", + }, +]; + +export default function DocsCurriculum() { + return ( +
+
+
+
+
+ + AeThex Curriculum + +

+ Structured learning paths for builders, operators, and labs teams +

+

+ Progress through sequenced modules that combine documentation, interactive labs, and + project-based assignments. Graduate with deployment-ready AeThex experiences and + certification badges. +

+
+
+ {curriculumStats.map((stat) => { + const Icon = stat.icon; + return ( + + + + + + + {stat.label} + + + + {stat.value} + + + ); + })} +
+
+
+ +
+ + + + Curriculum roadmap + + + Expand each module to view lessons, formats, and key objectives. Every module ends with a + capstone milestone that prepares you for certification. + + + + + {curriculumModules.map((module) => ( + + +
+
+ + {module.level === "foundation" + ? "Foundation" + : module.level === "builder" + ? "Builder" + : "Advanced"} + + + {module.duration} + +
+
+

+ {module.title} +

+

{module.description}

+
+
+ + +
+
+

+ Learning focus +

+
+ {module.focus.map((focusItem) => ( + + {focusItem} + + ))} +
+
+
+

+ Lesson sequence +

+
+ {module.lessons.map((lesson, index) => ( +
+
+
+

+ Lesson {index + 1} +

+
+ {lesson.title} +
+
+
+ + {lessonFormatCopy[lesson.format]} + + {lesson.duration} +
+
+

+ {lesson.summary} +

+ +
+ ))} +
+
+
+

+ Capstone challenge +

+ {module.capstone ? ( +
+

+ {module.capstone.title} +

+

+ {module.capstone.summary} +

+

+ {module.capstone.brief} +

+
+ ) : ( +

+ Coming soon — the AeThex team is curating the next advanced mission. +

+ )} +
+
+ + + ))} + + + + +
+ + + + Why this curriculum works + + + Blending documentation, live labs, and project work keeps teams aligned and measurable. + + + + {curriculumHighlights.map((highlight) => { + const Icon = highlight.icon; + return ( +
+ + + +
+

+ {highlight.title} +

+

+ {highlight.description} +

+
+
+ ); + })} + + + + + + + Supplemental resources + + + Extend the curriculum with live mentorship, playbooks, and certification tracks. + + + + {supplementalResources.map((resource) => ( +
+

{resource.title}

+

{resource.description}

+ +
+ ))} + + + + + + Team readiness checklist + + Confirm prerequisites before starting the Builder or Advanced tracks. + + + +
+ +
+

Account + billing configured

+

+ Ensure Supabase, billing providers, and environment variables are ready for production load. +

+
+
+
+ +
+

Core team enrolled

+

+ Identify product, engineering, and operations owners to steward each module. +

+
+
+
+ +
+

Backlog aligned to modules

+

+ Map existing sprints to module milestones so curriculum progress mirrors roadmap delivery. +

+
+
+ + +
+
+ + + +
+

Ready to certify your AeThex team?

+

+ Track your completion inside the AeThex admin panel, then schedule a certification review with the + AeThex Labs crew. We award badges directly to your Passport once requirements are verified. +

+
+ + +
+
+
+ ); +}