From 0534b642353c0961194d7069329f731f0388a782 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 28 Jun 2026 14:16:55 -0700
Subject: [PATCH 1/3] improvement(docs): flatten the academy learn/chapters
 panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "What you will learn" and "Chapters" panels were filled, bordered
cards — the only boxed elements on the page. The docs design system is
explicitly flat: global.css strips fumadocs cards/callouts/card-grids to
transparent/divider-based, and the right-rail "On this page" TOC is small,
muted, and borderless.

- WhatYouWillLearn (inline): flat divider list like the FAQ, with a small
  panel label at the app's text scale instead of a page-h2-scale title
- VideoChapters (right rail): borderless, matching the TOC — small muted
  label + flat hover rows, no card chrome
---
 apps/docs/components/ui/video-chapters.tsx    | 16 +++++--------
 .../components/ui/what-you-will-learn.tsx     | 23 ++++++++-----------
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/apps/docs/components/ui/video-chapters.tsx b/apps/docs/components/ui/video-chapters.tsx
index 9a9ce3fba58..ff678fb62ba 100644
--- a/apps/docs/components/ui/video-chapters.tsx
+++ b/apps/docs/components/ui/video-chapters.tsx
@@ -26,9 +26,10 @@ interface VideoChaptersProps {
 }
 
 /**
- * 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.
+ * Right-rail list of the current video's chapters — flat and borderless to
+ * match the docs' "On this page" TOC (small muted label, hover-highlighted
+ * rows). Rows are skip-to controls; they activate once the lesson's video is
+ * recorded.
  */
 export function VideoChapters({ title = 'Chapters', chapters, className }: VideoChaptersProps) {
   // Chapters only seek when a VideoPlaceholder with a real video is on the page.
@@ -42,13 +43,8 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
   }, [])
 
   return (
-    <aside
-      className={cn(
-        'not-prose rounded-xl border border-[var(--border-1)] bg-[var(--surface-3)] p-5',
-        className
-      )}
-    >
-      <h2 className='mt-0 mb-3 font-semibold text-[var(--text-primary)] text-lg'>{title}</h2>
+    <aside className={cn('not-prose', className)}>
+      <p className='mb-2 px-2.5 font-medium text-[0.8125rem] text-[var(--text-muted)]'>{title}</p>
       <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
         {chapters.map((chapter) => (
           <li key={chapter.title}>
diff --git a/apps/docs/components/ui/what-you-will-learn.tsx b/apps/docs/components/ui/what-you-will-learn.tsx
index c8cbe6ce37c..f188285a8db 100644
--- a/apps/docs/components/ui/what-you-will-learn.tsx
+++ b/apps/docs/components/ui/what-you-will-learn.tsx
@@ -10,22 +10,19 @@ interface WhatYouWillLearnProps {
   className?: string
 }
 
-/** A bordered "What you will learn" card listing lesson takeaways. */
+/**
+ * "What you will learn" — a flat, divider-based callout matching the docs'
+ * card-flattening language (transparent, no filled box, like the FAQ list),
+ * with a small label at the app's panel-title scale rather than page-h2 scale.
+ */
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
-    <div
-      className={cn(
-        'not-prose rounded-xl border border-[var(--border-1)] bg-[var(--surface-3)] p-6',
-        className
-      )}
-    >
-      <h2 className='mt-0 mb-5 font-semibold text-[var(--text-primary)] text-xl'>
-        What you will learn
-      </h2>
-      <div className='flex flex-col gap-5'>
+    <div className={cn('not-prose', className)}>
+      <p className='mb-3 font-medium text-[var(--text-primary)] text-sm'>What you will learn</p>
+      <div className='border-[var(--border)] border-t'>
         {items.map((item) => (
-          <div key={item.title}>
-            <p className='mb-1 font-semibold text-[var(--text-primary)] text-sm'>{item.title}</p>
+          <div key={item.title} className='border-[var(--border)] border-b py-3.5'>
+            <p className='mb-1 font-medium text-[var(--text-primary)] text-sm'>{item.title}</p>
             <p className='m-0 text-[var(--text-secondary)] text-sm leading-relaxed'>{item.body}</p>
           </div>
         ))}

From 9316af5a46af1babdbb5a9abff857e1fced3dc78 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 28 Jun 2026 14:30:08 -0700
Subject: [PATCH 2/3] improvement(docs): drop the repeated per-row play icon
 from the chapters list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CirclePlay glyph repeated on every chapter row read as noise — a column
of identical icons down the rail. The "On this page" TOC this list mirrors
has no per-row icons; the timestamps already signal video chapters and the
hover highlight signals they're seekable. Rows are now text + time only.
---
 apps/docs/components/ui/video-chapters.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/docs/components/ui/video-chapters.tsx b/apps/docs/components/ui/video-chapters.tsx
index ff678fb62ba..3010195bcb8 100644
--- a/apps/docs/components/ui/video-chapters.tsx
+++ b/apps/docs/components/ui/video-chapters.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { CirclePlay } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 /** Parse a chapter timestamp ("M:SS" or "H:MM:SS") into seconds. */
@@ -57,12 +56,11 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
                   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-[var(--text-secondary)] text-sm transition-colors hover:bg-[var(--surface-active)] disabled:cursor-default disabled:hover:bg-transparent'
+              className='flex w-full cursor-pointer items-baseline gap-3 rounded-lg px-2.5 py-2 text-left text-[var(--text-secondary)] text-sm transition-colors hover:bg-[var(--surface-active)] 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-[var(--text-muted)] text-xs tabular-nums'>
+                <span className='shrink-0 text-[var(--text-muted)] text-xs tabular-nums'>
                   {chapter.time}
                 </span>
               )}

From cd7f7bff5182c6776fe7a9e26abac7bec381def6 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 28 Jun 2026 14:32:43 -0700
Subject: [PATCH 3/3] improvement(docs): drop the under-label rule on the learn
 callout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A full-width rule under the small "What you will learn" label read as an
awkward heading underline and blurred into the inter-item dividers. The label
is now a quiet muted marker (matching the Chapters label and the TOC heading),
with dividers only between items — so it never competes with the bold item
titles or looks like an underlined heading.
---
 apps/docs/components/ui/what-you-will-learn.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/docs/components/ui/what-you-will-learn.tsx b/apps/docs/components/ui/what-you-will-learn.tsx
index f188285a8db..05cfab31c45 100644
--- a/apps/docs/components/ui/what-you-will-learn.tsx
+++ b/apps/docs/components/ui/what-you-will-learn.tsx
@@ -11,17 +11,20 @@ interface WhatYouWillLearnProps {
 }
 
 /**
- * "What you will learn" — a flat, divider-based callout matching the docs'
- * card-flattening language (transparent, no filled box, like the FAQ list),
- * with a small label at the app's panel-title scale rather than page-h2 scale.
+ * "What you will learn" — a flat callout matching the docs' flat/divider
+ * language. A quiet muted label (like the TOC heading) sits above the
+ * takeaways; dividers fall only between items, so the label reads as a marker
+ * rather than an underlined heading and never competes with the item titles.
  */
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
     <div className={cn('not-prose', className)}>
-      <p className='mb-3 font-medium text-[var(--text-primary)] text-sm'>What you will learn</p>
-      <div className='border-[var(--border)] border-t'>
+      <p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
+        What you will learn
+      </p>
+      <div className='divide-y divide-[var(--border)]'>
         {items.map((item) => (
-          <div key={item.title} className='border-[var(--border)] border-b py-3.5'>
+          <div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>
             <p className='mb-1 font-medium text-[var(--text-primary)] text-sm'>{item.title}</p>
             <p className='m-0 text-[var(--text-secondary)] text-sm leading-relaxed'>{item.body}</p>
           </div>