docs: add Academy learning surface

Adds the Academy section to the docs: video-first lessons (self-hosted MP4 on
Vercel Blob), organized into Workflows, Agents, Tables, Files, and Knowledge
Bases, each linking back to the reference docs. Lessons use a course layout
(hero video with chapter seek, "what you'll learn", block diagrams).

Docs only — no runtime or auth changes. The content may move to a separate CMS
or its own site (academy.sim.ai) later; the docs are a starting point.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ouiliame

apps/docs/.gitignore

@@ -38,3 +38,6 @@ next-env.d.ts
 # Fumadocs
 /.source/ 
 .plans/
+
+# fumadocs generates .source dirs anywhere a source.config sits
+**/.source/

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -75,6 +75,9 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
   }
   const isOpenAPI = '_openapi' in data && data._openapi != null
   const isApiReference = slug?.some((s) => s === 'api-reference') ?? false
+  // Academy lessons are video-first: drop the "On this page" TOC and go full
+  // width so the lesson hero/video gets the room (chapters live in-page instead).
+  const isAcademy = slug?.[0] === 'academy'
 
   const pageTreeRecord = source.pageTree as Record<string, Root>
   const pageTree = pageTreeRecord[lang] ?? pageTreeRecord.en ?? Object.values(pageTreeRecord)[0]
@@ -197,18 +200,18 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
       />
       <DocsPage
         toc={data.toc}
-        full={data.full}
+        full={data.full || isAcademy}
         breadcrumb={{
           enabled: false,
         }}
         tableOfContent={{
           style: 'clerk',
-          enabled: true,
+          enabled: !isAcademy,
           single: false,
         }}
         tableOfContentPopover={{
           style: 'clerk',
-          enabled: true,
+          enabled: !isAcademy,
         }}
         footer={{
           enabled: true,

apps/docs/components/navbar/navbar.tsx

@@ -13,7 +13,13 @@ const NAV_TABS = [
   {
     label: 'Documentation',
     href: '/introduction',
-    match: (p: string) => !p.includes('/api-reference'),
+    match: (p: string) => !p.includes('/api-reference') && !p.includes('/academy'),
+    external: false,
+  },
+  {
+    label: 'Academy',
+    href: '/academy',
+    match: (p: string) => p.includes('/academy'),
     external: false,
   },
   {

apps/docs/components/ui/course-progress.tsx

@@ -0,0 +1,92 @@
+import { BookOpen, Check, CirclePlay, Clock } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Lesson {
+  title: string
+  /** e.g. "4:12". Omit to show "View" instead. */
+  duration?: string
+  /** Highlights the current lesson. */
+  active?: boolean
+  /** Renders a completed checkmark. */
+  done?: boolean
+}
+
+interface CourseProgressProps {
+  /** Course name shown as the panel heading. */
+  course: string
+  lessons: Lesson[]
+  /** e.g. "Approx. 18 min". */
+  durationLabel?: string
+  /** Completion percentage 0–100. */
+  progress?: number
+  className?: string
+}
+
+/** Right-rail course panel: lesson count, duration, progress bar, and lesson list. */
+export function CourseProgress({
+  course,
+  lessons,
+  durationLabel,
+  progress = 0,
+  className,
+}: CourseProgressProps) {
+  return (
+    <aside className={cn('rounded-xl border border-fd-border bg-fd-card/40 p-5', className)}>
+      <h2 className='mt-0 mb-3 font-semibold text-fd-foreground text-lg'>{course}</h2>
+
+      <div className='flex flex-wrap items-center gap-2 border-fd-border border-b pb-4 text-fd-muted-foreground text-xs'>
+        <span className='inline-flex items-center gap-1.5 rounded-md border border-fd-border px-2 py-1'>
+          <BookOpen className='size-3.5' />
+          {lessons.length} lessons
+        </span>
+        {durationLabel && (
+          <span className='inline-flex items-center gap-1.5 rounded-md border border-fd-border px-2 py-1'>
+            <Clock className='size-3.5' />
+            {durationLabel}
+          </span>
+        )}
+      </div>
+
+      <div className='py-4'>
+        <div className='mb-2 flex items-center justify-between text-sm'>
+          <span className='text-fd-foreground'>Your progress</span>
+          <span className='text-fd-muted-foreground'>{Math.min(100, Math.max(0, progress))}%</span>
+        </div>
+        <div className='h-1.5 w-full overflow-hidden rounded-full bg-fd-muted'>
+          <div
+            className='h-full rounded-full bg-[#33c482] transition-all'
+            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+          />
+        </div>
+      </div>
+
+      <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
+        {lessons.map((lesson) => (
+          <li
+            key={lesson.title}
+            className={cn(
+              'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm',
+              lesson.active
+                ? 'bg-fd-accent text-fd-foreground'
+                : 'text-fd-muted-foreground hover:bg-fd-accent/50'
+            )}
+          >
+            {lesson.done ? (
+              <Check className='size-4 shrink-0 text-[#33c482]' />
+            ) : (
+              <CirclePlay
+                className={cn('size-4 shrink-0', lesson.active && 'text-fd-foreground')}
+              />
+            )}
+            <span className={cn('flex-1 truncate', lesson.active && 'font-medium')}>
+              {lesson.title}
+            </span>
+            <span className='shrink-0 text-fd-muted-foreground text-xs tabular-nums'>
+              {lesson.duration ?? 'View'}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  )
+}

apps/docs/components/ui/video-chapters.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { CirclePlay } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/** Parse a chapter timestamp ("M:SS" or "H:MM:SS") into seconds. */
+function parseTime(time: string): number {
+  const parts = time.split(':').map(Number)
+  if (parts.some(Number.isNaN)) return 0
+  return parts.reduce((acc, n) => acc * 60 + n, 0)
+}
+
+interface Chapter {
+  /** Chapter label. */
+  title: string
+  /** Timestamp, e.g. "0:45". */
+  time?: string
+}
+
+interface VideoChaptersProps {
+  /** Panel heading. Defaults to "Chapters". */
+  title?: string
+  chapters: Chapter[]
+  className?: string
+}
+
+/**
+ * Right-rail panel listing the current video's chapters, styled to match the
+ * Academy's course panels. Rows are skip-to controls; they activate once the
+ * lesson's video is recorded.
+ */
+export function VideoChapters({ title = 'Chapters', chapters, className }: VideoChaptersProps) {
+  return (
+    <aside
+      className={cn('not-prose rounded-xl border border-fd-border bg-fd-card/40 p-5', className)}
+    >
+      <h2 className='mt-0 mb-3 font-semibold text-fd-foreground text-lg'>{title}</h2>
+      <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
+        {chapters.map((chapter) => (
+          <li key={chapter.title}>
+            <button
+              type='button'
+              disabled={chapter.time == null}
+              onClick={() => {
+                if (chapter.time == null) return
+                window.dispatchEvent(
+                  new CustomEvent('academy:seek', { detail: { time: parseTime(chapter.time) } })
+                )
+              }}
+              className='flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 text-left text-fd-muted-foreground text-sm transition-colors hover:bg-fd-accent/50 disabled:cursor-default disabled:hover:bg-transparent'
+            >
+              <CirclePlay className='mt-0.5 size-4 shrink-0' />
+              <span className='min-w-0 flex-1 break-words'>{chapter.title}</span>
+              {chapter.time && (
+                <span className='mt-0.5 shrink-0 text-fd-muted-foreground text-xs tabular-nums'>
+                  {chapter.time}
+                </span>
+              )}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  )
+}