Add NotebookLM explainer-video prompts for tiers, modules, lessons

scripts/seed-all-content.mjs

@@ -87,6 +87,7 @@ const COURSES = [
     description: "Build a listing-readiness checklist, a profitability and max-CPC worksheet, a keyword map, and a campaign-build rationale.",
     priceMinor: 299900,
     tier: "foundations",
+    coverImage: "/images/courses/course-ppc-foundations.png",
   },
   {
     slug: "accelerated-mastery",
@@ -95,6 +96,7 @@ const COURSES = [
     description: "Build a search-term action log, a bid-change plan, a budget decision log, and a one-page client report.",
     priceMinor: 599900,
     tier: "accelerated",
+    coverImage: "/images/courses/course-accelerated-mastery.png",
   },
   {
     slug: "ultimate-transformation",
@@ -118,6 +120,7 @@ for (const c of COURSES) {
       description: c.description,
       priceMinor: c.priceMinor,
       currency: "PHP",
+      coverImage: c.coverImage ?? null,
     },
     create: {
       id,
@@ -127,6 +130,7 @@ for (const c of COURSES) {
       description: c.description,
       priceMinor: c.priceMinor,
       currency: "PHP",
+      coverImage: c.coverImage ?? null,
       isPublished: true,
       isFeatured: c.slug === "ppc-foundations",
       displayOrder: COURSES.indexOf(c) + 1,

src/app/courses/[slug]/page.module.css

@@ -202,12 +202,21 @@
 }
 
 .sectionTitle {
+  flex: 1;
   font-weight: 500;
   color: var(--ink-900);
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+.sectionCoverImage {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+
 .sectionChevron {
   color: var(--ink-500);
   font-size: var(--text-sm);

src/app/courses/[slug]/page.tsx

@@ -23,6 +23,7 @@ import type { Metadata } from "next";
 import { buildContainer } from "@/composition/container";
 import type { CatalogCourseDetail } from "@/usecases/GetCatalogCourse";
 import { EnrollButton } from "./EnrollButton";
+import { MODULE_COVER_IMAGES } from "@/lib/moduleCoverImages";
 import styles from "./page.module.css";
 
 interface PageProps {
@@ -122,33 +123,41 @@ export default async function CourseDetailPage({ params }: PageProps) {
         <div className={styles.curriculumSection}>
           <h2 className={styles.curriculumTitle}>Curriculum</h2>
           <div className={styles.sectionList}>
-            {modules.map((mod, si) => (
-              <details key={mod.id} className={styles.section} open={si === 0}>
-                <summary className={styles.sectionSummary}>
-                  <span className={styles.sectionTitle}>
-                    Section {si + 1}: {mod.title}
-                  </span>
-                  <span className={styles.sectionChevron}>▼</span>
-                </summary>
-                <ul className={styles.lessonList}>
-                  {mod.lessons.map((lesson) => {
-                    const vid = lesson.estimatedMinutes > 0 ? `${lesson.estimatedMinutes}m` : null;
-                    return (
-                      <li key={lesson.id} className={styles.lessonItem}>
-                        <LessonTypeIcon type={lesson.type} />
-                        <Link
-                          href={`/courses/${detail.slug}/lessons/${lesson.id}`}
-                          className={styles.lessonLink}
-                        >
-                          {lesson.title}
-                        </Link>
-                        {vid && <span className={styles.lessonDuration}>{vid}</span>}
-                      </li>
-                    );
-                  })}
-                </ul>
-              </details>
-            ))}
+            {modules.map((mod, si) => {
+              const coverImage = MODULE_COVER_IMAGES[mod.title];
+              return (
+                <details key={mod.id} className={styles.section} open={si === 0}>
+                  <summary className={styles.sectionSummary}>
+                    {coverImage && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={coverImage} alt="" className={styles.sectionCoverImage} />
+                    )}
+                    <span className={styles.sectionTitle}>
+                      Section {si + 1}: {mod.title}
+                    </span>
+                    <span className={styles.sectionChevron}>▼</span>
+                  </summary>
+                  <ul className={styles.lessonList}>
+                    {mod.lessons.map((lesson) => {
+                      const vid =
+                        lesson.estimatedMinutes > 0 ? `${lesson.estimatedMinutes}m` : null;
+                      return (
+                        <li key={lesson.id} className={styles.lessonItem}>
+                          <LessonTypeIcon type={lesson.type} />
+                          <Link
+                            href={`/courses/${detail.slug}/lessons/${lesson.id}`}
+                            className={styles.lessonLink}
+                          >
+                            {lesson.title}
+                          </Link>
+                          {vid && <span className={styles.lessonDuration}>{vid}</span>}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </details>
+              );
+            })}
           </div>
         </div>
       </main>

src/lib/moduleCoverImages.ts

@@ -0,0 +1,19 @@
+/**
+ * Static lookup from a curriculum module's title (as produced by
+ * `deriveTitle()` in scripts/seed-all-content.mjs) to its cover image.
+ *
+ * Module has no `coverImage` column (only Course does), and these 9
+ * covers are fixed 1:1 with the 9 folders under content/curriculum/modules/,
+ * so a DB column isn't needed — this table is the wiring.
+ */
+export const MODULE_COVER_IMAGES: Record<string, string> = {
+  Onboarding: "/images/courses/module-00-academy-onboarding.png",
+  Foundations: "/images/courses/module-01-ppc-foundations.png",
+  "Keyword Research": "/images/courses/module-02-keyword-research.png",
+  "Listing Optimization": "/images/courses/module-03-listing-optimization.png",
+  "Campaign Architecture": "/images/courses/module-04-campaign-architecture.png",
+  "Portfolio Strategy": "/images/courses/module-05-portfolio-strategy.png",
+  "Bidding Lab": "/images/courses/module-06-bidding-lab.png",
+  "Search Term Triage": "/images/courses/module-07-search-term-triage.png",
+  "Competitive Intelligence": "/images/courses/module-08-competitive-intelligence.png",
+};