feat: preview templates, thumbnail features, 2 new org templates

.cursor/rules/add-landing-template.mdc

@@ -0,0 +1,31 @@
+---
+description: Workflow for adding a new org landing-page template (editorial, vibrant, terminal, etc.) to the ClassroomIO monorepo. Activate when the user asks to add/create/build a new landing template or theme, or hands over a design reference for a new landing visual style.
+globs:
+  - prototypes/org-landing-page/**
+  - packages/ui/src/custom/org-landing-page/**
+  - packages/storybook/src/templates/org-landing-page/**
+  - apps/dashboard/src/lib/features/org/utils/landing-page*.ts
+  - apps/dashboard/src/lib/features/settings/pages/landingpage.svelte
+  - apps/dashboard/src/lib/utils/types/org.ts
+  - apps/dashboard/static/templates/**
+alwaysApply: false
+---
+
+# Add a new landing template
+
+This is a three-phase workflow with **explicit approval gates between phases**. The canonical instructions live in [`skills/add-landing-template/SKILL.md`](mdc:skills/add-landing-template/SKILL.md) — read that file in full before starting, then follow it step-by-step.
+
+## Phase order — never skip ahead
+
+1. **Prototype** — single HTML file at `prototypes/org-landing-page/<theme>.html` using `--primary` as the only color token. **Ask the user for approval before moving on.**
+2. **packages/ui + Storybook** — define `LANDING_THEME_VARS` entry, build nav/hero/course-card subcomponents and the page composer, wire variant branches into shared sections (callout, links, footer-tokens, secondary-action-button), export from `index.ts`, add a Storybook story. **Ask the user for approval before moving on.**
+3. **Dashboard integration** — add to all four registries (three lazy switches + one eager map), settings theme-card picker, translations, preview image (< 500KB). Run `pnpm --filter @cio/ui build` and `svelte-check` once each, grep the captured output. **Ask the user for final approval.**
+
+## Critical correctness rules (full list in the canonical SKILL.md)
+
+- Components read colors **only** from `var(--landing-*)`. No `bg-background`, no inline hex (except decorative gradients).
+- Heroes that consume `courses` / `orgName` must declare defensive defaults (`courses = []`, `orgName = ''`) — they're mounted from course pages without the full prop set.
+- Use `<LandingButton variant="primary|secondary|tertiary">` for non-template-signature CTAs. The button's colors come from per-theme `--landing-button-*` variables.
+- Hardcoded user-facing strings route through `labels?.foo ?? 'default'`.
+- The dashboard has **three lazy switches** (`importThemeComponent`, `importThemeNavHero`, `importThemeCourseCard` in `landing-page.ts`) and **one eager map** (`landing-page-components.ts`) — all four must be updated, or the live org-site routes silently fall back to `minimal`.
+- Run `svelte-check` once, capture to `/tmp/check.log`, grep many times. Do not re-run for each grep.

apps/api/src/routes/agent/agent.ts

@@ -432,12 +432,10 @@ const agentCoreRouter = new Hono()
         }
       }
 
-      if (role === AgentRole.TEACHER && !modelDescriptor.isFree) {
-        const isPaid = await isOrgOnPaidPlan(orgId);
+      const isOrgPaid = role === AgentRole.TEACHER ? await isOrgOnPaidPlan(orgId) : false;
 
-        if (!isPaid) {
-          throw new AppError('Upgrade required to use this AI model', 'UPGRADE_REQUIRED', 403);
-        }
+      if (role === AgentRole.TEACHER && !modelDescriptor.isFree && !isOrgPaid) {
+        throw new AppError('Upgrade required to use this AI model', 'UPGRADE_REQUIRED', 403);
       }
 
       // Students go through tutor policy (workspace toggle, pool, per-learner cap).
@@ -520,7 +518,8 @@ const agentCoreRouter = new Hono()
       // approved plan/active template) is sent as a user-turn message instead so
       // it doesn't invalidate the tools+system cache.
       const systemPrompt = buildSystemPrompt(agentContext, {
-        tutorSettings: studentPolicy?.settings
+        tutorSettings: studentPolicy?.settings,
+        isOrgOnPaidPlan: isOrgPaid
       });
 
       const contextMessageText = buildContextMessage(agentContext, {
@@ -531,7 +530,7 @@ const agentCoreRouter = new Hono()
       const agentTools =
         role === AgentRole.STUDENT
           ? buildStudentAgentTools(orgId, user.id, courseId, studentPolicy!.settings)
-          : buildAgentTools(orgId, user.id, courseId, messages);
+          : buildAgentTools(orgId, user.id, courseId, messages, { isOrgOnPaidPlan: isOrgPaid });
 
       const contextManaged = await buildModelContextMessages({
         conversationId,
@@ -569,27 +568,7 @@ const agentCoreRouter = new Hono()
             ]
           : convertedMessages;
 
-      console.log(
-        '[agent.chat] modelMessages →',
-        JSON.stringify(
-          modelMessages.map((m, i) => ({
-            i,
-            role: m.role,
-            parts: Array.isArray(m.content)
-              ? m.content.map((p: any) => ({
-                  type: p.type,
-                  toolCallId: p.toolCallId,
-                  toolName: p.toolName,
-                  textPreview: typeof p.text === 'string' ? p.text.slice(0, 60) : undefined
-                }))
-              : typeof m.content === 'string'
-                ? m.content.slice(0, 80)
-                : m.content
-          })),
-          null,
-          2
-        )
-      );
+      console.log(`[agent.chat] user=${user.id} messages=${modelMessages.length}`);
 
       // Cache the growing conversation prefix: each turn reads the prior
       // transcript at ~0.1x cost instead of reprocessing it at full price.

apps/api/src/routes/agent/runs.ts

@@ -52,6 +52,7 @@ export const agentRunsRouter = new Hono()
         courseId: data.courseId,
         conversationId: data.conversationId,
         phase: data.phase,
+        modelId: data.model,
         approvedPlan: data.approvedPlan,
         executionCursor: data.executionCursor,
         sourceIds: data.sourceIds,

apps/api/src/routes/jobs/jobs.ts

@@ -10,6 +10,7 @@ import {
   getMediaJobSteps,
   listMediaJobEnvelopes,
   listMediaJobsForAssetEnvelopes,
+  startThumbnailRegenJob,
   startTranscriptionOnlyMediaJob
 } from '@api/services/jobs';
 
@@ -108,6 +109,27 @@ export const jobsRouter = new Hono()
       }
     }
   )
+  .post(
+    '/media/asset/:assetId/regenerate-thumbnail',
+    authMiddleware,
+    orgMemberMiddleware,
+    zValidator('param', ZAssetJobsParam),
+    async (c) => {
+      try {
+        const orgId = c.req.header('cio-org-id')!;
+        const user = c.get('user')!;
+        const { assetId } = c.req.valid('param');
+        const job = await startThumbnailRegenJob({
+          organizationId: orgId,
+          assetId,
+          triggeredByProfileId: user?.id ?? null
+        });
+        return c.json({ success: true, data: job }, 202);
+      } catch (error) {
+        return handleError(c, error, 'Failed to start thumbnail regeneration');
+      }
+    }
+  )
   .post(
     '/media/:jobId/cancel',
     authMiddleware,

apps/api/src/services/assets/assets.ts

@@ -26,6 +26,7 @@ import {
 import { getMediaTranscriptByAsset } from '@cio/db/queries';
 
 import { generateTranscriptVttPresignedUrl, TRANSCRIPT_VTT_PRESIGN_SECONDS } from '@api/utils/s3';
+import { getStorageConfig } from '@api/config/storage';
 
 const YOUTUBE_VIDEO_ID_REGEX = /^[a-zA-Z0-9_-]{11}$/;
 
@@ -310,6 +311,45 @@ export async function updateAssetService(orgId: string, assetId: string, data: T
   }
 }
 
+/**
+ * Set the chosen thumbnail URL for an asset. Accepts URLs that are either
+ * (a) one of the asset's auto-generated candidates, or (b) a freshly uploaded
+ * URL on the org's media bucket. Anything else is rejected so callers can't
+ * point the asset at an arbitrary remote image.
+ */
+export async function selectAssetThumbnailService(orgId: string, assetId: string, thumbnailUrl: string) {
+  try {
+    const asset = await getAssetById(assetId, orgId);
+    assertAssetExists(asset);
+
+    const candidates = (asset?.thumbnailCandidates ?? []) as string[];
+    const mediaBase = getStorageConfig().mediaPublicBaseUrl?.replace(/\/$/, '') ?? null;
+    const isCandidate = candidates.includes(thumbnailUrl);
+    const isOnMediaBucket = Boolean(mediaBase && thumbnailUrl.startsWith(`${mediaBase}/`));
+
+    if (!isCandidate && !isOnMediaBucket) {
+      throw new AppError(
+        'Thumbnail URL must be a generated candidate or a media-bucket upload',
+        ErrorCodes.VALIDATION_ERROR,
+        400
+      );
+    }
+
+    const updated = await updateAsset(assetId, orgId, { thumbnailUrl });
+    return assertAssetExists(updated);
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update asset thumbnail',
+      ErrorCodes.ASSET_UPDATE_FAILED,
+      500
+    );
+  }
+}
+
 export async function deleteAssetService(orgId: string, assetId: string) {
   try {
     await getAssetService(orgId, assetId);

apps/api/src/services/jobs/media-jobs.ts

@@ -11,7 +11,12 @@ import {
   hasActiveMediaJobForAsset
 } from '@cio/db/queries';
 import { getAssetById } from '@cio/db/queries/assets';
-import { enqueueLessonVideoPipeline, enqueueTranscriptionOnly, isRedisConfigured } from '@cio/jobs';
+import {
+  enqueueGenerateThumbnailOnly,
+  enqueueLessonVideoPipeline,
+  enqueueTranscriptionOnly,
+  isRedisConfigured
+} from '@cio/jobs';
 
 import { logRedisUnavailableOnce } from '@api/utils/redis/redis';
 import type { TMediaJob } from '@db/types';
@@ -98,6 +103,85 @@ export async function startTranscriptionOnlyMediaJob(input: StartTranscriptionOn
   }
 }
 
+export interface StartThumbnailRegenInput {
+  organizationId: string;
+  assetId: string;
+  triggeredByProfileId: string | null;
+}
+
+/**
+ * Manual thumbnail regeneration: create a new `media_job` row and enqueue only
+ * the `generate-thumbnail` step. Rejects when the asset has no usable storage
+ * key or when another media job is already running for it.
+ */
+export async function startThumbnailRegenJob(input: StartThumbnailRegenInput): Promise<TMediaJob> {
+  const asset = await getAssetById(input.assetId);
+  if (!asset || asset.organizationId !== input.organizationId) {
+    throw new AppError('Asset not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  if (asset.kind !== 'video' || asset.provider !== 'upload' || !asset.storageKey) {
+    throw new AppError('Asset cannot be thumbnailed', ErrorCodes.ASSET_NOT_TRANSCRIBABLE, 400);
+  }
+
+  const hasActive = await hasActiveMediaJobForAsset(input.assetId, input.organizationId);
+  if (hasActive) {
+    throw new AppError('A media job is already running for this asset', ErrorCodes.CONFLICT, 409);
+  }
+
+  const job = await createMediaJob({
+    organizationId: input.organizationId,
+    assetId: input.assetId,
+    triggeredByProfileId: input.triggeredByProfileId,
+    status: 'queued',
+    stage: 'thumbnailing',
+    progressPercent: 0
+  });
+
+  if (!isRedisConfigured()) {
+    logRedisUnavailableOnce(
+      'Redis not configured: thumbnail regen media job created but no BullMQ flow enqueued. ' +
+        'Set REDIS_URL and run apps/jobs to process this job.'
+    );
+    return job;
+  }
+
+  try {
+    const enqueueResult = await enqueueGenerateThumbnailOnly({
+      mediaJobId: job.id,
+      assetId: input.assetId,
+      storageKey: asset.storageKey,
+      actorContext: {
+        userId: input.triggeredByProfileId,
+        organizationId: input.organizationId
+      }
+    });
+
+    const updated = await updateMediaJob(job.id, {
+      rootJobId: enqueueResult.rootJobId,
+      jobIds: enqueueResult.jobIds
+    });
+
+    return updated ?? job;
+  } catch (error) {
+    console.error('startThumbnailRegenJob enqueue failed:', error);
+    await updateMediaJob(job.id, {
+      status: 'failed',
+      stage: 'failed',
+      error: {
+        code: 'ENQUEUE_FAILED',
+        message: error instanceof Error ? error.message : 'Failed to enqueue thumbnail job'
+      }
+    });
+
+    throw new AppError(
+      error instanceof Error ? error : 'Failed to enqueue thumbnail job',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
 export interface StartMediaJobInput {
   organizationId: string;
   assetId: string;

apps/dashboard/src/lib/features/course/api/lesson.svelte.ts

@@ -718,6 +718,31 @@ export class LessonApi extends BaseApiWithErrors {
     this.isDirty = true;
   }
 
+  /**
+   * Updates the thumbnail URL on a lesson video's metadata so the card preview
+   * reflects the asset's new thumbnail without waiting for a reload.
+   */
+  updateLessonVideoThumbnail(videoIndex: number, thumbnailUrl: string) {
+    if (!this.lesson) return;
+
+    const videos = Array.isArray(this.lesson.videos) ? [...this.lesson.videos] : [];
+    const target = videos[videoIndex];
+    if (!target) return;
+
+    const metadata =
+      target.metadata && typeof target.metadata === 'object' && !Array.isArray(target.metadata)
+        ? (target.metadata as Record<string, unknown>)
+        : {};
+
+    videos[videoIndex] = {
+      ...target,
+      metadata: { ...metadata, thumbnailUrl }
+    };
+
+    this.lesson = { ...this.lesson, videos };
+    this.isDirty = true;
+  }
+
   /**
    * Deletes a document from lesson materials
    */

apps/dashboard/src/lib/features/course/components/lesson/video/lesson-video-simple-card.svelte

@@ -3,7 +3,7 @@
   import { Image } from '$features/ui';
   import VideoIcon from '@lucide/svelte/icons/video';
   import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
-  import { courseApi } from '$features/course/api';
+  import { courseApi, lessonApi } from '$features/course/api';
   import VideoCardDropdown from './video-card-dropdown.svelte';
   import {
     getVideoThumbnailUrl,
@@ -138,7 +138,12 @@
           {/if}
         </div>
         {#if isEditMode}
-          <VideoCardDropdown {video} {onRemove} menuPlacement="inline" />
+          <VideoCardDropdown
+            {video}
+            {onRemove}
+            onThumbnailSaved={(url) => lessonApi.updateLessonVideoThumbnail(index, url)}
+            menuPlacement="inline"
+          />
         {/if}
       </div>
       <p class="ui:text-muted-foreground mt-0.5 line-clamp-1 text-sm leading-snug">

apps/dashboard/src/lib/features/course/components/lesson/video/video-card-dropdown.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import CaptionsIcon from '@lucide/svelte/icons/captions';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import EyeIcon from '@lucide/svelte/icons/eye';
+  import ImageIcon from '@lucide/svelte/icons/image';
+  import Trash2Icon from '@lucide/svelte/icons/trash-2';
   import { IconButton } from '@cio/ui/custom/icon-button';
   import { mediaApi } from '$features/media/api';
+  import { ManageThumbnailsDialog } from '$features/media/components';
+  import type { OrganizationAsset } from '$features/media/utils';
   import { JobPoller, jobsApi, type MediaJobEnvelope } from '$features/jobs';
   import { sidePanel } from '$features/side-panel';
   import { snackbar } from '$features/ui/snackbar/store';
@@ -15,11 +21,16 @@
   interface Props {
     video: LessonVideo;
     onRemove: () => void;
+    onThumbnailSaved?: (thumbnailUrl: string) => void;
     /** `inline` aligns with the title row (YouTube-style). `corner` is top-right overlay on the nearest `relative` ancestor. */
     menuPlacement?: 'inline' | 'corner';
   }
 
-  let { video, onRemove, menuPlacement = 'inline' }: Props = $props();
+  let { video, onRemove, onThumbnailSaved, menuPlacement = 'inline' }: Props = $props();
+
+  let manageThumbsOpen = $state(false);
+  let manageThumbsAsset = $state<OrganizationAsset | null>(null);
+  let isLoadingAsset = $state(false);
 
   let isTranscribing = $state(false);
   let hasTranscript = $state(false);
@@ -29,6 +40,7 @@
   const assetId = $derived((video as LessonVideo & { assetId?: string }).assetId ?? null);
 
   const canGenerateTranscript = $derived(video.type === 'upload' && !!assetId);
+  const canManageThumbnails = $derived(video.type === 'upload' && !!assetId);
 
   onDestroy(() => {
     activePoller?.stop();
@@ -116,6 +128,31 @@
     }
   }
 
+  async function handleManageThumbnails() {
+    if (!assetId || isLoadingAsset) return;
+
+    isLoadingAsset = true;
+    try {
+      const asset = await mediaApi.refreshAsset(assetId);
+      if (!asset) {
+        snackbar.error('snackbar.media_manager.list_failed');
+        return;
+      }
+
+      manageThumbsAsset = asset;
+      manageThumbsOpen = true;
+    } finally {
+      isLoadingAsset = false;
+    }
+  }
+
+  function handleThumbnailSaved(asset: OrganizationAsset) {
+    manageThumbsAsset = asset;
+    if (asset.thumbnailUrl) {
+      onThumbnailSaved?.(asset.thumbnailUrl);
+    }
+  }
+
   const generateLabel = $derived(
     isTranscribing
       ? t.get('course.navItem.lessons.materials.tabs.video.generate_transcript_in_progress')
@@ -142,6 +179,19 @@
     </IconButton>
   </DropdownMenu.Trigger>
   <DropdownMenu.Content align="end">
+    {#if canManageThumbnails}
+      <DropdownMenu.Item
+        disabled={isLoadingAsset}
+        onclick={() => {
+          void handleManageThumbnails();
+        }}
+      >
+        <span class="flex items-center gap-2">
+          <ImageIcon size={14} />
+          {$t('media_manager.actions.manage_thumbnails')}
+        </span>
+      </DropdownMenu.Item>
+    {/if}
     {#if canGenerateTranscript}
       <DropdownMenu.Item
         disabled={isTranscribing}
@@ -149,7 +199,10 @@
           void handleGenerateTranscript();
         }}
       >
-        {generateLabel}
+        <span class="flex items-center gap-2">
+          <CaptionsIcon size={14} />
+          {generateLabel}
+        </span>
       </DropdownMenu.Item>
       {#if hasTranscript}
         <DropdownMenu.Item
@@ -157,12 +210,24 @@
             void handleViewTranscript();
           }}
         >
-          {$t('course.navItem.lessons.materials.tabs.video.view_transcript')}
+          <span class="flex items-center gap-2">
+            <EyeIcon size={14} />
+            {$t('course.navItem.lessons.materials.tabs.video.view_transcript')}
+          </span>
         </DropdownMenu.Item>
       {/if}
     {/if}
     <DropdownMenu.Item class="ui:text-red-600" onclick={onRemove}>
-      {$t('course.navItem.lessons.materials.tabs.video.remove_video')}
+      <span class="flex items-center gap-2">
+        <Trash2Icon size={14} />
+        {$t('course.navItem.lessons.materials.tabs.video.remove_video')}
+      </span>
     </DropdownMenu.Item>
   </DropdownMenu.Content>
 </DropdownMenu.Root>
+
+<ManageThumbnailsDialog
+  bind:open={manageThumbsOpen}
+  asset={manageThumbsAsset}
+  onThumbnailSaved={handleThumbnailSaved}
+/>

apps/dashboard/src/lib/features/media/api/media-manager.svelte.ts

@@ -11,6 +11,8 @@ import type {
   GetYouTubeMetadataRequest,
   ListAssetsRequest,
   OrganizationAsset,
+  RegenerateAssetThumbnailRequest,
+  SelectAssetThumbnailRequest,
   UpdateAssetData,
   UpdateAssetRequest,
   YouTubeMetadata
@@ -404,6 +406,67 @@ export class MediaApi extends BaseApiWithErrors {
     return data;
   }
 
+  /** Persist the chosen thumbnail URL (must be a generated candidate or a fresh upload). */
+  async selectThumbnail(assetId: string, thumbnailUrl: string): Promise<OrganizationAsset | null> {
+    let updated: OrganizationAsset | null = null;
+    await this.execute<SelectAssetThumbnailRequest>({
+      requestFn: () =>
+        classroomio.organization.assets[':assetId'].thumbnail.$put({
+          param: { assetId },
+          json: { thumbnailUrl }
+        }),
+      logContext: 'selecting asset thumbnail',
+      onSuccess: (response) => {
+        updated = response.data;
+        this.assets = this.assets.map((asset) => (asset.id === response.data.id ? response.data : asset));
+        snackbar.success('snackbar.media_manager.thumbnail_updated');
+      },
+      onError: () => {
+        snackbar.error('snackbar.media_manager.thumbnail_update_failed');
+      }
+    });
+
+    return updated;
+  }
+
+  /** Enqueue a fresh generate-thumbnail job and return the media_job id. */
+  async regenerateThumbnails(assetId: string): Promise<string | null> {
+    let jobId: string | null = null;
+    await this.execute<RegenerateAssetThumbnailRequest>({
+      requestFn: () =>
+        classroomio.jobs.media.asset[':assetId']['regenerate-thumbnail'].$post({
+          param: { assetId }
+        }),
+      logContext: 'regenerating asset thumbnail',
+      onSuccess: (response) => {
+        jobId = response.data.id;
+        snackbar.success('snackbar.media_manager.thumbnail_regen_started');
+      },
+      onError: () => {
+        snackbar.error('snackbar.media_manager.thumbnail_regen_failed');
+      }
+    });
+
+    return jobId;
+  }
+
+  async refreshAsset(assetId: string): Promise<OrganizationAsset | null> {
+    let updated: OrganizationAsset | null = null;
+    await this.execute<(typeof classroomio.organization.assets)[':assetId']['$get']>({
+      requestFn: () =>
+        classroomio.organization.assets[':assetId'].$get({
+          param: { assetId }
+        }),
+      logContext: 'refreshing asset',
+      onSuccess: (response) => {
+        updated = response.data;
+        this.assets = this.assets.map((asset) => (asset.id === response.data.id ? response.data : asset));
+      }
+    });
+
+    return updated;
+  }
+
   /** Enqueue extract-audio + Whisper for an existing upload. */
   async generateTranscript(assetId: string): Promise<boolean> {
     let ok = false;

apps/dashboard/src/lib/features/media/components/asset-card.svelte

@@ -7,6 +7,9 @@
 
   import DownloadIcon from '@lucide/svelte/icons/download';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import ImageIcon from '@lucide/svelte/icons/image';
+  import LinkIcon from '@lucide/svelte/icons/link';
+  import PencilIcon from '@lucide/svelte/icons/pencil';
 
   import { t } from '$lib/utils/functions/translations';
   import {
@@ -23,6 +26,7 @@
     onEdit?: (asset: OrganizationAsset) => void;
     onUsage?: (asset: OrganizationAsset) => void;
     onDownload?: (asset: OrganizationAsset) => void;
+    onManageThumbnails?: (asset: OrganizationAsset) => void;
   }
 
   let {
@@ -30,13 +34,14 @@
     downloadingAssetId = null,
     onEdit = () => {},
     onUsage = () => {},
-    onDownload = () => {}
+    onDownload = () => {},
+    onManageThumbnails = () => {}
   }: Props = $props();
 </script>
 
 <Item.Root
   variant="outline"
-  class="group relative max-w-[300px] cursor-pointer p-4!"
+  class="group relative w-full! max-w-75 cursor-pointer p-4!"
   onclick={() => onEdit(asset)}
   onkeydown={(event) => {
     if (event.key === 'Enter' || event.key === ' ') {
@@ -57,10 +62,24 @@
       </DropdownMenu.Trigger>
       <DropdownMenu.Content align="end" onclick={(event) => event.stopPropagation()}>
         <DropdownMenu.Item onclick={() => onEdit(asset)}>
-          {$t('media_manager.actions.edit')}
+          <span class="flex items-center gap-2">
+            <PencilIcon size={14} />
+            {$t('media_manager.actions.edit')}
+          </span>
         </DropdownMenu.Item>
+        {#if asset.kind === 'video'}
+          <DropdownMenu.Item onclick={() => onManageThumbnails(asset)}>
+            <span class="flex items-center gap-2">
+              <ImageIcon size={14} />
+              {$t('media_manager.actions.manage_thumbnails')}
+            </span>
+          </DropdownMenu.Item>
+        {/if}
         <DropdownMenu.Item onclick={() => onUsage(asset)}>
-          {$t('media_manager.actions.where_used')}
+          <span class="flex items-center gap-2">
+            <LinkIcon size={14} />
+            {$t('media_manager.actions.where_used')}
+          </span>
         </DropdownMenu.Item>
         <DropdownMenu.Item onclick={() => onDownload(asset)} disabled={downloadingAssetId === asset.id}>
           <span class="flex items-center gap-2">

apps/dashboard/src/lib/features/media/components/index.ts

@@ -1,5 +1,6 @@
 export { default as AssetCard } from './asset-card.svelte';
 export { default as AssetUsageDialog } from './asset-usage-dialog.svelte';
 export { default as EditAssetDialog } from './edit-asset-dialog.svelte';
+export { default as ManageThumbnailsDialog } from './manage-thumbnails-dialog.svelte';
 export { default as MediaFilters } from './media-filters.svelte';
 export { default as StorageCards } from './storage-cards.svelte';

apps/dashboard/src/lib/features/media/components/manage-thumbnails-dialog.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import * as FileDropZone from '@cio/ui/custom/file-drop-zone';
+  import type { FileRejectedReason } from '@cio/ui/custom/file-drop-zone';
+  import { Skeleton } from '@cio/ui/base/skeleton';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import RefreshCcwIcon from '@lucide/svelte/icons/refresh-ccw';
+
+  import { mediaApi } from '$features/media/api';
+  import type { OrganizationAsset } from '$features/media/utils';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { uploadImage } from '$lib/utils/services/upload';
+
+  interface Props {
+    open?: boolean;
+    asset?: OrganizationAsset | null;
+    onThumbnailSaved?: (asset: OrganizationAsset) => void;
+  }
+
+  const THUMBNAIL_MAX_SIZE = 5 * FileDropZone.MEGABYTE;
+  const REGEN_POLL_INTERVAL_MS = 2000;
+  const REGEN_POLL_TIMEOUT_MS = 60_000;
+  const SLOT_KEYS = ['start', 'middle', 'end'] as const;
+  type Slot = (typeof SLOT_KEYS)[number];
+
+  let { open = $bindable(false), asset = null, onThumbnailSaved }: Props = $props();
+
+  let selectedUrl = $state<string | null>(null);
+  let customUrl = $state<string | null>(null);
+  let videoUrl = $state<string | null>(null);
+  let isVideoLoading = $state(false);
+  let isUploading = $state(false);
+  let isSaving = $state(false);
+  let isRegenerating = $state(false);
+
+  const candidates = $derived((asset?.thumbnailCandidates ?? []) as string[]);
+  const currentThumbnail = $derived(asset?.thumbnailUrl ?? null);
+  const hasSelection = $derived(Boolean(selectedUrl) && selectedUrl !== currentThumbnail);
+  const allCandidatesMissing = $derived(candidates.length === 0 && !isRegenerating);
+
+  function slotForIndex(index: number): Slot {
+    return SLOT_KEYS[Math.min(index, SLOT_KEYS.length - 1)];
+  }
+
+  $effect(() => {
+    if (!open || !asset) return;
+
+    selectedUrl = asset.thumbnailUrl ?? candidates[0] ?? null;
+    customUrl = null;
+    void loadVideoPreview(asset);
+  });
+
+  async function loadVideoPreview(target: OrganizationAsset) {
+    if (target.kind !== 'video') {
+      videoUrl = null;
+      return;
+    }
+
+    isVideoLoading = true;
+    try {
+      videoUrl = await mediaApi.getVideoPlaybackUrl(target);
+    } finally {
+      isVideoLoading = false;
+    }
+  }
+
+  function resetState() {
+    selectedUrl = null;
+    customUrl = null;
+    videoUrl = null;
+    isUploading = false;
+    isSaving = false;
+    isRegenerating = false;
+  }
+
+  function selectCandidate(url: string) {
+    selectedUrl = url;
+  }
+
+  async function handleCustomUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+
+    isUploading = true;
+    try {
+      const url = await uploadImage(file);
+      customUrl = url;
+      selectedUrl = url;
+      snackbar.success('snackbar.media_manager.thumbnail_uploaded');
+    } catch {
+      snackbar.error('snackbar.media_manager.thumbnail_upload_failed');
+    } finally {
+      isUploading = false;
+    }
+  }
+
+  function handleUploadRejected({ reason }: { reason: FileRejectedReason }) {
+    if (reason === 'Maximum file size exceeded') {
+      snackbar.error('snackbar.media_manager.thumbnail_too_large');
+      return;
+    }
+    snackbar.error('snackbar.media_manager.thumbnail_invalid');
+  }
+
+  async function pollUntilRegenComplete(assetId: string) {
+    const deadline = Date.now() + REGEN_POLL_TIMEOUT_MS;
+    const initialCandidates = candidates.slice().sort().join('|');
+    while (Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, REGEN_POLL_INTERVAL_MS));
+      const next = await mediaApi.refreshAsset(assetId);
+      if (!next) continue;
+
+      const nextCandidates = ((next.thumbnailCandidates ?? []) as string[]).slice().sort().join('|');
+      if (nextCandidates && nextCandidates !== initialCandidates) {
+        asset = next;
+        selectedUrl = next.thumbnailUrl ?? ((next.thumbnailCandidates ?? [])[0] as string | undefined) ?? null;
+        return;
+      }
+    }
+  }
+
+  async function regenerate() {
+    if (!asset || isRegenerating) return;
+
+    isRegenerating = true;
+    try {
+      const jobId = await mediaApi.regenerateThumbnails(asset.id);
+      if (!jobId) return;
+
+      await pollUntilRegenComplete(asset.id);
+    } finally {
+      isRegenerating = false;
+    }
+  }
+
+  async function save() {
+    if (!asset || !selectedUrl || !hasSelection) return;
+
+    isSaving = true;
+    try {
+      const updated = await mediaApi.selectThumbnail(asset.id, selectedUrl);
+      if (!updated) return;
+      asset = updated;
+      onThumbnailSaved?.(updated);
+      open = false;
+    } finally {
+      isSaving = false;
+    }
+  }
+</script>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(isOpen) => {
+    if (!isOpen) resetState();
+  }}
+>
+  <Dialog.Content class="max-h-[85vh] w-[95%] max-w-3xl overflow-y-auto">
+    <Dialog.Header>
+      <Dialog.Title>{$t('media_manager.thumbnails.manage_title')}</Dialog.Title>
+      <Dialog.Description>{$t('media_manager.thumbnails.manage_description')}</Dialog.Description>
+    </Dialog.Header>
+
+    {#if asset}
+      <div class="space-y-5 p-1">
+        <div class="ui:bg-muted/40 aspect-video w-full overflow-hidden rounded-md border">
+          {#if isVideoLoading}
+            <Skeleton class="h-full w-full" />
+          {:else if videoUrl}
+            <!-- svelte-ignore a11y_media_has_caption -->
+            <video controls preload="metadata" src={videoUrl} class="h-full w-full bg-black"></video>
+          {:else}
+            <div class="ui:text-muted-foreground flex h-full w-full items-center justify-center text-sm">
+              {$t('media_manager.thumbnails.preview_unavailable')}
+            </div>
+          {/if}
+        </div>
+
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <p class="text-sm font-medium">{$t('media_manager.thumbnails.generated')}</p>
+            {#if allCandidatesMissing}
+              <p class="ui:text-muted-foreground text-xs">
+                {$t('media_manager.thumbnails.none_generated_warning')}
+              </p>
+            {/if}
+          </div>
+
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+            {#each SLOT_KEYS as slotKey, index (slotKey)}
+              {@const url = candidates[index] ?? null}
+              {@const isSelected = url !== null && url === selectedUrl}
+              {#if isRegenerating}
+                <Skeleton class="aspect-video w-full rounded-md" />
+              {:else if url}
+                <button
+                  type="button"
+                  onclick={() => selectCandidate(url)}
+                  class={`ui:focus-visible:ring-ring relative aspect-video w-full overflow-hidden rounded-md border text-left transition focus-visible:ring-2 focus-visible:outline-none ${
+                    isSelected ? 'ring-primary border-primary ring-2' : 'hover:border-primary/50'
+                  }`}
+                  aria-pressed={isSelected}
+                >
+                  <img
+                    src={url}
+                    alt={$t(`media_manager.thumbnails.slot_${slotForIndex(index)}`)}
+                    class="h-full w-full object-cover"
+                  />
+                  <span
+                    class="ui:bg-background/85 absolute bottom-1 left-1 rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase"
+                  >
+                    {$t(`media_manager.thumbnails.slot_${slotForIndex(index)}`)}
+                  </span>
+                  {#if isSelected}
+                    <span
+                      class="ui:bg-primary ui:text-primary-foreground absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full"
+                    >
+                      <CheckIcon class="size-3" />
+                    </span>
+                  {/if}
+                </button>
+              {:else}
+                <div
+                  class="ui:bg-muted/30 ui:text-muted-foreground flex aspect-video w-full items-center justify-center rounded-md border border-dashed text-xs"
+                >
+                  {$t(`media_manager.thumbnails.slot_${slotForIndex(index)}`)}
+                </div>
+              {/if}
+            {/each}
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <p class="text-sm font-medium">{$t('media_manager.thumbnails.upload_custom')}</p>
+          <div class={isUploading ? 'ui:pointer-events-none ui:opacity-50' : ''}>
+            <FileDropZone.Root
+              accept={FileDropZone.ACCEPT_IMAGE}
+              maxFiles={1}
+              fileCount={0}
+              maxFileSize={THUMBNAIL_MAX_SIZE}
+              onUpload={handleCustomUpload}
+              onFileRejected={handleUploadRejected}
+            >
+              <FileDropZone.Trigger
+                label={$t('media_manager.form.thumbnail_drop_label')}
+                formatMaxSize={() => $t('media_manager.form.thumbnail_drop_size')}
+              />
+            </FileDropZone.Root>
+          </div>
+          {#if customUrl}
+            <div class="flex items-center gap-3 rounded-md border p-2">
+              <img
+                src={customUrl}
+                alt={$t('media_manager.thumbnails.custom_preview_alt')}
+                class="h-16 w-24 rounded object-cover"
+              />
+              <p class="ui:text-muted-foreground text-xs">
+                {$t('media_manager.thumbnails.custom_selected_hint')}
+              </p>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <Dialog.Footer class="ui:gap-2 flex-col sm:flex-row sm:justify-between">
+      <Button variant="outline" onclick={regenerate} loading={isRegenerating} disabled={isSaving}>
+        <RefreshCcwIcon class="size-4" />
+        {$t('media_manager.thumbnails.regenerate')}
+      </Button>
+
+      <div class="flex gap-2">
+        <Button variant="outline" onclick={() => (open = false)} disabled={isSaving || isRegenerating}>
+          {$t('media_manager.edit.cancel')}
+        </Button>
+        <Button onclick={save} loading={isSaving} disabled={!hasSelection || isRegenerating || isUploading}>
+          {$t('media_manager.thumbnails.save_selection')}
+        </Button>
+      </div>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/media/components/storage-cards.svelte

@@ -4,7 +4,7 @@
   import Link2Icon from '@lucide/svelte/icons/link-2';
 
   import { ActivityCard } from '$features/ui';
-  import { formatBytes } from '$features/media/utils';
+  import { formatBytes, formatBytesSecondary } from '$features/media/utils';
   import type { AssetStorageSummary } from '$features/media/utils';
   import { t } from '$lib/utils/functions/translations';
 
@@ -14,19 +14,23 @@
 
   let { storageSummary }: Props = $props();
 
+  function bytesDescription(bytes: number | null | undefined, fallbackKey: string): string {
+    return formatBytesSecondary(bytes) ?? t.get(fallbackKey);
+  }
+
   const storageCards = $derived([
     {
       icon: FileIcon,
       title: t.get('media_manager.storage.total_bytes'),
       percentage: formatBytes(storageSummary?.totalBytes ?? 0),
-      description: t.get('media_manager.storage.total_bytes'),
+      description: bytesDescription(storageSummary?.totalBytes, 'media_manager.storage.total_bytes'),
       hidePercentage: true
     },
     {
       icon: FileVideoIcon,
       title: t.get('media_manager.storage.internal_bytes'),
       percentage: formatBytes(storageSummary?.internalBytes ?? 0),
-      description: t.get('media_manager.storage.internal_bytes'),
+      description: bytesDescription(storageSummary?.internalBytes, 'media_manager.storage.internal_bytes'),
       hidePercentage: true
     },
     {

apps/dashboard/src/lib/features/media/pages/media.svelte

@@ -7,7 +7,14 @@
 
   import type { TAssetUpdate } from '@cio/utils/validation/assets';
 
-  import { AssetCard, AssetUsageDialog, EditAssetDialog, MediaFilters, StorageCards } from '$features/media/components';
+  import {
+    AssetCard,
+    AssetUsageDialog,
+    EditAssetDialog,
+    ManageThumbnailsDialog,
+    MediaFilters,
+    StorageCards
+  } from '$features/media/components';
   import { mediaApi } from '$features/media/api';
   import type { AssetKindFilter, AssetStatusFilter, AssetUsageGraph, OrganizationAsset } from '$features/media/utils';
   import { snackbar } from '$features/ui/snackbar/store';
@@ -28,6 +35,7 @@
   let isRefreshing = $state(false);
   let editOpen = $state(false);
   let usageOpen = $state(false);
+  let manageThumbsOpen = $state(false);
   let isSavingAsset = $state(false);
   let isUsageLoading = $state(false);
   let downloadingAssetId = $state<string | null>(null);
@@ -66,6 +74,11 @@
     editOpen = true;
   }
 
+  function openManageThumbnails(asset: OrganizationAsset) {
+    selectedAsset = asset;
+    manageThumbsOpen = true;
+  }
+
   async function saveAsset(fields: TAssetUpdate) {
     if (!selectedAsset) return;
 
@@ -148,7 +161,14 @@
 {:else}
   <Item.Group class="grid! w-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
     {#each assets as asset (asset.id)}
-      <AssetCard {asset} {downloadingAssetId} onEdit={openEditAsset} onUsage={openUsage} onDownload={downloadAsset} />
+      <AssetCard
+        {asset}
+        {downloadingAssetId}
+        onEdit={openEditAsset}
+        onUsage={openUsage}
+        onDownload={downloadAsset}
+        onManageThumbnails={openManageThumbnails}
+      />
     {/each}
   </Item.Group>
 {/if}
@@ -181,6 +201,8 @@
 
 <EditAssetDialog bind:open={editOpen} asset={selectedAsset} isSaving={isSavingAsset} onSave={saveAsset} />
 
+<ManageThumbnailsDialog bind:open={manageThumbsOpen} asset={selectedAsset} />
+
 <AssetUsageDialog
   bind:open={usageOpen}
   {selectedAsset}

apps/dashboard/src/lib/features/media/utils/media-manager-utils.ts

@@ -19,6 +19,42 @@ export function formatBytes(bytes: number | null | undefined): string {
   return `${size.toFixed(size >= 100 || exponent === 0 ? 0 : 2)} ${units[exponent]}`;
 }
 
+/**
+ * For values that already render in GB or TB, return the equivalent in the
+ * next-smaller unit so users keep a feel for the scale (e.g. `1.50 GB` →
+ * `≈ 1,536 MB`). Returns `null` for sub-GB sizes where no extra context is
+ * helpful.
+ */
+export function formatBytesSecondary(bytes: number | null | undefined): string | null {
+  if (bytes == null || Number.isNaN(bytes) || bytes <= 0) {
+    return null;
+  }
+
+  const KB = 1024;
+  const MB = KB * 1024;
+  const GB = MB * 1024;
+  const TB = GB * 1024;
+
+  if (bytes >= TB) {
+    const inGb = bytes / GB;
+    return `≈ ${formatNumber(inGb, inGb >= 100 ? 0 : 2)} GB`;
+  }
+
+  if (bytes >= GB) {
+    const inMb = bytes / MB;
+    return `≈ ${formatNumber(inMb, inMb >= 100 ? 0 : 2)} MB`;
+  }
+
+  return null;
+}
+
+function formatNumber(value: number, fractionDigits: number): string {
+  return value.toLocaleString(undefined, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  });
+}
+
 export function mapAssetProviderToLessonVideoType(provider: string): LessonVideoType {
   if (provider === 'youtube') return 'youtube';
   if (provider === 'google_drive') return 'google_drive';

apps/dashboard/src/lib/features/media/utils/types.ts

@@ -57,5 +57,14 @@ export type GetAssetTranscriptResponse = InferResponseType<GetAssetTranscriptReq
 export type GetAssetTranscriptSuccess = Extract<GetAssetTranscriptResponse, { success: true }>;
 export type AssetTranscriptPayload = GetAssetTranscriptSuccess['data'];
 
+export type SelectAssetThumbnailRequest = (typeof classroomio.organization)['assets'][':assetId']['thumbnail']['$put'];
+export type SelectAssetThumbnailResponse = InferResponseType<SelectAssetThumbnailRequest>;
+export type SelectAssetThumbnailSuccess = Extract<SelectAssetThumbnailResponse, { success: true }>;
+
+export type RegenerateAssetThumbnailRequest =
+  (typeof classroomio.jobs.media.asset)[':assetId']['regenerate-thumbnail']['$post'];
+export type RegenerateAssetThumbnailResponse = InferResponseType<RegenerateAssetThumbnailRequest>;
+export type RegenerateAssetThumbnailSuccess = Extract<RegenerateAssetThumbnailResponse, { success: true }>;
+
 export type AssetKindFilter = 'all' | 'video' | 'document' | 'image' | 'audio' | 'other';
 export type AssetStatusFilter = 'all' | 'active' | 'archived';

apps/dashboard/src/lib/features/org/utils/landing-page-components.ts

@@ -8,6 +8,9 @@ import {
   CorporateLandingHero,
   CorporateLandingNav,
   CorporateLandingPage,
+  EditorialLandingHero,
+  EditorialLandingNav,
+  EditorialLandingPage,
   MinimalLandingHero,
   MinimalLandingNav,
   MinimalLandingPage,
@@ -22,7 +25,10 @@ import {
   TechLandingPage,
   TerminalLandingHero,
   TerminalLandingNav,
-  TerminalLandingPage
+  TerminalLandingPage,
+  VibrantLandingHero,
+  VibrantLandingNav,
+  VibrantLandingPage
 } from '@cio/ui/custom/org-landing-page';
 
 export const landingPageThemeComponents = {
@@ -33,7 +39,9 @@ export const landingPageThemeComponents = {
   tech: TechLandingPage,
   studio: StudioLandingPage,
   corporate: CorporateLandingPage,
-  terminal: TerminalLandingPage
+  terminal: TerminalLandingPage,
+  editorial: EditorialLandingPage,
+  vibrant: VibrantLandingPage
 } as const;
 
 export const landingPageNavComponents = {
@@ -44,7 +52,9 @@ export const landingPageNavComponents = {
   tech: TechLandingNav,
   studio: StudioLandingNav,
   corporate: CorporateLandingNav,
-  terminal: TerminalLandingNav
+  terminal: TerminalLandingNav,
+  editorial: EditorialLandingNav,
+  vibrant: VibrantLandingNav
 } as const;
 
 export const landingPageHeroComponents = {
@@ -55,5 +65,7 @@ export const landingPageHeroComponents = {
   tech: TechLandingHero,
   studio: StudioLandingHero,
   corporate: CorporateLandingHero,
-  terminal: TerminalLandingHero
+  terminal: TerminalLandingHero,
+  editorial: EditorialLandingHero,
+  vibrant: VibrantLandingHero
 } as const;

apps/dashboard/src/lib/features/org/utils/landing-page.ts

@@ -27,7 +27,9 @@ export const landingPageThemes = [
   'tech',
   'studio',
   'corporate',
-  'terminal'
+  'terminal',
+  'editorial',
+  'vibrant'
 ] as const satisfies OrgLandingPageTheme[];
 
 export const defaultLandingPageHero: OrgLandingPageHero = {
@@ -724,7 +726,154 @@ export function importThemeComponent(theme: LandingPageThemeKey) {
       return import('@cio/ui/custom/org-landing-page/corporate.svelte');
     case 'terminal':
       return import('@cio/ui/custom/org-landing-page/terminal.svelte');
+    case 'editorial':
+      return import('@cio/ui/custom/org-landing-page/editorial.svelte');
+    case 'vibrant':
+      return import('@cio/ui/custom/org-landing-page/vibrant.svelte');
     default:
       return import('@cio/ui/custom/org-landing-page/minimal.svelte');
   }
 }
+
+const NAV_SNIPPET_THEMES: ReadonlySet<LandingPageThemeKey> = new Set([
+  'minimal',
+  'saas',
+  'tech',
+  'studio',
+  'corporate',
+  'terminal',
+  'editorial',
+  'vibrant'
+]);
+
+export function themeRendersNavInsideHero(theme: LandingPageThemeKey): boolean {
+  return NAV_SNIPPET_THEMES.has(theme);
+}
+
+export function themeHeaderShellClass(_theme: LandingPageThemeKey): string {
+  return 'ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans';
+}
+
+export { themeStyle } from '@cio/ui/custom/org-landing-page/theme-style';
+
+export async function importThemeCourseCard(theme: LandingPageThemeKey) {
+  switch (theme) {
+    case 'bold':
+      return (await import('@cio/ui/custom/org-landing-page/bold/course-card.svelte')).default;
+    case 'classic':
+      return (await import('@cio/ui/custom/org-landing-page/classic/course-card.svelte')).default;
+    case 'saas':
+      return (await import('@cio/ui/custom/org-landing-page/saas/course-card.svelte')).default;
+    case 'tech':
+      return (await import('@cio/ui/custom/org-landing-page/tech/course-card.svelte')).default;
+    case 'studio':
+      return (await import('@cio/ui/custom/org-landing-page/studio/course-card.svelte')).default;
+    case 'corporate':
+      return (await import('@cio/ui/custom/org-landing-page/corporate/course-card.svelte')).default;
+    case 'terminal':
+      return (await import('@cio/ui/custom/org-landing-page/terminal/course-card.svelte')).default;
+    case 'editorial':
+      return (await import('@cio/ui/custom/org-landing-page/editorial/course-card.svelte')).default;
+    case 'vibrant':
+      return (await import('@cio/ui/custom/org-landing-page/vibrant/course-card.svelte')).default;
+    default:
+      return (await import('@cio/ui/custom/org-landing-page/minimal/course-card.svelte')).default;
+  }
+}
+
+export function themeCourseGridClass(theme: LandingPageThemeKey): string {
+  switch (theme) {
+    case 'corporate':
+    case 'tech':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]';
+    case 'saas':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-px ui:bg-[var(--landing-border)] ui:border ui:border-[var(--landing-border)]';
+    case 'minimal':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6';
+    case 'studio':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-3';
+    case 'terminal':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-[14px]';
+    case 'editorial':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-4';
+    case 'vibrant':
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-5';
+    default:
+      return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-6';
+  }
+}
+
+export async function importThemeNavHero(theme: LandingPageThemeKey) {
+  switch (theme) {
+    case 'bold': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/bold/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'classic': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/classic/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'saas': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/saas/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/saas/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'tech': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/tech/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/tech/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'studio': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/studio/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/studio/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'corporate': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/corporate/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/corporate/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'terminal': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/terminal/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/terminal/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'editorial': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/editorial/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/editorial/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    case 'vibrant': {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/vibrant/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/vibrant/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+    default: {
+      const [nav, hero] = await Promise.all([
+        import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
+        import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
+      ]);
+      return { NavComponent: nav.default, HeroComponent: hero.default };
+    }
+  }
+}

apps/dashboard/src/lib/features/settings/components/theme-preview-dialog.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import XIcon from '@lucide/svelte/icons/x';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { mockOrgLandingPageProps } from '@cio/ui/custom/org-landing-page';
+  import { landingPageThemeComponents } from '$features/org/utils/landing-page-components';
+  import { landingPageThemes } from '$features/org/utils/landing-page';
+
+  type LandingPageTheme = (typeof landingPageThemes)[number];
+
+  const validThemes = new Set<LandingPageTheme>(landingPageThemes);
+
+  const previewTheme = $derived.by<LandingPageTheme | null>(() => {
+    const value = page.url.searchParams.get('preview');
+    return value && validThemes.has(value as LandingPageTheme) ? (value as LandingPageTheme) : null;
+  });
+
+  const open = $derived(previewTheme !== null);
+
+  const ThemeComponent = $derived(
+    previewTheme ? (landingPageThemeComponents[previewTheme] ?? landingPageThemeComponents.minimal) : null
+  );
+
+  const previewProps = $derived({
+    ...mockOrgLandingPageProps,
+    embed: undefined
+  });
+
+  function closePreview() {
+    const nextUrl = new URL(page.url);
+    nextUrl.searchParams.delete('preview');
+    goto(`${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`, {
+      replaceState: false,
+      keepFocus: true,
+      noScroll: true
+    });
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen && open) {
+      closePreview();
+    }
+  }
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+  <Dialog.Content
+    showCloseButton={false}
+    class="ui:w-[calc(100vw-2rem)] ui:h-[calc(100vh-2rem)] ui:max-w-[calc(100vw-2rem)] ui:max-h-[calc(100vh-2rem)] ui:overflow-hidden ui:p-0 ui:gap-0 ui:sm:max-w-[calc(100vw-2rem)]"
+  >
+    <Dialog.Title class="ui:sr-only">Theme preview</Dialog.Title>
+    <Dialog.Description class="ui:sr-only"
+      >Preview the selected landing page theme with sample content.</Dialog.Description
+    >
+
+    <div class="absolute top-3 right-3 z-[9999]">
+      <IconButton variant="secondary" aria-label="Close preview" onclick={closePreview}>
+        <XIcon size={16} />
+      </IconButton>
+    </div>
+
+    <div class="h-full w-full overflow-y-auto">
+      {#if ThemeComponent}
+        <ThemeComponent {...previewProps} disableCourseLinks={true} />
+      {/if}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/settings/pages/landingpage.svelte

@@ -2,7 +2,10 @@
   import { resolve } from '$app/paths';
   import { goto } from '$app/navigation';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import EyeIcon from '@lucide/svelte/icons/eye';
   import LayoutTemplateIcon from '@lucide/svelte/icons/layout-template';
+  import PaintbrushIcon from '@lucide/svelte/icons/paintbrush';
   import ZapIcon from '@lucide/svelte/icons/zap';
 
   import { currentOrg, currentOrgPath, isFreePlan } from '$lib/utils/store/org';
@@ -10,12 +13,19 @@
   import { t } from '$lib/utils/functions/translations';
   import { user } from '$lib/utils/store/user';
   import { basePath } from '$lib/utils/store/app';
+  import type { AccountOrg } from '$features/app/types';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { snackbar } from '$features/ui/snackbar/store';
 
   import { Button } from '@cio/ui/base/button';
   import { Badge } from '@cio/ui/base/badge';
   import * as Card from '@cio/ui/base/card';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import { IconButton } from '@cio/ui/custom/icon-button';
   import { PremiumIcon } from '@cio/ui/custom/moving-icons';
 
+  import ThemePreviewDialog from '$features/settings/components/theme-preview-dialog.svelte';
+
   import {
     createDefaultLandingPageSettings,
     landingPageThemes,
@@ -86,6 +96,18 @@
       preview: '/templates/terminal.png',
       titleKey: 'settings.landing_page.theme.cards.terminal.title',
       descriptionKey: 'settings.landing_page.theme.cards.terminal.description'
+    },
+    {
+      value: 'editorial',
+      preview: '/templates/editorial.png',
+      titleKey: 'settings.landing_page.theme.cards.editorial.title',
+      descriptionKey: 'settings.landing_page.theme.cards.editorial.description'
+    },
+    {
+      value: 'vibrant',
+      preview: '/templates/vibrant.png',
+      titleKey: 'settings.landing_page.theme.cards.vibrant.title',
+      descriptionKey: 'settings.landing_page.theme.cards.vibrant.description'
     }
   ] as const satisfies ReadonlyArray<{
     value: LandingPageTheme;
@@ -125,6 +147,37 @@
     goto(resolve(`${$currentOrgPath}/settings/landingpage/edit?theme=${theme}`, {}));
   }
 
+  async function handleApplyTheme(theme: LandingPageTheme) {
+    if (!$currentOrg.id) return;
+
+    if ($isFreePlan && isPaidTheme(theme)) {
+      openUpgradeModal();
+      return;
+    }
+
+    const updatedLandingPage = normalizeLandingPageSettings({
+      ...normalized,
+      theme
+    });
+
+    await orgApi.update($currentOrg.id, {
+      landingpage: updatedLandingPage as AccountOrg['landingpage']
+    });
+
+    normalized = updatedLandingPage;
+    snackbar.success('snackbar.success_update');
+  }
+
+  function handlePreviewTheme(theme: LandingPageTheme) {
+    const nextUrl = new URL(window.location.href);
+    nextUrl.searchParams.set('preview', theme);
+    goto(`${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`, {
+      replaceState: false,
+      keepFocus: true,
+      noScroll: true
+    });
+  }
+
   const navCount = $derived(normalized.navItems?.length ?? 0);
   const heroHeading = $derived(normalized.hero?.heading?.trim() || t.get('settings.landing_page.current.hero_empty'));
   const navCountLabel = $derived(
@@ -227,12 +280,31 @@
         <div class="ui:border-border bg-background relative overflow-hidden rounded-xl border">
           {#if isLocked}
             <div
-              class="absolute top-2 right-2 z-10 flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-xs font-medium text-white shadow-sm"
+              class="absolute top-2 left-2 z-10 flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-xs font-medium text-white shadow-sm"
             >
               <PremiumIcon size={14} color="white" />
               {$t('settings.landing_page.gallery.upgrade')}
             </div>
           {/if}
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger class="absolute top-2 right-2 z-10">
+              <IconButton variant="secondary" aria-label={$t('settings.landing_page.gallery.card_menu_label')}>
+                <EllipsisVerticalIcon size={16} />
+              </IconButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+              <DropdownMenu.Item onclick={() => handlePreviewTheme(themeCard.value)}>
+                <EyeIcon size={16} class="mr-2" />
+                {$t('settings.landing_page.gallery.preview')}
+              </DropdownMenu.Item>
+              {#if !isLocked}
+                <DropdownMenu.Item onclick={() => handleApplyTheme(themeCard.value)}>
+                  <PaintbrushIcon size={16} class="mr-2" />
+                  {$t('settings.landing_page.gallery.apply_theme')}
+                </DropdownMenu.Item>
+              {/if}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
           <div class="bg-background aspect-[4/3] w-full overflow-hidden">
             <img
               src={themeCard.preview}
@@ -257,3 +329,5 @@
     </div>
   </section>
 </div>
+
+<ThemePreviewDialog />

apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte

@@ -18,7 +18,13 @@
   import { MagicCard } from '@cio/ui/custom/animation/magic-card';
 
   import { getLectureNo } from '$features/course/utils/functions';
-  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
+  import {
+    importThemeNavHero,
+    normalizeLandingPageSettings,
+    themeHeaderShellClass,
+    themeStyle,
+    themeRendersNavInsideHero
+  } from '$features/org/utils/landing-page';
   import { currentOrg } from '$lib/utils/store/org';
   import { basePath } from '$lib/utils/store/app';
   import { user } from '$lib/utils/store/user';
@@ -57,11 +63,9 @@
 
   const landingSettings = $derived(normalizeLandingPageSettings($currentOrg.landingpage));
 
-  const heroShellClass = $derived(
-    landingSettings.theme === 'classic'
-      ? 'ui:w-full ui:bg-muted/10 ui:text-foreground ui:font-sans'
-      : 'ui:w-full ui:bg-background ui:text-foreground ui:font-sans'
-  );
+  const heroShellClass = $derived(`ui:w-full ${themeHeaderShellClass(landingSettings.theme)}`);
+  const heroShellStyle = $derived(themeStyle(landingSettings.theme));
+  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
 
   const orgNameForNav = $derived($currentOrg.name || get(courseData, 'org.name', '') || 'ClassroomIO');
   const logoUrlForNav = $derived($currentOrg.avatarUrl || undefined);
@@ -115,21 +119,10 @@
     const theme = landingSettings.theme;
     let cancelled = false;
 
-    void Promise.all([
-      theme === 'bold'
-        ? import('@cio/ui/custom/org-landing-page/bold/nav.svelte')
-        : theme === 'classic'
-          ? import('@cio/ui/custom/org-landing-page/classic/nav.svelte')
-          : import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
-      theme === 'bold'
-        ? import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
-        : theme === 'classic'
-          ? import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
-          : import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
-    ]).then(([navMod, heroMod]) => {
+    void importThemeNavHero(theme).then(({ NavComponent: nav, HeroComponent: hero }) => {
       if (!cancelled) {
-        NavComponent = navMod.default;
-        HeroComponent = heroMod.default;
+        NavComponent = nav;
+        HeroComponent = hero;
       }
     });
 
@@ -202,10 +195,10 @@
 
 <div class="flex w-full flex-col items-center bg-white dark:bg-black">
   {#if showMarketingHero}
-    <div class={heroShellClass}>
+    <div class={heroShellClass} style={heroShellStyle}>
       {#if NavComponent && HeroComponent}
-        {#if landingSettings.theme === 'minimal'}
-          <HeroComponent hero={courseHero}>
+        {#if navInsideHero}
+          <HeroComponent hero={courseHero} orgName={orgNameForNav}>
             {#snippet navigation()}
               <NavComponent
                 orgName={orgNameForNav}
@@ -222,7 +215,7 @@
             navItems={landingSettings.navItems}
             {authAction}
           />
-          <HeroComponent hero={courseHero} />
+          <HeroComponent hero={courseHero} orgName={orgNameForNav} />
         {/if}
       {/if}
 

apps/dashboard/src/lib/features/ui/navigation/app-header.svelte

@@ -11,6 +11,7 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { setupProgressApi } from '$features/setup/api/setup-progress.svelte';
   import AppSetup from './app-setup.svelte';
+  import VisitOrgSiteBtn from '$features/ui/visit-org-site-btn.svelte';
 
   const siteName = $derived($currentOrg.siteName);
 
@@ -36,6 +37,8 @@
     <span class="grow"></span>
 
     <AppSetup />
+    <VisitOrgSiteBtn variant="outline" labelKey="dashboard.open_academy" />
+
     <Search />
 
     <Popover.Root>

apps/dashboard/src/lib/features/ui/question/constants.ts

@@ -1,13 +1,6 @@
 import { QUESTION_TYPE_KEY, QUESTION_TYPE_REGISTRY, type QuestionTypeKey } from '@cio/question-types';
 
-/** Question types that require a paid plan. On free plan, these show a premium icon and open upgrade modal on click. */
-export const PREMIUM_QUESTION_TYPE_KEYS = new Set<QuestionTypeKey>([
-  QUESTION_TYPE_KEY.FILE_UPLOAD,
-  QUESTION_TYPE_KEY.ORDERING,
-  QUESTION_TYPE_KEY.LINK,
-  QUESTION_TYPE_KEY.STAR,
-  QUESTION_TYPE_KEY.VIDEO_RECORDING
-]);
+export { PREMIUM_QUESTION_TYPE_KEYS } from '@cio/question-types';
 
 const QUESTION_TYPE_LABEL_KEYS: Partial<Record<QuestionTypeKey, string>> = {
   [QUESTION_TYPE_KEY.RADIO]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.single',

apps/dashboard/src/lib/features/ui/visit-org-site-btn.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { Button, type ButtonVariant } from '@cio/ui/base/button';
-  import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
+  import SquareArrowOutUpRight from '@lucide/svelte/icons/square-arrow-out-up-right';
+
   import { TENANT_ROOT_DOMAIN } from '@cio/utils/constants';
   import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { isMobile } from '$lib/utils/store/useMobile';
@@ -45,13 +46,15 @@
   });
 </script>
 
-<Button {href} target="_blank" {variant} class={`ml-2 ${className}`.trim()}>
+<Button {href} target="_blank" {variant} class={`&_span:hidden! md:&_span:block ml-2 ${className}`.trim()}>
   {#if !$isMobile}
-    {#if isLMS}
-      {$t('dashboard.visit_site')}
-    {:else}
-      {$t(labelKey)}
-    {/if}
+    <span>
+      {#if isLMS}
+        {$t('dashboard.visit_site')}
+      {:else}
+        {$t(labelKey)}
+      {/if}
+    </span>
   {/if}
-  <ArrowUpRightIcon class="custom" />
+  <SquareArrowOutUpRight class="custom" />
 </Button>

apps/dashboard/src/lib/utils/services/auth/server.ts

@@ -9,4 +9,3 @@ export const authServerClient = createAuthClient({
   }
 });
 console.log('baseURL', baseURL);
-console.log('authServerClient', authServerClient);

apps/dashboard/src/lib/utils/translations/da.json

@@ -346,7 +346,11 @@
       "transcription_started": "Transskription startede",
       "transcription_start_failed": "Kunne ikke starte transskription",
       "transcription_completed": "Transskription afsluttet",
-      "transcript_fetch_failed": "Kunne ikke indlæse transskription"
+      "transcript_fetch_failed": "Kunne ikke indlæse transskription",
+      "thumbnail_updated": "Miniaturebilledet er opdateret",
+      "thumbnail_update_failed": "Kunne ikke opdatere thumbnail",
+      "thumbnail_regen_started": "Regenererer thumbnails...",
+      "thumbnail_regen_failed": "Kunne ikke genskabe miniaturebilleder"
     },
     "tags": {
       "group_created": "Taggruppe oprettet",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Kursus øjebliksbillede",
           "description": "Eleven tæller efter status for dette kursus."
-        }
+        },
+        "empty_overview_description": "Hold dine medarbejdere kompatible og hold øje med, hvem der står bag."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Hvor dybt skal kurset gå?",
           "topic": "Emne eller niche",
           "expertise_level": "Mål ekspertiseniveau",
-          "documentation_url": {
-            "hint": "Vi læser dette websted for at basere kurset på dit rigtige produkt."
-          }
+          "documentation_url": "Dokumentations-URL (valgfrit)"
         },
         "expert_on_x": {
           "title": "Bliv ekspert på X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Student login aktivitet",
     "login_activity_description": "Ugens mest aktive dage (sidste 90 dage)",
     "login_activity_no_data": "Ingen login-aktivitet endnu",
-    "login_activity_logins": "logins"
+    "login_activity_logins": "logins",
+    "open_academy": "Åbent Akademi"
   },
   "schedule": {
     "title": "Dit skema",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Rediger",
       "where_used": "Hvor brugt",
-      "download": "Download"
+      "download": "Download",
+      "manage_thumbnails": "Administrer thumbnails"
     },
     "table": {
       "title": "Titel",
@@ -2678,7 +2683,22 @@
       "not_available": "N/A"
     },
     "empty_description": "Aktivet findes ikke eller er ikke tilgængeligt i denne organisation.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Administrer thumbnails",
+      "manage_description": "Se forhåndsvisning af videoen, vælg en af de automatisk genererede frames, eller upload din egen.",
+      "preview_unavailable": "Forhåndsvisning er ikke tilgængelig",
+      "generated": "Genererede thumbnails",
+      "slot_start": "Start",
+      "slot_middle": "Midten",
+      "slot_end": "Slut",
+      "none_generated_warning": "Der er endnu ikke genereret miniaturebilleder. Prøv at genskabe eller uploade et brugerdefineret billede.",
+      "upload_custom": "Upload tilpasset miniaturebillede",
+      "custom_selected_hint": "Tilpasset upload vil blive gemt, når du gemmer dit valg.",
+      "custom_preview_alt": "Forhåndsvisning af tilpasset miniaturebillede",
+      "regenerate": "Regenerer",
+      "save_selection": "Gem thumbnail"
+    }
   },
   "settings": {
     "heading": "Indstillinger",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Stiplet ramme, bløde accenter, moderne produktfølelse"
+          },
+          "vibrant": {
+            "title": "Levende",
+            "description": "Fed primære paneler, solnedgangsgradienthelt, energisk plakatlook"
+          },
+          "editorial": {
+            "title": "Redaktionel",
+            "description": "Varm cremepalette, malerisk helt, raffineret magasinfølelse"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Lavet med kernefunktioner, du nemt kan tilpasse - ingen kodning nødvendig.",
         "by_classroomio": "af ClassroomIO",
         "add": "Tilføj",
-        "upgrade": "Opgrader"
+        "upgrade": "Opgrader",
+        "apply_theme": "Anvend tema",
+        "preview": "Forhåndsvisning",
+        "card_menu_label": "Temamuligheder"
       },
       "current": {
         "title": "Aktuelt tema",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Quiz mig om dette",
       "summarize_section": "Opsummer dette afsnit",
       "what_to_review": "Hvad skal jeg gennemgå næste gang?"
+    },
+    "run_running": "Genererende kursus",
+    "run_completed": "Kursusgenerering afsluttet",
+    "run_failed": "Kursusgenerering mislykkedes",
+    "run_canceled": "Kursusgenerering aflyst",
+    "run_waiting_for_worker": "Venter på baggrundsarbejderen",
+    "run_checkpoint": "Gemmer fremskridtskontrolpunkt",
+    "retry": "Prøv igen",
+    "run_monitor_aria": "Kursusgenerering i gang",
+    "run_summary": {
+      "completed": "Kørsel afsluttet.",
+      "completed_with_counts": "Kørsel afsluttet — oprettet {counts}.",
+      "failed": "Kørsel mislykkedes.",
+      "failed_with_reason": "Kørsel mislykkedes — {reason}.",
+      "canceled": "Kørsel annulleret.",
+      "canceled_with_counts": "Kørsel annulleret — oprettet {counts} før stop.",
+      "paused": "Løb sat på pause. Genoptag for at fortsætte.",
+      "paused_with_counts": "Kør på pause – oprettet {counts} indtil videre. Genoptag for at fortsætte."
+    },
+    "changes_card": {
+      "summary_count": "{count} elementer blev ændret",
+      "expand": "Udvid ændringer",
+      "collapse": "Skjul ændringer",
+      "action": {
+        "created": "Oprettet",
+        "metadata_updated": "Metadata opdateret",
+        "content_written": "Indhold skrevet",
+        "questions_added": "+{count} spørgsmål",
+        "questions_updated": "{count} spørgsmål redigeret",
+        "section_added": "Blok tilføjet",
+        "section_edited": "Blok redigeret"
+      },
+      "status": {
+        "completed": "Afsluttet",
+        "failed": "Mislykkedes",
+        "canceled": "Annulleret",
+        "paused": "Pause"
+      }
+    },
+    "plan_view": {
+      "expand": "Udvid planen",
+      "collapse": "Kollaps plan"
+    },
+    "run_monitor": {
+      "cancel": "Annuller kørsel",
+      "dismiss": "Afvis",
+      "now_doing": "Nu",
+      "input_disabled_hint": "Chatten er sat på pause, mens agenten er færdig med at bygge kurset. Annuller eller vent på, at det er fuldført."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/de.json

@@ -346,7 +346,11 @@
       "transcription_started": "Die Transkription hat begonnen",
       "transcription_start_failed": "Die Transkription konnte nicht gestartet werden",
       "transcription_completed": "Transkription abgeschlossen",
-      "transcript_fetch_failed": "Das Transkript konnte nicht geladen werden"
+      "transcript_fetch_failed": "Das Transkript konnte nicht geladen werden",
+      "thumbnail_updated": "Miniaturbild aktualisiert",
+      "thumbnail_update_failed": "Miniaturansicht konnte nicht aktualisiert werden",
+      "thumbnail_regen_started": "Miniaturansichten werden neu generiert…",
+      "thumbnail_regen_failed": "Die Miniaturansichten konnten nicht neu generiert werden"
     },
     "tags": {
       "group_created": "Tag-Gruppe erstellt",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Kursschnappschuss",
           "description": "Die Teilnehmer werden für diesen Kurs nach Status gezählt."
-        }
+        },
+        "empty_overview_description": "Halten Sie Ihre Mitarbeiter konform und verfolgen Sie, wer im Rückstand ist."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Wie tief soll der Kurs gehen?",
           "topic": "Thema oder Nische",
           "expertise_level": "Zielkompetenzniveau",
-          "documentation_url": {
-            "hint": "Wir werden diese Website lesen, um den Kurs in Ihrem realen Produkt zu verankern."
-          }
+          "documentation_url": "Dokumentations-URL (optional)"
         },
         "expert_on_x": {
           "title": "Werden Sie Experte für X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Anmeldeaktivität für Studenten",
     "login_activity_description": "Aktivste Tage der Woche (letzte 90 Tage)",
     "login_activity_no_data": "Noch keine Login-Aktivität",
-    "login_activity_logins": "Anmeldungen"
+    "login_activity_logins": "Anmeldungen",
+    "open_academy": "Offene Akademie"
   },
   "schedule": {
     "title": "Ihr Zeitplan",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Bearbeiten",
       "where_used": "Wo verwendet",
-      "download": "Herunterladen"
+      "download": "Herunterladen",
+      "manage_thumbnails": "Miniaturansichten verwalten"
     },
     "table": {
       "title": "Titel",
@@ -2678,7 +2683,22 @@
       "not_available": "N/A"
     },
     "empty_description": "Das Asset existiert nicht oder ist in dieser Organisation nicht verfügbar.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Miniaturansichten verwalten",
+      "manage_description": "Sehen Sie sich das Video in der Vorschau an, wählen Sie eines der automatisch generierten Frames aus oder laden Sie Ihr eigenes hoch.",
+      "preview_unavailable": "Vorschau nicht verfügbar",
+      "generated": "Generierte Miniaturansichten",
+      "slot_start": "Starten",
+      "slot_middle": "Mitte",
+      "slot_end": "Ende",
+      "none_generated_warning": "Es wurden noch keine Miniaturansichten generiert. Versuchen Sie, ein benutzerdefiniertes Bild neu zu generieren oder hochzuladen.",
+      "upload_custom": "Laden Sie ein benutzerdefiniertes Miniaturbild hoch",
+      "custom_selected_hint": "Der benutzerdefinierte Upload wird gespeichert, wenn Sie Ihre Auswahl speichern.",
+      "custom_preview_alt": "Benutzerdefinierte Miniaturvorschau",
+      "regenerate": "Regenerieren",
+      "save_selection": "Miniaturansicht speichern"
+    }
   },
   "settings": {
     "heading": "Einstellungen",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Rahmen mit gepunkteten Linien, sanfte Akzente, modernes Produktgefühl"
+          },
+          "vibrant": {
+            "title": "Lebendig",
+            "description": "Auffällige Primärpaneele, Held mit Sonnenuntergangsverlauf, energiegeladener Poster-Look"
+          },
+          "editorial": {
+            "title": "Leitartikel",
+            "description": "Warme Creme-Palette, malerischer Held, raffiniertes Magazin-Feeling"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Entwickelt mit Kernfunktionen, die Sie einfach anpassen können – keine Programmierung erforderlich.",
         "by_classroomio": "von ClassroomIO",
         "add": "Hinzufügen",
-        "upgrade": "Upgrade"
+        "upgrade": "Upgrade",
+        "apply_theme": "Theme anwenden",
+        "preview": "Vorschau",
+        "card_menu_label": "Themenoptionen"
       },
       "current": {
         "title": "Aktuelles Thema",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Befragen Sie mich dazu",
       "summarize_section": "Fassen Sie diesen Abschnitt zusammen",
       "what_to_review": "Was sollte ich als nächstes überprüfen?"
+    },
+    "run_running": "Generierender Kurs",
+    "run_completed": "Kurserstellung abgeschlossen",
+    "run_failed": "Die Kursgenerierung ist fehlgeschlagen",
+    "run_canceled": "Kursgenerierung abgebrochen",
+    "run_waiting_for_worker": "Warten auf den Hintergrundarbeiter",
+    "run_checkpoint": "Fortschrittskontrollpunkt wird gespeichert",
+    "retry": "Versuchen Sie es noch einmal",
+    "run_monitor_aria": "Kursgenerierung läuft",
+    "run_summary": {
+      "completed": "Lauf abgeschlossen.",
+      "completed_with_counts": "Lauf abgeschlossen – {counts} erstellt.",
+      "failed": "Ausführung fehlgeschlagen.",
+      "failed_with_reason": "Ausführung fehlgeschlagen – {reason}.",
+      "canceled": "Lauf abgebrochen.",
+      "canceled_with_counts": "Lauf abgebrochen – {counts} vor dem Stoppen erstellt.",
+      "paused": "Lauf pausiert. Fortfahren, um fortzufahren.",
+      "paused_with_counts": "Ausführung pausiert – bisher {counts} erstellt. Fortfahren, um fortzufahren."
+    },
+    "changes_card": {
+      "summary_count": "{count} Elemente geändert",
+      "expand": "Erweitern Sie Änderungen",
+      "collapse": "Änderungen reduzieren",
+      "action": {
+        "created": "Erstellt",
+        "metadata_updated": "Metadaten aktualisiert",
+        "content_written": "Inhalt geschrieben",
+        "questions_added": "+{count} Fragen",
+        "questions_updated": "{count} Fragen bearbeitet",
+        "section_added": "Block hinzugefügt",
+        "section_edited": "Block bearbeitet"
+      },
+      "status": {
+        "completed": "Abgeschlossen",
+        "failed": "Fehlgeschlagen",
+        "canceled": "Abgesagt",
+        "paused": "Angehalten"
+      }
+    },
+    "plan_view": {
+      "expand": "Plan erweitern",
+      "collapse": "Plan zusammenbrechen"
+    },
+    "run_monitor": {
+      "cancel": "Lauf abbrechen",
+      "dismiss": "Entlassen",
+      "now_doing": "Jetzt",
+      "input_disabled_hint": "Der Chat wird angehalten, während der Agent mit der Erstellung des Kurses fertig ist. Brechen Sie den Vorgang ab oder warten Sie, bis der Vorgang abgeschlossen ist."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/en.json

@@ -633,6 +633,14 @@
           "terminal": {
             "title": "Terminal",
             "description": "Dark surface, ghosted wordmark, CLI-inspired catalog"
+          },
+          "editorial": {
+            "title": "Editorial",
+            "description": "Warm cream palette, painterly hero, refined magazine feel"
+          },
+          "vibrant": {
+            "title": "Vibrant",
+            "description": "Bold primary panels, sunset gradient hero, energetic poster look"
           }
         }
       },
@@ -657,7 +665,10 @@
         "description": "Made with core features you can easily customize — no coding needed.",
         "by_classroomio": "by ClassroomIO",
         "add": "Add",
-        "upgrade": "Upgrade"
+        "upgrade": "Upgrade",
+        "apply_theme": "Apply Theme",
+        "preview": "Preview",
+        "card_menu_label": "Theme options"
       },
       "editor": {
         "save": "Save",
@@ -4288,6 +4299,12 @@
     "plan_working": "Working",
     "plan_thinking": "Thinking through your request…",
     "plan_progress": "{completed} / {total} steps completed",
+    "run_running": "Generating course",
+    "run_completed": "Course generation complete",
+    "run_failed": "Course generation failed",
+    "run_canceled": "Course generation canceled",
+    "run_waiting_for_worker": "Waiting for the background worker",
+    "run_checkpoint": "Saving progress checkpoint",
     "plan_implement": "Implement Plan",
     "plan_ask_changes_placeholder": "Tell me what to change about the plan…",
     "plan_ask_changes_send_aria": "Send change request",
@@ -4313,6 +4330,48 @@
     "tokens_label": "tokens",
     "implementing_course_plan": "Implementing Course Plan",
     "resume": "Resume",
+    "retry": "Retry",
+    "run_monitor_aria": "Course generation in progress",
+    "run_monitor": {
+      "cancel": "Cancel run",
+      "dismiss": "Dismiss",
+      "now_doing": "Now",
+      "input_disabled_hint": "Chat is paused while the agent finishes building the course. Cancel or wait for it to complete."
+    },
+    "plan_view": {
+      "expand": "Expand plan",
+      "collapse": "Collapse plan"
+    },
+    "changes_card": {
+      "summary_count": "{count} items changed",
+      "expand": "Expand changes",
+      "collapse": "Collapse changes",
+      "status": {
+        "completed": "Completed",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "paused": "Paused"
+      },
+      "action": {
+        "created": "Created",
+        "metadata_updated": "Metadata updated",
+        "content_written": "Content written",
+        "questions_added": "+{count} questions",
+        "questions_updated": "{count} questions edited",
+        "section_added": "Block added",
+        "section_edited": "Block edited"
+      }
+    },
+    "run_summary": {
+      "completed": "Run completed.",
+      "completed_with_counts": "Run completed — created {counts}.",
+      "failed": "Run failed.",
+      "failed_with_reason": "Run failed — {reason}.",
+      "canceled": "Run canceled.",
+      "canceled_with_counts": "Run canceled — created {counts} before stopping.",
+      "paused": "Run paused. Resume to continue.",
+      "paused_with_counts": "Run paused — created {counts} so far. Resume to continue."
+    },
     "stopped_content_kept": "Stopped. Created content has been kept.",
     "run_failed_after": "{action} did not finish successfully.",
     "tool": {

apps/dashboard/src/lib/utils/translations/es.json

@@ -346,7 +346,11 @@
       "transcription_started": "Transcripción iniciada",
       "transcription_start_failed": "No se pudo iniciar la transcripción",
       "transcription_completed": "Transcripción finalizada",
-      "transcript_fetch_failed": "No se pudo cargar la transcripción"
+      "transcript_fetch_failed": "No se pudo cargar la transcripción",
+      "thumbnail_updated": "Miniatura actualizada",
+      "thumbnail_update_failed": "No se pudo actualizar la miniatura",
+      "thumbnail_regen_started": "Regenerando miniaturas…",
+      "thumbnail_regen_failed": "No se pudieron regenerar las miniaturas"
     },
     "tags": {
       "group_created": "Grupo de etiquetas creado",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Resumen del curso",
           "description": "El alumno cuenta por estado para este curso."
-        }
+        },
+        "empty_overview_description": "Haga que sus empleados cumplan y realice un seguimiento de quién está detrás."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "¿Qué profundidad debe tener el curso?",
           "topic": "Tema o nicho",
           "expertise_level": "Nivel de experiencia objetivo",
-          "documentation_url": {
-            "hint": "Leeremos este sitio para basar el curso en su producto real."
-          }
+          "documentation_url": "URL de documentación (opcional)"
         },
         "expert_on_x": {
           "title": "Conviértete en un experto en X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Actividad de inicio de sesión del estudiante",
     "login_activity_description": "Días más activos de la semana (últimos 90 días)",
     "login_activity_no_data": "Aún no hay actividad de inicio de sesión",
-    "login_activity_logins": "inicios de sesión"
+    "login_activity_logins": "inicios de sesión",
+    "open_academy": "Academia Abierta"
   },
   "schedule": {
     "title": "Tu horario",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Editar",
       "where_used": "donde se usa",
-      "download": "Descargar"
+      "download": "Descargar",
+      "manage_thumbnails": "Administrar miniaturas"
     },
     "table": {
       "title": "Título",
@@ -2678,7 +2683,22 @@
       "not_available": "N/A"
     },
     "empty_description": "El activo no existe o no está disponible en esta organización.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Administrar miniaturas",
+      "manage_description": "Obtenga una vista previa del vídeo, elija uno de los fotogramas generados automáticamente o cargue el suyo propio.",
+      "preview_unavailable": "Vista previa no disponible",
+      "generated": "Miniaturas generadas",
+      "slot_start": "Empezar",
+      "slot_middle": "Medio",
+      "slot_end": "Fin",
+      "none_generated_warning": "Aún no se han generado miniaturas. Intente regenerar o cargar una imagen personalizada.",
+      "upload_custom": "Subir miniatura personalizada",
+      "custom_selected_hint": "La carga personalizada se guardará cuando guarde su selección.",
+      "custom_preview_alt": "Vista previa en miniatura personalizada",
+      "regenerate": "regenerar",
+      "save_selection": "Guardar miniatura"
+    }
   },
   "settings": {
     "heading": "Configuración",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Marco de líneas punteadas, detalles suaves, sensación de producto moderno."
+          },
+          "vibrant": {
+            "title": "Vibrante",
+            "description": "Paneles primarios atrevidos, héroe degradado al atardecer, aspecto de póster enérgico"
+          },
+          "editorial": {
+            "title": "Redacción",
+            "description": "Paleta de crema cálida, héroe pictórico, sensación refinada de revista"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Creado con funciones principales que puedes personalizar fácilmente, sin necesidad de codificación.",
         "by_classroomio": "por ClassroomIO",
         "add": "Añadir",
-        "upgrade": "Actualizar"
+        "upgrade": "Actualizar",
+        "apply_theme": "Aplicar tema",
+        "preview": "Vista previa",
+        "card_menu_label": "Opciones de tema"
       },
       "current": {
         "title": "Tema actual",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Pregúntame sobre esto",
       "summarize_section": "Resumir esta sección",
       "what_to_review": "¿Qué debo revisar a continuación?"
+    },
+    "run_running": "Generando curso",
+    "run_completed": "Generación del curso completa",
+    "run_failed": "Falló la generación del curso",
+    "run_canceled": "Generación de curso cancelada",
+    "run_waiting_for_worker": "Esperando al trabajador en segundo plano.",
+    "run_checkpoint": "Guardar punto de control de progreso",
+    "retry": "Reintentar",
+    "run_monitor_aria": "Generación de cursos en progreso",
+    "run_summary": {
+      "completed": "Ejecución completada.",
+      "completed_with_counts": "Ejecución completada: creada {counts}.",
+      "failed": "La ejecución falló.",
+      "failed_with_reason": "La ejecución falló: {motivo}.",
+      "canceled": "Ejecución cancelada.",
+      "canceled_with_counts": "Ejecución cancelada: creó {counts} antes de detenerse.",
+      "paused": "Ejecución pausada. Reanudar para continuar.",
+      "paused_with_counts": "Ejecución pausada: creado {counts} hasta el momento. Reanudar para continuar."
+    },
+    "changes_card": {
+      "summary_count": "{count} elementos cambiados",
+      "expand": "Ampliar cambios",
+      "collapse": "Contraer cambios",
+      "action": {
+        "created": "Creado",
+        "metadata_updated": "Metadatos actualizados",
+        "content_written": "Contenido escrito",
+        "questions_added": "+{count} preguntas",
+        "questions_updated": "{count} preguntas editadas",
+        "section_added": "Bloque agregado",
+        "section_edited": "Bloque editado"
+      },
+      "status": {
+        "completed": "Completado",
+        "failed": "Fallido",
+        "canceled": "Cancelado",
+        "paused": "En pausa"
+      }
+    },
+    "plan_view": {
+      "expand": "Ampliar plano",
+      "collapse": "Plan de colapso"
+    },
+    "run_monitor": {
+      "cancel": "Cancelar ejecución",
+      "dismiss": "Descartar",
+      "now_doing": "ahora",
+      "input_disabled_hint": "El chat se pausa mientras el agente termina de crear el curso. Cancele o espere a que se complete."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/fr.json

@@ -346,7 +346,11 @@
       "transcription_started": "Transcription commencée",
       "transcription_start_failed": "Impossible de démarrer la transcription",
       "transcription_completed": "Transcription terminée",
-      "transcript_fetch_failed": "Impossible de charger la transcription"
+      "transcript_fetch_failed": "Impossible de charger la transcription",
+      "thumbnail_updated": "Miniature mise à jour",
+      "thumbnail_update_failed": "Échec de la mise à jour de la vignette",
+      "thumbnail_regen_started": "Régénération des vignettes…",
+      "thumbnail_regen_failed": "Échec de la régénération des miniatures"
     },
     "tags": {
       "group_created": "Groupe de balises créé",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Aperçu du cours",
           "description": "L'apprenant compte par statut pour ce cours."
-        }
+        },
+        "empty_overview_description": "Gardez vos employés conformes et suivez qui est derrière."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Jusqu’où doit aller le cours ?",
           "topic": "Sujet ou niche",
           "expertise_level": "Niveau d’expertise cible",
-          "documentation_url": {
-            "hint": "Nous lirons ce site pour ancrer le cours dans votre produit réel."
-          }
+          "documentation_url": "URL de la documentation (facultatif)"
         },
         "expert_on_x": {
           "title": "Devenez un expert sur X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Activité de connexion des étudiants",
     "login_activity_description": "Jours les plus actifs de la semaine (90 derniers jours)",
     "login_activity_no_data": "Aucune activité de connexion pour le moment",
-    "login_activity_logins": "connexions"
+    "login_activity_logins": "connexions",
+    "open_academy": "Académie ouverte"
   },
   "schedule": {
     "title": "Votre emploi du temps",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Modifier",
       "where_used": "Où utilisé",
-      "download": "Télécharger"
+      "download": "Télécharger",
+      "manage_thumbnails": "Gérer les vignettes"
     },
     "table": {
       "title": "Titre",
@@ -2678,7 +2683,22 @@
       "not_available": "N/D"
     },
     "empty_description": "L'actif n'existe pas ou n'est pas disponible dans cette organisation.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Gérer les vignettes",
+      "manage_description": "Prévisualisez la vidéo, choisissez l'une des images générées automatiquement ou téléchargez la vôtre.",
+      "preview_unavailable": "Aperçu indisponible",
+      "generated": "Miniatures générées",
+      "slot_start": "Commencer",
+      "slot_middle": "Milieu",
+      "slot_end": "Fin",
+      "none_generated_warning": "Aucune vignette générée pour l'instant. Essayez de régénérer ou de télécharger une image personnalisée.",
+      "upload_custom": "Télécharger une miniature personnalisée",
+      "custom_selected_hint": "Le téléchargement personnalisé sera enregistré lorsque vous enregistrerez votre sélection.",
+      "custom_preview_alt": "Aperçu miniature personnalisé",
+      "regenerate": "Régénérer",
+      "save_selection": "Enregistrer la vignette"
+    }
   },
   "settings": {
     "heading": "Paramètres",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Cadre en pointillés, accents doux, sensation de produit moderne"
+          },
+          "vibrant": {
+            "title": "Vibrant",
+            "description": "Panneaux primaires audacieux, héros dégradé au coucher du soleil, look d'affiche énergique"
+          },
+          "editorial": {
+            "title": "Éditorial",
+            "description": "Palette de crème chaude, héros pictural, sensation de magazine raffinée"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Conçu avec des fonctionnalités de base que vous pouvez facilement personnaliser – aucun codage requis.",
         "by_classroomio": "par ClassroomIO",
         "add": "Ajouter",
-        "upgrade": "Mise à niveau"
+        "upgrade": "Mise à niveau",
+        "apply_theme": "Appliquer le thème",
+        "preview": "Aperçu",
+        "card_menu_label": "Options de thème"
       },
       "current": {
         "title": "Thème actuel",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Questionnez-moi à ce sujet",
       "summarize_section": "Résumer cette section",
       "what_to_review": "Que dois-je réviser ensuite ?"
+    },
+    "run_running": "Génération de cours",
+    "run_completed": "Génération de cours terminée",
+    "run_failed": "La génération du cours a échoué",
+    "run_canceled": "Génération de cours annulée",
+    "run_waiting_for_worker": "En attendant le travailleur d'arrière-plan",
+    "run_checkpoint": "Enregistrement du point de contrôle de progression",
+    "retry": "Réessayer",
+    "run_monitor_aria": "Génération de cours en cours",
+    "run_summary": {
+      "completed": "Exécution terminée.",
+      "completed_with_counts": "Exécution terminée – créé {counts}.",
+      "failed": "L'exécution a échoué.",
+      "failed_with_reason": "Échec de l'exécution – {raison}.",
+      "canceled": "Exécution annulée.",
+      "canceled_with_counts": "Exécution annulée – créé {counts} avant de s'arrêter.",
+      "paused": "Exécution en pause. Reprendre pour continuer.",
+      "paused_with_counts": "Exécution en pause – créé {counts} jusqu'à présent. Reprendre pour continuer."
+    },
+    "changes_card": {
+      "summary_count": "{count} éléments modifiés",
+      "expand": "Développer les modifications",
+      "collapse": "Réduire les modifications",
+      "action": {
+        "created": "Créé",
+        "metadata_updated": "Métadonnées mises à jour",
+        "content_written": "Contenu écrit",
+        "questions_added": "+{count} questions",
+        "questions_updated": "{count} questions modifiées",
+        "section_added": "Bloc ajouté",
+        "section_edited": "Bloc modifié"
+      },
+      "status": {
+        "completed": "Terminé",
+        "failed": "Échec",
+        "canceled": "Annulé",
+        "paused": "En pause"
+      }
+    },
+    "plan_view": {
+      "expand": "Élargir le plan",
+      "collapse": "Plan d'effondrement"
+    },
+    "run_monitor": {
+      "cancel": "Annuler l'exécution",
+      "dismiss": "Rejeter",
+      "now_doing": "Maintenant",
+      "input_disabled_hint": "La conversation est suspendue pendant que l'agent termine la création du cours. Annulez ou attendez qu'il soit terminé."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/hi.json

@@ -346,7 +346,11 @@
       "transcription_started": "प्रतिलेखन प्रारंभ हुआ",
       "transcription_start_failed": "प्रतिलेखन प्रारंभ नहीं किया जा सका",
       "transcription_completed": "प्रतिलेखन समाप्त हुआ",
-      "transcript_fetch_failed": "प्रतिलेख लोड नहीं किया जा सका"
+      "transcript_fetch_failed": "प्रतिलेख लोड नहीं किया जा सका",
+      "thumbnail_updated": "थंबनेल अपडेट किया गया",
+      "thumbnail_update_failed": "थंबनेल अपडेट करने में विफल",
+      "thumbnail_regen_started": "थंबनेल पुनर्जीवित हो रहे हैं…",
+      "thumbnail_regen_failed": "थंबनेल पुन: उत्पन्न करने में विफल"
     },
     "tags": {
       "group_created": "टैग समूह बनाया गया",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "कोर्स स्नैपशॉट",
           "description": "इस पाठ्यक्रम के लिए शिक्षार्थी की गणना उसकी स्थिति के आधार पर की जाती है।"
-        }
+        },
+        "empty_overview_description": "अपने कर्मचारियों को आज्ञाकारी रखें और ट्रैक करें कि पीछे कौन है।"
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "पाठ्यक्रम कितना गहरा होना चाहिए?",
           "topic": "विषय या आला",
           "expertise_level": "लक्ष्य विशेषज्ञता स्तर",
-          "documentation_url": {
-            "hint": "हम आपके वास्तविक उत्पाद में पाठ्यक्रम को आधार बनाने के लिए इस साइट को पढ़ेंगे।"
-          }
+          "documentation_url": "दस्तावेज़ीकरण URL (वैकल्पिक)"
         },
         "expert_on_x": {
           "title": "एक्स पर विशेषज्ञ बनें",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "छात्र लॉगिन गतिविधि",
     "login_activity_description": "सप्ताह के सर्वाधिक सक्रिय दिन (पिछले 90 दिन)",
     "login_activity_no_data": "अभी तक कोई लॉगिन गतिविधि नहीं",
-    "login_activity_logins": "लॉगिन"
+    "login_activity_logins": "लॉगिन",
+    "open_academy": "अकादमी खोलें"
   },
   "schedule": {
     "title": "आपका शेड्यूल",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "संपादित करें",
       "where_used": "कहां उपयोग किया जाता है",
-      "download": "डाउनलोड करें"
+      "download": "डाउनलोड करें",
+      "manage_thumbnails": "थंबनेल प्रबंधित करें"
     },
     "table": {
       "title": "शीर्षक",
@@ -2678,7 +2683,22 @@
       "not_available": "एन/ए"
     },
     "empty_description": "संपत्ति इस संगठन में मौजूद नहीं है या उपलब्ध नहीं है.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "थंबनेल प्रबंधित करें",
+      "manage_description": "वीडियो का पूर्वावलोकन करें, स्वतः-निर्मित फ़्रेमों में से एक चुनें, या अपना स्वयं का अपलोड करें।",
+      "preview_unavailable": "पूर्वावलोकन अनुपलब्ध",
+      "generated": "जेनरेट किए गए थंबनेल",
+      "slot_start": "प्रारंभ करें",
+      "slot_middle": "मध्य",
+      "slot_end": "ख़त्म",
+      "none_generated_warning": "अभी तक कोई थंबनेल उत्पन्न नहीं हुआ. एक कस्टम छवि पुनः बनाने या अपलोड करने का प्रयास करें।",
+      "upload_custom": "कस्टम थंबनेल अपलोड करें",
+      "custom_selected_hint": "जब आप अपना चयन सहेजेंगे तो कस्टम अपलोड सहेजा जाएगा।",
+      "custom_preview_alt": "कस्टम थंबनेल पूर्वावलोकन",
+      "regenerate": "पुनर्जीवित करें",
+      "save_selection": "थंबनेल सहेजें"
+    }
   },
   "settings": {
     "heading": "सेटिंग्स",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "सास",
             "description": "बिंदीदार रेखा फ्रेम, नरम लहजे, आधुनिक उत्पाद अनुभव"
+          },
+          "vibrant": {
+            "title": "जीवंत",
+            "description": "बोल्ड प्राइमरी पैनल, सनसेट ग्रेडिएंट हीरो, ऊर्जावान पोस्टर लुक"
+          },
+          "editorial": {
+            "title": "सम्पादकीय",
+            "description": "गर्म क्रीम पैलेट, चित्रकारी नायक, परिष्कृत पत्रिका अनुभव"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "मुख्य विशेषताओं के साथ बनाया गया जिसे आप आसानी से अनुकूलित कर सकते हैं - किसी कोडिंग की आवश्यकता नहीं है।",
         "by_classroomio": "क्लासरूमआईओ द्वारा",
         "add": "जोड़ें",
-        "upgrade": "अपग्रेड करें"
+        "upgrade": "अपग्रेड करें",
+        "apply_theme": "थीम लागू करें",
+        "preview": "पूर्वावलोकन",
+        "card_menu_label": "थीम विकल्प"
       },
       "current": {
         "title": "वर्तमान विषय",
@@ -3952,6 +3983,54 @@
       "quiz_me": "इस पर मुझसे प्रश्नोत्तरी करें",
       "summarize_section": "इस अनुभाग को सारांशित करें",
       "what_to_review": "मुझे आगे क्या समीक्षा करनी चाहिए?"
+    },
+    "run_running": "जनरेटिंग कोर्स",
+    "run_completed": "पाठ्यक्रम निर्माण पूर्ण",
+    "run_failed": "पाठ्यक्रम निर्माण विफल रहा",
+    "run_canceled": "पाठ्यक्रम निर्माण रद्द कर दिया गया",
+    "run_waiting_for_worker": "पृष्ठभूमि कार्यकर्ता की प्रतीक्षा की जा रही है",
+    "run_checkpoint": "प्रगति चेकप्वाइंट सहेजा जा रहा है",
+    "retry": "पुनः प्रयास करें",
+    "run_monitor_aria": "पाठ्यक्रम सृजन प्रगति पर है",
+    "run_summary": {
+      "completed": "रन पूरा हुआ.",
+      "completed_with_counts": "रन पूरा हुआ - {गिनती} बनाई गई।",
+      "failed": "रन विफल.",
+      "failed_with_reason": "रन विफल - {कारण}।",
+      "canceled": "चलाना रद्द कर दिया गया.",
+      "canceled_with_counts": "दौड़ रद्द कर दी गई - रुकने से पहले {गिनती} बनाई गई।",
+      "paused": "रन रुका हुआ. जारी रखने के लिए फिर से शुरू करें.",
+      "paused_with_counts": "रन रोका गया - अब तक {गिनती} बनाई गई। जारी रखने के लिए फिर से शुरू करें."
+    },
+    "changes_card": {
+      "summary_count": "{गिनती} आइटम बदल गए",
+      "expand": "परिवर्तनों का विस्तार करें",
+      "collapse": "परिवर्तन संक्षिप्त करें",
+      "action": {
+        "created": "बनाया गया",
+        "metadata_updated": "मेटाडेटा अपडेट किया गया",
+        "content_written": "सामग्री लिखी गई",
+        "questions_added": "+{गिनती} प्रश्न",
+        "questions_updated": "{गिनती} प्रश्न संपादित",
+        "section_added": "ब्लॉक जोड़ा गया",
+        "section_edited": "ब्लॉक संपादित"
+      },
+      "status": {
+        "completed": "पूरा हुआ",
+        "failed": "असफल",
+        "canceled": "रद्द कर दिया गया",
+        "paused": "रुका हुआ"
+      }
+    },
+    "plan_view": {
+      "expand": "योजना का विस्तार करें",
+      "collapse": "संक्षिप्त योजना"
+    },
+    "run_monitor": {
+      "cancel": "चलाएँ रद्द करें",
+      "dismiss": "ख़ारिज करें",
+      "now_doing": "अभी",
+      "input_disabled_hint": "जब एजेंट पाठ्यक्रम का निर्माण पूरा कर लेता है तो चैट रोक दी जाती है। रद्द करें या इसके पूरा होने तक प्रतीक्षा करें।"
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/pl.json

@@ -346,7 +346,11 @@
       "transcription_started": "Rozpoczęto transkrypcję",
       "transcription_start_failed": "Nie można rozpocząć transkrypcji",
       "transcription_completed": "Transkrypcja zakończona",
-      "transcript_fetch_failed": "Nie udało się wczytać transkrypcji"
+      "transcript_fetch_failed": "Nie udało się wczytać transkrypcji",
+      "thumbnail_updated": "Miniatura zaktualizowana",
+      "thumbnail_update_failed": "Nie udało się zaktualizować miniatury",
+      "thumbnail_regen_started": "Regeneruję miniatury…",
+      "thumbnail_regen_failed": "Nie udało się ponownie wygenerować miniatur"
     },
     "tags": {
       "group_created": "Utworzono grupę tagów",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Migawka kursu",
           "description": "Uczestnicy są zliczani według statusu tego kursu."
-        }
+        },
+        "empty_overview_description": "Dbaj o przestrzeganie zasad przez swoich pracowników i śledź, kto ma zaległości."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Jak głęboko powinien sięgać kurs?",
           "topic": "Temat lub nisza",
           "expertise_level": "Docelowy poziom wiedzy",
-          "documentation_url": {
-            "hint": "Przeczytamy tę witrynę, aby oprzeć kurs na Twoim prawdziwym produkcie."
-          }
+          "documentation_url": "Adres URL dokumentacji (opcjonalnie)"
         },
         "expert_on_x": {
           "title": "Zostań ekspertem w dziedzinie X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Aktywność logowania ucznia",
     "login_activity_description": "Najbardziej aktywne dni tygodnia (ostatnie 90 dni)",
     "login_activity_no_data": "Brak aktywności związanej z logowaniem",
-    "login_activity_logins": "logowania"
+    "login_activity_logins": "logowania",
+    "open_academy": "Otwarta Akademia"
   },
   "schedule": {
     "title": "Twój harmonogram",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Edytuj",
       "where_used": "Gdzie używany",
-      "download": "Pobierz"
+      "download": "Pobierz",
+      "manage_thumbnails": "Zarządzaj miniaturami"
     },
     "table": {
       "title": "Tytuł",
@@ -2678,7 +2683,22 @@
       "not_available": "Nie dotyczy"
     },
     "empty_description": "Zasób nie istnieje lub nie jest dostępny w tej organizacji.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Zarządzaj miniaturami",
+      "manage_description": "Obejrzyj podgląd wideo, wybierz jedną z automatycznie wygenerowanych klatek lub prześlij własną.",
+      "preview_unavailable": "Podgląd niedostępny",
+      "generated": "Wygenerowane miniatury",
+      "slot_start": "Zacznij",
+      "slot_middle": "Środek",
+      "slot_end": "Koniec",
+      "none_generated_warning": "Nie wygenerowano jeszcze żadnych miniatur. Spróbuj zregenerować lub prześlij niestandardowy obraz.",
+      "upload_custom": "Prześlij niestandardową miniaturę",
+      "custom_selected_hint": "Przesyłanie niestandardowe zostanie zapisane po zapisaniu wyboru.",
+      "custom_preview_alt": "Niestandardowy podgląd miniatur",
+      "regenerate": "Zregeneruj się",
+      "save_selection": "Zapisz miniaturę"
+    }
   },
   "settings": {
     "heading": "Ustawienia",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Ramka w postaci przerywanej linii, miękkie akcenty, nowoczesny wygląd produktu"
+          },
+          "vibrant": {
+            "title": "Żywy",
+            "description": "Odważne panele główne, bohater gradientu zachodu słońca, energetyczny wygląd plakatu"
+          },
+          "editorial": {
+            "title": "Redakcja",
+            "description": "Ciepła kremowa paleta, malarski bohater, wyrafinowany klimat magazynu"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Zawiera podstawowe funkcje, które można łatwo dostosować — bez konieczności kodowania.",
         "by_classroomio": "przez ClassroomIO",
         "add": "Dodaj",
-        "upgrade": "Uaktualnij"
+        "upgrade": "Uaktualnij",
+        "apply_theme": "Zastosuj motyw",
+        "preview": "Podgląd",
+        "card_menu_label": "Opcje motywu"
       },
       "current": {
         "title": "Aktualny temat",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Przepytaj mnie na ten temat",
       "summarize_section": "Podsumuj tę sekcję",
       "what_to_review": "Co powinienem zrecenzować dalej?"
+    },
+    "run_running": "Generowanie kursu",
+    "run_completed": "Zakończono generowanie kursu",
+    "run_failed": "Wygenerowanie kursu nie powiodło się",
+    "run_canceled": "Generowanie kursu anulowane",
+    "run_waiting_for_worker": "Czekam na pracownika w tle",
+    "run_checkpoint": "Zapisywanie punktu kontrolnego postępu",
+    "retry": "Spróbuj ponownie",
+    "run_monitor_aria": "Trwa generowanie kursu",
+    "run_summary": {
+      "completed": "Uruchomienie zakończone.",
+      "completed_with_counts": "Uruchomienie zakończone — utworzono {counts}.",
+      "failed": "Uruchomienie nie powiodło się.",
+      "failed_with_reason": "Uruchomienie nie powiodło się — {powód}.",
+      "canceled": "Bieg odwołany.",
+      "canceled_with_counts": "Uruchomienie anulowane — utworzono {counts} przed zatrzymaniem.",
+      "paused": "Uruchomienie wstrzymane. Wznów, aby kontynuować.",
+      "paused_with_counts": "Uruchomienie wstrzymane — do tej pory utworzono {counts}. Wznów, aby kontynuować."
+    },
+    "changes_card": {
+      "summary_count": "Zmieniono {count} elementów",
+      "expand": "Rozwiń zmiany",
+      "collapse": "Zwiń zmiany",
+      "action": {
+        "created": "Utworzono",
+        "metadata_updated": "Metadane zaktualizowane",
+        "content_written": "Treść napisana",
+        "questions_added": "+{count} pytań",
+        "questions_updated": "Edytowano {count} pytań",
+        "section_added": "Dodano blok",
+        "section_edited": "Blok edytowany"
+      },
+      "status": {
+        "completed": "Ukończono",
+        "failed": "Nie udało się",
+        "canceled": "Anulowano",
+        "paused": "Wstrzymano"
+      }
+    },
+    "plan_view": {
+      "expand": "Rozwiń plan",
+      "collapse": "Zwiń plan"
+    },
+    "run_monitor": {
+      "cancel": "Anuluj bieg",
+      "dismiss": "Odrzuć",
+      "now_doing": "Teraz",
+      "input_disabled_hint": "Czat zostaje wstrzymany, gdy agent kończy tworzenie kursu. Anuluj lub poczekaj na zakończenie."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/pt.json

@@ -346,7 +346,11 @@
       "transcription_started": "Transcrição iniciada",
       "transcription_start_failed": "Não foi possível iniciar a transcrição",
       "transcription_completed": "Transcrição concluída",
-      "transcript_fetch_failed": "Não foi possível carregar a transcrição"
+      "transcript_fetch_failed": "Não foi possível carregar a transcrição",
+      "thumbnail_updated": "Miniatura atualizada",
+      "thumbnail_update_failed": "Falha ao atualizar a miniatura",
+      "thumbnail_regen_started": "Regenerando miniaturas…",
+      "thumbnail_regen_failed": "Falha ao regenerar miniaturas"
     },
     "tags": {
       "group_created": "Grupo de tags criado",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Instantâneo do curso",
           "description": "Contagens de alunos por status para este curso."
-        }
+        },
+        "empty_overview_description": "Mantenha seus funcionários em conformidade e monitore quem está por trás."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Quão profundo o curso deve ir?",
           "topic": "Tópico ou nicho",
           "expertise_level": "Nível de especialização alvo",
-          "documentation_url": {
-            "hint": "Leremos este site para fundamentar o curso em seu produto real."
-          }
+          "documentation_url": "URL da documentação (opcional)"
         },
         "expert_on_x": {
           "title": "Torne-se um especialista em X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Atividade de login do aluno",
     "login_activity_description": "Dias mais ativos da semana (últimos 90 dias)",
     "login_activity_no_data": "Nenhuma atividade de login ainda",
-    "login_activity_logins": "logins"
+    "login_activity_logins": "logins",
+    "open_academy": "Academia Aberta"
   },
   "schedule": {
     "title": "Sua programação",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Editar",
       "where_used": "Onde usado",
-      "download": "Baixar"
+      "download": "Baixar",
+      "manage_thumbnails": "Gerenciar miniaturas"
     },
     "table": {
       "title": "Título",
@@ -2678,7 +2683,22 @@
       "not_available": "N/A"
     },
     "empty_description": "O ativo não existe ou não está disponível nesta organização.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Gerenciar miniaturas",
+      "manage_description": "Visualize o vídeo, escolha um dos quadros gerados automaticamente ou carregue o seu próprio.",
+      "preview_unavailable": "Visualização indisponível",
+      "generated": "Miniaturas geradas",
+      "slot_start": "Começar",
+      "slot_middle": "Meio",
+      "slot_end": "Fim",
+      "none_generated_warning": "Nenhuma miniatura gerada ainda. Tente regenerar ou fazer upload de uma imagem personalizada.",
+      "upload_custom": "Carregar miniatura personalizada",
+      "custom_selected_hint": "O upload personalizado será salvo quando você salvar sua seleção.",
+      "custom_preview_alt": "Pré-visualização de miniaturas personalizadas",
+      "regenerate": "Regenerar",
+      "save_selection": "Salvar miniatura"
+    }
   },
   "settings": {
     "heading": "Configurações",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Moldura de linha pontilhada, detalhes suaves, toque de produto moderno"
+          },
+          "vibrant": {
+            "title": "Vibrante",
+            "description": "Painéis primários ousados, herói gradiente do pôr do sol, aparência de pôster energético"
+          },
+          "editorial": {
+            "title": "Redação",
+            "description": "Paleta de creme quente, herói pictórico, sensação refinada de revista"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Feito com recursos básicos que você pode personalizar facilmente – sem necessidade de codificação.",
         "by_classroomio": "da ClassroomIO",
         "add": "Adicionar",
-        "upgrade": "Atualizar"
+        "upgrade": "Atualizar",
+        "apply_theme": "Aplicar tema",
+        "preview": "Visualização",
+        "card_menu_label": "Opções de tema"
       },
       "current": {
         "title": "Tema atual",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Me questione sobre isso",
       "summarize_section": "Resuma esta seção",
       "what_to_review": "O que devo revisar a seguir?"
+    },
+    "run_running": "Gerando curso",
+    "run_completed": "Geração do curso concluída",
+    "run_failed": "Falha na geração do curso",
+    "run_canceled": "Geração de curso cancelada",
+    "run_waiting_for_worker": "Esperando pelo trabalhador em segundo plano",
+    "run_checkpoint": "Salvando ponto de verificação de progresso",
+    "retry": "Tentar novamente",
+    "run_monitor_aria": "Geração de curso em andamento",
+    "run_summary": {
+      "completed": "Execução concluída.",
+      "completed_with_counts": "Execução concluída — criada {counts}.",
+      "failed": "Falha na execução.",
+      "failed_with_reason": "Falha na execução — {motivo}.",
+      "canceled": "Execução cancelada.",
+      "canceled_with_counts": "Execução cancelada — criou {counts} antes de parar.",
+      "paused": "Execução pausada. Retomar para continuar.",
+      "paused_with_counts": "Execução pausada — {counts} criados até agora. Retomar para continuar."
+    },
+    "changes_card": {
+      "summary_count": "{count} itens alterados",
+      "expand": "Expandir alterações",
+      "collapse": "Recolher alterações",
+      "action": {
+        "created": "Criado",
+        "metadata_updated": "Metadados atualizados",
+        "content_written": "Conteúdo escrito",
+        "questions_added": "+{contar} perguntas",
+        "questions_updated": "{count} perguntas editadas",
+        "section_added": "Bloco adicionado",
+        "section_edited": "Bloco editado"
+      },
+      "status": {
+        "completed": "Concluído",
+        "failed": "Falha",
+        "canceled": "Cancelado",
+        "paused": "Pausado"
+      }
+    },
+    "plan_view": {
+      "expand": "Expandir plano",
+      "collapse": "Recolher plano"
+    },
+    "run_monitor": {
+      "cancel": "Cancelar execução",
+      "dismiss": "Dispensar",
+      "now_doing": "Agora",
+      "input_disabled_hint": "O chat é pausado enquanto o agente termina de criar o curso. Cancele ou aguarde a conclusão."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/ru.json

@@ -346,7 +346,11 @@
       "transcription_started": "Транскрипция началась",
       "transcription_start_failed": "Не удалось начать транскрипцию",
       "transcription_completed": "Транскрипция завершена",
-      "transcript_fetch_failed": "Не удалось загрузить расшифровку"
+      "transcript_fetch_failed": "Не удалось загрузить расшифровку",
+      "thumbnail_updated": "Значок обновлен.",
+      "thumbnail_update_failed": "Не удалось обновить миниатюру.",
+      "thumbnail_regen_started": "Восстановление миниатюр…",
+      "thumbnail_regen_failed": "Не удалось восстановить миниатюры."
     },
     "tags": {
       "group_created": "Группа тегов создана.",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Снимок курса",
           "description": "Учащиеся учитываются по статусу для этого курса."
-        }
+        },
+        "empty_overview_description": "Следите за тем, чтобы ваши сотрудники соблюдали требования и отслеживали, кто отстает."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Насколько глубоким должен быть курс?",
           "topic": "Тема или ниша",
           "expertise_level": "Целевой уровень экспертизы",
-          "documentation_url": {
-            "hint": "Мы прочитаем этот сайт, чтобы закрепить курс на вашем реальном продукте."
-          }
+          "documentation_url": "URL-адрес документации (необязательно)"
         },
         "expert_on_x": {
           "title": "Станьте экспертом по X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Активность входа учащихся",
     "login_activity_description": "Самые активные дни недели (последние 90 дней)",
     "login_activity_no_data": "Пока нет активности входа",
-    "login_activity_logins": "логины"
+    "login_activity_logins": "логины",
+    "open_academy": "Открытая Академия"
   },
   "schedule": {
     "title": "Ваше расписание",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Редактировать",
       "where_used": "Где используется",
-      "download": "Скачать"
+      "download": "Скачать",
+      "manage_thumbnails": "Управление миниатюрами"
     },
     "table": {
       "title": "Название",
@@ -2678,7 +2683,22 @@
       "not_available": "Н/Д"
     },
     "empty_description": "Актив не существует или недоступен в этой организации.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Управление миниатюрами",
+      "manage_description": "Просмотрите видео, выберите один из автоматически созданных кадров или загрузите свой собственный.",
+      "preview_unavailable": "Предварительный просмотр недоступен",
+      "generated": "Созданные миниатюры",
+      "slot_start": "Старт",
+      "slot_middle": "Средний",
+      "slot_end": "Конец",
+      "none_generated_warning": "Миниатюры еще не созданы. Попробуйте восстановить или загрузить собственное изображение.",
+      "upload_custom": "Загрузить собственный значок",
+      "custom_selected_hint": "Пользовательская загрузка будет сохранена, когда вы сохраните свой выбор.",
+      "custom_preview_alt": "Пользовательский предварительный просмотр миниатюр",
+      "regenerate": "Регенерировать",
+      "save_selection": "Сохранить миниатюру"
+    }
   },
   "settings": {
     "heading": "Настройки",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Пунктирная рамка, мягкие акценты, современный вид продукта"
+          },
+          "vibrant": {
+            "title": "Яркий",
+            "description": "Яркие основные панели, герой градиента заката, энергичный вид плаката"
+          },
+          "editorial": {
+            "title": "Редакционный",
+            "description": "Теплая кремовая палитра, живописный герой, изысканная журнальная атмосфера."
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Создан с использованием основных функций, которые можно легко настроить — кодирование не требуется.",
         "by_classroomio": "от ClassroomIO",
         "add": "Добавить",
-        "upgrade": "Обновление"
+        "upgrade": "Обновление",
+        "apply_theme": "Применить тему",
+        "preview": "Предварительный просмотр",
+        "card_menu_label": "Опции темы"
       },
       "current": {
         "title": "Текущая тема",
@@ -3952,6 +3983,54 @@
       "quiz_me": "спроси меня об этом",
       "summarize_section": "Подведите итоги этого раздела",
       "what_to_review": "Что мне следует проверить дальше?"
+    },
+    "run_running": "Генерация курса",
+    "run_completed": "Генерация курса завершена",
+    "run_failed": "Не удалось создать курс.",
+    "run_canceled": "Создание курса отменено.",
+    "run_waiting_for_worker": "Ожидание фонового работника",
+    "run_checkpoint": "Сохранение контрольной точки прогресса",
+    "retry": "Повторить попытку",
+    "run_monitor_aria": "Выполняется создание курса",
+    "run_summary": {
+      "completed": "Запуск завершен.",
+      "completed_with_counts": "Запуск завершен — создано {counts}.",
+      "failed": "Запуск не удался.",
+      "failed_with_reason": "Не удалось выполнить запуск — {причина}.",
+      "canceled": "Забег отменен.",
+      "canceled_with_counts": "Запуск отменен — перед остановкой создано {counts}.",
+      "paused": "Бег остановился. Возобновите, чтобы продолжить.",
+      "paused_with_counts": "Выполнение приостановлено — на данный момент создано {counts}. Возобновите, чтобы продолжить."
+    },
+    "changes_card": {
+      "summary_count": "Изменено элементов: {count}",
+      "expand": "Развернуть изменения",
+      "collapse": "Свернуть изменения",
+      "action": {
+        "created": "Создано",
+        "metadata_updated": "Метаданные обновлены.",
+        "content_written": "Содержание написано",
+        "questions_added": "+{count} вопросов",
+        "questions_updated": "Отредактировано {count} вопросов",
+        "section_added": "Блок добавлен",
+        "section_edited": "Блок изменен"
+      },
+      "status": {
+        "completed": "Завершено",
+        "failed": "Не удалось",
+        "canceled": "Отменено",
+        "paused": "Приостановлено"
+      }
+    },
+    "plan_view": {
+      "expand": "Развернуть план",
+      "collapse": "Свернуть план"
+    },
+    "run_monitor": {
+      "cancel": "Отменить запуск",
+      "dismiss": "Уволить",
+      "now_doing": "Сейчас",
+      "input_disabled_hint": "Чат приостановлен, пока агент завершает создание курса. Отмените или дождитесь завершения."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/translations/vi.json

@@ -346,7 +346,11 @@
       "transcription_started": "Đã bắt đầu phiên âm",
       "transcription_start_failed": "Không thể bắt đầu phiên âm",
       "transcription_completed": "Phiên âm đã hoàn tất",
-      "transcript_fetch_failed": "Không thể tải bản ghi"
+      "transcript_fetch_failed": "Không thể tải bản ghi",
+      "thumbnail_updated": "Đã cập nhật hình thu nhỏ",
+      "thumbnail_update_failed": "Không cập nhật được hình thu nhỏ",
+      "thumbnail_regen_started": "Đang tạo lại hình thu nhỏ…",
+      "thumbnail_regen_failed": "Không thể tạo lại hình thu nhỏ"
     },
     "tags": {
       "group_created": "Đã tạo nhóm thẻ",
@@ -2059,7 +2063,8 @@
         "overview_metrics": {
           "heading": "Ảnh chụp nhanh khóa học",
           "description": "Người học đếm theo trạng thái cho khóa học này."
-        }
+        },
+        "empty_overview_description": "Giúp nhân viên của bạn luôn tuân thủ và theo dõi xem ai đứng sau."
       }
     },
     "search": {
@@ -2164,9 +2169,7 @@
           "depth": "Khóa học nên đi sâu đến mức nào?",
           "topic": "Chủ đề hoặc niche",
           "expertise_level": "Mục tiêu trình độ chuyên môn",
-          "documentation_url": {
-            "hint": "Chúng tôi sẽ đọc trang web này để xây dựng khóa học về sản phẩm thực của bạn."
-          }
+          "documentation_url": "URL tài liệu (tùy chọn)"
         },
         "expert_on_x": {
           "title": "Trở thành chuyên gia về X",
@@ -2340,7 +2343,8 @@
     "login_activity_title": "Hoạt động đăng nhập của sinh viên",
     "login_activity_description": "Những ngày hoạt động tích cực nhất trong tuần (90 ngày qua)",
     "login_activity_no_data": "Chưa có hoạt động đăng nhập",
-    "login_activity_logins": "thông tin đăng nhập"
+    "login_activity_logins": "thông tin đăng nhập",
+    "open_academy": "Học viện mở"
   },
   "schedule": {
     "title": "Lịch trình của bạn",
@@ -2621,7 +2625,8 @@
     "actions": {
       "edit": "Chỉnh sửa",
       "where_used": "Nơi sử dụng",
-      "download": "Tải xuống"
+      "download": "Tải xuống",
+      "manage_thumbnails": "Quản lý hình thu nhỏ"
     },
     "table": {
       "title": "Tiêu đề",
@@ -2678,7 +2683,22 @@
       "not_available": "không áp dụng"
     },
     "empty_description": "Tài sản không tồn tại hoặc không có sẵn trong tổ chức này.",
-    "page_subtitle": "Keep files, videos, and links for your courses in one library."
+    "page_subtitle": "Keep files, videos, and links for your courses in one library.",
+    "thumbnails": {
+      "manage_title": "Quản lý hình thu nhỏ",
+      "manage_description": "Xem trước video, chọn một trong các khung được tạo tự động hoặc tải lên khung của riêng bạn.",
+      "preview_unavailable": "Xem trước không có sẵn",
+      "generated": "Hình thu nhỏ được tạo",
+      "slot_start": "Bắt đầu",
+      "slot_middle": "giữa",
+      "slot_end": "Kết thúc",
+      "none_generated_warning": "Chưa có hình thu nhỏ nào được tạo. Hãy thử tạo lại hoặc tải lên một hình ảnh tùy chỉnh.",
+      "upload_custom": "Tải hình thu nhỏ tùy chỉnh lên",
+      "custom_selected_hint": "Tải lên tùy chỉnh sẽ được lưu khi bạn lưu lựa chọn của mình.",
+      "custom_preview_alt": "Xem trước hình thu nhỏ tùy chỉnh",
+      "regenerate": "tái sinh",
+      "save_selection": "Lưu hình thu nhỏ"
+    }
   },
   "settings": {
     "heading": "Cài đặt",
@@ -3003,6 +3023,14 @@
           "saas": {
             "title": "SaaS",
             "description": "Khung nét chấm, điểm nhấn mềm mại, cảm giác sản phẩm hiện đại"
+          },
+          "vibrant": {
+            "title": "Sống động",
+            "description": "Bảng điều khiển chính táo bạo, anh hùng chuyển màu hoàng hôn, giao diện poster tràn đầy năng lượng"
+          },
+          "editorial": {
+            "title": "biên tập",
+            "description": "Bảng màu kem ấm áp, anh hùng họa sĩ, cảm giác tạp chí tinh tế"
           }
         }
       },
@@ -3011,7 +3039,10 @@
         "description": "Được tạo bằng các tính năng cốt lõi, bạn có thể dễ dàng tùy chỉnh — không cần mã hóa.",
         "by_classroomio": "bởi ClassroomIO",
         "add": "Thêm",
-        "upgrade": "Nâng cấp"
+        "upgrade": "Nâng cấp",
+        "apply_theme": "Áp dụng chủ đề",
+        "preview": "Xem trước",
+        "card_menu_label": "Tùy chọn chủ đề"
       },
       "current": {
         "title": "Chủ đề hiện tại",
@@ -3952,6 +3983,54 @@
       "quiz_me": "Đố tôi về điều này",
       "summarize_section": "Tóm tắt phần này",
       "what_to_review": "Tôi nên xem xét gì tiếp theo?"
+    },
+    "run_running": "Tạo khóa học",
+    "run_completed": "Quá trình tạo khóa học đã hoàn tất",
+    "run_failed": "Tạo khóa học không thành công",
+    "run_canceled": "Việc tạo khóa học đã bị hủy",
+    "run_waiting_for_worker": "Đang chờ nhân viên nền",
+    "run_checkpoint": "Đang lưu điểm kiểm tra tiến độ",
+    "retry": "Thử lại",
+    "run_monitor_aria": "Đang tạo khóa học",
+    "run_summary": {
+      "completed": "Chạy xong.",
+      "completed_with_counts": "Đã hoàn thành chạy — đã tạo {counts}.",
+      "failed": "Chạy không thành công.",
+      "failed_with_reason": "Chạy không thành công — {reason}.",
+      "canceled": "Cuộc chạy bị hủy.",
+      "canceled_with_counts": "Cuộc chạy đã bị hủy — đã tạo {counts} trước khi dừng.",
+      "paused": "Chạy bị tạm dừng. Tiếp tục để tiếp tục.",
+      "paused_with_counts": "Cuộc chạy bị tạm dừng — đã tạo {counts} cho đến nay. Tiếp tục để tiếp tục."
+    },
+    "changes_card": {
+      "summary_count": "{count} mục đã thay đổi",
+      "expand": "Mở rộng các thay đổi",
+      "collapse": "Thu gọn các thay đổi",
+      "action": {
+        "created": "Đã tạo",
+        "metadata_updated": "Đã cập nhật siêu dữ liệu",
+        "content_written": "Nội dung viết",
+        "questions_added": "+{đếm} câu hỏi",
+        "questions_updated": "{count} câu hỏi đã được chỉnh sửa",
+        "section_added": "Đã thêm khối",
+        "section_edited": "Đã chỉnh sửa khối"
+      },
+      "status": {
+        "completed": "Đã hoàn thành",
+        "failed": "thất bại",
+        "canceled": "Đã hủy",
+        "paused": "Đã tạm dừng"
+      }
+    },
+    "plan_view": {
+      "expand": "Mở rộng kế hoạch",
+      "collapse": "Thu gọn kế hoạch"
+    },
+    "run_monitor": {
+      "cancel": "Hủy chạy",
+      "dismiss": "Loại bỏ",
+      "now_doing": "bây giờ",
+      "input_disabled_hint": "Cuộc trò chuyện bị tạm dừng trong khi nhân viên hỗ trợ hoàn tất việc xây dựng khóa học. Hủy bỏ hoặc đợi cho đến khi nó hoàn thành."
     }
   },
   "widgets": {

apps/dashboard/src/lib/utils/types/org.ts

@@ -6,7 +6,9 @@ export type OrgLandingPageTheme =
   | 'tech'
   | 'studio'
   | 'corporate'
-  | 'terminal';
+  | 'terminal'
+  | 'editorial'
+  | 'vibrant';
 
 export interface OrgLandingPageNavItem {
   label: string;

apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte

@@ -8,7 +8,13 @@
   import { user } from '$lib/utils/store/user';
   import { CourseLandingPage } from '$features/ui';
   import { PoweredBy } from '$features/ui';
-  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
+  import {
+    importThemeNavHero,
+    normalizeLandingPageSettings,
+    themeHeaderShellClass,
+    themeStyle,
+    themeRendersNavInsideHero
+  } from '$features/org/utils/landing-page';
 
   import { OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
   import type { Component } from 'svelte';
@@ -29,11 +35,9 @@
         }
   );
 
-  const shellClass = $derived(
-    landingSettings.theme === 'classic'
-      ? 'ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans'
-      : 'ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans'
-  );
+  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
+  const shellStyle = $derived(themeStyle(landingSettings.theme));
+  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
 
   const courseHero = $derived.by(() => {
     if (!data.course) {
@@ -83,23 +87,9 @@
   let HeroComponent = $state<Component<any> | null>(null);
 
   onMount(async () => {
-    const theme = landingSettings.theme;
-
-    const [navMod, heroMod] = await Promise.all([
-      theme === 'bold'
-        ? import('@cio/ui/custom/org-landing-page/bold/nav.svelte')
-        : theme === 'classic'
-          ? import('@cio/ui/custom/org-landing-page/classic/nav.svelte')
-          : import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
-      theme === 'bold'
-        ? import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
-        : theme === 'classic'
-          ? import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
-          : import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
-    ]);
-
-    NavComponent = navMod.default;
-    HeroComponent = heroMod.default;
+    const { NavComponent: nav, HeroComponent: hero } = await importThemeNavHero(landingSettings.theme);
+    NavComponent = nav;
+    HeroComponent = hero;
   });
 </script>
 
@@ -112,17 +102,17 @@
 {#if data.course}
   <PoweredBy />
 
-  <main class={shellClass}>
+  <main class={shellClass} style={shellStyle}>
     {#if NavComponent && HeroComponent}
-      {#if landingSettings.theme === 'minimal'}
-        <HeroComponent hero={courseHero}>
+      {#if navInsideHero}
+        <HeroComponent hero={courseHero} {orgName}>
           {#snippet navigation()}
             <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
           {/snippet}
         </HeroComponent>
       {:else}
         <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
-        <HeroComponent hero={courseHero} />
+        <HeroComponent hero={courseHero} {orgName} />
       {/if}
     {/if}
 

apps/dashboard/src/routes/(org-site)/courses/+page.svelte

@@ -2,6 +2,8 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
   import { resolve } from '$app/paths';
+  import { onMount } from 'svelte';
+  import type { Component } from 'svelte';
   import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';
 
   import { t } from '$lib/utils/functions/translations';
@@ -10,20 +12,18 @@
 
   import { PoweredBy } from '$features/ui';
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
-  import { CourseCardList } from '$features/course/components';
-  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
-
   import {
-    BoldLandingHero,
-    BoldLandingNav,
-    ClassicLandingHero,
-    ClassicLandingNav,
-    MinimalLandingHero,
-    MinimalLandingNav,
-    OrgLandingPageFooter
-  } from '@cio/ui/custom/org-landing-page';
+    importThemeCourseCard,
+    importThemeNavHero,
+    normalizeLandingPageSettings,
+    themeCourseGridClass,
+    themeHeaderShellClass,
+    themeStyle,
+    themeRendersNavInsideHero
+  } from '$features/org/utils/landing-page';
+
+  import { LandingButton, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
 
-  import { Button } from '@cio/ui/base/button';
   import { Checkbox } from '@cio/ui/base/checkbox';
   import { Empty } from '@cio/ui/custom/empty';
   import { Separator } from '@cio/ui/base/separator';
@@ -46,11 +46,33 @@
         }
   );
 
-  const shellClass = $derived(
-    landingSettings.theme === 'classic'
-      ? 'ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans'
-      : 'ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans'
-  );
+  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
+  const shellStyle = $derived(themeStyle(landingSettings.theme));
+  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
+  const courseGridClass = $derived(themeCourseGridClass(landingSettings.theme));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let NavComponent = $state<Component<any> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let HeroComponent = $state<Component<any> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let CourseCardComponent = $state<Component<any> | null>(null);
+
+  onMount(async () => {
+    const [navHero, cardComponent] = await Promise.all([
+      importThemeNavHero(landingSettings.theme),
+      importThemeCourseCard(landingSettings.theme)
+    ]);
+    NavComponent = navHero.NavComponent;
+    HeroComponent = navHero.HeroComponent;
+    CourseCardComponent = cardComponent;
+  });
+
+  const heroProps = $derived({
+    ...landingSettings.hero,
+    heading: t.get('public_courses.heading'),
+    image: ''
+  });
 
   async function applyTagFilters(nextTags: string[]) {
     const params = new SvelteURLSearchParams(page.url.searchParams);
@@ -119,54 +141,50 @@
 
 <PoweredBy />
 
-<main class={shellClass}>
-  {#if landingSettings.theme === 'minimal'}
-    <MinimalLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }}>
-      {#snippet navigation()}
-        <MinimalLandingNav
-          orgName={data.org.name}
-          logoUrl={data.org.avatarUrl ?? undefined}
-          navItems={landingSettings.navItems}
-          {authAction}
-        />
-      {/snippet}
-    </MinimalLandingHero>
-  {:else if landingSettings.theme === 'bold'}
-    <BoldLandingNav
-      orgName={data.org.name}
-      logoUrl={data.org.avatarUrl ?? undefined}
-      navItems={landingSettings.navItems}
-      {authAction}
-    />
-    <BoldLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }} />
-  {:else}
-    <ClassicLandingNav
-      orgName={data.org.name}
-      logoUrl={data.org.avatarUrl ?? undefined}
-      navItems={landingSettings.navItems}
-      {authAction}
-    />
-    <ClassicLandingHero hero={{ ...landingSettings.hero, heading: $t('public_courses.heading') }} />
+<main class={shellClass} style={shellStyle}>
+  {#if NavComponent && HeroComponent}
+    {#if navInsideHero}
+      <HeroComponent hero={heroProps} orgName={data.org.name}>
+        {#snippet navigation()}
+          <NavComponent
+            orgName={data.org.name}
+            logoUrl={data.org.avatarUrl ?? undefined}
+            navItems={landingSettings.navItems}
+            {authAction}
+          />
+        {/snippet}
+      </HeroComponent>
+    {:else}
+      <NavComponent
+        orgName={data.org.name}
+        logoUrl={data.org.avatarUrl ?? undefined}
+        navItems={landingSettings.navItems}
+        {authAction}
+      />
+      <HeroComponent hero={heroProps} orgName={data.org.name} />
+    {/if}
   {/if}
 
   <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
     <div class="mb-6 flex items-center justify-end gap-4">
-      <Button variant="outline" onclick={clearFilters} disabled={selectedTags.length === 0}>
+      <LandingButton variant="secondary" onclick={clearFilters} disabled={selectedTags.length === 0}>
         {$t('public_courses.clear_filters')}
-      </Button>
+      </LandingButton>
     </div>
 
     <div class="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
-      <aside class="ui:bg-background space-y-4 rounded-lg border p-4">
+      <aside
+        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] space-y-4 rounded-lg border p-4"
+      >
         <div>
           <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
-          <p class="ui:text-muted-foreground text-xs">{$t('public_courses.filters.help')}</p>
+          <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
         </div>
 
-        <Separator />
+        <Separator class="ui:bg-[var(--landing-border)]" />
 
         {#if displayTagGroups.length === 0}
-          <p class="ui:text-muted-foreground text-sm">{$t('public_courses.filters.empty')}</p>
+          <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
         {:else}
           <div class="space-y-5">
             {#each displayTagGroups as group (group.id)}
@@ -174,14 +192,14 @@
                 <div class="space-y-1">
                   <h3 class="text-sm font-semibold">{group.name}</h3>
                   {#if group.description}
-                    <p class="ui:text-muted-foreground text-xs">{group.description}</p>
+                    <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
                   {/if}
                 </div>
 
                 <div class="space-y-2">
                   {#each group.tags as tag (tag.id)}
                     <label
-                      class="hover:ui:bg-muted/30 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
+                      class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
                     >
                       <div class="flex items-center gap-2">
                         <Checkbox
@@ -195,7 +213,7 @@
                         ></span>
                         <span class="text-sm">{tag.name}</span>
                       </div>
-                      <span class="ui:text-muted-foreground text-xs">{tag.courseCount}</span>
+                      <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
                     </label>
                   {/each}
                 </div>
@@ -213,8 +231,12 @@
             description={$t('public_courses.empty.description')}
             variant="page"
           />
-        {:else}
-          <CourseCardList courses={data.courses} isOnLandingPage={true} />
+        {:else if CourseCardComponent}
+          <div class={courseGridClass}>
+            {#each data.courses as course, index (course.id)}
+              <CourseCardComponent {course} {index} />
+            {/each}
+          </div>
         {/if}
       </div>
     </div>

apps/jobs/src/processors/media/generate-thumbnail.ts

@@ -2,7 +2,7 @@ import { mkdir, readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { tmpdir } from 'node:os';
 
-import { getJobStep, updateAsset, updateMediaJob, upsertJobStep } from '@cio/db/queries';
+import { getAssetById, getJobStep, updateAsset, updateMediaJob, upsertJobStep } from '@cio/db/queries';
 import { ZGenerateThumbnailPayload, type TGenerateThumbnailPayload } from '@cio/jobs/payloads/media';
 
 import {
@@ -14,25 +14,57 @@ import {
 } from '../../utils/storage';
 import { errorMessage, throwIfCancelRequested } from '../../utils/cancel';
 import { getStorageConfig } from '../../config/storage';
-import { ffmpegRun } from '../../utils/ffmpeg';
+import { ffmpegProbeLuma, ffmpegRun } from '../../utils/ffmpeg';
 import { log } from '../../utils/logger';
 
 const STEP_KEY = 'generate-thumbnail';
 const DOMAIN = 'media';
+/** Frames whose mean luma (0-255) sits below this threshold are treated as blank/black. */
+const BLACK_LUMA_THRESHOLD = 8;
+/** Slot order used for ranking; middle is preferred, then start, then end. */
+const SLOT_ORDER = ['middle', 'start', 'end'] as const;
+type Slot = (typeof SLOT_ORDER)[number];
+/** Fallback time offsets (seconds) tried when a slot's primary frame is black. */
+const FALLBACK_OFFSETS = [0, -1.5, 1.5];
+const DEFAULT_DURATION_SECONDS = 10;
+
+interface CandidateUpload {
+  slot: Slot;
+  url: string;
+  meanLuma: number;
+  isBlack: boolean;
+}
 
 interface ThumbnailResult {
   bucket: string;
-  key: string;
+  candidates: Array<{ slot: Slot; url: string }>;
   publicUrl: string | null;
 }
 
-async function extractThumbnail(localPath: string, atSeconds: number, outputPath: string): Promise<void> {
+function clampToDuration(t: number, duration: number): number {
+  const upper = Math.max(0, duration - 0.1);
+  if (upper <= 0) return 0;
+  return Math.min(Math.max(t, 0), upper);
+}
+
+function targetForSlot(slot: Slot, duration: number): number {
+  if (slot === 'start') return duration * 0.3;
+  if (slot === 'middle') return duration * 0.5;
+  return duration * 0.7;
+}
+
+/**
+ * Use accurate seek (`-ss` after `-i`). Fast input-seek snaps to the nearest
+ * keyframe and is the most common source of black thumbnails for codecs whose
+ * first keyframe sits past the requested offset.
+ */
+async function extractFrame(localPath: string, atSeconds: number, outputPath: string): Promise<void> {
   await ffmpegRun([
     '-y',
-    '-ss',
-    String(atSeconds),
     '-i',
     localPath,
+    '-ss',
+    String(atSeconds),
     '-vframes',
     '1',
     '-vf',
@@ -41,13 +73,52 @@ async function extractThumbnail(localPath: string, atSeconds: number, outputPath
   ]);
 }
 
+async function captureSlot(
+  localPath: string,
+  slot: Slot,
+  baseSeconds: number,
+  duration: number,
+  outputPath: string
+): Promise<{ buffer: Buffer; meanLuma: number; atSeconds: number } | null> {
+  for (const delta of FALLBACK_OFFSETS) {
+    const t = clampToDuration(baseSeconds + delta, duration);
+    try {
+      await extractFrame(localPath, t, outputPath);
+      const luma = await ffmpegProbeLuma(outputPath);
+      if (luma >= BLACK_LUMA_THRESHOLD) {
+        const buffer = await readFile(outputPath);
+        return { buffer, meanLuma: luma, atSeconds: t };
+      }
+      log.warn('generate-thumbnail-black-frame', { slot, atSeconds: t, luma });
+    } catch (error) {
+      log.warn('generate-thumbnail-slot-attempt-failed', {
+        slot,
+        atSeconds: t,
+        error: errorMessage(error)
+      });
+    }
+  }
+
+  // Every fallback was black or failed — keep the last frame so the user can
+  // still see what we produced, but flag it so the picker can warn.
+  try {
+    const buffer = await readFile(outputPath);
+    const luma = await ffmpegProbeLuma(outputPath).catch(() => 0);
+    return { buffer, meanLuma: luma, atSeconds: baseSeconds };
+  } catch {
+    return null;
+  }
+}
+
 /**
- * Render a single JPEG frame to use as the asset thumbnail. Replaces the
- * browser-side thumbnail as the source of truth on the asset row.
+ * Render up to three JPEG candidate thumbnails (start / middle / end) and
+ * persist them on the asset. The chosen `thumbnailUrl` is the first non-black
+ * candidate in middle → start → end order. The browser-side preview is no
+ * longer the source of truth.
  */
 export async function processGenerateThumbnail(rawData: unknown): Promise<ThumbnailResult> {
   const payload: TGenerateThumbnailPayload = ZGenerateThumbnailPayload.parse(rawData);
-  const { mediaJobId, assetId, storageKey, actorContext, atSeconds = 1.0 } = payload;
+  const { mediaJobId, assetId, storageKey, actorContext, markJobCompleteOnSuccess } = payload;
 
   const existing = await getJobStep(DOMAIN, mediaJobId, STEP_KEY);
   if (existing?.status === 'completed' && existing.result) {
@@ -66,30 +137,54 @@ export async function processGenerateThumbnail(rawData: unknown): Promise<Thumbn
     attempt: (existing?.attempt ?? 0) + 1
   });
 
+  const asset = await getAssetById(assetId, actorContext.organizationId);
+  const duration =
+    asset?.durationSeconds && asset.durationSeconds > 0 ? asset.durationSeconds : DEFAULT_DURATION_SECONDS;
+
   let localPath: string | undefined;
-  let outputPath: string | undefined;
+  const slotOutputs: string[] = [];
   try {
     localPath = await downloadObjectToTempFile(videosBucket(), storageKey, 'thumb-source.bin');
 
     const dir = path.join(tmpdir(), 'cio-jobs', 'thumbs');
     await mkdir(dir, { recursive: true });
-    outputPath = path.join(dir, `${mediaJobId}.jpg`);
 
-    await throwIfCancelRequested(mediaJobId);
-    await extractThumbnail(localPath, atSeconds, outputPath);
+    const uploads: CandidateUpload[] = [];
+    for (const slot of SLOT_ORDER) {
+      await throwIfCancelRequested(mediaJobId);
+      const outputPath = path.join(dir, `${mediaJobId}-${slot}.jpg`);
+      slotOutputs.push(outputPath);
 
-    const buffer = await readFile(outputPath);
-    const thumbKey = `thumbnails/${assetId}/${Date.now()}.jpg`;
+      const baseSeconds = targetForSlot(slot, duration);
+      const capture = await captureSlot(localPath, slot, baseSeconds, duration, outputPath);
+      if (!capture) continue;
 
-    await uploadBufferToBucket(mediaBucket(), thumbKey, buffer, 'image/jpeg', 'public, max-age=31536000');
+      const key = `thumbnails/${assetId}/${slot}-${Date.now()}.jpg`;
+      await uploadBufferToBucket(mediaBucket(), key, capture.buffer, 'image/jpeg', 'public, max-age=31536000');
 
-    const baseUrl = getStorageConfig().mediaPublicBaseUrl;
-    const publicUrl = baseUrl ? `${baseUrl.replace(/\/$/, '')}/${thumbKey}` : null;
+      const baseUrl = getStorageConfig().mediaPublicBaseUrl;
+      const url = baseUrl ? `${baseUrl.replace(/\/$/, '')}/${key}` : key;
+      uploads.push({
+        slot,
+        url,
+        meanLuma: capture.meanLuma,
+        isBlack: capture.meanLuma < BLACK_LUMA_THRESHOLD
+      });
+    }
 
-    const result: ThumbnailResult = { bucket: mediaBucket(), key: thumbKey, publicUrl };
+    const candidateUrls = uploads.map((u) => u.url);
+    const chosen = uploads.find((u) => !u.isBlack) ?? null;
+    const publicUrl = chosen?.url ?? null;
+
+    const result: ThumbnailResult = {
+      bucket: mediaBucket(),
+      candidates: uploads.map((u) => ({ slot: u.slot, url: u.url })),
+      publicUrl
+    };
 
     await updateAsset(assetId, actorContext.organizationId, {
-      thumbnailUrl: publicUrl ?? undefined
+      thumbnailUrl: publicUrl,
+      thumbnailCandidates: candidateUrls
     });
 
     await upsertJobStep({
@@ -101,9 +196,17 @@ export async function processGenerateThumbnail(rawData: unknown): Promise<Thumbn
       result: result as unknown as Record<string, unknown>
     });
 
-    await updateMediaJob(mediaJobId, { stage: 'thumbnailed', progressPercent: 60 });
+    await updateMediaJob(mediaJobId, {
+      stage: 'thumbnailed',
+      progressPercent: markJobCompleteOnSuccess ? 100 : 60,
+      ...(markJobCompleteOnSuccess ? { status: 'completed' as const } : {})
+    });
 
-    log.info('generate-thumbnail-done', { mediaJobId, thumbKey });
+    log.info('generate-thumbnail-done', {
+      mediaJobId,
+      candidateCount: uploads.length,
+      hasNonBlackChoice: Boolean(chosen)
+    });
     return result;
   } catch (error) {
     log.error('generate-thumbnail-failed', { mediaJobId, error: errorMessage(error) });
@@ -118,6 +221,8 @@ export async function processGenerateThumbnail(rawData: unknown): Promise<Thumbn
     throw error;
   } finally {
     await safeUnlink(localPath);
-    await safeUnlink(outputPath);
+    for (const out of slotOutputs) {
+      await safeUnlink(out);
+    }
   }
 }

apps/website/src/lib/components/faq.svelte

@@ -1,24 +1,47 @@
 <script>
-  import { faqs } from '$lib/utils/faqs';
+  import { faqs as defaultFaqs } from '$lib/utils/faqs';
   import { PageSignupCTA } from '$lib/components';
   import * as Accordion from '@cio/ui/base/accordion';
+
+  /**
+   * @typedef {Object} FaqItem
+   * @property {string} question
+   * @property {string} answer
+   */
+
+  /**
+   * @typedef {Object} Props
+   * @property {FaqItem[]} [items]   Override the global FAQ list
+   * @property {boolean}   [hideCta] Hide the trailing PageSignupCTA when the page already has its own
+   * @property {string}    [heading]
+   * @property {string}    [subheading]
+   */
+
+  /** @type {Props} */
+  let { items, hideCta = false, heading, subheading } = $props();
+
+  const entries = $derived(items ?? defaultFaqs);
 </script>
 
 <div class="mt-10 mb-20 flex flex-col items-center justify-center gap-6">
   <header class="space-y-2 text-center">
-    <h1 class="mt-2 text-xl md:text-4xl">Questions & Answers</h1>
+    <h1 class="mt-2 text-xl md:text-4xl">{heading ?? 'Questions & Answers'}</h1>
     <p
       class="ui:text-muted-foreground text-sm font-normal tracking-normal md:text-lg lg:px-[20%] lg:text-xl lg:tracking-wide"
     >
-      Can't find the answer you're looking for?
-      <a class="text-blue-700 hover:underline" href="mailto:[email protected]" target="_blank">Shoot us an email</a> and
-      we'll get back to you ASAP.
+      {#if subheading}
+        {subheading}
+      {:else}
+        Can't find the answer you're looking for?
+        <a class="text-blue-700 hover:underline" href="mailto:[email protected]" target="_blank">Shoot us an email</a
+        > and we'll get back to you ASAP.
+      {/if}
     </p>
   </header>
 
   <div class="mx-auto w-full max-w-3xl px-2 lg:m-0">
     <Accordion.Root type="single" class="w-full">
-      {#each faqs as faq, index}
+      {#each entries as faq, index}
         <Accordion.Item value="faq-{index}">
           <Accordion.Trigger>{faq.question}</Accordion.Trigger>
           <Accordion.Content>
@@ -29,10 +52,12 @@
     </Accordion.Root>
   </div>
 
-  <PageSignupCTA
-    header="Your Custom Academy – Up & Running in Minutes!"
-    subText="Try before you buy. No credit card required."
-    btnLabel="Book a demo"
-    link="classroomio/demo"
-  />
+  {#if !hideCta}
+    <PageSignupCTA
+      header="Your Custom Academy – Up & Running in Minutes!"
+      subText="Try before you buy. No credit card required."
+      btnLabel="Book a demo"
+      link="classroomio/demo"
+    />
+  {/if}
 </div>

packages/jobs/src/enqueue/media.ts

@@ -118,6 +118,40 @@ export async function enqueueLessonVideoPipeline(
   };
 }
 
+/**
+ * Enqueue only generate-thumbnail (new `media_job` row required). Used by the
+ * "regenerate thumbnails" action from the media manager. Skips probe — the
+ * asset already has a duration from the original pipeline.
+ */
+export async function enqueueGenerateThumbnailOnly(input: {
+  mediaJobId: string;
+  assetId: string;
+  storageKey: string;
+  actorContext: TActorContext;
+}): Promise<EnqueueLessonVideoPipelineResult> {
+  const { mediaJobId, assetId, storageKey, actorContext } = input;
+  const sharedData = {
+    mediaJobId,
+    assetId,
+    storageKey,
+    actorContext,
+    markJobCompleteOnSuccess: true
+  };
+
+  const job = await getQueue(QUEUE_NAMES.media).add(
+    JOB_NAMES.media.generateThumbnail,
+    sharedData,
+    QUEUE_DEFAULTS[QUEUE_NAMES.media]
+  );
+
+  return {
+    rootJobId: job.id ?? '',
+    jobIds: {
+      [JOB_NAMES.media.generateThumbnail]: job.id ?? ''
+    }
+  };
+}
+
 /**
  * Enqueue only extract-audio → transcribe-audio (new `media_job` row required).
  * Used for manual “generate transcript” when the initial pipeline had no OpenAI key.

packages/jobs/src/payloads/media.ts

@@ -29,7 +29,13 @@ export const ZGenerateThumbnailPayload = z.object({
   storageKey: z.string().min(1),
   actorContext: ZActorContext,
   /** Seconds into the video to grab. Defaults to 1.0 in the worker. */
-  atSeconds: z.number().nonnegative().optional()
+  atSeconds: z.number().nonnegative().optional(),
+  /**
+   * When true, the processor marks the parent `media_job` as `completed`
+   * after a successful run. Set by `enqueueGenerateThumbnailOnly` because
+   * thumbnail is the only step and nothing else will flip status.
+   */
+  markJobCompleteOnSuccess: z.boolean().optional()
 });
 export type TGenerateThumbnailPayload = z.infer<typeof ZGenerateThumbnailPayload>;
 

packages/storybook/src/templates/org-landing-page/org-landing-page.stories.svelte

@@ -8,9 +8,11 @@
     TechLandingPage,
     StudioLandingPage,
     CorporateLandingPage,
-    TerminalLandingPage
+    TerminalLandingPage,
+    EditorialLandingPage,
+    VibrantLandingPage,
+    mockOrgLandingPageProps as mockProps
   } from '@cio/ui/custom/org-landing-page';
-  import { mockProps } from './fixtures';
 
   const { Story } = defineMeta({
     title: 'Templates/Org Landing Page',
@@ -19,6 +21,27 @@
     },
     tags: ['autodocs']
   });
+
+  /** Example of overriding UI chrome labels (e.g. via the dashboard's translations). */
+  const localizedLabels = {
+    catalogEyebrow: 'Catálogo',
+    catalogHeading: 'Programas que empiezan esta temporada.',
+    catalogDescription:
+      'Cohortes y a tu propio ritmo — cada programa termina con un proyecto revisado y un certificado.',
+    browseCoursesLabel: 'Ver todos →',
+    enrollLabel: 'Inscribirme',
+    freeLabel: 'Gratis',
+    featuredLabel: 'Destacado',
+    filterAllLabel: 'Todos',
+    startCourseLabel: 'Empezar curso',
+    resourcesEyebrow: 'Recursos',
+    embedEyebrow: 'Integración',
+    calloutEyebrow: 'Cuando quieras',
+    learnMoreLabel: 'Visitar',
+    lessonsLabel: (n) => (n === 1 ? '1 lección' : `${n} lecciones`),
+    exercisesLabel: (n) => (n === 1 ? '1 ejercicio' : `${n} ejercicios`),
+    enrolledLabel: (n) => `${n.toLocaleString()} inscritos`
+  };
 </script>
 
 <Story name="Minimal">
@@ -52,3 +75,19 @@
 <Story name="Terminal">
   <TerminalLandingPage {...mockProps} />
 </Story>
+
+<Story name="Editorial">
+  <EditorialLandingPage {...mockProps} />
+</Story>
+
+<Story name="Vibrant">
+  <VibrantLandingPage {...mockProps} />
+</Story>
+
+<!--
+  Demonstrates the OrgLandingPageLabels override surface. Every UI-chrome
+  string is replaced via the `labels` prop; per-template defaults disappear.
+-->
+<Story name="Editorial (localized labels)">
+  <EditorialLandingPage {...mockProps} labels={localizedLabels} />
+</Story>

packages/ui/src/custom/media-player/players/plyr-player.svelte

@@ -160,7 +160,7 @@
   {#if isYouTube && youtubeVideoId}
     <div
       bind:this={containerElement}
-      class="plyr__video-embed ui:absolute ui:inset-0 ui:h-full ui:w-full"
+      class="plyr__video-embed ui:h-full ui:w-full"
       data-plyr-provider="youtube"
       data-plyr-embed-id={youtubeVideoId}
     ></div>
@@ -171,7 +171,7 @@
       {src}
       {poster}
       {playsinline}
-      class="plyr-player ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-contain"
+      class="plyr-player ui:h-full ui:w-full ui:object-contain"
     >
       {#each tracks as track (track.src + track.srclang)}
         <track

packages/ui/src/custom/org-landing-page/bold.svelte

@@ -6,14 +6,10 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import BoldNav from './bold/nav.svelte';
   import BoldHero from './bold/hero.svelte';
+  import BoldCourseCard from './bold/course-card.svelte';
   import { Button } from '../../base/button';
-  import * as Card from '../../base/card';
-  import { BlurFade } from '../animation/blurfade';
-  import { BorderBeam } from '../animation/border-beam';
   import { DotPattern } from '../animation/dot-pattern';
-  import ClockIcon from '@lucide/svelte/icons/clock';
-  import TagIcon from '@lucide/svelte/icons/tag';
-  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -27,108 +23,29 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('bold')}
+>
   <BoldNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
     <BoldHero {hero} />
 
-    <section class="ui:relative ui:bg-muted/30 ui:px-6 ui:overflow-hidden ui:mb-12">
+    <section class="ui:relative ui:bg-[var(--landing-card-soft)]/30 ui:px-6 ui:overflow-hidden ui:mb-12">
       <DotPattern class="ui:opacity-[0.15]" />
       <div class="ui:relative ui:max-w-7xl ui:mx-auto">
         <div class="ui:flex ui:items-end ui:justify-between ui:mb-12">
-          <h2 class="ui:text-4xl ui:font-black ui:tracking-tight">Latest Courses</h2>
+          <h2 class="ui:text-4xl ui:font-black ui:tracking-tight">{labels?.catalogHeading ?? 'Latest Courses'}</h2>
         </div>
         <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-8">
           {#each courses as course, index (course.id)}
-            {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-            {@const primaryTag = getPrimaryCourseTag(course)}
-            <BlurFade delay={0.1 * index} once={true}>
-              <Card.Root
-                class="ui:group ui:relative ui:overflow-hidden ui:bg-background ui:rounded-3xl ui:p-4 ui:flex-col ui:sm:flex-row ui:gap-6 ui:duration-300 ui:h-full ui:border-border/50 {disableCourseLinks
-                  ? ''
-                  : 'ui:hover:shadow-xl ui:hover:shadow-primary/5 ui:transition-all'}"
-              >
-                <BorderBeam
-                  size={120}
-                  duration={8}
-                  colorFrom="var(--primary)"
-                  colorTo="color-mix(in oklab, var(--primary) 65%, white)"
-                />
-                {#if course.logo}
-                  <img
-                    src={course.logo}
-                    alt={course.title}
-                    class="ui:w-full ui:sm:w-48 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
-                  />
-                {/if}
-                <Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
-                  <Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
-                  <Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
-
-                  <div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
-                    {#if course.duration}
-                      <div
-                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
-                      >
-                        <ClockIcon class="ui:size-3.5" />
-                        <span>{course.duration}</span>
-                      </div>
-                    {/if}
-                    {#if courseTypeMeta}
-                      {@const TypeIcon = courseTypeMeta.icon}
-                      <div
-                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
-                      >
-                        <TypeIcon class={courseTypeMeta.iconClass} />
-                        <span>{courseTypeMeta.label}</span>
-                      </div>
-                    {/if}
-                    {#if primaryTag}
-                      <div
-                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-foreground ui:bg-muted ui:px-2.5 ui:py-1 ui:rounded-md"
-                      >
-                        <TagIcon class="ui:size-3.5 ui:text-primary" />
-                        {#if primaryTag.color}
-                          <span
-                            class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
-                            style={`background-color: ${primaryTag.color}`}
-                            aria-hidden="true"
-                          ></span>
-                        {/if}
-                        <span>{primaryTag.name}</span>
-                      </div>
-                    {/if}
-                  </div>
-
-                  <div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
-                    <span class="ui:font-black ui:text-lg"
-                      >{course.price || formatCurrency(course.cost, course.currency)}</span
-                    >
-                    <Button
-                      href={disableCourseLinks ? undefined : course.link}
-                      variant="outline"
-                      class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
-                        ? 'ui:pointer-events-none'
-                        : 'ui:hover:bg-primary ui:hover:text-primary-foreground ui:group-hover:bg-primary ui:group-hover:text-primary-foreground ui:transition-colors'}"
-                      aria-disabled={disableCourseLinks}
-                      tabindex={disableCourseLinks ? -1 : undefined}
-                    >
-                      Details
-                    </Button>
-                  </div>
-                </Card.Content>
-              </Card.Root>
-            </BlurFade>
+            <BoldCourseCard {course} {disableCourseLinks} {labels} />
           {/each}
         </div>
 
@@ -140,7 +57,7 @@
               class="ui:rounded-xl ui:px-8"
               disabled={disableCourseLinks}
             >
-              View more courses
+              {labels?.browseCoursesLabel ?? 'View more courses'}
             </Button>
           </div>
         {/if}
@@ -148,11 +65,11 @@
     </section>
   </main>
 
-  <OrgLandingPageLinks {links} variant="bold" />
+  <OrgLandingPageLinks {links} {labels} variant="bold" />
 
-  <OrgLandingPageEmbed {embed} variant="bold" />
+  <OrgLandingPageEmbed {embed} {labels} variant="bold" />
 
-  <OrgLandingPageCallout {callout} variant="bold" />
+  <OrgLandingPageCallout {callout} {labels} variant="bold" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
 </div>

packages/ui/src/custom/org-landing-page/bold/course-card.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import * as Card from '../../../base/card';
+  import { Button } from '../../../base/button';
+  import { BorderBeam } from '../../animation/border-beam';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+  const primaryTag = $derived(getPrimaryCourseTag(course));
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<Card.Root
+  class="ui:group ui:relative ui:overflow-hidden ui:bg-[var(--landing-bg)] ui:rounded-3xl ui:p-4 ui:flex-col ui:sm:flex-row ui:gap-6 ui:duration-300 ui:h-full ui:border-[var(--landing-border)]/50 {disableCourseLinks
+    ? ''
+    : 'ui:hover:shadow-xl ui:hover:shadow-primary/5 ui:transition-all'}"
+>
+  <BorderBeam
+    size={120}
+    duration={8}
+    colorFrom="var(--landing-accent)"
+    colorTo="color-mix(in oklab, var(--landing-accent) 65%, white)"
+  />
+  {#if course.logo}
+    <img
+      src={course.logo}
+      alt={course.title}
+      class="ui:w-full ui:sm:w-48 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
+    />
+  {/if}
+  <Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
+    <Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
+    <Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
+
+    <div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
+      {#if course.duration}
+        <div
+          class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
+        >
+          <ClockIcon class="ui:size-3.5" />
+          <span>{course.duration}</span>
+        </div>
+      {/if}
+      {#if courseTypeMeta}
+        {@const TypeIcon = courseTypeMeta.icon}
+        <div
+          class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
+        >
+          <TypeIcon class={courseTypeMeta.iconClass} />
+          <span>{courseTypeMeta.label}</span>
+        </div>
+      {/if}
+      {#if primaryTag}
+        <div
+          class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
+        >
+          <TagIcon class="ui:size-3.5 ui:text-[var(--landing-accent)]" />
+          {#if primaryTag.color}
+            <span
+              class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
+              style={`background-color: ${primaryTag.color}`}
+              aria-hidden="true"
+            ></span>
+          {/if}
+          <span>{primaryTag.name}</span>
+        </div>
+      {/if}
+    </div>
+
+    <div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
+      <span class="ui:font-black ui:text-lg">{course.price || formatCurrency(course.cost, course.currency)}</span>
+      <Button
+        href={disableCourseLinks ? undefined : course.link}
+        variant="outline"
+        class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
+          ? 'ui:pointer-events-none'
+          : 'ui:hover:bg-[var(--landing-accent)] ui:hover:text-[var(--landing-accent-fg)] ui:group-hover:bg-[var(--landing-accent)] ui:group-hover:text-[var(--landing-accent-fg)] ui:transition-colors'}"
+        aria-disabled={disableCourseLinks}
+        tabindex={disableCourseLinks ? -1 : undefined}
+      >
+        {labels?.enrollLabel ?? 'Details'}
+      </Button>
+    </div>
+  </Card.Content>
+</Card.Root>

packages/ui/src/custom/org-landing-page/bold/hero.svelte

@@ -2,7 +2,6 @@
   import type { OrgLandingPageProps } from '../types';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -15,35 +14,27 @@
 <EditableLandingSection sectionKey="hero">
   <section class="ui:py-10 ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center">
     <div>
-      <BlurFade delay={0} once={true} class="ui:mb-6">
-        <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-black ui:leading-[1.1] ui:tracking-tighter">{hero.heading}</h1>
-      </BlurFade>
-      <BlurFade delay={0.15} once={true}>
-        <p class="ui:text-xl ui:text-muted-foreground ui:mb-10 ui:leading-relaxed">{hero.subheading}</p>
-      </BlurFade>
-      <BlurFade delay={0.3} once={true}>
-        <div class="ui:flex ui:flex-wrap ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-primary/20 ui:hover:-translate-y-1 ui:transition-all"
-          >
-            {hero.primaryAction.label}
-          </Button>
-          {#if hero.secondaryAction}
-            <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
-          {/if}
-        </div>
-      </BlurFade>
+      <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-black ui:leading-[1.1] ui:tracking-tighter">{hero.heading}</h1>
+      <p class="ui:text-xl ui:text-[var(--landing-fg-muted)] ui:mb-10 ui:leading-relaxed">{hero.subheading}</p>
+      <div class="ui:flex ui:flex-wrap ui:gap-4">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-[var(--landing-accent)]/20 ui:hover:-translate-y-1 ui:transition-all"
+        >
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
+        {/if}
+      </div>
     </div>
     {#if hero.image}
-      <BlurFade delay={0.2} once={true} class="ui:relative ui:hidden ui:lg:block">
-        <div
-          class="ui:absolute ui:inset-0 ui:bg-primary/5 ui:rounded-3xl ui:transform ui:translate-x-4 ui:translate-y-4"
-        ></div>
-        <img src={hero.image} alt="Hero" class="ui:relative ui:rounded-3xl ui:w-full ui:h-[500px] ui:object-cover" />
-      </BlurFade>
+      <div
+        class="ui:absolute ui:inset-0 ui:bg-[var(--landing-accent)]/5 ui:rounded-3xl ui:transform ui:translate-x-4 ui:translate-y-4"
+      ></div>
+      <img src={hero.image} alt="Hero" class="ui:relative ui:rounded-3xl ui:w-full ui:h-[500px] ui:object-cover" />
     {/if}
   </section>
 </EditableLandingSection>

packages/ui/src/custom/org-landing-page/bold/nav.svelte

@@ -17,11 +17,13 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:sticky ui:top-0 ui:z-10 ui:bg-background/90 ui:backdrop-blur-xl ui:border-b ui:border-border/40">
+  <header
+    class="ui:sticky ui:top-0 ui:z-10 ui:bg-[var(--landing-bg)]/90 ui:backdrop-blur-xl ui:border-b ui:border-[var(--landing-border)]/40"
+  >
     <div class="ui:flex ui:items-center ui:justify-between ui:px-6 ui:py-5 ui:max-w-7xl ui:mx-auto">
       <a
         href="/"
-        class="ui:font-black ui:text-2xl ui:tracking-tighter ui:flex ui:items-center ui:gap-3 ui:no-underline"
+        class="ui:font-black ui:text-2xl ui:tracking-tighter ui:flex ui:items-center ui:gap-3 ui:no-underline ui:cursor-pointer"
       >
         {#if logoUrl}
           <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
@@ -33,7 +35,7 @@
           {#each navItems as item}
             <a
               href={item.href}
-              class="ui:text-sm ui:font-bold ui:uppercase ui:tracking-widest ui:hover:text-primary ui:transition-colors"
+              class="ui:text-sm ui:font-bold ui:uppercase ui:tracking-widest ui:hover:text-[var(--landing-accent)] ui:transition-colors ui:cursor-pointer"
               >{item.label}</a
             >
           {/each}

packages/ui/src/custom/org-landing-page/callout.svelte

@@ -1,21 +1,43 @@
 <script lang="ts">
-  import type { LandingPageCallout, OrgLandingPageTheme } from './types';
+  import type { LandingPageCallout, OrgLandingPageLabels, OrgLandingPageTheme } from './types';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
   import EditableLandingSection from './editable-section.svelte';
 
-  let { callout, variant = 'minimal' }: { callout?: LandingPageCallout; variant?: OrgLandingPageTheme } = $props();
+  let {
+    callout,
+    variant = 'minimal',
+    labels
+  }: {
+    callout?: LandingPageCallout;
+    variant?: OrgLandingPageTheme;
+    labels?: OrgLandingPageLabels;
+  } = $props();
+
+  /** Per-variant default eyebrow used when labels.calloutEyebrow is not provided. */
+  const defaultEyebrow = $derived<string | null>(
+    variant === 'saas'
+      ? 'Get started'
+      : variant === 'tech'
+        ? '// get started'
+        : variant === 'studio' || variant === 'corporate' || variant === 'editorial'
+          ? 'Ready when you are'
+          : null
+  );
+  const resolvedEyebrow = $derived(labels?.calloutEyebrow ?? defaultEyebrow);
 
   const sectionClasses: Record<string, string> = {
     minimal: 'ui:py-20 ui:px-6',
-    bold: 'ui:py-24 ui:px-6 ui:bg-foreground ui:text-background',
-    classic: 'ui:py-20 ui:px-6 ui:bg-foreground ui:text-background',
+    bold: 'ui:py-24 ui:px-6 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]',
+    classic: 'ui:py-20 ui:px-6 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]',
     saas: 'ui:py-24 ui:md:py-28 ui:px-6 ui:relative ui:overflow-hidden',
-    tech: 'ui:py-24 ui:px-6 ui:bg-foreground ui:text-background',
+    tech: 'ui:py-24 ui:px-6 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]',
     studio:
-      'ui:py-32 ui:px-6 ui:relative ui:overflow-hidden ui:bg-background ui:text-foreground ui:border-t ui:border-border',
-    corporate: 'ui:py-20 ui:px-6 ui:bg-muted/40 ui:text-foreground ui:border-t ui:border-border',
-    terminal: 'ui:py-20 ui:px-6 ui:border-t ui:border-[#1c1f28] ui:text-[#e9eaed] ui:bg-[#06070a]'
+      'ui:py-32 ui:px-6 ui:relative ui:overflow-hidden ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:border-t ui:border-[var(--landing-border)]',
+    corporate:
+      'ui:py-20 ui:px-6 ui:bg-[var(--landing-card-soft)]/40 ui:text-[var(--landing-fg)] ui:border-t ui:border-[var(--landing-border)]',
+    terminal: 'ui:py-20 ui:px-6 ui:border-t ui:border-[#1c1f28] ui:text-[#e9eaed] ui:bg-[#06070a]',
+    editorial: 'ui:py-32 ui:md:py-40 ui:px-6 ui:bg-[#e2e1d9] ui:text-[#1a1a1a]',
+    vibrant: 'ui:py-32 ui:md:py-40 ui:px-6 ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:text-center'
   };
 
   const headingClasses: Record<string, string> = {
@@ -26,59 +48,61 @@
     tech: 'ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight',
     studio: 'ui:text-5xl ui:lg:text-6xl ui:font-semibold ui:tracking-tight ui:leading-[1.02]',
     corporate: 'ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight',
-    terminal: 'ui:text-[22px] ui:font-semibold ui:tracking-tight'
+    terminal: 'ui:text-[22px] ui:font-semibold ui:tracking-tight',
+    editorial: 'ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-medium ui:tracking-tight ui:leading-[1.05]',
+    vibrant: 'ui:text-5xl ui:md:text-6xl ui:lg:text-[80px] ui:font-medium ui:tracking-tight ui:leading-[1.02]'
   };
 
   const descriptionClasses: Record<string, string> = {
-    minimal: 'ui:text-lg ui:text-foreground/70',
-    bold: 'ui:text-xl ui:text-background/70',
-    classic: 'ui:text-lg ui:text-background/80',
-    saas: 'ui:text-base ui:md:text-lg ui:text-muted-foreground ui:max-w-xl ui:mx-auto',
-    tech: 'ui:text-lg ui:text-background/70 ui:font-mono',
-    studio: 'ui:text-base ui:text-muted-foreground ui:max-w-xl ui:mx-auto',
-    corporate: 'ui:text-base ui:text-muted-foreground ui:max-w-xl ui:mx-auto',
-    terminal: 'ui:text-sm ui:max-w-md ui:mx-auto ui:text-[#9da1ab]'
+    minimal: 'ui:text-lg ui:text-[var(--landing-fg)]/70',
+    bold: 'ui:text-xl ui:text-[var(--landing-bg)]/70',
+    classic: 'ui:text-lg ui:text-[var(--landing-bg)]/80',
+    saas: 'ui:text-base ui:md:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto',
+    tech: 'ui:text-lg ui:text-[var(--landing-bg)]/70 ui:font-mono',
+    studio: 'ui:text-base ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto',
+    corporate: 'ui:text-base ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto',
+    terminal: 'ui:text-sm ui:max-w-md ui:mx-auto ui:text-[#9da1ab]',
+    editorial: 'ui:text-base ui:md:text-lg ui:text-[#76746c] ui:max-w-xl ui:mx-auto',
+    vibrant: 'ui:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto'
   };
 
   const buttonClasses: Record<string, string> = {
     minimal: 'ui:rounded-full',
-    bold: 'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-primary/20',
+    bold: 'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-[var(--landing-accent)]/20',
     classic: 'ui:px-8 ui:font-semibold',
-    saas: 'ui:rounded-full ui:px-7 ui:font-semibold ui:shadow-md ui:shadow-primary/20',
+    saas: 'ui:rounded-full ui:px-7 ui:font-semibold ui:shadow-md ui:shadow-[var(--landing-accent)]/20',
     tech: 'ui:rounded-none ui:px-8 ui:font-semibold',
-    studio: 'ui:rounded-md ui:px-5 ui:font-medium ui:shadow-lg ui:shadow-primary/25',
+    studio: 'ui:rounded-md ui:px-5 ui:font-medium ui:shadow-lg ui:shadow-[var(--landing-accent)]/25',
     corporate: 'ui:rounded-none ui:px-8 ui:font-medium',
     terminal:
-      'ui:rounded-full ui:px-4 ui:font-mono ui:text-[13px] ui:bg-[#0f1218] ui:text-[#e9eaed] ui:border ui:border-[#262a35] ui:hover:bg-[#14171f]'
+      'ui:rounded-full ui:px-4 ui:font-mono ui:text-[13px] ui:bg-[#0f1218] ui:text-[#e9eaed] ui:border ui:border-[#262a35] ui:hover:bg-[#14171f]',
+    editorial:
+      'ui:rounded-full ui:px-6 ui:font-medium ui:bg-[#1a1a1a] ui:text-[#fafaf5] ui:hover:bg-[#2c2b29] ui:transition-colors',
+    vibrant:
+      'ui:rounded-md ui:px-7 ui:py-3 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:bg-[var(--landing-accent)]/90 ui:transition-colors'
   };
 
   const eyebrowClasses: Record<string, string> = {
     minimal: '',
     bold: '',
     classic: '',
-    saas: 'ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-primary ui:mb-1',
-    tech: 'ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-background/70 ui:mb-1',
-    studio: 'ui:text-sm ui:text-muted-foreground ui:inline-flex ui:items-center ui:gap-2 ui:mb-2',
-    corporate: 'ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-foreground ui:mb-1',
-    terminal: ''
+    saas: 'ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-1',
+    tech: 'ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-bg)]/70 ui:mb-1',
+    studio: 'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:inline-flex ui:items-center ui:gap-2 ui:mb-2',
+    corporate: 'ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg)] ui:mb-1',
+    terminal: '',
+    editorial: 'ui:text-sm ui:text-[#76746c] ui:mb-1',
+    vibrant: ''
   };
 
-  const eyebrowLabels: Record<string, string | null> = {
-    minimal: null,
-    bold: null,
-    classic: null,
-    saas: 'Get started',
-    tech: '// get started',
-    studio: 'Ready when you are',
-    corporate: 'Ready when you are',
-    terminal: null
-  };
+  // Default eyebrow per variant is computed above as `defaultEyebrow`, resolved
+  // into `resolvedEyebrow` (which prefers labels.calloutEyebrow when provided).
 
   const minimalBackground = `
     linear-gradient(
       135deg,
-      color-mix(in oklab, var(--primary) 10%, var(--background)) 0%,
-      color-mix(in oklab, var(--primary) 4%, var(--background)) 100%
+      color-mix(in oklab, var(--landing-accent) 10%, var(--landing-bg)) 0%,
+      color-mix(in oklab, var(--landing-accent) 4%, var(--landing-bg)) 100%
     )
   `;
 </script>
@@ -93,7 +117,7 @@
         <!-- soft radial glow at the bottom -->
         <div
           class="ui:pointer-events-none ui:absolute ui:left-1/2 ui:bottom-[-220px] ui:size-[800px] ui:-translate-x-1/2"
-          style="background: radial-gradient(ellipse at center, color-mix(in oklab, var(--primary) 28%, transparent) 0%, transparent 60%); filter: blur(40px);"
+          style="background: radial-gradient(ellipse at center, color-mix(in oklab, var(--landing-accent) 28%, transparent) 0%, transparent 60%); filter: blur(40px);"
           aria-hidden="true"
         ></div>
       {/if}
@@ -101,45 +125,37 @@
         <!-- soft accent ring; the parent .frame already provides the dot grid + side lines -->
         <div
           class="ui:pointer-events-none ui:absolute ui:top-1/2 ui:left-1/2 ui:size-[640px] ui:-translate-x-1/2 ui:-translate-y-1/2 ui:opacity-60"
-          style="background: radial-gradient(ellipse at center, color-mix(in oklab, var(--primary) 14%, transparent) 0%, transparent 60%);"
+          style="background: radial-gradient(ellipse at center, color-mix(in oklab, var(--landing-accent) 14%, transparent) 0%, transparent 60%);"
           aria-hidden="true"
         ></div>
       {/if}
 
       <div class="ui:relative ui:mx-auto ui:flex ui:max-w-3xl ui:flex-col ui:items-center ui:gap-6 ui:text-center">
-        {#if eyebrowLabels[variant]}
-          <BlurFade delay={0} once={true}>
-            {#if variant === 'studio'}
-              <p class={eyebrowClasses[variant]}>
-                <span class="ui:size-1.5 ui:rounded-full ui:bg-primary"></span>
-                {eyebrowLabels[variant]}
-              </p>
-            {:else}
-              <p class={eyebrowClasses[variant]}>{eyebrowLabels[variant]}</p>
-            {/if}
-          </BlurFade>
+        {#if resolvedEyebrow}
+          {#if variant === 'studio'}
+            <p class={eyebrowClasses[variant]}>
+              <span class="ui:size-1.5 ui:rounded-full ui:bg-[var(--landing-accent)]"></span>
+              {resolvedEyebrow}
+            </p>
+          {:else}
+            <p class={eyebrowClasses[variant]}>{resolvedEyebrow}</p>
+          {/if}
         {/if}
 
-        <BlurFade delay={0.05} once={true}>
-          <h2 class={headingClasses[variant]}>{callout.heading}</h2>
-        </BlurFade>
+        <h2 class={headingClasses[variant]}>{callout.heading}</h2>
 
         {#if callout.description}
-          <BlurFade delay={0.15} once={true}>
-            <p class={descriptionClasses[variant]}>{callout.description}</p>
-          </BlurFade>
+          <p class={descriptionClasses[variant]}>{callout.description}</p>
         {/if}
 
-        <BlurFade delay={0.3} once={true}>
-          <Button
-            href={callout.action.href}
-            size="lg"
-            class={buttonClasses[variant]}
-            variant={variant === 'bold' || variant === 'classic' || variant === 'tech' ? 'secondary' : 'default'}
-          >
-            {callout.action.label}
-          </Button>
-        </BlurFade>
+        <Button
+          href={callout.action.href}
+          size="lg"
+          class={buttonClasses[variant]}
+          variant={variant === 'bold' || variant === 'classic' || variant === 'tech' ? 'secondary' : 'default'}
+        >
+          {callout.action.label}
+        </Button>
       </div>
     </section>
   </EditableLandingSection>

packages/ui/src/custom/org-landing-page/classic.svelte

@@ -6,12 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import ClassicNav from './classic/nav.svelte';
   import ClassicHero from './classic/hero.svelte';
+  import ClassicCourseCard from './classic/course-card.svelte';
   import { Button } from '../../base/button';
-  import * as Item from '../../base/item';
-  import { BlurFade } from '../animation/blurfade';
-  import { CourseCard } from '../course-card';
-  import { calcCourseDiscount, formatExerciseCountLabel, getCourseTypeLandingMeta } from './landing-page-utils';
-  import { cn } from '../../tools';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -25,11 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
 </script>
 
-<div class="ui:min-h-screen ui:bg-muted/10 ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('classic')}
+>
   <ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
@@ -37,93 +38,15 @@
 
     <section class="ui:py-10 ui:px-6 ui:lg:px-8 ui:max-w-7xl ui:mx-auto">
       <div class="ui:text-center ui:mb-8">
-        <BlurFade delay={0} once={true}>
-          <h2 class="ui:text-3xl ui:font-bold ui:text-foreground">Featured Programs</h2>
-        </BlurFade>
-        <BlurFade delay={0.15} once={true}>
-          <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-border ui:mx-auto"></div>
-        </BlurFade>
+        <h2 class="ui:text-3xl ui:font-bold ui:text-[var(--landing-fg)]">
+          {labels?.catalogHeading ?? 'Featured Programs'}
+        </h2>
+        <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-[var(--landing-border)] ui:mx-auto"></div>
       </div>
 
       <div class="ui:grid ui:grid-cols-1 ui:sm:grid-cols-2 ui:lg:grid-cols-3 ui:gap-8 ui:justify-items-center">
         {#each courses as course, index (course.id)}
-          {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-          {@const pricingData = {
-            cost: course.cost ?? 0,
-            discount: course.metadata?.discount ?? 0,
-            showDiscount: !!course.metadata?.showDiscount
-          }}
-          {@const displayCost = calcCourseDiscount(pricingData.discount, pricingData.cost, pricingData.showDiscount)}
-          {@const currencyFormatter = new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: course.currency ?? 'USD'
-          })}
-          <BlurFade delay={0.1 * index} once={true} class="ui:w-full ui:flex ui:justify-center">
-            <CourseCard
-              href={disableCourseLinks
-                ? undefined
-                : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-              bannerImage={course.logo || ''}
-              bannerAlt={course.title}
-              title={course.title}
-              description={course.description}
-              typeBadge={courseTypeMeta
-                ? {
-                    label: courseTypeMeta.label,
-                    icon: courseTypeMeta.icon,
-                    iconClass: courseTypeMeta.iconClass
-                  }
-                : undefined}
-              class={cn('ui:group ui:relative', !disableCourseLinks && 'ui:hover:shadow-md ui:transition-shadow')}
-            >
-              {#snippet tags()}
-                {#if course.tags && course.tags.length > 0}
-                  <div class="ui:flex ui:flex-wrap ui:gap-1 ui:min-w-0">
-                    {#each course.tags as tag (tag.id)}
-                      <Item.SubDescription
-                        class="ui:border-border ui:inline-flex ui:shrink-0 ui:items-center ui:gap-1.5 ui:rounded-full ui:border ui:px-2"
-                      >
-                        <span
-                          class="ui:bg-primary/60 ui:inline-block ui:h-1.5 ui:w-1.5 ui:shrink-0 ui:rounded-full"
-                          style={tag.color ? `background-color: ${tag.color}` : undefined}
-                          aria-hidden="true"
-                        ></span>
-                        <span>{tag.name}</span>
-                      </Item.SubDescription>
-                    {/each}
-                  </div>
-                {/if}
-              {/snippet}
-
-              {#snippet footer()}
-                <div class="ui:flex ui:justify-between ui:w-full">
-                  <div class="ui:w-[80%]">
-                    <p class="ui:text-xs ui:pl-2 ui:dark:text-white">
-                      <span>{course.lessonCount || 0} lessons</span>
-                      &
-                      <span>{formatExerciseCountLabel(course.exerciseCount ?? 0)}</span>
-                    </p>
-                    <div class="ui:py-2 ui:text-xs">
-                      {#if course.price != null && String(course.price).length > 0}
-                        <span class="ui:px-2">{course.price}</span>
-                      {:else if !displayCost}
-                        <span class="ui:px-2">Free</span>
-                      {:else if pricingData.showDiscount}
-                        <span class="ui:px-2">
-                          {currencyFormatter.format(displayCost)}
-                          <span class="line-through">
-                            {currencyFormatter.format(pricingData.cost)}
-                          </span>
-                        </span>
-                      {:else}
-                        <span class="ui:px-2">{currencyFormatter.format(displayCost)}</span>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              {/snippet}
-            </CourseCard>
-          </BlurFade>
+          <ClassicCourseCard {course} {disableCourseLinks} {labels} />
         {/each}
       </div>
 
@@ -136,18 +59,18 @@
             class="ui:px-8"
             disabled={disableCourseLinks}
           >
-            View more courses
+            {labels?.browseCoursesLabel ?? 'View more courses'}
           </Button>
         </div>
       {/if}
     </section>
   </main>
 
-  <OrgLandingPageLinks {links} variant="classic" />
+  <OrgLandingPageLinks {links} {labels} variant="classic" />
 
-  <OrgLandingPageEmbed {embed} variant="classic" />
+  <OrgLandingPageEmbed {embed} {labels} variant="classic" />
 
-  <OrgLandingPageCallout {callout} variant="classic" />
+  <OrgLandingPageCallout {callout} {labels} variant="classic" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="classic" />
 </div>

packages/ui/src/custom/org-landing-page/classic/course-card.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import * as Item from '../../../base/item';
+  import { CourseCard } from '../../course-card';
+  import { calcCourseDiscount, formatExerciseCountLabel, getCourseTypeLandingMeta } from '../landing-page-utils';
+  import { cn } from '../../../tools';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+  const pricingData = $derived({
+    cost: course.cost ?? 0,
+    discount: course.metadata?.discount ?? 0,
+    showDiscount: !!course.metadata?.showDiscount
+  });
+  const displayCost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost, pricingData.showDiscount));
+  const currencyFormatter = $derived(
+    new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: course.currency ?? 'USD'
+    })
+  );
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+</script>
+
+<CourseCard
+  {href}
+  bannerImage={course.logo || ''}
+  bannerAlt={course.title}
+  title={course.title}
+  description={course.description}
+  typeBadge={courseTypeMeta
+    ? {
+        label: courseTypeMeta.label,
+        icon: courseTypeMeta.icon,
+        iconClass: courseTypeMeta.iconClass
+      }
+    : undefined}
+  class={cn('ui:group ui:relative', !disableCourseLinks && 'ui:cursor-pointer ui:hover:shadow-md ui:transition-shadow')}
+>
+  {#snippet tags()}
+    {#if course.tags && course.tags.length > 0}
+      <div class="ui:flex ui:flex-wrap ui:gap-1 ui:min-w-0">
+        {#each course.tags as tag (tag.id)}
+          <Item.SubDescription
+            class="ui:border-[var(--landing-border)] ui:inline-flex ui:shrink-0 ui:items-center ui:gap-1.5 ui:rounded-full ui:border ui:px-2"
+          >
+            <span
+              class="ui:bg-[var(--landing-accent)]/60 ui:inline-block ui:h-1.5 ui:w-1.5 ui:shrink-0 ui:rounded-full"
+              style={tag.color ? `background-color: ${tag.color}` : undefined}
+              aria-hidden="true"
+            ></span>
+            <span>{tag.name}</span>
+          </Item.SubDescription>
+        {/each}
+      </div>
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="ui:flex ui:justify-between ui:w-full">
+      <div class="ui:w-[80%]">
+        <p class="ui:text-xs ui:pl-2 ui:dark:text-white">
+          <span>{course.lessonCount || 0} lessons</span>
+          &
+          <span>{formatExerciseCountLabel(course.exerciseCount ?? 0)}</span>
+        </p>
+        <div class="ui:py-2 ui:text-xs">
+          {#if course.price != null && String(course.price).length > 0}
+            <span class="ui:px-2">{course.price}</span>
+          {:else if !displayCost}
+            <span class="ui:px-2">{labels?.freeLabel ?? 'Free'}</span>
+          {:else if pricingData.showDiscount}
+            <span class="ui:px-2">
+              {currencyFormatter.format(displayCost)}
+              <span class="line-through">
+                {currencyFormatter.format(pricingData.cost)}
+              </span>
+            </span>
+          {:else}
+            <span class="ui:px-2">{currencyFormatter.format(displayCost)}</span>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/snippet}
+</CourseCard>

packages/ui/src/custom/org-landing-page/classic/hero.svelte

@@ -2,7 +2,6 @@
   import type { OrgLandingPageProps } from '../types';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import { BlurIn } from '../../animation/blurin';
   import { DotPattern } from '../../animation/dot-pattern';
   import EditableLandingSection from '../editable-section.svelte';
@@ -16,7 +15,7 @@
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:bg-foreground ui:text-background ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
+    class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
   >
     {#if hero.image}
       <div class="ui:absolute ui:inset-0 ui:opacity-10">
@@ -30,28 +29,24 @@
       >
         {hero.heading}
       </BlurIn>
-      <BlurFade delay={0.15} once={true}>
-        <p class="ui:text-lg ui:sm:text-xl ui:text-background/80 ui:mb-10">{hero.subheading}</p>
-      </BlurFade>
-      <BlurFade delay={0.3} once={true}>
-        <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:px-8 ui:font-semibold"
-          >
-            {hero.primaryAction.label}
-          </Button>
-          {#if hero.secondaryAction}
-            <SecondaryActionButton
-              href={hero.secondaryAction.href}
-              label={hero.secondaryAction.label}
-              variant="classic"
-            />
-          {/if}
-        </div>
-      </BlurFade>
+      <p class="ui:text-lg ui:sm:text-xl ui:text-[var(--landing-bg)]/80 ui:mb-10">{hero.subheading}</p>
+      <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:px-8 ui:font-semibold"
+        >
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton
+            href={hero.secondaryAction.href}
+            label={hero.secondaryAction.label}
+            variant="classic"
+          />
+        {/if}
+      </div>
     </div>
   </section>
 </EditableLandingSection>

packages/ui/src/custom/org-landing-page/classic/nav.svelte

@@ -17,9 +17,12 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:bg-foreground ui:text-background">
+  <header class="ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]">
     <div class="ui:flex ui:items-center ui:justify-between ui:px-6 ui:lg:px-8 ui:h-20 ui:max-w-7xl ui:mx-auto">
-      <a href="/" class="ui:flex ui:items-center ui:gap-3 ui:text-xl ui:font-bold ui:tracking-wide ui:no-underline">
+      <a
+        href="/"
+        class="ui:flex ui:items-center ui:gap-3 ui:text-xl ui:font-bold ui:tracking-wide ui:no-underline ui:cursor-pointer"
+      >
         {#if logoUrl}
           <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
         {/if}
@@ -30,7 +33,7 @@
           {#each navItems as item}
             <a
               href={item.href}
-              class="ui:text-sm ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors"
+              class="ui:text-sm ui:font-medium ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:cursor-pointer"
               >{item.label}</a
             >
           {/each}
@@ -39,7 +42,7 @@
           <Button
             href={authAction.href}
             variant="outline"
-            class="ui:bg-transparent ui:text-background ui:border-background/40 ui:hover:bg-background/10 ui:hover:text-background ui:hover:border-background/60"
+            class="ui:bg-transparent ui:text-[var(--landing-bg)] ui:border-[var(--landing-bg)]/40 ui:hover:bg-[var(--landing-bg)]/10 ui:hover:text-[var(--landing-bg)] ui:hover:border-[var(--landing-bg)]/60"
           >
             {authAction.label}
           </Button>

packages/ui/src/custom/org-landing-page/corporate.svelte

@@ -6,9 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import CorporateNav from './corporate/nav.svelte';
   import CorporateHero from './corporate/hero.svelte';
+  import CorporateCourseCard from './corporate/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
-  import { getCourseTypeLandingMeta } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -22,16 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('corporate')}
+>
   <main>
     <CorporateHero {orgName} {hero}>
       {#snippet navigation()}
@@ -40,15 +39,17 @@
     </CorporateHero>
 
     {#if courses.length > 0}
-      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-border">
+      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-[var(--landing-border)]">
         <div class="ui:max-w-[1120px] ui:mx-auto">
           <div class="ui:flex ui:items-end ui:justify-between ui:flex-wrap ui:gap-4 ui:mb-10">
             <div>
-              <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-foreground ui:mb-3">
-                Catalog
+              <p
+                class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg)] ui:mb-3"
+              >
+                {labels?.catalogEyebrow ?? 'Catalog'}
               </p>
               <h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0 ui:max-w-xl">
-                Programs your teams are taking
+                {labels?.catalogHeading ?? 'Programs your teams are taking'}
               </h2>
             </div>
             {#if hasMoreCourses}
@@ -58,50 +59,16 @@
                 class="ui:rounded-none ui:font-medium"
                 disabled={disableCourseLinks}
               >
-                Browse catalog →
+                {labels?.browseCoursesLabel ?? 'Browse catalog →'}
               </Button>
             {/if}
           </div>
 
           <div
-            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-border"
+            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]"
           >
             {#each courses as course, index (course.id)}
-              {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={disableCourseLinks
-                    ? undefined
-                    : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                  class="ui:flex ui:flex-col ui:h-full ui:p-6 ui:gap-2 ui:border-r ui:border-b ui:border-border ui:bg-background ui:transition-colors ui:no-underline {disableCourseLinks
-                    ? 'ui:cursor-default'
-                    : 'ui:hover:bg-muted/30'}"
-                  aria-disabled={disableCourseLinks}
-                  tabindex={disableCourseLinks ? -1 : undefined}
-                >
-                  {#if courseTypeMeta}
-                    <span
-                      class="ui:text-[11px] ui:font-semibold ui:tracking-widest ui:uppercase ui:text-muted-foreground ui:mb-1"
-                    >
-                      {courseTypeMeta.label}
-                    </span>
-                  {/if}
-                  <h3 class="ui:text-lg ui:font-semibold ui:tracking-tight ui:leading-snug ui:m-0">
-                    {course.title}
-                  </h3>
-                  <p class="ui:text-sm ui:text-muted-foreground ui:leading-relaxed ui:line-clamp-3 ui:flex-1 ui:m-0">
-                    {course.description}
-                  </p>
-                  <div class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-3 ui:border-t ui:border-border">
-                    <span class="ui:text-sm ui:font-semibold">
-                      {course.price || formatCurrency(course.cost, course.currency)}
-                    </span>
-                    <span class="ui:text-sm ui:text-foreground ui:underline ui:underline-offset-4" aria-hidden="true">
-                      Enroll →
-                    </span>
-                  </div>
-                </a>
-              </BlurFade>
+              <CorporateCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
         </div>
@@ -109,11 +76,11 @@
     {/if}
   </main>
 
-  <OrgLandingPageLinks {links} variant="corporate" />
+  <OrgLandingPageLinks {links} {labels} variant="corporate" />
 
-  <OrgLandingPageEmbed {embed} variant="corporate" />
+  <OrgLandingPageEmbed {embed} {labels} variant="corporate" />
 
-  <OrgLandingPageCallout {callout} variant="corporate" />
+  <OrgLandingPageCallout {callout} {labels} variant="corporate" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="corporate" />
 </div>

packages/ui/src/custom/org-landing-page/corporate/course-card.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import { getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:flex ui:flex-col ui:h-full ui:p-6 ui:gap-2 ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:transition-colors ui:no-underline {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer ui:hover:bg-[var(--landing-card-soft)]/30'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  {#if courseTypeMeta}
+    <span
+      class="ui:text-[11px] ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg-muted)] ui:mb-1"
+    >
+      {courseTypeMeta.label}
+    </span>
+  {/if}
+  <h3 class="ui:text-lg ui:font-semibold ui:tracking-tight ui:leading-snug ui:m-0">
+    {course.title}
+  </h3>
+  <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:flex-1 ui:m-0">
+    {course.description}
+  </p>
+  <div class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-3 ui:border-t ui:border-[var(--landing-border)]">
+    <span class="ui:text-sm ui:font-semibold">
+      {course.price || formatCurrency(course.cost, course.currency)}
+    </span>
+    <span class="ui:text-sm ui:text-[var(--landing-fg)] ui:underline ui:underline-offset-4" aria-hidden="true">
+      {labels?.enrollLabel ?? 'Enroll →'}
+    </span>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/corporate/hero.svelte

@@ -3,7 +3,6 @@
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -22,85 +21,79 @@
 <EditableLandingSection sectionKey="hero">
   <section class="ui:px-6 ui:pt-12 ui:pb-24 ui:md:pt-16 ui:md:pb-28">
     <div class="ui:max-w-[1120px] ui:mx-auto">
-      <BlurFade delay={0} once={true}>
-        <div class="ui:flex ui:items-center ui:gap-4 ui:pb-5 ui:mb-10 ui:border-b ui:border-border">
-          <span class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-foreground">
-            {orgName}
-          </span>
-          <span class="ui:h-px ui:flex-1 ui:bg-border" aria-hidden="true"></span>
-          <span class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-muted-foreground">
-            Learning Report
-          </span>
-        </div>
-      </BlurFade>
+      <div class="ui:flex ui:items-center ui:gap-4 ui:pb-5 ui:mb-10 ui:border-b ui:border-[var(--landing-border)]">
+        <span class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-[var(--landing-fg)]">
+          {orgName}
+        </span>
+        <span class="ui:h-px ui:flex-1 ui:bg-[var(--landing-border)]" aria-hidden="true"></span>
+        <span
+          class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-[var(--landing-fg-muted)]"
+        >
+          Learning Report
+        </span>
+      </div>
 
       <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-12 ui:gap-x-8 ui:gap-y-12">
         <div class="ui:md:col-span-7">
-          <BlurFade delay={0.08} once={true}>
-            <h1
-              class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-semibold ui:tracking-tight ui:leading-[1.05] ui:mb-6 ui:text-foreground"
+          <h1
+            class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-semibold ui:tracking-tight ui:leading-[1.05] ui:mb-6 ui:text-[var(--landing-fg)]"
+          >
+            {hero.heading}
+          </h1>
+
+          <p
+            class="ui:text-base ui:md:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mb-8 ui:leading-relaxed"
+          >
+            {hero.subheading}
+          </p>
+
+          <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
+            <Button
+              href={hero.primaryAction.href}
+              disabled={hero.primaryAction.disabled ?? false}
+              class="ui:rounded-none ui:px-6 ui:font-medium"
             >
-              {hero.heading}
-            </h1>
-          </BlurFade>
-
-          <BlurFade delay={0.18} once={true}>
-            <p class="ui:text-base ui:md:text-lg ui:text-muted-foreground ui:max-w-xl ui:mb-8 ui:leading-relaxed">
-              {hero.subheading}
-            </p>
-          </BlurFade>
-
-          <BlurFade delay={0.28} once={true}>
-            <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
-              <Button
-                href={hero.primaryAction.href}
-                disabled={hero.primaryAction.disabled ?? false}
-                class="ui:rounded-none ui:px-6 ui:font-medium"
-              >
-                {hero.primaryAction.label}
-              </Button>
-              {#if hero.secondaryAction}
-                <SecondaryActionButton
-                  href={hero.secondaryAction.href}
-                  label={hero.secondaryAction.label}
-                  variant="corporate"
-                />
-              {/if}
-            </div>
-          </BlurFade>
+              {hero.primaryAction.label}
+            </Button>
+            {#if hero.secondaryAction}
+              <SecondaryActionButton
+                href={hero.secondaryAction.href}
+                label={hero.secondaryAction.label}
+                variant="corporate"
+              />
+            {/if}
+          </div>
         </div>
 
         {#if stats.length > 0}
           <aside class="ui:md:col-span-4 ui:md:col-start-9 ui:md:border-l ui:md:border-border ui:md:pl-8">
-            <BlurFade delay={0.32} once={true}>
-              <p
-                class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-muted-foreground ui:mb-6"
-              >
-                At a glance
-              </p>
+            <p
+              class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:mb-6"
+            >
+              At a glance
+            </p>
 
-              <dl class="ui:flex ui:flex-col">
-                {#each stats as stat, index (`${stat.label}-${index}`)}
-                  <div
-                    class="ui:flex ui:items-baseline ui:justify-between ui:gap-4 ui:py-4 ui:border-t ui:border-border ui:first:border-t-0"
-                  >
-                    <div class="ui:flex ui:items-baseline ui:gap-3 ui:min-w-0">
-                      <span class="ui:text-[11px] ui:font-mono ui:text-muted-foreground ui:tabular-nums">
-                        {String(index + 1).padStart(2, '0')}
-                      </span>
-                      <dt class="ui:text-sm ui:text-foreground ui:truncate">
-                        {stat.label}
-                      </dt>
-                    </div>
-                    <dd
-                      class="ui:text-2xl ui:md:text-3xl ui:font-semibold ui:tracking-tight ui:tabular-nums ui:text-foreground ui:m-0"
-                    >
-                      {stat.value}
-                    </dd>
+            <dl class="ui:flex ui:flex-col">
+              {#each stats as stat, index (`${stat.label}-${index}`)}
+                <div
+                  class="ui:flex ui:items-baseline ui:justify-between ui:gap-4 ui:py-4 ui:border-t ui:border-[var(--landing-border)] ui:first:border-t-0"
+                >
+                  <div class="ui:flex ui:items-baseline ui:gap-3 ui:min-w-0">
+                    <span class="ui:text-[11px] ui:font-mono ui:text-[var(--landing-fg-muted)] ui:tabular-nums">
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <dt class="ui:text-sm ui:text-[var(--landing-fg)] ui:truncate">
+                      {stat.label}
+                    </dt>
                   </div>
-                {/each}
-              </dl>
-            </BlurFade>
+                  <dd
+                    class="ui:text-2xl ui:md:text-3xl ui:font-semibold ui:tracking-tight ui:tabular-nums ui:text-[var(--landing-fg)] ui:m-0"
+                  >
+                    {stat.value}
+                  </dd>
+                </div>
+              {/each}
+            </dl>
           </aside>
         {/if}
       </div>

packages/ui/src/custom/org-landing-page/corporate/nav.svelte

@@ -17,12 +17,14 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:sticky ui:top-0 ui:z-50 ui:bg-background/95 ui:backdrop-blur-md ui:border-b ui:border-border">
+  <header
+    class="ui:sticky ui:top-0 ui:z-50 ui:bg-[var(--landing-bg)]/95 ui:backdrop-blur-md ui:border-b ui:border-[var(--landing-border)]"
+  >
     <div class="ui:max-w-[1120px] ui:mx-auto ui:px-6">
       <div class="ui:flex ui:items-center ui:justify-between ui:h-14">
         <a
           href="/"
-          class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-foreground ui:no-underline"
+          class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
         >
           {#if logoUrl}
             <img src={logoUrl} alt={orgName} class="ui:h-6 ui:w-auto" />
@@ -35,7 +37,7 @@
             {#each navItems as item (item.href + item.label)}
               <a
                 href={item.href}
-                class="ui:text-sm ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:no-underline"
+                class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:no-underline ui:cursor-pointer"
               >
                 {item.label}
               </a>

packages/ui/src/custom/org-landing-page/editorial.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import type { OrgLandingPageProps, CourseItem } from './types';
+  import OrgLandingPageEmbed from './embed.svelte';
+  import OrgLandingPageLinks from './links.svelte';
+  import OrgLandingPageCallout from './callout.svelte';
+  import OrgLandingPageFooter from './landing-page-footer.svelte';
+  import EditorialNav from './editorial/nav.svelte';
+  import EditorialHero from './editorial/hero.svelte';
+  import EditorialCourseCard from './editorial/course-card.svelte';
+  import { themeStyle } from './theme-style';
+  import { Button } from '../../base/button';
+  import { getCourseTypeLandingMeta } from './landing-page-utils';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    links,
+    footer,
+    labels
+  }: OrgLandingPageProps = $props();
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+
+  type FilterKey = 'ALL' | 'LIVE_CLASS' | 'SELF_PACED' | 'COMPLIANCE' | 'PUBLIC';
+
+  const filterDefs: Array<{ key: FilterKey; label: string }> = $derived([
+    { key: 'ALL', label: labels?.filterAllLabel ?? 'All' },
+    {
+      key: 'LIVE_CLASS',
+      label: getCourseTypeLandingMeta({ id: '', title: '', description: '', type: 'LIVE_CLASS' })?.label ?? 'Live class'
+    },
+    {
+      key: 'SELF_PACED',
+      label: getCourseTypeLandingMeta({ id: '', title: '', description: '', type: 'SELF_PACED' })?.label ?? 'Self-paced'
+    },
+    {
+      key: 'COMPLIANCE',
+      label: getCourseTypeLandingMeta({ id: '', title: '', description: '', type: 'COMPLIANCE' })?.label ?? 'Compliance'
+    },
+    {
+      key: 'PUBLIC',
+      label: getCourseTypeLandingMeta({ id: '', title: '', description: '', type: 'PUBLIC' })?.label ?? 'Public'
+    }
+  ]);
+
+  let activeFilter: FilterKey = $state('ALL');
+
+  const filterCounts = $derived.by(() => {
+    const counts: Record<FilterKey, number> = {
+      ALL: courses.length,
+      LIVE_CLASS: 0,
+      SELF_PACED: 0,
+      COMPLIANCE: 0,
+      PUBLIC: 0
+    };
+    for (const course of courses) {
+      const t = course.type?.trim().toUpperCase();
+      if (t === 'LIVE_CLASS' || t === 'SELF_PACED' || t === 'COMPLIANCE' || t === 'PUBLIC') {
+        counts[t]++;
+      }
+    }
+    return counts;
+  });
+
+  const visibleFilterDefs = $derived(filterDefs.filter((f) => f.key === 'ALL' || filterCounts[f.key] > 0));
+
+  const filteredCourses = $derived(
+    activeFilter === 'ALL' ? courses : courses.filter((c) => c.type?.trim().toUpperCase() === activeFilter)
+  );
+
+  function courseHref(course: CourseItem): string | undefined {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  }
+</script>
+
+<div
+  class="ui:min-h-screen ui:font-sans ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
+  style={themeStyle('editorial')}
+>
+  <main>
+    <EditorialHero {hero} {courses} {labels}>
+      {#snippet navigation()}
+        <EditorialNav {orgName} {logoUrl} {navItems} {authAction} />
+      {/snippet}
+    </EditorialHero>
+
+    {#if courses.length > 0}
+      <section id="courses" class="ui:py-10 ui:px-6 ui:md:px-8 ui:bg-[var(--landing-bg)]">
+        <div class="ui:max-w-[1240px] ui:mx-auto">
+          <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:justify-between ui:gap-6 ui:mb-8">
+            <div>
+              <p class="ui:text-[13px] ui:m-0 ui:mb-2 ui:text-[var(--landing-fg-muted)]">
+                {labels?.catalogEyebrow ?? 'Catalog'}
+              </p>
+              <h2
+                class="ui:text-3xl ui:md:text-[40px] ui:font-medium ui:tracking-tight ui:m-0 ui:leading-[1.1] ui:text-[var(--landing-fg)]"
+                style="letter-spacing: -0.025em;"
+              >
+                {labels?.catalogHeading ?? 'Programs starting this season.'}
+              </h2>
+              <p class="ui:text-base ui:mt-3 ui:max-w-xl ui:m-0 ui:text-[var(--landing-fg-muted)]">
+                {labels?.catalogDescription ??
+                  'Cohort-based and self-paced — every program ends with a reviewed project and a certificate of completion.'}
+              </p>
+            </div>
+            {#if hasMoreCourses}
+              <Button
+                href={disableCourseLinks ? undefined : '/courses'}
+                variant="outline"
+                class="ui:rounded-full ui:px-5 ui:font-medium ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-bg-section)]"
+                disabled={disableCourseLinks}
+              >
+                {labels?.browseCoursesLabel ?? 'Browse all courses →'}
+              </Button>
+            {/if}
+          </div>
+
+          {#if visibleFilterDefs.length > 1}
+            <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-1.5 ui:mb-8">
+              {#each visibleFilterDefs as def (def.key)}
+                {@const isActive = activeFilter === def.key}
+                <button
+                  type="button"
+                  class="ui:inline-flex ui:items-center ui:gap-1.5 ui:px-3.5 ui:py-1.5 ui:rounded-full ui:text-[13.5px] ui:transition-colors ui:border ui:cursor-pointer"
+                  style={isActive
+                    ? 'background: var(--landing-fg); color: var(--landing-bg); border-color: var(--landing-fg);'
+                    : 'background: transparent; color: var(--landing-fg); border-color: var(--landing-border);'}
+                  onclick={() => (activeFilter = def.key)}
+                >
+                  {def.label}
+                  <span
+                    class="ui:text-[11.5px] ui:tabular-nums"
+                    style={isActive ? 'opacity: 0.6;' : 'color: var(--landing-fg-faint);'}
+                  >
+                    {filterCounts[def.key]}
+                  </span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+
+          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-4">
+            {#each filteredCourses as course, index (course.id)}
+              <EditorialCourseCard {course} {index} {disableCourseLinks} {labels} />
+            {/each}
+          </div>
+
+          {#if hasMoreCourses}
+            <div class="ui:text-center ui:mt-10">
+              <Button
+                href={disableCourseLinks ? undefined : '/courses'}
+                size="lg"
+                class="ui:rounded-full ui:px-6 ui:font-medium ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:hover:opacity-90"
+                disabled={disableCourseLinks}
+              >
+                {labels?.browseCoursesLabel ?? 'View all courses'}
+              </Button>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {/if}
+  </main>
+
+  <OrgLandingPageLinks {links} {labels} variant="editorial" />
+
+  <OrgLandingPageEmbed {embed} {labels} variant="editorial" />
+
+  <OrgLandingPageCallout {callout} {labels} variant="editorial" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="editorial" />
+</div>

packages/ui/src/custom/org-landing-page/editorial/course-card.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import { defaultEnrolledLabel, defaultLessonsLabel, getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+    /** Index in the parent grid; used to cycle the painterly thumb gradient when the course has no logo. */
+    index?: number;
+  }
+
+  let { course, disableCourseLinks = false, labels, index = 0 }: Props = $props();
+
+  const thumbGradients = [
+    'radial-gradient(60% 80% at 30% 30%, #c4b78b 0%, transparent 60%), linear-gradient(135deg, #8a9460 0%, #c4a878 100%)',
+    'radial-gradient(50% 70% at 70% 40%, #d4a48a 0%, transparent 60%), linear-gradient(135deg, #6f5a4a 0%, #b08868 100%)',
+    'radial-gradient(60% 80% at 30% 30%, #8aa4b8 0%, transparent 60%), linear-gradient(135deg, #3a4858 0%, #6a7e92 100%)',
+    'radial-gradient(60% 80% at 40% 60%, #b8a4a4 0%, transparent 60%), linear-gradient(135deg, #5e4848 0%, #a87a78 100%)',
+    'radial-gradient(60% 80% at 50% 50%, #c4c08a 0%, transparent 60%), linear-gradient(135deg, #6a6840 0%, #a8a468 100%)',
+    'radial-gradient(60% 80% at 30% 30%, #aab8c4 0%, transparent 60%), linear-gradient(135deg, #4a5868 0%, #788a9a 100%)'
+  ];
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+  const resolvedLessonsLabel = $derived(labels?.lessonsLabel ?? defaultLessonsLabel);
+  const resolvedEnrolledLabel = $derived(labels?.enrolledLabel ?? defaultEnrolledLabel);
+
+  const thumbBg = $derived(
+    course.logo ? `center / cover no-repeat url('${course.logo}')` : thumbGradients[index % thumbGradients.length]
+  );
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:flex ui:flex-col ui:h-full ui:overflow-hidden ui:rounded-lg ui:no-underline ui:transition-transform ui:hover:-translate-y-0.5 ui:bg-[var(--landing-card-soft)] ui:text-[var(--landing-fg)] {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  <div class="ui:relative ui:h-[168px] ui:overflow-hidden" style="background: {thumbBg};">
+    <div
+      class="ui:pointer-events-none ui:absolute ui:inset-0"
+      style="background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 5px); mix-blend-mode: overlay;"
+      aria-hidden="true"
+    ></div>
+    {#if courseTypeMeta}
+      <span
+        class="ui:absolute ui:top-3.5 ui:left-3.5 ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-full ui:px-2.5 ui:py-0.5 ui:text-[11px] ui:font-medium ui:text-[var(--landing-fg)]"
+        style="background: color-mix(in srgb, var(--landing-card) 95%, transparent);"
+      >
+        {courseTypeMeta.label}
+      </span>
+    {/if}
+    {#if course.duration}
+      <span
+        class="ui:absolute ui:bottom-3.5 ui:right-3.5 ui:rounded-full ui:px-2.5 ui:py-0.5 ui:text-[11px] ui:tabular-nums"
+        style="background: color-mix(in srgb, var(--landing-fg) 70%, transparent); color: var(--landing-bg);"
+      >
+        {course.duration}
+      </span>
+    {/if}
+  </div>
+  <div class="ui:flex ui:flex-col ui:flex-1 ui:p-5 ui:md:p-6">
+    <h3
+      class="ui:text-[19px] ui:font-medium ui:tracking-tight ui:leading-[1.25] ui:m-0 ui:mb-2 ui:text-[var(--landing-fg)]"
+      style="letter-spacing: -0.015em;"
+    >
+      {course.title}
+    </h3>
+    <p class="ui:text-sm ui:leading-relaxed ui:line-clamp-3 ui:m-0 ui:mb-4 ui:flex-1 ui:text-[var(--landing-fg-muted)]">
+      {course.description}
+    </p>
+
+    {#if course.lessonCount || course.totalStudents || course.level}
+      <div
+        class="ui:flex ui:flex-wrap ui:items-center ui:gap-x-3 ui:gap-y-1 ui:text-[12.5px] ui:mb-4 ui:text-[var(--landing-fg-muted)]"
+      >
+        {#if course.lessonCount}
+          <span>{resolvedLessonsLabel(course.lessonCount)}</span>
+        {/if}
+        {#if course.level}
+          {#if course.lessonCount}
+            <span aria-hidden="true">·</span>
+          {/if}
+          <span>{course.level}</span>
+        {/if}
+        {#if course.totalStudents}
+          {#if course.lessonCount || course.level}
+            <span aria-hidden="true">·</span>
+          {/if}
+          <span>{resolvedEnrolledLabel(course.totalStudents)}</span>
+        {/if}
+      </div>
+    {/if}
+
+    <div
+      class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-auto"
+      style="border-top: 1px solid var(--landing-border);"
+    >
+      <span class="ui:text-base ui:font-semibold ui:text-[var(--landing-fg)]" style="letter-spacing: -0.01em;">
+        {course.price || formatCost(course.cost, course.currency)}
+      </span>
+      <span
+        class="ui:inline-flex ui:items-center ui:gap-1 ui:text-sm ui:font-medium ui:text-[var(--landing-accent)]"
+        aria-hidden="true"
+      >
+        {labels?.enrollLabel ?? 'Enroll'} <span>→</span>
+      </span>
+    </div>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/editorial/hero.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from '../types';
+  import type { Snippet } from 'svelte';
+  import SecondaryActionButton from '../secondary-action-button.svelte';
+  import { Button } from '../../../base/button';
+  import EditableLandingSection from '../editable-section.svelte';
+  import { getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    hero: OrgLandingPageProps['hero'];
+    courses: OrgLandingPageProps['courses'];
+    labels?: OrgLandingPageProps['labels'];
+    navigation: Snippet;
+  }
+
+  let { hero, courses = [], labels, navigation }: Props = $props();
+
+  const featured = $derived(courses[0]);
+  const featuredTypeMeta = $derived(featured ? getCourseTypeLandingMeta(featured) : undefined);
+  const syllabusItems = $derived(
+    featured
+      ? [
+          { label: 'Foundations', duration: '42 min' },
+          { label: 'Core concepts', duration: '1h 12m' },
+          { label: 'Hands-on practice', duration: '58 min' },
+          { label: 'Capstone project', duration: '2h 30m' }
+        ]
+      : []
+  );
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+</script>
+
+{@render navigation()}
+
+<EditableLandingSection sectionKey="hero">
+  <section class="ui:px-6 ui:md:px-8 ui:pt-16 ui:md:pt-20 ui:pb-12 ui:bg-[var(--landing-bg)]">
+    <div class="ui:max-w-[1240px] ui:mx-auto">
+      <div
+        class="ui:grid ui:grid-cols-1 ui:gap-12 ui:lg:gap-14 ui:items-start {featured
+          ? 'ui:lg:grid-cols-[1fr_1.05fr]'
+          : ''}"
+      >
+        <div class={featured ? '' : 'ui:text-center'}>
+          {#if hero.stats && hero.stats.length > 0}
+            <p class="ui:text-[13px] ui:mb-5 ui:text-[var(--landing-fg-muted)]">
+              {hero.stats[0].label}
+              {#if hero.stats[0].value}
+                <span class="ui:mx-2" aria-hidden="true">·</span>
+                <span class="ui:text-[var(--landing-fg)]">{hero.stats[0].value}</span>
+              {/if}
+            </p>
+          {/if}
+
+          <h1
+            class="ui:text-[44px] ui:md:text-[56px] ui:lg:text-[64px] ui:font-medium ui:tracking-tight ui:leading-[1.02] ui:m-0 ui:mb-5 ui:text-[var(--landing-fg)]"
+            style="letter-spacing: -0.03em;"
+          >
+            {hero.heading}
+          </h1>
+
+          <p
+            class="ui:text-lg ui:md:text-xl ui:leading-[1.35] ui:max-w-xl ui:m-0 ui:mb-9 ui:text-[var(--landing-fg-muted)] {featured
+              ? ''
+              : 'ui:mx-auto'}"
+            style="letter-spacing: -0.012em;"
+          >
+            {hero.subheading}
+          </p>
+
+          <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2.5 {featured ? '' : 'ui:justify-center'}">
+            <Button
+              href={hero.primaryAction.href}
+              disabled={hero.primaryAction.disabled ?? false}
+              size="lg"
+              class="ui:rounded-full ui:px-6 ui:font-medium ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:hover:opacity-90"
+            >
+              {hero.primaryAction.label}
+            </Button>
+            {#if hero.secondaryAction}
+              <SecondaryActionButton
+                href={hero.secondaryAction.href}
+                label={hero.secondaryAction.label}
+                variant="editorial"
+              />
+            {/if}
+          </div>
+        </div>
+
+        {#if featured}
+          {@const cost = featured.cost ?? 0}
+          {@const seats = featured.totalStudents ?? 0}
+          <div
+            class="ui:relative ui:overflow-hidden ui:rounded-xl"
+            style="
+              height: 480px;
+              background:
+                radial-gradient(60% 80% at 20% 30%, #b8a877 0%, transparent 60%),
+                radial-gradient(50% 60% at 80% 70%, #6b7a4a 0%, transparent 65%),
+                radial-gradient(40% 50% at 50% 50%, #d4c89a 0%, transparent 70%),
+                linear-gradient(135deg, #8a9460 0%, #c4a878 50%, #8b7a4f 100%);
+            "
+          >
+            <div
+              class="ui:pointer-events-none ui:absolute ui:inset-0"
+              style="
+                background-image:
+                  repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 4px),
+                  repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px);
+                mix-blend-mode: overlay;
+              "
+              aria-hidden="true"
+            ></div>
+
+            <div
+              class="ui:absolute ui:left-1/2 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2 ui:w-[84%] ui:overflow-hidden ui:rounded-[10px] ui:bg-[var(--landing-card)]"
+              style="
+                border: 1px solid var(--landing-border);
+                box-shadow: 0 24px 60px -20px rgba(0,0,0,0.28);
+              "
+            >
+              <div class="ui:flex ui:items-center ui:gap-2 ui:px-5 ui:pt-4 ui:text-[var(--landing-fg-muted)]">
+                <span
+                  class="ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-full ui:px-2.5 ui:py-0.5 ui:text-[11.5px] ui:font-medium ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)]"
+                >
+                  {featuredTypeMeta?.label ?? labels?.featuredLabel ?? 'Featured'}
+                </span>
+                {#if featured.duration}
+                  <span class="ui:text-[12px]" aria-hidden="true">·</span>
+                  <span class="ui:text-[12px]">{featured.duration}</span>
+                {/if}
+              </div>
+              <h3
+                class="ui:m-0 ui:mx-5 ui:mt-2 ui:mb-2 ui:text-[22px] ui:font-medium ui:tracking-tight ui:text-[var(--landing-fg)]"
+                style="letter-spacing: -0.02em;"
+              >
+                {featured.title}
+              </h3>
+              <p
+                class="ui:m-0 ui:mx-5 ui:mb-4 ui:text-[13px] ui:line-clamp-2 ui:text-[var(--landing-fg-muted)]"
+                style="line-height: 1.5;"
+              >
+                {featured.description}
+              </p>
+
+              <div class="ui:px-5 ui:pb-4">
+                {#each syllabusItems as item, idx (idx)}
+                  <div
+                    class="ui:flex ui:items-center ui:gap-2.5 ui:py-1.5 ui:text-[13px]"
+                    style={idx === 0 ? '' : 'border-top: 1px solid var(--landing-border-soft);'}
+                  >
+                    <span class="ui:text-[11px] ui:w-4 ui:tabular-nums ui:text-[var(--landing-fg-faint)]">
+                      {String(idx + 1).padStart(2, '0')}
+                    </span>
+                    <span class="ui:flex-1 ui:text-[var(--landing-fg)]">{item.label}</span>
+                    <span class="ui:text-[11.5px] ui:tabular-nums ui:text-[var(--landing-fg-muted)]"
+                      >{item.duration}</span
+                    >
+                  </div>
+                {/each}
+              </div>
+
+              <div
+                class="ui:flex ui:items-center ui:justify-between ui:px-5 ui:py-3 ui:bg-[var(--landing-bg)]"
+                style="border-top: 1px solid var(--landing-border-soft);"
+              >
+                <span class="ui:text-sm ui:font-semibold ui:text-[var(--landing-fg)]" style="letter-spacing: -0.01em;">
+                  {formatCost(cost, featured.currency)}
+                </span>
+                {#if seats > 0}
+                  <span class="ui:text-[12.5px] ui:text-[var(--landing-fg-muted)]"
+                    >{(labels?.enrolledLabel ?? ((n: number) => `${n.toLocaleString()} enrolled`))(seats)}</span
+                  >
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </section>
+</EditableLandingSection>

packages/ui/src/custom/org-landing-page/editorial/nav.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { NavItem } from '../types';
+  import { Button } from '../../../base/button';
+  import EditableLandingSection from '../editable-section.svelte';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    navItems: NavItem[];
+    authAction?: {
+      label: string;
+      href: string;
+    };
+  }
+
+  let { orgName, logoUrl, navItems, authAction }: Props = $props();
+</script>
+
+<EditableLandingSection sectionKey="navigation">
+  <header
+    class="ui:sticky ui:top-0 ui:z-50 ui:backdrop-blur-md"
+    style="background: color-mix(in srgb, var(--landing-bg) 85%, transparent); border-bottom: 1px solid var(--landing-border-soft);"
+  >
+    <div class="ui:max-w-[1240px] ui:mx-auto ui:px-6 ui:md:px-8">
+      <div class="ui:flex ui:items-center ui:justify-between ui:h-16">
+        <a
+          href="/"
+          class="ui:flex ui:items-center ui:gap-2.5 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:no-underline ui:text-[var(--landing-fg)] ui:cursor-pointer"
+        >
+          {#if logoUrl}
+            <img src={logoUrl} alt={orgName} class="ui:h-6 ui:w-auto" />
+          {/if}
+          <span>{orgName}</span>
+        </a>
+
+        {#if navItems.length > 0}
+          <nav class="ui:hidden ui:md:flex ui:gap-8">
+            {#each navItems as item (item.href + item.label)}
+              <a
+                href={item.href}
+                class="ui:text-sm ui:transition-colors ui:no-underline ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:cursor-pointer"
+              >
+                {item.label}
+              </a>
+            {/each}
+          </nav>
+        {/if}
+
+        <div class="ui:flex ui:items-center ui:gap-2.5">
+          {#if authAction}
+            <Button
+              href={authAction.href}
+              size="sm"
+              class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:hover:opacity-90"
+            >
+              {authAction.label}
+            </Button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </header>
+</EditableLandingSection>

packages/ui/src/custom/org-landing-page/embed.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-  import type { OrgLandingPageTheme, LandingPageEmbed } from './types';
+  import type { OrgLandingPageLabels, OrgLandingPageTheme, LandingPageEmbed } from './types';
   import SecondaryActionButton from './secondary-action-button.svelte';
-  import { BlurFade } from '../animation/blurfade';
   import EditableLandingSection from './editable-section.svelte';
 
-  let { embed, variant = 'minimal' }: { embed?: LandingPageEmbed; variant?: OrgLandingPageTheme } = $props();
+  let {
+    embed,
+    variant = 'minimal',
+    labels
+  }: {
+    embed?: LandingPageEmbed;
+    variant?: OrgLandingPageTheme;
+    labels?: OrgLandingPageLabels;
+  } = $props();
 </script>
 
 {#if embed}
@@ -12,82 +19,84 @@
     {#if variant === 'terminal'}
       <section class="ui:py-24 ui:px-6" style="border-top: 1px solid #1c1f28; background: #06070a;">
         <div class="ui:mx-auto ui:max-w-[1120px]">
-          <BlurFade delay={0} once={true}>
-            <p
-              class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
-              style="color: var(--primary);"
-            >
-              <span
-                class="ui:size-1.5 ui:rounded-full"
-                style="background: var(--primary); box-shadow: 0 0 12px var(--primary);"
-              ></span>
-              Embed
-            </p>
-          </BlurFade>
-          <BlurFade delay={0.08} once={true}>
-            <h3
-              class="ui:text-[36px] ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-4"
-              style="color: #e9eaed; line-height: 1.1; letter-spacing: -0.025em;"
-            >
-              {embed.title}
-            </h3>
-          </BlurFade>
+          <p
+            class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
+            style="color: var(--landing-accent);"
+          >
+            <span
+              class="ui:size-1.5 ui:rounded-full"
+              style="background: var(--landing-accent); box-shadow: 0 0 12px var(--landing-accent);"
+            ></span>
+            {labels?.embedEyebrow ?? 'Embed'}
+          </p>
+          <h3
+            class="ui:text-[36px] ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-4"
+            style="color: #e9eaed; line-height: 1.1; letter-spacing: -0.025em;"
+          >
+            {embed.title}
+          </h3>
           {#if embed.description?.trim()}
-            <BlurFade delay={0.16} once={true}>
-              <p class="ui:max-w-xl ui:m-0 ui:mb-6 ui:text-[15px]" style="color: #9da1ab;">
-                {embed.description}
-              </p>
-            </BlurFade>
+            <p class="ui:max-w-xl ui:m-0 ui:mb-6 ui:text-[15px]" style="color: #9da1ab;">
+              {embed.description}
+            </p>
           {/if}
           {#if embed.secondaryAction?.label && embed.secondaryAction?.href}
-            <BlurFade delay={0.22} once={true}>
-              <div class="ui:mb-8">
-                <SecondaryActionButton
-                  href={embed.secondaryAction.href}
-                  label={embed.secondaryAction.label}
-                  {variant}
-                />
-              </div>
-            </BlurFade>
+            <div class="ui:mb-8">
+              <SecondaryActionButton href={embed.secondaryAction.href} label={embed.secondaryAction.label} {variant} />
+            </div>
           {/if}
           {#if embed.code}
-            <BlurFade delay={0.3} once={true}>
-              <div
-                class="ui:rounded-xl ui:overflow-hidden ui:max-w-[820px]"
-                style="border: 1px solid #262a35; background: #0f1218; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);"
-              >
-                <div class="ui:p-5 ui:overflow-x-auto" style="color: #e9eaed;">
-                  {@html embed.code}
-                </div>
+            <div
+              class="ui:rounded-xl ui:overflow-hidden ui:max-w-[820px]"
+              style="border: 1px solid #262a35; background: #0f1218; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);"
+            >
+              <div class="ui:p-5 ui:overflow-x-auto" style="color: #e9eaed;">
+                {@html embed.code}
               </div>
-            </BlurFade>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {:else if variant === 'editorial'}
+      <section class="ui:py-24 ui:md:py-28 ui:px-6 ui:md:px-8 ui:bg-[#f4f3ed]">
+        <div class="ui:mx-auto ui:max-w-[1240px] ui:flex ui:flex-col ui:items-center ui:gap-6 ui:text-center">
+          <h3
+            class="ui:text-3xl ui:md:text-[40px] ui:font-medium ui:tracking-tight ui:m-0 ui:text-[#1a1a1a]"
+            style="line-height: 1.1; letter-spacing: -0.025em;"
+          >
+            {embed.title}
+          </h3>
+          {#if embed.description?.trim()}
+            <p class="ui:max-w-xl ui:text-center ui:text-base ui:leading-relaxed ui:text-[#76746c] ui:m-0">
+              {embed.description}
+            </p>
+          {/if}
+          {#if embed.secondaryAction?.label && embed.secondaryAction?.href}
+            <SecondaryActionButton href={embed.secondaryAction.href} label={embed.secondaryAction.label} {variant} />
+          {/if}
+          {#if embed.code}
+            <div class="ui:flex ui:w-full ui:justify-center">
+              {@html embed.code}
+            </div>
           {/if}
         </div>
       </section>
     {:else}
       <section class="ui:py-12 ui:px-6 ui:md:px-8">
         <div class="ui:mx-auto ui:flex ui:max-w-7xl ui:flex-col ui:items-center ui:gap-6 ui:text-center">
-          <BlurFade delay={0} once={true}>
-            <h3 class="ui:text-center ui:text-2xl ui:font-semibold ui:tracking-tight">{embed.title}</h3>
-          </BlurFade>
+          <h3 class="ui:text-center ui:text-2xl ui:font-semibold ui:tracking-tight">{embed.title}</h3>
           {#if embed.description?.trim()}
-            <BlurFade delay={0.12} once={true}>
-              <p class="ui:max-w-3xl ui:text-center ui:text-base ui:leading-7 ui:text-muted-foreground">
-                {embed.description}
-              </p>
-            </BlurFade>
+            <p class="ui:max-w-3xl ui:text-center ui:text-base ui:leading-7 ui:text-[var(--landing-fg-muted)]">
+              {embed.description}
+            </p>
           {/if}
           {#if embed.secondaryAction?.label && embed.secondaryAction?.href}
-            <BlurFade delay={0.2} once={true}>
-              <SecondaryActionButton href={embed.secondaryAction.href} label={embed.secondaryAction.label} {variant} />
-            </BlurFade>
+            <SecondaryActionButton href={embed.secondaryAction.href} label={embed.secondaryAction.label} {variant} />
           {/if}
           {#if embed.code}
-            <BlurFade delay={0.28} once={true}>
-              <div class="ui:flex ui:w-full ui:justify-center">
-                {@html embed.code}
-              </div>
-            </BlurFade>
+            <div class="ui:flex ui:w-full ui:justify-center">
+              {@html embed.code}
+            </div>
           {/if}
         </div>
       </section>

packages/ui/src/custom/org-landing-page/fixtures.ts

@@ -1,6 +1,6 @@
-import type { OrgLandingPageProps } from '@cio/ui/custom/org-landing-page/types';
+import type { OrgLandingPageProps } from './types';
 
-export const mockProps: OrgLandingPageProps = {
+export const mockOrgLandingPageProps: OrgLandingPageProps = {
   orgName: 'Certifi Academy',
   logoUrl: 'https://ui-avatars.com/api/?name=CA&background=0f172a&color=fff',
   navItems: [
@@ -154,25 +154,100 @@ export const mockProps: OrgLandingPageProps = {
     brand: {
       socials: [
         { platform: 'linkedin', href: 'https://linkedin.com/company/example' },
-        { platform: 'x', href: 'https://x.com/example' }
+        { platform: 'x', href: 'https://x.com/example' },
+        { platform: 'youtube', href: 'https://youtube.com/@example' },
+        { platform: 'github', href: 'https://github.com/example' },
+        { platform: 'instagram', href: 'https://instagram.com/example' },
+        { platform: 'facebook', href: 'https://facebook.com/example' },
+        { platform: 'tiktok', href: 'https://tiktok.com/@example' },
+        { platform: 'website', href: 'https://example.com' }
       ]
     },
     columns: [
       {
-        id: 'col-company',
-        heading: 'Company',
+        id: 'col-product',
+        heading: 'Product',
         links: [
-          { id: 'col-company-about', label: 'About', href: '#about' },
-          { id: 'col-company-careers', label: 'Careers', href: '#careers' }
-        ],
-        cta: { label: 'Explore more', href: '#more' }
+          { id: 'col-product-overview', label: 'Overview', href: '#overview' },
+          { id: 'col-product-features', label: 'Features', href: '#features' },
+          { id: 'col-product-integrations', label: 'Integrations', href: '#integrations' },
+          { id: 'col-product-automations', label: 'Automations', href: '#automations' },
+          { id: 'col-product-certifications', label: 'Certifications', href: '#certifications' },
+          { id: 'col-product-analytics', label: 'Analytics', href: '#analytics' },
+          { id: 'col-product-mobile', label: 'Mobile app', href: '#mobile' },
+          { id: 'col-product-changelog', label: 'Changelog', href: '#changelog' },
+          { id: 'col-product-roadmap', label: 'Roadmap', href: '#roadmap' }
+        ]
+      },
+      {
+        id: 'col-solutions',
+        heading: 'Solutions',
+        links: [
+          { id: 'col-solutions-compliance', label: 'Compliance training', href: '#compliance' },
+          { id: 'col-solutions-onboarding', label: 'Employee onboarding', href: '#onboarding' },
+          { id: 'col-solutions-customer-ed', label: 'Customer education', href: '#customer-education' },
+          { id: 'col-solutions-partner', label: 'Partner enablement', href: '#partner' },
+          { id: 'col-solutions-sales', label: 'Sales enablement', href: '#sales' },
+          { id: 'col-solutions-healthcare', label: 'Healthcare', href: '#healthcare' },
+          { id: 'col-solutions-finance', label: 'Financial services', href: '#finance' },
+          { id: 'col-solutions-government', label: 'Government', href: '#government' }
+        ]
       },
       {
         id: 'col-resources',
         heading: 'Resources',
         links: [
-          { id: 'col-resources-help', label: 'Help Center', href: '#help' },
-          { id: 'col-resources-blog', label: 'Blog', href: '#blog' }
+          { id: 'col-resources-blog', label: 'Blog', href: '#blog' },
+          { id: 'col-resources-help', label: 'Help center', href: '#help' },
+          { id: 'col-resources-guides', label: 'Guides', href: '#guides' },
+          { id: 'col-resources-webinars', label: 'Webinars', href: '#webinars' },
+          { id: 'col-resources-podcast', label: 'Podcast', href: '#podcast' },
+          { id: 'col-resources-templates', label: 'Templates', href: '#templates' },
+          { id: 'col-resources-case-studies', label: 'Case studies', href: '#case-studies' },
+          { id: 'col-resources-research', label: 'Research', href: '#research' },
+          { id: 'col-resources-glossary', label: 'Glossary', href: '#glossary' }
+        ]
+      },
+      {
+        id: 'col-developers',
+        heading: 'Developers',
+        links: [
+          { id: 'col-developers-docs', label: 'Documentation', href: '#docs' },
+          { id: 'col-developers-api', label: 'API reference', href: '#api' },
+          { id: 'col-developers-sdks', label: 'SDKs', href: '#sdks' },
+          { id: 'col-developers-webhooks', label: 'Webhooks', href: '#webhooks' },
+          { id: 'col-developers-mcp', label: 'MCP server', href: '#mcp' },
+          { id: 'col-developers-cli', label: 'CLI', href: '#cli' },
+          { id: 'col-developers-status', label: 'System status', href: '#status' },
+          { id: 'col-developers-changelog', label: 'API changelog', href: '#api-changelog' }
+        ]
+      },
+      {
+        id: 'col-company',
+        heading: 'Company',
+        links: [
+          { id: 'col-company-about', label: 'About', href: '#about' },
+          { id: 'col-company-customers', label: 'Customers', href: '#customers' },
+          { id: 'col-company-careers', label: 'Careers', href: '#careers' },
+          { id: 'col-company-press', label: 'Press', href: '#press' },
+          { id: 'col-company-partners', label: 'Partners', href: '#partners' },
+          { id: 'col-company-contact', label: 'Contact', href: '#contact' },
+          { id: 'col-company-events', label: 'Events', href: '#events' },
+          { id: 'col-company-newsroom', label: 'Newsroom', href: '#newsroom' }
+        ]
+      },
+      {
+        id: 'col-trust',
+        heading: 'Trust & Legal',
+        links: [
+          { id: 'col-trust-security', label: 'Security', href: '#security' },
+          { id: 'col-trust-soc2', label: 'SOC 2', href: '#soc2' },
+          { id: 'col-trust-gdpr', label: 'GDPR', href: '#gdpr' },
+          { id: 'col-trust-hipaa', label: 'HIPAA', href: '#hipaa' },
+          { id: 'col-trust-iso', label: 'ISO 27001', href: '#iso' },
+          { id: 'col-trust-dpa', label: 'Data processing addendum', href: '#dpa' },
+          { id: 'col-trust-subprocessors', label: 'Subprocessors', href: '#subprocessors' },
+          { id: 'col-trust-responsible-disclosure', label: 'Responsible disclosure', href: '#responsible-disclosure' }
         ]
       }
     ],
@@ -181,6 +256,10 @@ export const mockProps: OrgLandingPageProps = {
       links: [
         { id: 'bottom-terms', label: 'Terms of Service', href: '#terms' },
         { id: 'bottom-privacy', label: 'Privacy Policy', href: '#privacy' },
+        { id: 'bottom-cookies', label: 'Cookie Settings', href: '#cookies' },
+        { id: 'bottom-acceptable-use', label: 'Acceptable Use', href: '#acceptable-use' },
+        { id: 'bottom-accessibility', label: 'Accessibility', href: '#accessibility' },
+        { id: 'bottom-sitemap', label: 'Sitemap', href: '#sitemap' },
         { id: 'bottom-support', label: 'Support', href: '#support' }
       ]
     }

packages/ui/src/custom/org-landing-page/index.ts

@@ -6,6 +6,8 @@ export { default as TechLandingPage } from './tech.svelte';
 export { default as StudioLandingPage } from './studio.svelte';
 export { default as CorporateLandingPage } from './corporate.svelte';
 export { default as TerminalLandingPage } from './terminal.svelte';
+export { default as EditorialLandingPage } from './editorial.svelte';
+export { default as VibrantLandingPage } from './vibrant.svelte';
 export { default as BoldLandingNav } from './bold/nav.svelte';
 export { default as BoldLandingHero } from './bold/hero.svelte';
 export { default as ClassicLandingNav } from './classic/nav.svelte';
@@ -22,6 +24,21 @@ export { default as CorporateLandingNav } from './corporate/nav.svelte';
 export { default as CorporateLandingHero } from './corporate/hero.svelte';
 export { default as TerminalLandingNav } from './terminal/nav.svelte';
 export { default as TerminalLandingHero } from './terminal/hero.svelte';
+export { default as EditorialLandingNav } from './editorial/nav.svelte';
+export { default as EditorialLandingHero } from './editorial/hero.svelte';
+export { default as VibrantLandingNav } from './vibrant/nav.svelte';
+export { default as VibrantLandingHero } from './vibrant/hero.svelte';
+export { default as MinimalLandingCourseCard } from './minimal/course-card.svelte';
+export { default as BoldLandingCourseCard } from './bold/course-card.svelte';
+export { default as ClassicLandingCourseCard } from './classic/course-card.svelte';
+export { default as SaasLandingCourseCard } from './saas/course-card.svelte';
+export { default as TechLandingCourseCard } from './tech/course-card.svelte';
+export { default as StudioLandingCourseCard } from './studio/course-card.svelte';
+export { default as CorporateLandingCourseCard } from './corporate/course-card.svelte';
+export { default as TerminalLandingCourseCard } from './terminal/course-card.svelte';
+export { default as EditorialLandingCourseCard } from './editorial/course-card.svelte';
+export { default as VibrantLandingCourseCard } from './vibrant/course-card.svelte';
+export { default as LandingButton } from './landing-button.svelte';
 export { default as OrgLandingPageEmbed } from './embed.svelte';
 export { default as OrgLandingPageCallout } from './callout.svelte';
 export { default as OrgLandingPageLinks } from './links.svelte';
@@ -35,4 +52,6 @@ export {
   type LandingPageEditContext
 } from './edit-context';
 export * from './landing-page-link-icons';
+export * from './theme-style';
 export * from './types';
+export { mockOrgLandingPageProps } from './fixtures';

packages/ui/src/custom/org-landing-page/landing-button.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'primary' | 'secondary' | 'tertiary';
+  type Size = 'sm' | 'md' | 'lg';
+
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    href?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    children: Snippet;
+    'aria-label'?: string;
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    href,
+    disabled = false,
+    type = 'button',
+    onclick,
+    class: extraClass = '',
+    children,
+    'aria-label': ariaLabel
+  }: Props = $props();
+
+  const sizeClass = $derived(
+    size === 'sm'
+      ? 'ui:px-3 ui:py-1.5 ui:text-sm'
+      : size === 'lg'
+        ? 'ui:px-6 ui:py-3 ui:text-base'
+        : 'ui:px-4 ui:py-2 ui:text-sm'
+  );
+
+  const variantClass = $derived(
+    variant === 'primary'
+      ? 'ui:bg-[var(--landing-button-primary-bg)] ui:text-[var(--landing-button-primary-fg)] ui:hover:bg-[var(--landing-button-primary-bg-hover)] ui:border-transparent'
+      : variant === 'secondary'
+        ? 'ui:bg-[var(--landing-button-secondary-bg)] ui:text-[var(--landing-button-secondary-fg)] ui:hover:bg-[var(--landing-button-secondary-bg-hover)] ui:border-[var(--landing-button-secondary-border)]'
+        : 'ui:bg-transparent ui:text-[var(--landing-button-tertiary-fg)] ui:hover:bg-[var(--landing-button-tertiary-bg-hover)] ui:border-transparent'
+  );
+
+  const baseClass =
+    'ui:inline-flex ui:items-center ui:justify-center ui:gap-1.5 ui:rounded-md ui:font-medium ui:border ui:transition-colors ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-[var(--landing-accent)]/50 ui:disabled:opacity-50 ui:disabled:cursor-not-allowed ui:cursor-pointer ui:no-underline ui:whitespace-nowrap';
+
+  const finalClass = $derived(`${baseClass} ${sizeClass} ${variantClass} ${extraClass}`);
+</script>
+
+{#if href && !disabled}
+  <a {href} class={finalClass} aria-label={ariaLabel} {onclick}>
+    {@render children()}
+  </a>
+{:else}
+  <button {type} class={finalClass} {disabled} {onclick} aria-label={ariaLabel}>
+    {@render children()}
+  </button>
+{/if}

packages/ui/src/custom/org-landing-page/landing-page-footer.svelte

@@ -3,7 +3,6 @@
   import { getFooterTokens } from './landing-page-footer.tokens';
   import FooterSocialIcon from './footer-social-icon.svelte';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
-  import { BlurFade } from '../animation/blurfade';
   import EditableLandingSection from './editable-section.svelte';
 
   interface Props {
@@ -64,7 +63,7 @@
             class="ui:grid ui:grid-cols-1 ui:gap-y-10 ui:gap-x-8 ui:sm:grid-cols-2 ui:md:gap-x-12 ui:md:gap-y-12 ui:md:grid-cols-[minmax(0,1.4fr)_repeat(auto-fit,minmax(140px,1fr))]"
           >
             <div class="ui:sm:col-span-2 ui:md:col-span-1 ui:min-w-0">
-              <a href="/" class={tokens.brandName}>
+              <a href="/" class="{tokens.brandName} ui:cursor-pointer">
                 {#if logoUrl}
                   <img src={logoUrl} alt="" class={tokens.logoImg} />
                 {/if}
@@ -79,7 +78,7 @@
                     <li class="ui:list-none">
                       <a
                         href={social.href}
-                        class={tokens.socialIcon}
+                        class="{tokens.socialIcon} ui:cursor-pointer"
                         target="_blank"
                         rel="noreferrer noopener"
                         aria-label={social.platform}
@@ -103,12 +102,12 @@
                 <ul class="ui:list-none ui:m-0 ui:p-0 ui:space-y-1">
                   {#each column.links as link (link.id)}
                     <li>
-                      <a href={link.href} class={tokens.columnLink}>{link.label}</a>
+                      <a href={link.href} class="{tokens.columnLink} ui:cursor-pointer">{link.label}</a>
                     </li>
                   {/each}
                 </ul>
                 {#if hasCta(column)}
-                  <a href={column.cta!.href} class={tokens.columnCta}>
+                  <a href={column.cta!.href} class="{tokens.columnCta} ui:cursor-pointer">
                     {column.cta!.label}
                     <ArrowRightIcon class="ui:size-4 ui:shrink-0" aria-hidden="true" />
                   </a>
@@ -119,11 +118,9 @@
         {/snippet}
 
         {#if variant === 'minimal' || variant === 'bold' || variant === 'saas' || variant === 'tech' || variant === 'studio' || variant === 'corporate' || variant === 'terminal'}
-          <BlurFade delay={0} once={true}>
-            {#snippet children()}
-              {@render gridInner()}
-            {/snippet}
-          </BlurFade>
+          {#snippet children()}
+            {@render gridInner()}
+          {/snippet}
         {:else}
           {@render gridInner()}
         {/if}
@@ -139,7 +136,7 @@
             {#if bottomLinks.length > 0}
               <div class={tokens.bottomLinksWrap}>
                 {#each bottomLinks as link (link.id)}
-                  <a href={link.href} class={tokens.bottomLink}>{link.label}</a>
+                  <a href={link.href} class="{tokens.bottomLink} ui:cursor-pointer">{link.label}</a>
                 {/each}
               </div>
             {/if}
@@ -147,7 +144,7 @@
         {/if}
       {:else}
         <div class={tokens.compactRow}>
-          <a href="/" class={tokens.brandName}>
+          <a href="/" class="{tokens.brandName} ui:cursor-pointer">
             {#if logoUrl}
               <img src={logoUrl} alt="" class={tokens.logoImg} />
             {/if}
@@ -158,7 +155,7 @@
               class="ui:flex ui:flex-wrap ui:justify-start ui:gap-6 ui:md:justify-center ui:md:gap-8 ui:w-full ui:md:w-auto"
             >
               {#each bottomLinks as link (link.id)}
-                <a href={link.href} class={tokens.bottomLink}>{link.label}</a>
+                <a href={link.href} class="{tokens.bottomLink} ui:cursor-pointer">{link.label}</a>
               {/each}
             </div>
           {/if}

packages/ui/src/custom/org-landing-page/landing-page-footer.tokens.ts

@@ -23,82 +23,83 @@ export type FooterRegionTokens = {
 export function getFooterTokens(variant: OrgLandingPageTheme): FooterRegionTokens {
   if (variant === 'minimal') {
     return {
-      root: 'ui:border-t ui:border-border/50 ui:py-12 ui:px-4 ui:sm:px-6 ui:md:px-8 ui:md:py-16',
+      root: 'ui:border-t ui:border-[var(--landing-border)]/50 ui:py-12 ui:px-4 ui:sm:px-6 ui:md:px-8 ui:md:py-16',
       container: 'ui:max-w-[1200px] ui:mx-auto',
       compactRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[var(--landing-fg-muted)]',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:border-t ui:border-border/50 ui:text-sm ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:border-t ui:border-[var(--landing-border)]/50 ui:text-sm ui:text-[var(--landing-fg-muted)]',
       brandName:
-        'ui:font-semibold ui:text-xl ui:text-foreground ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-muted-foreground ui:break-words ui:mt-2',
-      columnHeading: 'ui:text-sm ui:font-semibold ui:text-foreground ui:mb-4',
+        'ui:font-semibold ui:text-xl ui:text-[var(--landing-fg)] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline: 'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:break-words ui:mt-2',
+      columnHeading: 'ui:text-sm ui:font-semibold ui:text-[var(--landing-fg)] ui:mb-4',
       columnLink:
-        'ui:block ui:text-sm ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+        'ui:block ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-semibold ui:text-foreground ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
+        'ui:text-sm ui:font-semibold ui:text-[var(--landing-fg)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-3 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-6 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-sm ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
       logoImg: 'ui:h-7 ui:md:h-8 ui:w-auto'
     };
   }
 
   if (variant === 'tech') {
     return {
-      root: 'ui:bg-foreground ui:text-background ui:py-16 ui:px-4 ui:sm:px-6 ui:md:py-20',
+      root: 'ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:py-16 ui:px-4 ui:sm:px-6 ui:md:py-20',
       container: 'ui:max-w-7xl ui:mx-auto',
       compactRow:
         'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:pt-6 ui:border-t ui:border-background/15 ui:text-xs ui:text-background/55 ui:font-mono',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:pt-6 ui:border-t ui:border-[var(--landing-bg)]/15 ui:text-xs ui:text-[var(--landing-bg)]/55 ui:font-mono',
       brandName:
-        'ui:font-bold ui:text-xl ui:tracking-tight ui:text-background ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-background/60 ui:break-words ui:mt-3 ui:max-w-[260px]',
+        'ui:font-bold ui:text-xl ui:tracking-tight ui:text-[var(--landing-bg)] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline: 'ui:text-sm ui:text-[var(--landing-bg)]/60 ui:break-words ui:mt-3 ui:max-w-[260px]',
       columnHeading:
-        'ui:text-[11px] ui:font-mono ui:font-semibold ui:uppercase ui:tracking-widest ui:text-background/60 ui:mb-4',
+        'ui:text-[11px] ui:font-mono ui:font-semibold ui:uppercase ui:tracking-widest ui:text-[var(--landing-bg)]/60 ui:mb-4',
       columnLink:
-        'ui:block ui:text-sm ui:text-background/75 ui:hover:text-background ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+        'ui:block ui:text-sm ui:text-[var(--landing-bg)]/75 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-semibold ui:text-background ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
+        'ui:text-sm ui:font-semibold ui:text-[var(--landing-bg)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-4 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:border ui:border-background/15 ui:bg-background/5 ui:text-background/75 ui:hover:text-background ui:hover:bg-background/10 ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:border ui:border-[var(--landing-bg)]/15 ui:bg-[var(--landing-bg)]/5 ui:text-[var(--landing-bg)]/75 ui:hover:text-[var(--landing-bg)] ui:hover:bg-[var(--landing-bg)]/10 ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-5 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-xs ui:font-mono ui:text-background/65 ui:hover:text-background ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-xs ui:font-mono ui:text-[var(--landing-bg)]/65 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
       logoImg: 'ui:h-6 ui:md:h-7 ui:w-auto'
     };
   }
 
   if (variant === 'studio') {
     return {
-      root: 'ui:bg-background ui:text-foreground ui:border-t ui:border-border ui:py-16 ui:px-4 ui:sm:px-6 ui:md:py-20',
+      root: 'ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:border-t ui:border-[var(--landing-border)] ui:py-16 ui:px-4 ui:sm:px-6 ui:md:py-20',
       container: 'ui:max-w-[1080px] ui:mx-auto',
       compactRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[var(--landing-fg-muted)]',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-12 ui:pt-6 ui:border-t ui:border-border ui:text-xs ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-12 ui:pt-6 ui:border-t ui:border-[var(--landing-border)] ui:text-xs ui:text-[var(--landing-fg-muted)]',
       brandName:
-        'ui:font-semibold ui:text-base ui:tracking-tight ui:text-foreground ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-muted-foreground ui:break-words ui:mt-3 ui:max-w-[240px] ui:leading-relaxed',
-      columnHeading: 'ui:text-xs ui:font-medium ui:text-muted-foreground ui:mb-3',
+        'ui:font-semibold ui:text-base ui:tracking-tight ui:text-[var(--landing-fg)] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline:
+        'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:break-words ui:mt-3 ui:max-w-[240px] ui:leading-relaxed',
+      columnHeading: 'ui:text-xs ui:font-medium ui:text-[var(--landing-fg-muted)] ui:mb-3',
       columnLink:
-        'ui:block ui:text-[13px] ui:text-foreground ui:hover:text-muted-foreground ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+        'ui:block ui:text-[13px] ui:text-[var(--landing-fg)] ui:hover:text-[var(--landing-fg-muted)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-medium ui:text-primary ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
+        'ui:text-sm ui:font-medium ui:text-[var(--landing-accent)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-3 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:size-7 ui:rounded-md ui:text-muted-foreground ui:hover:text-foreground ui:hover:bg-muted ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:size-7 ui:rounded-md ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)] ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-5 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-xs ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-xs ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
       logoImg: 'ui:h-6 ui:md:h-7 ui:w-auto'
     };
   }
@@ -132,108 +133,165 @@ export function getFooterTokens(variant: OrgLandingPageTheme): FooterRegionToken
 
   if (variant === 'corporate') {
     return {
-      root: 'ui:bg-background ui:border-t ui:border-border ui:py-12 ui:px-4 ui:sm:px-6 ui:md:py-16',
+      root: 'ui:bg-[var(--landing-bg)] ui:border-t ui:border-[var(--landing-border)] ui:py-12 ui:px-4 ui:sm:px-6 ui:md:py-16',
       container: 'ui:max-w-[1120px] ui:mx-auto',
       compactRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[var(--landing-fg-muted)]',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-12 ui:pt-6 ui:border-t ui:border-border ui:text-xs ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-12 ui:pt-6 ui:border-t ui:border-[var(--landing-border)] ui:text-xs ui:text-[var(--landing-fg-muted)]',
       brandName:
-        'ui:font-semibold ui:text-base ui:tracking-tight ui:text-foreground ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-muted-foreground ui:break-words ui:mt-3 ui:max-w-[260px] ui:leading-relaxed',
-      columnHeading: 'ui:text-xs ui:font-semibold ui:tracking-wider ui:text-foreground ui:mb-3 ui:uppercase',
+        'ui:font-semibold ui:text-base ui:tracking-tight ui:text-[var(--landing-fg)] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline:
+        'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:break-words ui:mt-3 ui:max-w-[260px] ui:leading-relaxed',
+      columnHeading: 'ui:text-xs ui:font-semibold ui:tracking-wider ui:text-[var(--landing-fg)] ui:mb-3 ui:uppercase',
       columnLink:
-        'ui:block ui:text-sm ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:py-1 ui:md:py-0',
+        'ui:block ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:py-1 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-medium ui:text-foreground ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline ui:underline ui:underline-offset-4',
+        'ui:text-sm ui:font-medium ui:text-[var(--landing-fg)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline ui:underline ui:underline-offset-4',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-3 ui:mt-4 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-6 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-xs ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-xs ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
       logoImg: 'ui:h-6 ui:md:h-7 ui:w-auto'
     };
   }
 
   if (variant === 'saas') {
     return {
-      root: 'ui:bg-background ui:border-t ui:border-border ui:py-14 ui:px-4 ui:sm:px-6 ui:md:py-16',
+      root: 'ui:bg-[var(--landing-bg)] ui:border-t ui:border-[var(--landing-border)] ui:py-14 ui:px-4 ui:sm:px-6 ui:md:py-16',
       container: 'ui:max-w-[1180px] ui:mx-auto',
       compactRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[var(--landing-fg-muted)]',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:pt-6 ui:border-t ui:border-border ui:text-xs ui:text-muted-foreground',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:pt-6 ui:border-t ui:border-[var(--landing-border)] ui:text-xs ui:text-[var(--landing-fg-muted)]',
       brandName:
-        'ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-foreground ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-muted-foreground ui:break-words ui:mt-3 ui:max-w-[260px]',
-      columnHeading: 'ui:text-sm ui:font-bold ui:text-foreground ui:mb-3',
+        'ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline: 'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:break-words ui:mt-3 ui:max-w-[260px]',
+      columnHeading: 'ui:text-sm ui:font-bold ui:text-[var(--landing-fg)] ui:mb-3',
       columnLink:
-        'ui:block ui:text-sm ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+        'ui:block ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-semibold ui:text-primary ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
+        'ui:text-sm ui:font-semibold ui:text-[var(--landing-accent)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-4 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-full ui:border ui:border-border ui:bg-muted/40 ui:text-muted-foreground ui:hover:text-foreground ui:hover:bg-muted ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-full ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-card-soft)]/40 ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)] ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-5 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-xs ui:text-muted-foreground ui:hover:text-foreground ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-xs ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+      logoImg: 'ui:h-6 ui:md:h-7 ui:w-auto'
+    };
+  }
+
+  if (variant === 'vibrant') {
+    return {
+      root: 'ui:bg-[var(--landing-card-soft)]/40 ui:text-[var(--landing-fg)] ui:py-20 ui:px-4 ui:sm:px-6 ui:md:py-24',
+      container: 'ui:max-w-[1320px] ui:mx-auto',
+      compactRow:
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[var(--landing-fg-muted)]',
+      bottomRow:
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-14 ui:pt-6 ui:border-t ui:border-[var(--landing-border)]/60 ui:text-sm ui:text-[var(--landing-fg-muted)]',
+      brandName:
+        'ui:font-bold ui:text-[42px] ui:md:text-[48px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:flex ui:items-center ui:gap-3 ui:no-underline ui:break-words',
+      brandTagline:
+        'ui:text-base ui:text-[var(--landing-fg-muted)] ui:break-words ui:mt-4 ui:max-w-[280px] ui:leading-relaxed',
+      columnHeading:
+        'ui:text-xs ui:font-medium ui:tracking-[0.08em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:mb-5',
+      columnLink:
+        'ui:block ui:text-lg ui:font-medium ui:text-[var(--landing-fg)] ui:hover:text-[var(--landing-accent)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-1 ui:no-underline',
+      columnCta:
+        'ui:text-sm ui:font-medium ui:text-[var(--landing-accent)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
+      socialWrap: 'ui:flex ui:flex-wrap ui:gap-3 ui:mt-4 ui:list-none ui:m-0 ui:p-0',
+      socialIcon:
+        'ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:rounded-md ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:hover:text-[var(--landing-accent)] ui:transition-colors ui:no-underline',
+      bottomText: 'ui:break-words',
+      bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-5 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
+      bottomLink:
+        'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0 ui:no-underline',
+      logoImg: 'ui:h-12 ui:md:h-14 ui:w-auto'
+    };
+  }
+
+  if (variant === 'editorial') {
+    return {
+      root: 'ui:bg-[#ebeae3] ui:text-[#1a1a1a] ui:py-14 ui:px-4 ui:sm:px-6 ui:md:py-16',
+      container: 'ui:max-w-[1240px] ui:mx-auto',
+      compactRow:
+        'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm ui:text-[#76746c]',
+      bottomRow:
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-12 ui:pt-6 ui:border-t ui:border-[#d9d8d0] ui:text-xs ui:text-[#76746c]',
+      brandName:
+        'ui:font-semibold ui:text-base ui:tracking-tight ui:text-[#1a1a1a] ui:flex ui:items-center ui:gap-2 ui:no-underline ui:break-words',
+      brandTagline: 'ui:text-sm ui:text-[#76746c] ui:break-words ui:mt-3 ui:max-w-[260px] ui:leading-relaxed',
+      columnHeading: 'ui:text-[13px] ui:font-normal ui:text-[#76746c] ui:mb-3',
+      columnLink:
+        'ui:block ui:text-sm ui:text-[#2c2b29] ui:hover:text-[#1a1a1a] ui:transition-colors ui:break-words ui:py-1 ui:md:py-0 ui:no-underline',
+      columnCta:
+        'ui:text-sm ui:font-medium ui:text-[#c25237] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-3 ui:no-underline hover:ui:underline',
+      socialWrap: 'ui:flex ui:flex-wrap ui:gap-3 ui:mt-4 ui:list-none ui:m-0 ui:p-0',
+      socialIcon:
+        'ui:inline-flex ui:items-center ui:justify-center ui:text-[#76746c] ui:hover:text-[#1a1a1a] ui:transition-colors ui:no-underline',
+      bottomText: 'ui:break-words',
+      bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-6 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
+      bottomLink:
+        'ui:text-xs ui:text-[#76746c] ui:hover:text-[#1a1a1a] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0 ui:no-underline',
       logoImg: 'ui:h-6 ui:md:h-7 ui:w-auto'
     };
   }
 
   if (variant === 'bold') {
     return {
-      root: 'ui:bg-foreground ui:text-background/60 ui:py-14 ui:px-4 ui:sm:px-6 ui:md:py-20',
+      root: 'ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]/60 ui:py-14 ui:px-4 ui:sm:px-6 ui:md:py-20',
       container: 'ui:max-w-7xl ui:mx-auto',
       compactRow:
         'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm',
       bottomRow:
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:border-t ui:border-background/15 ui:text-xs ui:text-background/50',
+        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:border-t ui:border-[var(--landing-bg)]/15 ui:text-xs ui:text-[var(--landing-bg)]/50',
       brandName:
-        'ui:font-black ui:text-2xl ui:tracking-tighter ui:text-background ui:flex ui:items-center ui:gap-3 ui:no-underline ui:break-words',
-      brandTagline: 'ui:text-sm ui:text-background/60 ui:break-words ui:mt-2',
-      columnHeading: 'ui:text-xs ui:font-bold ui:uppercase ui:tracking-widest ui:text-background ui:mb-4',
+        'ui:font-black ui:text-2xl ui:tracking-tighter ui:text-[var(--landing-bg)] ui:flex ui:items-center ui:gap-3 ui:no-underline ui:break-words',
+      brandTagline: 'ui:text-sm ui:text-[var(--landing-bg)]/60 ui:break-words ui:mt-2',
+      columnHeading: 'ui:text-xs ui:font-bold ui:uppercase ui:tracking-widest ui:text-[var(--landing-bg)] ui:mb-4',
       columnLink:
-        'ui:block ui:text-sm ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+        'ui:block ui:text-sm ui:font-medium ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
       columnCta:
-        'ui:text-sm ui:font-bold ui:text-background ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
+        'ui:text-sm ui:font-bold ui:text-[var(--landing-bg)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
       socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-3 ui:list-none ui:m-0 ui:p-0',
       socialIcon:
-        'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-background/70 ui:hover:text-background ui:transition-colors ui:no-underline',
+        'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:no-underline',
       bottomText: 'ui:break-words',
       bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-6 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
       bottomLink:
-        'ui:text-xs ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+        'ui:text-xs ui:font-medium ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
       logoImg: 'ui:h-7 ui:md:h-8 ui:w-auto ui:grayscale ui:brightness-200'
     };
   }
 
   return {
-    root: 'ui:bg-foreground ui:text-background ui:py-12 ui:px-4 ui:sm:px-6 ui:lg:px-8 ui:md:py-16',
+    root: 'ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:py-12 ui:px-4 ui:sm:px-6 ui:lg:px-8 ui:md:py-16',
     container: 'ui:max-w-7xl ui:mx-auto',
     compactRow:
       'ui:flex ui:flex-col ui:gap-3 ui:items-start ui:md:flex-row ui:md:items-center ui:md:justify-between ui:text-sm',
     bottomRow:
-      'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:text-sm ui:text-background/70',
-    bottomHairline: 'ui:h-px ui:w-16 ui:md:w-24 ui:bg-background/30 ui:mx-auto ui:mb-6',
+      'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between ui:mt-10 ui:md:mt-12 ui:pt-6 ui:text-sm ui:text-[var(--landing-bg)]/70',
+    bottomHairline: 'ui:h-px ui:w-16 ui:md:w-24 ui:bg-[var(--landing-bg)]/30 ui:mx-auto ui:mb-6',
     brandName:
-      'ui:text-xl ui:font-bold ui:tracking-wide ui:text-background ui:flex ui:items-center ui:gap-3 ui:no-underline ui:break-words',
-    brandTagline: 'ui:text-sm ui:text-background/70 ui:break-words ui:mt-2',
-    columnHeading: 'ui:text-sm ui:font-semibold ui:text-background ui:mb-4',
+      'ui:text-xl ui:font-bold ui:tracking-wide ui:text-[var(--landing-bg)] ui:flex ui:items-center ui:gap-3 ui:no-underline ui:break-words',
+    brandTagline: 'ui:text-sm ui:text-[var(--landing-bg)]/70 ui:break-words ui:mt-2',
+    columnHeading: 'ui:text-sm ui:font-semibold ui:text-[var(--landing-bg)] ui:mb-4',
     columnLink:
-      'ui:block ui:text-sm ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
+      'ui:block ui:text-sm ui:font-medium ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:py-1.5 ui:md:py-0',
     columnCta:
-      'ui:text-sm ui:font-semibold ui:text-background ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
+      'ui:text-sm ui:font-semibold ui:text-[var(--landing-bg)] ui:inline-flex ui:items-center ui:gap-1.5 ui:mt-4 ui:no-underline hover:ui:underline',
     socialWrap: 'ui:flex ui:flex-wrap ui:gap-2 ui:mt-3 ui:list-none ui:m-0 ui:p-0',
     socialIcon:
-      'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-background/70 ui:hover:text-background ui:transition-colors ui:no-underline',
+      'ui:inline-flex ui:items-center ui:justify-center ui:p-1.5 ui:rounded-md ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:no-underline',
     bottomText: 'ui:break-words',
     bottomLinksWrap: 'ui:flex ui:flex-wrap ui:gap-x-6 ui:gap-y-2 ui:justify-start ui:sm:justify-end',
     bottomLink:
-      'ui:text-sm ui:font-medium ui:text-background/70 ui:hover:text-background ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
+      'ui:text-sm ui:font-medium ui:text-[var(--landing-bg)]/70 ui:hover:text-[var(--landing-bg)] ui:transition-colors ui:break-words ui:inline-block ui:py-1 ui:md:py-0',
     logoImg: 'ui:h-7 ui:md:h-8 ui:w-auto'
   };
 }

packages/ui/src/custom/org-landing-page/landing-page-utils.ts

@@ -72,3 +72,15 @@ export function calcCourseDiscount(percent = 0, cost: number, showDiscount: bool
   const discountedPrice = cost - discountAmount;
   return Math.round(discountedPrice);
 }
+
+export function defaultLessonsLabel(count: number): string {
+  return count === 1 ? '1 lesson' : `${count.toLocaleString()} lessons`;
+}
+
+export function defaultExercisesLabel(count: number): string {
+  return count === 1 ? '1 exercise' : `${count.toLocaleString()} exercises`;
+}
+
+export function defaultEnrolledLabel(count: number): string {
+  return `${count.toLocaleString()} enrolled`;
+}

packages/ui/src/custom/org-landing-page/links.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
-  import type { LandingPageLinks, OrgLandingPageTheme } from './types';
+  import type { LandingPageLinks, OrgLandingPageLabels, OrgLandingPageTheme } from './types';
   import { landingPageLinkIconMap } from './landing-page-link-icons';
-  import { BlurFade } from '../animation/blurfade';
   import { BorderBeam } from '../animation/border-beam';
   import { DotPattern } from '../animation/dot-pattern';
   import * as Card from '../../base/card';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
   import EditableLandingSection from './editable-section.svelte';
 
-  let { links, variant = 'minimal' }: { links?: LandingPageLinks; variant?: OrgLandingPageTheme } = $props();
+  let {
+    links,
+    variant = 'minimal',
+    labels
+  }: {
+    links?: LandingPageLinks;
+    variant?: OrgLandingPageTheme;
+    labels?: OrgLandingPageLabels;
+  } = $props();
+
+  const resolvedResourcesEyebrow = $derived(labels?.resourcesEyebrow ?? 'Resources');
 
   function linkDisplayHint(href: string) {
     const trimmed = href.trim();
@@ -29,144 +38,130 @@
     {#if variant === 'minimal'}
       <section class="ui:py-20 ui:px-4">
         <div class="ui:max-w-[1200px] ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <h2 class="ui:text-2xl ui:font-semibold {links.description?.trim() ? 'ui:mb-3' : 'ui:mb-10'}">
-              {links.heading}
-            </h2>
-          </BlurFade>
+          <h2 class="ui:text-2xl ui:font-semibold {links.description?.trim() ? 'ui:mb-3' : 'ui:mb-10'}">
+            {links.heading}
+          </h2>
           {#if links.description?.trim()}
-            <BlurFade delay={0.12} once={true}>
-              <p class="ui:text-base ui:text-muted-foreground ui:max-w-2xl ui:mb-10">
-                {links.description}
-              </p>
-            </BlurFade>
+            <p class="ui:text-base ui:text-[var(--landing-fg-muted)] ui:max-w-2xl ui:mb-10">
+              {links.description}
+            </p>
           {/if}
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-6">
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.1 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:group ui:block ui:h-full ui:no-underline"
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:block ui:h-full ui:no-underline ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <Card.Root
+                  class="ui:rounded-none ui:border-[var(--landing-border)]/60 ui:shadow-none ui:h-full ui:p-0 ui:gap-0 ui:transition-colors ui:hover:border-[var(--landing-border)]"
                 >
-                  <Card.Root
-                    class="ui:rounded-none ui:border-border/60 ui:shadow-none ui:h-full ui:p-0 ui:gap-0 ui:transition-colors ui:hover:border-border"
-                  >
-                    <Card.Content class="ui:p-8 ui:flex ui:flex-col ui:flex-1 ui:h-full">
-                      <IconComponent class="ui:size-6 ui:text-foreground ui:mb-6" aria-hidden="true" />
-                      <Card.Title class="ui:text-xl ui:font-normal ui:mb-3">{card.title}</Card.Title>
-                      <Card.Description
-                        class="ui:text-base ui:leading-relaxed ui:text-muted-foreground ui:line-clamp-3 ui:mb-6"
-                      >
-                        {card.description}
-                      </Card.Description>
-                      <div
-                        class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm ui:text-muted-foreground ui:mt-auto"
-                        aria-hidden="true"
-                      >
-                        <span class="ui:truncate">{linkDisplayHint(card.href)}</span>
-                        <ArrowRightIcon
-                          class="ui:size-4 ui:shrink-0 ui:transition-transform ui:group-hover:translate-x-0.5"
-                        />
-                      </div>
-                    </Card.Content>
-                  </Card.Root>
-                </a>
-              </BlurFade>
+                  <Card.Content class="ui:p-8 ui:flex ui:flex-col ui:flex-1 ui:h-full">
+                    <IconComponent class="ui:size-6 ui:text-[var(--landing-fg)] ui:mb-6" aria-hidden="true" />
+                    <Card.Title class="ui:text-xl ui:font-normal ui:mb-3">{card.title}</Card.Title>
+                    <Card.Description
+                      class="ui:text-base ui:leading-relaxed ui:text-[var(--landing-fg-muted)] ui:line-clamp-3 ui:mb-6"
+                    >
+                      {card.description}
+                    </Card.Description>
+                    <div
+                      class="ui:flex ui:items-center ui:gap-1.5 ui:text-sm ui:text-[var(--landing-fg-muted)] ui:mt-auto"
+                      aria-hidden="true"
+                    >
+                      <span class="ui:truncate">{linkDisplayHint(card.href)}</span>
+                      <ArrowRightIcon
+                        class="ui:size-4 ui:shrink-0 ui:transition-transform ui:group-hover:translate-x-0.5"
+                      />
+                    </div>
+                  </Card.Content>
+                </Card.Root>
+              </a>
             {/each}
           </div>
         </div>
       </section>
     {:else if variant === 'tech'}
-      <section class="ui:relative ui:py-24 ui:px-6 ui:bg-primary ui:text-primary-foreground ui:overflow-hidden">
+      <section
+        class="ui:relative ui:py-24 ui:px-6 ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden"
+      >
         <DotPattern class="ui:opacity-[0.08]" />
         <div class="ui:relative ui:max-w-7xl ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:mb-3">{links.heading}</h2>
-          </BlurFade>
+          <h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:mb-3">{links.heading}</h2>
           {#if links.description?.trim()}
-            <BlurFade delay={0.12} once={true}>
-              <p class="ui:text-lg ui:text-primary-foreground/80 ui:max-w-2xl ui:mb-14 ui:font-mono">
-                {links.description}
-              </p>
-            </BlurFade>
+            <p class="ui:text-lg ui:text-[var(--landing-accent-fg)]/80 ui:max-w-2xl ui:mb-14 ui:font-mono">
+              {links.description}
+            </p>
           {:else}
             <div class="ui:mb-14" aria-hidden="true"></div>
           {/if}
           <div
-            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border ui:border-primary-foreground/20"
+            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border ui:border-[var(--landing-accent-fg)]/20"
           >
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.08 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:group ui:block ui:h-full ui:p-8 ui:border-r ui:border-b ui:border-primary-foreground/15 ui:transition-colors ui:hover:bg-primary-foreground/5 ui:no-underline ui:text-primary-foreground"
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:block ui:h-full ui:p-8 ui:border-r ui:border-b ui:border-[var(--landing-accent-fg)]/15 ui:transition-colors ui:hover:bg-[var(--landing-accent-fg)]/5 ui:no-underline ui:text-[var(--landing-accent-fg)] ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:bg-[var(--landing-accent-fg)]/15 ui:text-[var(--landing-accent-fg)] ui:font-mono ui:font-bold ui:mb-5"
                 >
-                  <div
-                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:bg-primary-foreground/15 ui:text-primary-foreground ui:font-mono ui:font-bold ui:mb-5"
-                  >
-                    <IconComponent class="ui:size-4 custom" aria-hidden="true" />
-                  </div>
-                  <h3 class="ui:text-lg ui:font-bold ui:tracking-tight ui:mb-2">{card.title}</h3>
-                  <p class="ui:text-sm ui:text-primary-foreground/70 ui:leading-relaxed ui:line-clamp-3 ui:m-0">
-                    {card.description}
-                  </p>
-                </a>
-              </BlurFade>
+                  <IconComponent class="ui:size-4 custom" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-lg ui:font-bold ui:tracking-tight ui:mb-2">{card.title}</h3>
+                <p class="ui:text-sm ui:text-[var(--landing-accent-fg)]/70 ui:leading-relaxed ui:line-clamp-3 ui:m-0">
+                  {card.description}
+                </p>
+              </a>
             {/each}
           </div>
         </div>
       </section>
     {:else if variant === 'studio'}
-      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-border ui:bg-background">
+      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)]">
         <div class="ui:max-w-[1080px] ui:mx-auto">
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-12 ui:mb-12 ui:items-end">
-            <BlurFade delay={0} once={true}>
-              <div>
-                <p class="ui:text-sm ui:text-muted-foreground ui:mb-1.5 ui:inline-flex ui:items-center ui:gap-2">
-                  <span class="ui:size-1.5 ui:rounded-full ui:bg-primary"></span>
-                  Resources
-                </p>
-                <h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0">{links.heading}</h2>
-              </div>
-            </BlurFade>
+            <div>
+              <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:mb-1.5 ui:inline-flex ui:items-center ui:gap-2">
+                <span class="ui:size-1.5 ui:rounded-full ui:bg-[var(--landing-accent)]"></span>
+                {resolvedResourcesEyebrow}
+              </p>
+              <h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0">{links.heading}</h2>
+            </div>
             {#if links.description?.trim()}
-              <BlurFade delay={0.1} once={true}>
-                <p class="ui:text-base ui:text-muted-foreground ui:leading-relaxed ui:m-0">
-                  {links.description}
-                </p>
-              </BlurFade>
+              <p class="ui:text-base ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:m-0">
+                {links.description}
+              </p>
             {/if}
           </div>
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-4 ui:gap-3">
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:group ui:block ui:h-full ui:p-6 ui:bg-card ui:border ui:border-border ui:rounded-xl ui:transition-colors ui:hover:border-foreground/30 ui:hover:bg-muted/30 ui:no-underline"
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:block ui:h-full ui:p-6 ui:bg-[var(--landing-card)] ui:border ui:border-[var(--landing-border)] ui:rounded-xl ui:transition-colors ui:hover:border-[var(--landing-fg)]/30 ui:hover:bg-[var(--landing-card-soft)]/30 ui:no-underline ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-lg ui:bg-[var(--landing-card-soft)] ui:border ui:border-[var(--landing-border)] ui:text-[var(--landing-accent)] ui:mb-3"
                 >
-                  <div
-                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-lg ui:bg-muted ui:border ui:border-border ui:text-primary ui:mb-3"
-                  >
-                    <IconComponent class="ui:size-4" aria-hidden="true" />
-                  </div>
-                  <h3 class="ui:text-sm ui:font-medium ui:tracking-tight ui:mb-1.5 ui:text-foreground">{card.title}</h3>
-                  <p class="ui:text-[13px] ui:text-muted-foreground ui:leading-relaxed ui:line-clamp-3 ui:m-0">
-                    {card.description}
-                  </p>
-                </a>
-              </BlurFade>
+                  <IconComponent class="ui:size-4" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-sm ui:font-medium ui:tracking-tight ui:mb-1.5 ui:text-[var(--landing-fg)]">
+                  {card.title}
+                </h3>
+                <p class="ui:text-[13px] ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0">
+                  {card.description}
+                </p>
+              </a>
             {/each}
           </div>
         </div>
@@ -185,166 +180,259 @@
       <section
         class="ui:py-24 ui:px-6"
         style="border-top: 1px solid #1c1f28; background:
-        radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in oklab, var(--primary) 6%, transparent) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in oklab, var(--landing-accent) 6%, transparent) 0%, transparent 60%),
         #06070a;"
       >
         <div class="ui:max-w-[1120px] ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <p
-              class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
-              style="color: var(--primary);"
-            >
-              <span
-                class="ui:size-1.5 ui:rounded-full"
-                style="background: var(--primary); box-shadow: 0 0 12px var(--primary);"
-              ></span>
-              Resources
-            </p>
-          </BlurFade>
-          <BlurFade delay={0.08} once={true}>
-            <h2
-              class="ui:text-[40px] ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-10"
-              style="color: #e9eaed; letter-spacing: -0.025em; line-height: 1.08;"
-            >
-              {links.heading}
-            </h2>
-          </BlurFade>
+          <p
+            class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
+            style="color: var(--landing-accent);"
+          >
+            <span
+              class="ui:size-1.5 ui:rounded-full"
+              style="background: var(--landing-accent); box-shadow: 0 0 12px var(--landing-accent);"
+            ></span>
+            {resolvedResourcesEyebrow}
+          </p>
+          <h2
+            class="ui:text-[40px] ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-10"
+            style="color: #e9eaed; letter-spacing: -0.025em; line-height: 1.08;"
+          >
+            {links.heading}
+          </h2>
           <div
             class="ui:grid ui:grid-cols-1 {mdColsClass} {lgColsClass} ui:overflow-hidden ui:rounded-[14px] ui:gap-[1px]"
             style="border: 1px solid #1c1f28; background: #1c1f28;"
           >
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:flex ui:flex-col ui:gap-3 ui:p-7 ui:no-underline ui:h-full ui:transition-colors"
-                  style="background: #0f1218; color: #e9eaed;"
-                  onmouseenter={(e) => (e.currentTarget.style.background = '#14171f')}
-                  onmouseleave={(e) => (e.currentTarget.style.background = '#0f1218')}
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:flex ui:flex-col ui:gap-3 ui:p-7 ui:no-underline ui:h-full ui:transition-colors ui:cursor-pointer"
+                style="background: #0f1218; color: #e9eaed;"
+                onmouseenter={(e) => (e.currentTarget.style.background = '#14171f')}
+                onmouseleave={(e) => (e.currentTarget.style.background = '#0f1218')}
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:rounded-lg"
+                  style="border: 1px solid #262a35; background: #14171f; color: var(--landing-accent);"
                 >
-                  <div
-                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:rounded-lg"
-                    style="border: 1px solid #262a35; background: #14171f; color: var(--primary);"
-                  >
-                    <IconComponent class="ui:size-4" aria-hidden="true" />
-                  </div>
-                  <h3 class="ui:text-sm ui:font-semibold ui:m-0" style="color: #e9eaed;">
-                    {card.title}
-                  </h3>
-                  <p class="ui:text-[13px] ui:m-0 ui:line-clamp-3" style="color: #9da1ab; line-height: 1.5;">
-                    {card.description}
-                  </p>
-                </a>
-              </BlurFade>
+                  <IconComponent class="ui:size-4" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-sm ui:font-semibold ui:m-0" style="color: #e9eaed;">
+                  {card.title}
+                </h3>
+                <p class="ui:text-[13px] ui:m-0 ui:line-clamp-3" style="color: #9da1ab; line-height: 1.5;">
+                  {card.description}
+                </p>
+              </a>
             {/each}
           </div>
         </div>
       </section>
     {:else if variant === 'corporate'}
-      <section class="ui:py-20 ui:px-6 ui:bg-muted/30 ui:border-t ui:border-b ui:border-border">
+      <section
+        class="ui:py-20 ui:px-6 ui:bg-[var(--landing-card-soft)]/30 ui:border-t ui:border-b ui:border-[var(--landing-border)]"
+      >
         <div class="ui:max-w-[1120px] ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-foreground ui:mb-3">
-              Resources
-            </p>
-          </BlurFade>
-          <BlurFade delay={0.1} once={true}>
-            <h2 class="ui:text-3xl ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-10">{links.heading}</h2>
-          </BlurFade>
-          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:border-t ui:border-l ui:border-border">
+          <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg)] ui:mb-3">
+            {resolvedResourcesEyebrow}
+          </p>
+          <h2 class="ui:text-3xl ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-10">{links.heading}</h2>
+          <div
+            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:border-t ui:border-l ui:border-[var(--landing-border)]"
+          >
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:flex ui:gap-5 ui:items-start ui:p-7 ui:border-r ui:border-b ui:border-border ui:bg-background ui:transition-colors ui:hover:bg-muted/40 ui:no-underline ui:h-full"
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:flex ui:gap-5 ui:items-start ui:p-7 ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:transition-colors ui:hover:bg-[var(--landing-card-soft)]/40 ui:no-underline ui:h-full ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:flex-shrink-0"
                 >
-                  <div
-                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:bg-foreground ui:text-background ui:flex-shrink-0"
-                  >
-                    <IconComponent class="ui:size-4" aria-hidden="true" />
-                  </div>
-                  <div class="ui:min-w-0">
-                    <h3 class="ui:text-base ui:font-semibold ui:tracking-tight ui:mb-1.5 ui:m-0">{card.title}</h3>
-                    <p class="ui:text-sm ui:text-muted-foreground ui:leading-relaxed ui:line-clamp-3 ui:m-0">
-                      {card.description}
-                    </p>
-                  </div>
-                </a>
-              </BlurFade>
+                  <IconComponent class="ui:size-4" aria-hidden="true" />
+                </div>
+                <div class="ui:min-w-0">
+                  <h3 class="ui:text-base ui:font-semibold ui:tracking-tight ui:mb-1.5 ui:m-0">{card.title}</h3>
+                  <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0">
+                    {card.description}
+                  </p>
+                </div>
+              </a>
             {/each}
           </div>
         </div>
       </section>
     {:else if variant === 'saas'}
-      <section class="ui:py-20 ui:px-6 ui:bg-muted/40">
+      <section class="ui:py-20 ui:px-6 ui:bg-[var(--landing-card-soft)]/40">
         <div class="ui:max-w-[1180px] ui:mx-auto">
           <div class="ui:text-center ui:max-w-xl ui:mx-auto ui:mb-12">
-            <BlurFade delay={0} once={true}>
-              <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-primary ui:mb-3">
-                Resources
-              </p>
-            </BlurFade>
-            <BlurFade delay={0.1} once={true}>
-              <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight ui:m-0">
-                {links.heading}
-              </h2>
-            </BlurFade>
+            <p
+              class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
+            >
+              {resolvedResourcesEyebrow}
+            </p>
+            <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight ui:m-0">
+              {links.heading}
+            </h2>
             {#if links.description?.trim()}
-              <BlurFade delay={0.18} once={true}>
-                <p class="ui:text-base ui:text-muted-foreground ui:mt-3 ui:leading-relaxed">
-                  {links.description}
-                </p>
-              </BlurFade>
+              <p class="ui:text-base ui:text-[var(--landing-fg-muted)] ui:mt-3 ui:leading-relaxed">
+                {links.description}
+              </p>
             {/if}
           </div>
 
           <div
-            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-[1px] ui:bg-border ui:border ui:border-border"
+            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-[1px] ui:bg-[var(--landing-border)] ui:border ui:border-[var(--landing-border)]"
           >
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
-              <BlurFade delay={0.08 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:bg-background ui:p-7 ui:flex ui:flex-col ui:items-center ui:text-center ui:gap-3 ui:transition-colors ui:hover:bg-muted/40 ui:no-underline ui:h-full"
-                  aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:bg-[var(--landing-bg)] ui:p-7 ui:flex ui:flex-col ui:items-center ui:text-center ui:gap-3 ui:transition-colors ui:hover:bg-[var(--landing-card-soft)]/40 ui:no-underline ui:h-full ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-10 ui:rounded-xl ui:bg-[var(--landing-accent)]/10 ui:text-[var(--landing-accent)] ui:mb-1"
                 >
-                  <div
-                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-10 ui:rounded-xl ui:bg-primary/10 ui:text-primary ui:mb-1"
-                  >
-                    <IconComponent class="ui:size-5" aria-hidden="true" />
-                  </div>
-                  <h3 class="ui:text-base ui:font-bold ui:tracking-tight ui:m-0">{card.title}</h3>
-                  <p class="ui:text-sm ui:text-muted-foreground ui:leading-relaxed ui:line-clamp-3 ui:m-0">
-                    {card.description}
-                  </p>
-                </a>
-              </BlurFade>
+                  <IconComponent class="ui:size-5" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-base ui:font-bold ui:tracking-tight ui:m-0">{card.title}</h3>
+                <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0">
+                  {card.description}
+                </p>
+              </a>
+            {/each}
+          </div>
+        </div>
+      </section>
+    {:else if variant === 'vibrant'}
+      <section class="ui:py-24 ui:md:py-28 ui:px-6 ui:bg-[var(--landing-bg)]">
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <h2
+            class="ui:text-4xl ui:md:text-5xl ui:font-medium ui:tracking-tight ui:text-center ui:m-0 ui:mb-3 ui:text-[var(--landing-fg)]"
+            style="letter-spacing: -0.025em; line-height: 1.1;"
+          >
+            {links.heading}
+          </h2>
+          {#if links.description?.trim()}
+            <p class="ui:text-lg ui:text-[var(--landing-fg-muted)] ui:text-center ui:max-w-xl ui:mx-auto ui:mb-14">
+              {links.description}
+            </p>
+          {:else}
+            <div class="ui:mb-14" aria-hidden="true"></div>
+          {/if}
+          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-5">
+            {#each links.cards as card, index (index)}
+              {@const IconComponent = landingPageLinkIconMap[card.icon]}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:flex ui:flex-col ui:h-full ui:p-8 ui:rounded-[20px] ui:bg-[var(--landing-card-soft)]/60 ui:no-underline ui:transition-colors ui:hover:bg-[var(--landing-card-soft)] ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-11 ui:rounded-xl ui:bg-[var(--landing-accent)]/10 ui:text-[var(--landing-accent)] ui:mb-5"
+                >
+                  <IconComponent class="ui:size-5" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-lg ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-2 ui:text-[var(--landing-fg)]">
+                  {card.title}
+                </h3>
+                <p
+                  class="ui:text-[15px] ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0 ui:mb-6"
+                >
+                  {card.description}
+                </p>
+                <span
+                  class="ui:mt-auto ui:inline-flex ui:items-center ui:gap-1 ui:text-sm ui:font-medium ui:text-[var(--landing-accent)]"
+                  aria-hidden="true"
+                >
+                  {labels?.learnMoreLabel ?? 'Learn more'}
+                  <ArrowRightIcon class="ui:size-3.5 ui:transition-transform ui:group-hover:translate-x-0.5" />
+                </span>
+              </a>
+            {/each}
+          </div>
+        </div>
+      </section>
+    {:else if variant === 'editorial'}
+      {@const cardCount = links.cards.length}
+      {@const lgColsClass =
+        cardCount >= 4
+          ? 'ui:lg:grid-cols-4'
+          : cardCount === 3
+            ? 'ui:lg:grid-cols-3'
+            : cardCount === 2
+              ? 'ui:lg:grid-cols-2'
+              : 'ui:lg:grid-cols-1'}
+      <section class="ui:py-24 ui:md:py-28 ui:px-6 ui:bg-[#f4f3ed]">
+        <div class="ui:max-w-[1240px] ui:mx-auto">
+          <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:justify-between ui:gap-6 ui:mb-10">
+            <div>
+              <p class="ui:text-[13px] ui:text-[#76746c] ui:mb-2">{resolvedResourcesEyebrow}</p>
+              <h2
+                class="ui:text-3xl ui:md:text-[38px] ui:font-medium ui:tracking-tight ui:m-0 ui:text-[#1a1a1a] ui:leading-[1.1]"
+              >
+                {links.heading}
+              </h2>
+              {#if links.description?.trim()}
+                <p class="ui:text-base ui:text-[#76746c] ui:mt-3 ui:max-w-xl ui:leading-relaxed">
+                  {links.description}
+                </p>
+              {/if}
+            </div>
+          </div>
+          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 {lgColsClass} ui:gap-4">
+            {#each links.cards as card, index (index)}
+              {@const IconComponent = landingPageLinkIconMap[card.icon]}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:flex ui:flex-col ui:h-full ui:p-7 ui:rounded-lg ui:bg-[#ecebe5] ui:no-underline ui:transition-colors ui:hover:bg-[#e2e1d9] ui:cursor-pointer"
+                aria-label={`${card.title} — ${linkDisplayHint(card.href)} (opens in new tab)`}
+              >
+                <div
+                  class="ui:inline-flex ui:items-center ui:justify-center ui:size-9 ui:rounded-lg ui:bg-[#fafaf5] ui:border ui:border-[#d9d8d0] ui:text-[#c25237] ui:mb-5"
+                >
+                  <IconComponent class="ui:size-4" aria-hidden="true" />
+                </div>
+                <h3 class="ui:text-base ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-1.5 ui:text-[#1a1a1a]">
+                  {card.title}
+                </h3>
+                <p class="ui:text-[13.5px] ui:text-[#76746c] ui:leading-relaxed ui:line-clamp-3 ui:m-0 ui:mb-5">
+                  {card.description}
+                </p>
+                <span
+                  class="ui:mt-auto ui:inline-flex ui:items-center ui:gap-1 ui:text-[13.5px] ui:font-medium ui:text-[#c25237]"
+                  aria-hidden="true"
+                >
+                  {labels?.learnMoreLabel ?? 'Visit'}
+                  <ArrowRightIcon class="ui:size-3.5 ui:transition-transform ui:group-hover:translate-x-0.5" />
+                </span>
+              </a>
             {/each}
           </div>
         </div>
       </section>
     {:else if variant === 'bold'}
-      <section class="ui:relative ui:py-20 ui:px-6 ui:bg-background ui:overflow-hidden">
+      <section class="ui:relative ui:py-20 ui:px-6 ui:bg-[var(--landing-bg)] ui:overflow-hidden">
         <DotPattern class="ui:opacity-[0.10]" />
         <div class="ui:relative ui:max-w-7xl ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <h2 class="ui:text-4xl ui:font-black ui:tracking-tight ui:mb-3">{links.heading}</h2>
-          </BlurFade>
+          <h2 class="ui:text-4xl ui:font-black ui:tracking-tight ui:mb-3">{links.heading}</h2>
           {#if links.description?.trim()}
-            <BlurFade delay={0.12} once={true}>
-              <p class="ui:text-lg ui:text-muted-foreground ui:max-w-2xl ui:mb-12">{links.description}</p>
-            </BlurFade>
+            <p class="ui:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-2xl ui:mb-12">{links.description}</p>
           {:else}
             <div class="ui:mb-12" aria-hidden="true"></div>
           {/if}
@@ -352,46 +440,44 @@
             {#each links.cards as card, index (index)}
               {@const IconComponent = landingPageLinkIconMap[card.icon]}
               {@const visitLabel = links.boldVisitLabel?.trim()}
-              <BlurFade delay={0.1 * index} once={true}>
-                <a
-                  href={card.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  class="ui:group ui:block ui:h-full ui:no-underline"
-                  aria-label={`${card.title}${visitLabel ? ` — ${visitLabel}` : ''} (opens in new tab)`}
+              <a
+                href={card.href}
+                target="_blank"
+                rel="noreferrer"
+                class="ui:group ui:block ui:h-full ui:no-underline ui:cursor-pointer"
+                aria-label={`${card.title}${visitLabel ? ` — ${visitLabel}` : ''} (opens in new tab)`}
+              >
+                <Card.Root
+                  class="ui:relative ui:overflow-hidden ui:rounded-3xl ui:bg-[var(--landing-bg)] ui:border-[var(--landing-border)]/50 ui:p-8 ui:h-full ui:flex ui:flex-col ui:transition-all ui:duration-300 ui:hover:shadow-xl ui:hover:shadow-primary/5"
                 >
-                  <Card.Root
-                    class="ui:relative ui:overflow-hidden ui:rounded-3xl ui:bg-background ui:border-border/50 ui:p-8 ui:h-full ui:flex ui:flex-col ui:transition-all ui:duration-300 ui:hover:shadow-xl ui:hover:shadow-primary/5"
+                  <BorderBeam
+                    size={120}
+                    duration={8}
+                    colorFrom="var(--landing-accent)"
+                    colorTo="color-mix(in oklab, var(--landing-accent) 65%, white)"
+                  />
+                  <div
+                    class="ui:inline-flex ui:items-center ui:justify-center ui:size-12 ui:rounded-2xl ui:bg-[var(--landing-accent)]/10 ui:text-[var(--landing-accent)] ui:mb-6"
                   >
-                    <BorderBeam
-                      size={120}
-                      duration={8}
-                      colorFrom="var(--primary)"
-                      colorTo="color-mix(in oklab, var(--primary) 65%, white)"
-                    />
-                    <div
-                      class="ui:inline-flex ui:items-center ui:justify-center ui:size-12 ui:rounded-2xl ui:bg-primary/10 ui:text-primary ui:mb-6"
+                    <IconComponent class="ui:size-6" aria-hidden="true" />
+                  </div>
+                  <Card.Title class="ui:text-2xl ui:font-bold ui:tracking-tight ui:mb-3">{card.title}</Card.Title>
+                  <Card.Description class="ui:text-base ui:text-[var(--landing-fg-muted)] ui:line-clamp-3 ui:mb-6">
+                    {card.description}
+                  </Card.Description>
+                  <div class="ui:mt-auto">
+                    <span
+                      class="ui:inline-flex ui:items-center ui:gap-1.5 ui:text-sm ui:font-bold ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-3 ui:py-1.5 ui:rounded-lg ui:transition-colors ui:group-hover:bg-[var(--landing-accent)] ui:group-hover:text-[var(--landing-accent-fg)]"
+                      aria-hidden="true"
                     >
-                      <IconComponent class="ui:size-6" aria-hidden="true" />
-                    </div>
-                    <Card.Title class="ui:text-2xl ui:font-bold ui:tracking-tight ui:mb-3">{card.title}</Card.Title>
-                    <Card.Description class="ui:text-base ui:text-muted-foreground ui:line-clamp-3 ui:mb-6">
-                      {card.description}
-                    </Card.Description>
-                    <div class="ui:mt-auto">
-                      <span
-                        class="ui:inline-flex ui:items-center ui:gap-1.5 ui:text-sm ui:font-bold ui:text-foreground ui:bg-muted ui:px-3 ui:py-1.5 ui:rounded-lg ui:transition-colors ui:group-hover:bg-primary ui:group-hover:text-primary-foreground"
-                        aria-hidden="true"
-                      >
-                        {#if visitLabel}
-                          {visitLabel}
-                        {/if}
-                        <ArrowRightIcon class="ui:size-3.5" />
-                      </span>
-                    </div>
-                  </Card.Root>
-                </a>
-              </BlurFade>
+                      {#if visitLabel}
+                        {visitLabel}
+                      {/if}
+                      <ArrowRightIcon class="ui:size-3.5" />
+                    </span>
+                  </div>
+                </Card.Root>
+              </a>
             {/each}
           </div>
         </div>
@@ -399,18 +485,12 @@
     {:else}
       <section class="ui:py-10 ui:px-6 ui:lg:px-8 ui:max-w-7xl ui:mx-auto">
         <div class="ui:text-center">
-          <BlurFade delay={0} once={true}>
-            <h2 class="ui:text-3xl ui:font-bold ui:text-foreground">{links.heading}</h2>
-          </BlurFade>
-          <BlurFade delay={0.15} once={true}>
-            <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-border ui:mx-auto"></div>
-          </BlurFade>
+          <h2 class="ui:text-3xl ui:font-bold ui:text-[var(--landing-fg)]">{links.heading}</h2>
+          <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-[var(--landing-border)] ui:mx-auto"></div>
           {#if links.description?.trim()}
-            <BlurFade delay={0.22} once={true}>
-              <p class="ui:mt-6 ui:text-center ui:text-muted-foreground ui:max-w-2xl ui:mx-auto">
-                {links.description}
-              </p>
-            </BlurFade>
+            <p class="ui:mt-6 ui:text-center ui:text-[var(--landing-fg-muted)] ui:max-w-2xl ui:mx-auto">
+              {links.description}
+            </p>
           {/if}
         </div>
         <div
@@ -419,36 +499,36 @@
           {#each links.cards as card, index (index)}
             {@const IconComponent = landingPageLinkIconMap[card.icon]}
             {@const learnMoreLabel = links.classicLearnMoreLabel?.trim()}
-            <BlurFade delay={0.1 * index} once={true} class="ui:w-full ui:max-w-md">
-              <a
-                href={card.href}
-                target="_blank"
-                rel="noreferrer"
-                class="ui:group ui:block ui:h-full ui:no-underline"
-                aria-label={`${card.title}${learnMoreLabel ? ` — ${learnMoreLabel}` : ''} (opens in new tab)`}
+            <a
+              href={card.href}
+              target="_blank"
+              rel="noreferrer"
+              class="ui:group ui:block ui:h-full ui:no-underline ui:cursor-pointer"
+              aria-label={`${card.title}${learnMoreLabel ? ` — ${learnMoreLabel}` : ''} (opens in new tab)`}
+            >
+              <Card.Root
+                class="ui:w-full ui:rounded-xl ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:p-6 ui:h-full ui:flex ui:flex-col ui:hover:shadow-md ui:transition-shadow"
               >
-                <Card.Root
-                  class="ui:w-full ui:rounded-xl ui:border-border ui:bg-background ui:p-6 ui:h-full ui:flex ui:flex-col ui:hover:shadow-md ui:transition-shadow"
+                <div
+                  class="ui:flex ui:items-center ui:justify-center ui:size-12 ui:rounded-full ui:bg-[var(--landing-card-soft)] ui:mb-4"
                 >
-                  <div class="ui:flex ui:items-center ui:justify-center ui:size-12 ui:rounded-full ui:bg-muted ui:mb-4">
-                    <IconComponent class="ui:size-5 ui:text-foreground" aria-hidden="true" />
-                  </div>
-                  <Card.Title class="ui:text-xl ui:font-semibold ui:mb-2">{card.title}</Card.Title>
-                  <Card.Description class="ui:text-sm ui:text-muted-foreground ui:line-clamp-3 ui:mb-4">
-                    {card.description}
-                  </Card.Description>
-                  <div
-                    class="ui:text-sm ui:font-medium ui:text-foreground ui:border-t ui:border-border/60 ui:pt-3 ui:mt-auto ui:flex ui:items-center ui:gap-1.5 ui:group-hover:text-primary ui:transition-colors"
-                    aria-hidden="true"
-                  >
-                    {#if learnMoreLabel}
-                      <span>{learnMoreLabel}</span>
-                    {/if}
-                    <ArrowRightIcon class="ui:size-4" />
-                  </div>
-                </Card.Root>
-              </a>
-            </BlurFade>
+                  <IconComponent class="ui:size-5 ui:text-[var(--landing-fg)]" aria-hidden="true" />
+                </div>
+                <Card.Title class="ui:text-xl ui:font-semibold ui:mb-2">{card.title}</Card.Title>
+                <Card.Description class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:line-clamp-3 ui:mb-4">
+                  {card.description}
+                </Card.Description>
+                <div
+                  class="ui:text-sm ui:font-medium ui:text-[var(--landing-fg)] ui:border-t ui:border-[var(--landing-border)]/60 ui:pt-3 ui:mt-auto ui:flex ui:items-center ui:gap-1.5 ui:group-hover:text-[var(--landing-accent)] ui:transition-colors"
+                  aria-hidden="true"
+                >
+                  {#if learnMoreLabel}
+                    <span>{learnMoreLabel}</span>
+                  {/if}
+                  <ArrowRightIcon class="ui:size-4" />
+                </div>
+              </Card.Root>
+            </a>
           {/each}
         </div>
       </section>

packages/ui/src/custom/org-landing-page/minimal.svelte

@@ -6,12 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import MinimalNav from './minimal/nav.svelte';
   import MinimalHero from './minimal/hero.svelte';
+  import MinimalCourseCard from './minimal/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
-  import * as Card from '../../base/card';
-  import ClockIcon from '@lucide/svelte/icons/clock';
-  import TagIcon from '@lucide/svelte/icons/tag';
-  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -25,16 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('minimal')}
+>
   <main>
     <MinimalHero {hero}>
       {#snippet navigation()}
@@ -44,68 +40,10 @@
 
     <section class="ui:py-20 ui:px-4">
       <div class="ui:max-w-[1200px] ui:mx-auto">
-        <h2 class="ui:text-2xl ui:font-semibold ui:mb-8">Our Courses</h2>
+        <h2 class="ui:text-2xl ui:font-semibold ui:mb-8">{labels?.catalogHeading ?? 'Our Courses'}</h2>
         <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6">
           {#each courses as course, index (course.id)}
-            {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-            {@const primaryTag = getPrimaryCourseTag(course)}
-            <BlurFade delay={0.1 * index} once={true}>
-              <a
-                href={disableCourseLinks
-                  ? undefined
-                  : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                class="ui:block ui:h-full ui:no-underline {disableCourseLinks
-                  ? 'ui:cursor-default'
-                  : 'ui:transition-colors'}"
-                aria-disabled={disableCourseLinks}
-                tabindex={disableCourseLinks ? -1 : undefined}
-              >
-                <Card.Root
-                  class="ui:rounded-none ui:border-border/60 ui:shadow-none ui:h-full ui:p-0 ui:gap-0 {disableCourseLinks
-                    ? ''
-                    : 'ui:hover:border-border ui:transition-colors'}"
-                >
-                  <Card.Content class="ui:p-8 ui:flex ui:flex-col ui:flex-1">
-                    <Card.Title class="ui:text-xl ui:font-normal ui:mb-4">{course.title}</Card.Title>
-                    <Card.Description class="ui:mb-8 ui:line-clamp-3 ui:text-base ui:leading-relaxed">
-                      {course.description}
-                    </Card.Description>
-
-                    <div class="ui:flex ui:items-center ui:gap-6 ui:text-sm ui:mt-auto">
-                      {#if course.duration}
-                        <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground">
-                          <ClockIcon class="ui:size-4" />
-                          <span>{course.duration}</span>
-                        </div>
-                      {/if}
-                      {#if courseTypeMeta}
-                        {@const TypeIcon = courseTypeMeta.icon}
-                        <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground">
-                          <TypeIcon class={courseTypeMeta.iconClass} />
-                          <span>{courseTypeMeta.label}</span>
-                        </div>
-                      {/if}
-                      {#if primaryTag}
-                        <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-muted-foreground">
-                          <TagIcon class="ui:size-4" />
-                          {#if primaryTag.color}
-                            <span
-                              class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
-                              style={`background-color: ${primaryTag.color}`}
-                              aria-hidden="true"
-                            ></span>
-                          {/if}
-                          <span>{primaryTag.name}</span>
-                        </div>
-                      {/if}
-                      <div class="ui:ml-auto ui:font-semibold">
-                        {course.price || formatCurrency(course.cost, course.currency)}
-                      </div>
-                    </div>
-                  </Card.Content>
-                </Card.Root>
-              </a>
-            </BlurFade>
+            <MinimalCourseCard {course} {disableCourseLinks} {labels} />
           {/each}
         </div>
 
@@ -117,7 +55,7 @@
               size="lg"
               disabled={disableCourseLinks}
             >
-              View more courses
+              {labels?.browseCoursesLabel ?? 'View more courses'}
             </Button>
           </div>
         {/if}
@@ -125,11 +63,11 @@
     </section>
   </main>
 
-  <OrgLandingPageLinks {links} variant="minimal" />
+  <OrgLandingPageLinks {links} {labels} variant="minimal" />
 
-  <OrgLandingPageEmbed {embed} variant="minimal" />
+  <OrgLandingPageEmbed {embed} {labels} variant="minimal" />
 
-  <OrgLandingPageCallout {callout} variant="minimal" />
+  <OrgLandingPageCallout {callout} {labels} variant="minimal" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="minimal" />
 </div>

packages/ui/src/custom/org-landing-page/minimal/course-card.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import * as Card from '../../../base/card';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+  const primaryTag = $derived(getPrimaryCourseTag(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:block ui:h-full ui:no-underline {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer ui:transition-colors'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  <Card.Root
+    class="ui:rounded-none ui:border-[var(--landing-border)]/60 ui:shadow-none ui:h-full ui:p-0 ui:gap-0 {disableCourseLinks
+      ? ''
+      : 'ui:hover:border-[var(--landing-border)] ui:transition-colors'}"
+  >
+    <Card.Content class="ui:p-8 ui:flex ui:flex-col ui:flex-1">
+      <Card.Title class="ui:text-xl ui:font-normal ui:mb-4">{course.title}</Card.Title>
+      <Card.Description class="ui:mb-8 ui:line-clamp-3 ui:text-base ui:leading-relaxed">
+        {course.description}
+      </Card.Description>
+
+      <div class="ui:flex ui:items-center ui:gap-6 ui:text-sm ui:mt-auto">
+        {#if course.duration}
+          <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)]">
+            <ClockIcon class="ui:size-4" />
+            <span>{course.duration}</span>
+          </div>
+        {/if}
+        {#if courseTypeMeta}
+          {@const TypeIcon = courseTypeMeta.icon}
+          <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)]">
+            <TypeIcon class={courseTypeMeta.iconClass} />
+            <span>{courseTypeMeta.label}</span>
+          </div>
+        {/if}
+        {#if primaryTag}
+          <div class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)]">
+            <TagIcon class="ui:size-4" />
+            {#if primaryTag.color}
+              <span
+                class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
+                style={`background-color: ${primaryTag.color}`}
+                aria-hidden="true"
+              ></span>
+            {/if}
+            <span>{primaryTag.name}</span>
+          </div>
+        {/if}
+        <div class="ui:ml-auto ui:font-semibold">
+          {course.price || formatCurrency(course.cost, course.currency)}
+        </div>
+      </div>
+    </Card.Content>
+  </Card.Root>
+</a>

packages/ui/src/custom/org-landing-page/minimal/hero.svelte

@@ -3,7 +3,6 @@
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import { DotPattern } from '../../animation/dot-pattern';
   import { ShinnyText } from '../../animation/shinny-text';
   import EditableLandingSection from '../editable-section.svelte';
@@ -18,14 +17,14 @@
   const heroGradientBackground = `
     radial-gradient(
       circle at top center,
-      color-mix(in oklab, var(--primary) 24%, transparent) 0%,
+      color-mix(in oklab, var(--landing-accent) 24%, transparent) 0%,
       transparent 58%
     ),
     linear-gradient(
       135deg,
-      color-mix(in oklab, var(--primary) 12%, var(--background)) 0%,
-      color-mix(in oklab, var(--primary) 6%, var(--background)) 48%,
-      var(--background) 100%
+      color-mix(in oklab, var(--landing-accent) 12%, var(--landing-bg)) 0%,
+      color-mix(in oklab, var(--landing-accent) 6%, var(--landing-bg)) 48%,
+      var(--landing-bg) 100%
     )
   `;
 </script>
@@ -41,36 +40,30 @@
     </div>
 
     <div class="ui:relative ui:py-20 ui:text-center ui:max-w-4xl ui:mx-auto">
-      <BlurFade delay={0} once={true}>
-        <h1 class="ui:text-5xl ui:md:text-6xl ui:font-semibold ui:tracking-tight ui:mb-6">{hero.heading}</h1>
-      </BlurFade>
-      <BlurFade delay={0.15} once={true}>
-        <ShinnyText
-          shimmerWidth={120}
-          class="ui:text-xl ui:mb-10 ui:max-w-2xl ui:mx-auto ui:font-light ui:text-foreground/72"
+      <h1 class="ui:text-5xl ui:md:text-6xl ui:font-semibold ui:tracking-tight ui:mb-6">{hero.heading}</h1>
+      <ShinnyText
+        shimmerWidth={120}
+        class="ui:text-xl ui:mb-10 ui:max-w-2xl ui:mx-auto ui:font-light ui:text-[var(--landing-fg)]/72"
+      >
+        {hero.subheading}
+      </ShinnyText>
+      <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:rounded-full"
         >
-          {hero.subheading}
-        </ShinnyText>
-      </BlurFade>
-      <BlurFade delay={0.3} once={true}>
-        <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:rounded-full"
-          >
-            {hero.primaryAction.label}
-          </Button>
-          {#if hero.secondaryAction}
-            <SecondaryActionButton
-              href={hero.secondaryAction.href}
-              label={hero.secondaryAction.label}
-              variant="minimal"
-            />
-          {/if}
-        </div>
-      </BlurFade>
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton
+            href={hero.secondaryAction.href}
+            label={hero.secondaryAction.label}
+            variant="minimal"
+          />
+        {/if}
+      </div>
     </div>
   </section>
 </EditableLandingSection>

packages/ui/src/custom/org-landing-page/minimal/nav.svelte

@@ -18,18 +18,18 @@
   const navigationGradientBackground = `
     linear-gradient(
       135deg,
-      color-mix(in oklab, var(--primary) 16%, var(--background)) 0%,
-      color-mix(in oklab, var(--primary) 8%, var(--background)) 100%
+      color-mix(in oklab, var(--landing-accent) 16%, var(--landing-bg)) 0%,
+      color-mix(in oklab, var(--landing-accent) 8%, var(--landing-bg)) 100%
     )
   `;
 </script>
 
 <EditableLandingSection sectionKey="navigation">
   <header
-    class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:px-6 ui:py-4 ui:rounded-full ui:border ui:border-border/60 ui:backdrop-blur-sm"
+    class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:px-6 ui:py-4 ui:rounded-full ui:border ui:border-[var(--landing-border)]/60 ui:backdrop-blur-sm"
     style={`background: ${navigationGradientBackground};`}
   >
-    <a href="/" class="ui:font-semibold ui:text-xl ui:flex ui:items-center ui:gap-2 ui:no-underline">
+    <a href="/" class="ui:font-semibold ui:text-xl ui:flex ui:items-center ui:gap-2 ui:no-underline ui:cursor-pointer">
       {#if logoUrl}
         <img src={logoUrl} alt={orgName} class="ui:h-8 ui:w-auto" />
       {/if}
@@ -38,7 +38,9 @@
     <div class="ui:flex ui:items-center ui:gap-4">
       <nav class="ui:hidden ui:md:flex ui:gap-8">
         {#each navItems as item}
-          <a href={item.href} class="ui:text-sm ui:text-foreground/70 ui:hover:text-foreground ui:transition-colors"
+          <a
+            href={item.href}
+            class="ui:text-sm ui:text-[var(--landing-fg)]/70 ui:hover:text-[var(--landing-fg)] ui:transition-colors ui:cursor-pointer"
             >{item.label}</a
           >
         {/each}

packages/ui/src/custom/org-landing-page/saas.svelte

@@ -6,12 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import SaasNav from './saas/nav.svelte';
   import SaasHero from './saas/hero.svelte';
+  import SaasCourseCard from './saas/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
-  import ClockIcon from '@lucide/svelte/icons/clock';
-  import TagIcon from '@lucide/svelte/icons/tag';
-  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
-  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -25,16 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="saas-root ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="saas-root ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('saas')}
+>
   <div class="frame">
     <SaasHero {hero}>
       {#snippet navigation()}
@@ -49,8 +45,14 @@
         <div class="ui:max-w-[1180px] ui:mx-auto">
           <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-12">
             <div>
-              <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-primary ui:mb-3">Catalog</p>
-              <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">Featured programs.</h2>
+              <p
+                class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
+              >
+                {labels?.catalogEyebrow ?? 'Catalog'}
+              </p>
+              <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
+                {labels?.catalogHeading ?? 'Featured programs.'}
+              </h2>
             </div>
             {#if hasMoreCourses}
               <Button
@@ -59,90 +61,14 @@
                 class="ui:rounded-full ui:self-start ui:md:self-auto"
                 disabled={disableCourseLinks}
               >
-                Browse catalog
+                {labels?.browseCoursesLabel ?? 'Browse catalog'}
               </Button>
             {/if}
           </div>
 
           <div class="course-grid ui:relative">
             {#each courses as course, index (course.id)}
-              {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-              {@const primaryTag = getPrimaryCourseTag(course)}
-              <BlurFade delay={0.06 * index} once={true} class="course-card-wrap">
-                <a
-                  href={disableCourseLinks
-                    ? undefined
-                    : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                  class="course-card ui:flex ui:flex-col ui:h-full ui:no-underline ui:bg-background ui:transition-colors {disableCourseLinks
-                    ? 'ui:cursor-default'
-                    : 'ui:hover:bg-muted/40'}"
-                  aria-disabled={disableCourseLinks}
-                  tabindex={disableCourseLinks ? -1 : undefined}
-                >
-                  {#if course.logo}
-                    <div
-                      class="ui:h-40 ui:w-full ui:bg-cover ui:bg-center ui:relative"
-                      style={`background-image: url(${course.logo});`}
-                    >
-                      {#if courseTypeMeta}
-                        <span
-                          class="ui:absolute ui:top-3 ui:left-3 ui:bg-background/95 ui:text-foreground ui:text-[11px] ui:font-semibold ui:px-2.5 ui:py-1 ui:rounded-full"
-                        >
-                          {courseTypeMeta.label}
-                        </span>
-                      {/if}
-                    </div>
-                  {/if}
-
-                  <div class="ui:p-5 ui:flex ui:flex-col ui:flex-1 ui:gap-2">
-                    <h3 class="ui:text-lg ui:font-bold ui:tracking-tight ui:leading-snug ui:m-0">
-                      {course.title}
-                    </h3>
-                    <p class="ui:text-sm ui:text-muted-foreground ui:line-clamp-2 ui:leading-relaxed ui:m-0 ui:flex-1">
-                      {course.description}
-                    </p>
-
-                    <div
-                      class="ui:flex ui:items-center ui:gap-2 ui:flex-wrap ui:text-xs ui:text-muted-foreground ui:mt-2"
-                    >
-                      {#if course.duration}
-                        <span class="ui:inline-flex ui:items-center ui:gap-1">
-                          <ClockIcon class="ui:size-3.5" />
-                          {course.duration}
-                        </span>
-                      {/if}
-                      {#if primaryTag}
-                        <span class="ui:inline-flex ui:items-center ui:gap-1">
-                          <TagIcon class="ui:size-3.5" />
-                          {#if primaryTag.color}
-                            <span
-                              class="ui:inline-block ui:size-2 ui:rounded-full"
-                              style={`background-color: ${primaryTag.color}`}
-                              aria-hidden="true"
-                            ></span>
-                          {/if}
-                          {primaryTag.name}
-                        </span>
-                      {/if}
-                    </div>
-
-                    <div
-                      class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-2 ui:border-t ui:border-border/60"
-                    >
-                      <span class="ui:text-sm ui:font-bold">
-                        {course.price || formatCurrency(course.cost, course.currency)}
-                      </span>
-                      <span
-                        class="ui:inline-flex ui:items-center ui:gap-1 ui:text-xs ui:font-semibold ui:text-primary"
-                        aria-hidden="true"
-                      >
-                        Enroll
-                        <ArrowRightIcon class="ui:size-3.5" />
-                      </span>
-                    </div>
-                  </div>
-                </a>
-              </BlurFade>
+              <SaasCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
         </div>
@@ -151,17 +77,17 @@
 
     {#if links && links.cards.length > 0}
       <div class="plus-row"></div>
-      <OrgLandingPageLinks {links} variant="saas" />
+      <OrgLandingPageLinks {links} {labels} variant="saas" />
     {/if}
 
     {#if embed}
       <div class="plus-row"></div>
-      <OrgLandingPageEmbed {embed} variant="saas" />
+      <OrgLandingPageEmbed {embed} {labels} variant="saas" />
     {/if}
 
     {#if callout}
       <div class="plus-row"></div>
-      <OrgLandingPageCallout {callout} variant="saas" />
+      <OrgLandingPageCallout {callout} {labels} variant="saas" />
     {/if}
   </div>
 
@@ -177,7 +103,7 @@
     width: 100%;
     background-image: radial-gradient(
       circle at center,
-      color-mix(in oklab, var(--foreground) 5%, transparent) 1px,
+      color-mix(in oklab, var(--landing-fg) 5%, transparent) 1px,
       transparent 1.5px
     );
     background-size: 24px 24px;
@@ -189,7 +115,7 @@
     top: 0;
     bottom: 0;
     width: 1px;
-    background: var(--border);
+    background: var(--landing-border);
     pointer-events: none;
     z-index: 0;
   }
@@ -208,7 +134,7 @@
   .saas-root :global(.plus-row) {
     position: relative;
     height: 0;
-    border-top: 1px dashed var(--border);
+    border-top: 1px dashed var(--landing-border);
     margin: 0;
   }
   .saas-root :global(.plus-row::before),
@@ -219,9 +145,9 @@
     font-family: ui-monospace, SFMono-Regular, monospace;
     font-size: 13px;
     font-weight: 400;
-    color: var(--muted-foreground);
+    color: var(--landing-fg-muted);
     line-height: 1;
-    background: var(--background);
+    background: var(--landing-bg);
     padding: 1px 3px;
     z-index: 2;
   }
@@ -237,8 +163,8 @@
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 1px;
-    background: var(--border);
-    border: 1px solid var(--border);
+    background: var(--landing-border);
+    border: 1px solid var(--landing-border);
   }
   .saas-root :global(.course-grid > .course-card-wrap) {
     grid-column: span 2;
@@ -256,7 +182,7 @@
     max-width: 520px;
   }
   .saas-root :global(.course-grid:has(> .course-card-wrap:only-child) .course-card) {
-    border: 1px solid var(--border);
+    border: 1px solid var(--landing-border);
     border-radius: 0.5rem;
     overflow: hidden;
   }

packages/ui/src/custom/org-landing-page/saas/course-card.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TagIcon from '@lucide/svelte/icons/tag';
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+  import { getCourseTypeLandingMeta, getPrimaryCourseTag } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+  const primaryTag = $derived(getPrimaryCourseTag(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="course-card ui:flex ui:flex-col ui:h-full ui:no-underline ui:bg-[var(--landing-bg)] ui:transition-colors {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer ui:hover:bg-[var(--landing-card-soft)]/40'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  {#if course.logo}
+    <div
+      class="ui:h-40 ui:w-full ui:bg-cover ui:bg-center ui:relative"
+      style={`background-image: url(${course.logo});`}
+    >
+      {#if courseTypeMeta}
+        <span
+          class="ui:absolute ui:top-3 ui:left-3 ui:bg-[var(--landing-bg)]/95 ui:text-[var(--landing-fg)] ui:text-[11px] ui:font-semibold ui:px-2.5 ui:py-1 ui:rounded-full"
+        >
+          {courseTypeMeta.label}
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="ui:p-5 ui:flex ui:flex-col ui:flex-1 ui:gap-2">
+    <h3 class="ui:text-lg ui:font-bold ui:tracking-tight ui:leading-snug ui:m-0">
+      {course.title}
+    </h3>
+    <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:line-clamp-2 ui:leading-relaxed ui:m-0 ui:flex-1">
+      {course.description}
+    </p>
+
+    <div class="ui:flex ui:items-center ui:gap-2 ui:flex-wrap ui:text-xs ui:text-[var(--landing-fg-muted)] ui:mt-2">
+      {#if course.duration}
+        <span class="ui:inline-flex ui:items-center ui:gap-1">
+          <ClockIcon class="ui:size-3.5" />
+          {course.duration}
+        </span>
+      {/if}
+      {#if primaryTag}
+        <span class="ui:inline-flex ui:items-center ui:gap-1">
+          <TagIcon class="ui:size-3.5" />
+          {#if primaryTag.color}
+            <span
+              class="ui:inline-block ui:size-2 ui:rounded-full"
+              style={`background-color: ${primaryTag.color}`}
+              aria-hidden="true"
+            ></span>
+          {/if}
+          {primaryTag.name}
+        </span>
+      {/if}
+    </div>
+
+    <div
+      class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:mt-2 ui:border-t ui:border-[var(--landing-border)]/60"
+    >
+      <span class="ui:text-sm ui:font-bold">
+        {course.price || formatCurrency(course.cost, course.currency)}
+      </span>
+      <span
+        class="ui:inline-flex ui:items-center ui:gap-1 ui:text-xs ui:font-semibold ui:text-[var(--landing-accent)]"
+        aria-hidden="true"
+      >
+        {labels?.enrollLabel ?? 'Enroll'}
+        <ArrowRightIcon class="ui:size-3.5" />
+      </span>
+    </div>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/saas/hero.svelte

@@ -3,7 +3,6 @@
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -21,48 +20,40 @@
     </div>
 
     <div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:pt-16 ui:md:pt-20 ui:text-center">
-      <BlurFade delay={0} once={true}>
-        <h1
-          class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
-        >
-          {hero.heading}
-        </h1>
-      </BlurFade>
+      <h1
+        class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
+      >
+        {hero.heading}
+      </h1>
 
-      <BlurFade delay={0.15} once={true}>
-        <p
-          class="ui:text-base ui:md:text-lg ui:text-muted-foreground ui:max-w-xl ui:mx-auto ui:mb-8 ui:leading-relaxed"
-        >
-          {hero.subheading}
-        </p>
-      </BlurFade>
+      <p
+        class="ui:text-base ui:md:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mx-auto ui:mb-8 ui:leading-relaxed"
+      >
+        {hero.subheading}
+      </p>
 
-      <BlurFade delay={0.3} once={true}>
-        <div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:rounded-full ui:px-6"
-          >
-            {hero.primaryAction.label}
-          </Button>
-          {#if hero.secondaryAction}
-            <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
-          {/if}
-        </div>
-      </BlurFade>
+      <div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:rounded-full ui:px-6"
+        >
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
+        {/if}
+      </div>
 
       {#if hero.image}
-        <BlurFade delay={0.45} once={true}>
-          <div class="ui:mt-16 ui:max-w-4xl ui:mx-auto">
-            <img
-              src={hero.image}
-              alt=""
-              class="ui:w-full ui:h-auto ui:rounded-2xl ui:border ui:border-border ui:shadow-[0_20px_60px_-30px_rgba(14,14,16,0.25)]"
-            />
-          </div>
-        </BlurFade>
+        <div class="ui:mt-16 ui:max-w-4xl ui:mx-auto">
+          <img
+            src={hero.image}
+            alt=""
+            class="ui:w-full ui:h-auto ui:rounded-2xl ui:border ui:border-[var(--landing-border)] ui:shadow-[0_20px_60px_-30px_rgba(14,14,16,0.25)]"
+          />
+        </div>
       {/if}
     </div>
   </section>

packages/ui/src/custom/org-landing-page/saas/nav.svelte

@@ -18,11 +18,11 @@
 
 <EditableLandingSection sectionKey="navigation">
   <header
-    class="ui:flex ui:items-center ui:justify-between ui:gap-4 ui:py-2 ui:pl-5 ui:pr-2 ui:rounded-full ui:border ui:border-border ui:bg-background/85 ui:backdrop-blur-md ui:shadow-[0_4px_24px_-8px_rgba(14,14,16,0.08)]"
+    class="ui:flex ui:items-center ui:justify-between ui:gap-4 ui:py-2 ui:pl-5 ui:pr-2 ui:rounded-full ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)]/85 ui:backdrop-blur-md ui:shadow-[0_4px_24px_-8px_rgba(14,14,16,0.08)]"
   >
     <a
       href="/"
-      class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-foreground ui:no-underline"
+      class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[15px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
     >
       {#if logoUrl}
         <img src={logoUrl} alt={orgName} class="ui:h-6 ui:w-auto" />
@@ -35,7 +35,7 @@
         {#each navItems as item (item.href + item.label)}
           <a
             href={item.href}
-            class="ui:px-3.5 ui:py-1.5 ui:text-sm ui:font-medium ui:text-foreground/80 ui:hover:text-foreground ui:hover:bg-muted/60 ui:rounded-full ui:transition-colors ui:no-underline"
+            class="ui:px-3.5 ui:py-1.5 ui:text-sm ui:font-medium ui:text-[var(--landing-fg)]/80 ui:hover:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)]/60 ui:rounded-full ui:transition-colors ui:no-underline ui:cursor-pointer"
           >
             {item.label}
           </a>

packages/ui/src/custom/org-landing-page/secondary-action-button.svelte

@@ -23,15 +23,17 @@
     },
     bold: {
       className:
-        'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:border-2 ui:hover:border-primary ui:transition-all',
+        'ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:border-2 ui:hover:border-[var(--landing-accent)] ui:transition-all',
       variant: 'outline'
     },
     classic: {
-      className: 'ui:px-8 ui:font-semibold ui:bg-background ui:text-foreground ui:border-border ui:transition-colors',
+      className:
+        'ui:px-8 ui:font-semibold ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] ui:transition-colors',
       variant: 'outline'
     },
     saas: {
-      className: 'ui:rounded-full ui:px-6 ui:border-border ui:text-foreground ui:hover:bg-accent',
+      className:
+        'ui:rounded-full ui:px-6 ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-accent',
       variant: 'outline'
     },
     tech: {
@@ -41,18 +43,28 @@
     },
     studio: {
       className:
-        'ui:rounded-md ui:px-5 ui:border-border ui:bg-background ui:text-foreground ui:hover:bg-muted ui:transition-colors',
+        'ui:rounded-md ui:px-5 ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)] ui:transition-colors',
       variant: 'outline'
     },
     corporate: {
       className:
-        'ui:rounded-none ui:px-6 ui:font-medium ui:border-foreground ui:text-foreground ui:hover:bg-foreground ui:hover:text-background ui:transition-colors',
+        'ui:rounded-none ui:px-6 ui:font-medium ui:border-[var(--landing-fg)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-fg)] ui:hover:text-[var(--landing-bg)] ui:transition-colors',
       variant: 'outline'
     },
     terminal: {
       className:
         'ui:rounded-full ui:px-5 ui:font-medium ui:bg-white/5 ui:border-[#262a35] ui:text-[#e9eaed] ui:hover:bg-white/10 ui:transition-colors',
       variant: 'outline'
+    },
+    editorial: {
+      className:
+        'ui:rounded-full ui:px-5 ui:font-medium ui:bg-transparent ui:border-[#d9d8d0] ui:text-[#1a1a1a] ui:hover:bg-[#ebeae3] ui:transition-colors',
+      variant: 'outline'
+    },
+    vibrant: {
+      className:
+        'ui:rounded-md ui:px-6 ui:py-3 ui:text-base ui:font-medium ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)] ui:transition-colors',
+      variant: 'outline'
     }
   };
 </script>

packages/ui/src/custom/org-landing-page/studio.svelte

@@ -6,10 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import StudioNav from './studio/nav.svelte';
   import StudioHero from './studio/hero.svelte';
+  import StudioCourseCard from './studio/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
-  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
-  import { getCourseTypeLandingMeta } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -23,16 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('studio')}
+>
   <main>
     <StudioHero {hero} {courses}>
       {#snippet navigation()}
@@ -41,16 +39,16 @@
     </StudioHero>
 
     {#if courses.length > 0}
-      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-border">
+      <section class="ui:py-24 ui:px-6 ui:border-t ui:border-[var(--landing-border)]">
         <div class="ui:max-w-[1080px] ui:mx-auto">
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-12 ui:items-end ui:mb-12">
             <div>
-              <p class="ui:text-sm ui:text-muted-foreground ui:mb-1.5 ui:inline-flex ui:items-center ui:gap-2">
-                <span class="ui:size-1.5 ui:rounded-full ui:bg-primary"></span>
-                Catalog
+              <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:mb-1.5 ui:inline-flex ui:items-center ui:gap-2">
+                <span class="ui:size-1.5 ui:rounded-full ui:bg-[var(--landing-accent)]"></span>
+                {labels?.catalogEyebrow ?? 'Catalog'}
               </p>
               <h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0">
-                Programs your team can actually finish.
+                {labels?.catalogHeading ?? 'Programs your team can actually finish.'}
               </h2>
             </div>
             {#if hasMoreCourses}
@@ -61,7 +59,7 @@
                   class="ui:rounded-md"
                   disabled={disableCourseLinks}
                 >
-                  Browse all →
+                  {labels?.browseCoursesLabel ?? 'Browse all →'}
                 </Button>
               </div>
             {/if}
@@ -69,59 +67,7 @@
 
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-3">
             {#each courses as course, index (course.id)}
-              {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={disableCourseLinks
-                    ? undefined
-                    : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                  class="ui:group ui:flex ui:flex-col ui:h-full ui:bg-card ui:border ui:border-border ui:rounded-xl ui:overflow-hidden ui:transition-colors ui:no-underline {disableCourseLinks
-                    ? 'ui:cursor-default'
-                    : 'ui:hover:border-foreground/30'}"
-                  aria-disabled={disableCourseLinks}
-                  tabindex={disableCourseLinks ? -1 : undefined}
-                >
-                  <div
-                    class="ui:relative ui:h-[200px] ui:bg-muted/50 ui:border-b ui:border-border ui:p-5 ui:overflow-hidden"
-                  >
-                    {#if course.logo}
-                      <img
-                        src={course.logo}
-                        alt=""
-                        class="ui:absolute ui:inset-0 ui:w-full ui:h-full ui:object-cover ui:opacity-60"
-                      />
-                    {/if}
-                    <div
-                      class="ui:relative ui:flex ui:items-start ui:justify-between"
-                      style="background: linear-gradient(180deg, transparent 60%, var(--card) 100%);"
-                    >
-                      {#if courseTypeMeta}
-                        <span
-                          class="ui:inline-flex ui:items-center ui:gap-1.5 ui:px-2 ui:py-0.5 ui:bg-background/95 ui:border ui:border-border ui:rounded-md ui:text-[11px] ui:font-medium ui:text-foreground"
-                        >
-                          {courseTypeMeta.label}
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                  <div class="ui:p-5 ui:flex ui:items-end ui:justify-between ui:gap-3 ui:flex-1">
-                    <div class="ui:flex-1 ui:min-w-0">
-                      <p class="ui:text-[13px] ui:text-muted-foreground ui:mb-1.5 ui:m-0">
-                        {course.price || formatCurrency(course.cost, course.currency)}
-                      </p>
-                      <h3 class="ui:text-base ui:font-medium ui:tracking-tight ui:leading-snug ui:m-0">
-                        {course.title}
-                      </h3>
-                    </div>
-                    <span
-                      class="ui:flex-shrink-0 ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-full ui:border ui:border-border ui:text-muted-foreground ui:group-hover:bg-foreground ui:group-hover:text-background ui:group-hover:border-foreground ui:transition-colors"
-                      aria-hidden="true"
-                    >
-                      <ArrowRightIcon class="ui:size-3.5" />
-                    </span>
-                  </div>
-                </a>
-              </BlurFade>
+              <StudioCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
         </div>
@@ -129,11 +75,11 @@
     {/if}
   </main>
 
-  <OrgLandingPageLinks {links} variant="studio" />
+  <OrgLandingPageLinks {links} {labels} variant="studio" />
 
-  <OrgLandingPageEmbed {embed} variant="studio" />
+  <OrgLandingPageEmbed {embed} {labels} variant="studio" />
 
-  <OrgLandingPageCallout {callout} variant="studio" />
+  <OrgLandingPageCallout {callout} {labels} variant="studio" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="studio" />
 </div>

packages/ui/src/custom/org-landing-page/studio/course-card.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+  import { getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:group ui:flex ui:flex-col ui:h-full ui:bg-[var(--landing-card)] ui:border ui:border-[var(--landing-border)] ui:rounded-xl ui:overflow-hidden ui:transition-colors ui:no-underline {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer ui:hover:border-[var(--landing-fg)]/30'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  <div
+    class="ui:relative ui:h-[200px] ui:bg-[var(--landing-card-soft)]/50 ui:border-b ui:border-[var(--landing-border)] ui:p-5 ui:overflow-hidden"
+  >
+    {#if course.logo}
+      <img src={course.logo} alt="" class="ui:absolute ui:inset-0 ui:w-full ui:h-full ui:object-cover ui:opacity-60" />
+    {/if}
+    <div
+      class="ui:relative ui:flex ui:items-start ui:justify-between"
+      style="background: linear-gradient(180deg, transparent 60%, var(--landing-card) 100%);"
+    >
+      {#if courseTypeMeta}
+        <span
+          class="ui:inline-flex ui:items-center ui:gap-1.5 ui:px-2 ui:py-0.5 ui:bg-[var(--landing-bg)]/95 ui:border ui:border-[var(--landing-border)] ui:rounded-md ui:text-[11px] ui:font-medium ui:text-[var(--landing-fg)]"
+        >
+          {courseTypeMeta.label}
+        </span>
+      {/if}
+    </div>
+  </div>
+  <div class="ui:p-5 ui:flex ui:items-end ui:justify-between ui:gap-3 ui:flex-1">
+    <div class="ui:flex-1 ui:min-w-0">
+      <p class="ui:text-[13px] ui:text-[var(--landing-fg-muted)] ui:mb-1.5 ui:m-0">
+        {course.price || formatCurrency(course.cost, course.currency)}
+      </p>
+      <h3 class="ui:text-base ui:font-medium ui:tracking-tight ui:leading-snug ui:m-0">
+        {course.title}
+      </h3>
+    </div>
+    <span
+      class="ui:flex-shrink-0 ui:inline-flex ui:items-center ui:justify-center ui:size-8 ui:rounded-full ui:border ui:border-[var(--landing-border)] ui:text-[var(--landing-fg-muted)] ui:group-hover:bg-[var(--landing-fg)] ui:group-hover:text-[var(--landing-bg)] ui:group-hover:border-[var(--landing-fg)] ui:transition-colors"
+      aria-hidden="true"
+      aria-label={labels?.enrollLabel ?? 'Enroll'}
+    >
+      <ArrowRightIcon class="ui:size-3.5" />
+    </span>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/studio/hero.svelte

@@ -3,7 +3,6 @@
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -12,7 +11,7 @@
     navigation: Snippet;
   }
 
-  let { hero, courses, navigation }: Props = $props();
+  let { hero, courses = [], navigation }: Props = $props();
 
   const programsCount = $derived(courses.length);
 
@@ -32,83 +31,74 @@
   <section class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-20 ui:pb-20 ui:md:pt-24 ui:md:pb-24">
     <div
       class="ui:pointer-events-none ui:absolute ui:-top-32 ui:-left-24 ui:h-[520px] ui:w-[520px] ui:rounded-full ui:opacity-60 ui:blur-3xl"
-      style="background: radial-gradient(circle, color-mix(in oklab, var(--primary) 35%, transparent) 0%, transparent 70%);"
+      style="background: radial-gradient(circle, color-mix(in oklab, var(--landing-accent) 35%, transparent) 0%, transparent 70%);"
       aria-hidden="true"
     ></div>
     <div
       class="ui:pointer-events-none ui:absolute ui:-top-20 ui:right-[-10%] ui:h-[420px] ui:w-[420px] ui:rounded-full ui:opacity-40 ui:blur-3xl"
-      style="background: radial-gradient(circle, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 70%);"
+      style="background: radial-gradient(circle, color-mix(in oklab, var(--landing-accent) 18%, transparent) 0%, transparent 70%);"
       aria-hidden="true"
     ></div>
 
     <div class="ui:relative ui:max-w-[1080px] ui:mx-auto">
-      <BlurFade delay={0} once={true}>
-        <span
-          class="ui:inline-flex ui:items-center ui:gap-2 ui:mb-7 ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-border ui:bg-card/70 ui:backdrop-blur-sm ui:text-[12px] ui:font-medium ui:text-foreground"
+      <span
+        class="ui:inline-flex ui:items-center ui:gap-2 ui:mb-7 ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-card)]/70 ui:backdrop-blur-sm ui:text-[12px] ui:font-medium ui:text-[var(--landing-fg)]"
+      >
+        <span class="studio-status-dot ui:size-1.5 ui:rounded-full" aria-hidden="true"></span>
+        {statusLabel}
+      </span>
+
+      <h1
+        class="ui:text-4xl ui:md:text-5xl ui:lg:text-[64px] ui:font-semibold ui:tracking-tight ui:leading-[1.02] ui:max-w-[18ch] ui:mb-5 ui:text-[var(--landing-fg)] ui:text-balance"
+      >
+        {hero.heading}
+      </h1>
+
+      <p class="ui:text-base ui:md:text-lg ui:text-[var(--landing-fg-muted)] ui:max-w-xl ui:mb-8 ui:leading-relaxed">
+        {hero.subheading}
+      </p>
+
+      <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          class="ui:rounded-md ui:px-5"
         >
-          <span class="studio-status-dot ui:size-1.5 ui:rounded-full" aria-hidden="true"></span>
-          {statusLabel}
-        </span>
-      </BlurFade>
-
-      <BlurFade delay={0.08} once={true}>
-        <h1
-          class="ui:text-4xl ui:md:text-5xl ui:lg:text-[64px] ui:font-semibold ui:tracking-tight ui:leading-[1.02] ui:max-w-[18ch] ui:mb-5 ui:text-foreground ui:text-balance"
-        >
-          {hero.heading}
-        </h1>
-      </BlurFade>
-
-      <BlurFade delay={0.18} once={true}>
-        <p class="ui:text-base ui:md:text-lg ui:text-muted-foreground ui:max-w-xl ui:mb-8 ui:leading-relaxed">
-          {hero.subheading}
-        </p>
-      </BlurFade>
-
-      <BlurFade delay={0.28} once={true}>
-        <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            class="ui:rounded-md ui:px-5"
-          >
-            {hero.primaryAction.label}
-          </Button>
-          {#if hero.secondaryAction}
-            <SecondaryActionButton
-              href={hero.secondaryAction.href}
-              label={hero.secondaryAction.label}
-              variant="studio"
-            />
-          {/if}
-        </div>
-      </BlurFade>
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="studio" />
+        {/if}
+      </div>
 
       {#if hero.image}
-        <BlurFade delay={0.4} once={true}>
-          <div
-            class="studio-polaroid ui:mt-16 ui:relative ui:rounded-xl ui:border ui:border-border ui:bg-card ui:p-2 ui:shadow-[0_40px_90px_-30px_rgba(0,0,0,0.35)]"
-          >
-            <img src={hero.image} alt="" class="ui:w-full ui:h-auto ui:rounded-lg ui:border ui:border-border" />
-          </div>
-        </BlurFade>
+        <div
+          class="studio-polaroid ui:mt-16 ui:relative ui:rounded-xl ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-card)] ui:p-2 ui:shadow-[0_40px_90px_-30px_rgba(0,0,0,0.35)]"
+        >
+          <img
+            src={hero.image}
+            alt=""
+            class="ui:w-full ui:h-auto ui:rounded-lg ui:border ui:border-[var(--landing-border)]"
+          />
+        </div>
       {/if}
 
       {#if showMarquee}
-        <BlurFade delay={hero.image ? 0.5 : 0.4} once={true}>
-          <div class="studio-marquee-mask ui:mt-16 ui:py-4 ui:border-y ui:border-border" aria-hidden="true">
-            <div class="studio-marquee-track ui:flex ui:gap-12 ui:whitespace-nowrap ui:w-max">
-              {#each [...marqueeItems, ...marqueeItems] as course, index (`${course.id}-${index}`)}
-                <span class="ui:inline-flex ui:items-center ui:gap-3">
-                  <span class="ui:size-1 ui:rounded-full ui:bg-primary/70"></span>
-                  <span class="ui:text-sm ui:font-medium ui:text-muted-foreground">
-                    {course.title}
-                  </span>
+        <div
+          class="studio-marquee-mask ui:mt-16 ui:py-4 ui:border-y ui:border-[var(--landing-border)]"
+          aria-hidden="true"
+        >
+          <div class="studio-marquee-track ui:flex ui:gap-12 ui:whitespace-nowrap ui:w-max">
+            {#each [...marqueeItems, ...marqueeItems] as course, index (`${course.id}-${index}`)}
+              <span class="ui:inline-flex ui:items-center ui:gap-3">
+                <span class="ui:size-1 ui:rounded-full ui:bg-[var(--landing-accent)]/70"></span>
+                <span class="ui:text-sm ui:font-medium ui:text-[var(--landing-fg-muted)]">
+                  {course.title}
                 </span>
-              {/each}
-            </div>
+              </span>
+            {/each}
           </div>
-        </BlurFade>
+        </div>
       {/if}
     </div>
   </section>
@@ -116,20 +106,20 @@
 
 <style>
   .studio-status-dot {
-    background-color: var(--primary);
-    box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 60%, transparent);
+    background-color: var(--landing-accent);
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--landing-accent) 60%, transparent);
     animation: studio-pulse 2s ease-out infinite;
   }
 
   @keyframes studio-pulse {
     0% {
-      box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 50%, transparent);
+      box-shadow: 0 0 0 0 color-mix(in oklab, var(--landing-accent) 50%, transparent);
     }
     70% {
-      box-shadow: 0 0 0 8px color-mix(in oklab, var(--primary) 0%, transparent);
+      box-shadow: 0 0 0 8px color-mix(in oklab, var(--landing-accent) 0%, transparent);
     }
     100% {
-      box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 0%, transparent);
+      box-shadow: 0 0 0 0 color-mix(in oklab, var(--landing-accent) 0%, transparent);
     }
   }
 

packages/ui/src/custom/org-landing-page/studio/nav.svelte

@@ -17,12 +17,14 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:sticky ui:top-0 ui:z-50 ui:bg-background/75 ui:backdrop-blur-md ui:border-b ui:border-border">
+  <header
+    class="ui:sticky ui:top-0 ui:z-50 ui:bg-[var(--landing-bg)]/75 ui:backdrop-blur-md ui:border-b ui:border-[var(--landing-border)]"
+  >
     <div class="ui:max-w-[1080px] ui:mx-auto ui:px-6">
       <div class="ui:grid ui:grid-cols-[1fr_auto_1fr] ui:items-center ui:h-14">
         <a
           href="/"
-          class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[14px] ui:tracking-tight ui:text-foreground ui:no-underline"
+          class="ui:flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[14px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
         >
           {#if logoUrl}
             <img src={logoUrl} alt={orgName} class="ui:h-5 ui:w-auto" />
@@ -35,7 +37,7 @@
             {#each navItems as item (item.href + item.label)}
               <a
                 href={item.href}
-                class="ui:px-3 ui:py-1.5 ui:text-[13px] ui:text-muted-foreground ui:hover:text-foreground ui:hover:bg-muted ui:rounded-md ui:transition-colors ui:no-underline"
+                class="ui:px-3 ui:py-1.5 ui:text-[13px] ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)] ui:rounded-md ui:transition-colors ui:no-underline ui:cursor-pointer"
               >
                 {item.label}
               </a>

packages/ui/src/custom/org-landing-page/tech.svelte

@@ -6,11 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import TechNav from './tech/nav.svelte';
   import TechHero from './tech/hero.svelte';
+  import TechCourseCard from './tech/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
-  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
-  import ClockIcon from '@lucide/svelte/icons/clock';
-  import { getCourseTypeLandingMeta } from './landing-page-utils';
+  import { themeStyle } from './theme-style';
 
   let {
     orgName,
@@ -24,16 +22,15 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
-
-  function formatCurrency(cost?: number, currency = 'USD') {
-    if (!cost) return 'Free';
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
-  }
 </script>
 
-<div class="ui:min-h-screen ui:bg-background ui:text-foreground ui:font-sans">
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('tech')}
+>
   <main>
     <TechHero {hero}>
       {#snippet navigation()}
@@ -46,8 +43,14 @@
         <div class="ui:max-w-[1280px] ui:mx-auto">
           <div class="ui:flex ui:items-end ui:justify-between ui:flex-wrap ui:gap-4 ui:mb-14">
             <div>
-              <p class="ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-primary ui:mb-3">// catalog</p>
-              <h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:m-0">Latest courses</h2>
+              <p
+                class="ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
+              >
+                {labels?.catalogEyebrow ?? '// catalog'}
+              </p>
+              <h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:m-0">
+                {labels?.catalogHeading ?? 'Latest courses'}
+              </h2>
             </div>
             {#if hasMoreCourses}
               <Button
@@ -56,66 +59,16 @@
                 class="ui:rounded-none ui:font-mono ui:text-sm"
                 disabled={disableCourseLinks}
               >
-                view all →
+                {labels?.browseCoursesLabel ?? 'view all →'}
               </Button>
             {/if}
           </div>
 
           <div
-            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-border"
+            class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]"
           >
             {#each courses as course, index (course.id)}
-              {@const courseTypeMeta = getCourseTypeLandingMeta(course)}
-              <BlurFade delay={0.06 * index} once={true}>
-                <a
-                  href={disableCourseLinks
-                    ? undefined
-                    : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                  class="ui:flex ui:flex-col ui:h-full ui:p-7 ui:border-r ui:border-b ui:border-border ui:bg-background ui:transition-colors ui:no-underline {disableCourseLinks
-                    ? 'ui:cursor-default'
-                    : 'ui:hover:bg-muted/40'}"
-                  aria-disabled={disableCourseLinks}
-                  tabindex={disableCourseLinks ? -1 : undefined}
-                >
-                  {#if courseTypeMeta}
-                    <span
-                      class="ui:inline-block ui:self-start ui:px-2.5 ui:py-1 ui:bg-primary ui:text-primary-foreground ui:font-mono ui:text-[10px] ui:font-semibold ui:tracking-wider ui:uppercase ui:mb-4"
-                    >
-                      {courseTypeMeta.label}
-                    </span>
-                  {/if}
-                  <h3 class="ui:text-xl ui:font-bold ui:tracking-tight ui:leading-tight ui:mb-3 ui:m-0">
-                    {course.title}
-                  </h3>
-                  <p
-                    class="ui:text-sm ui:text-muted-foreground ui:leading-relaxed ui:line-clamp-3 ui:flex-1 ui:m-0 ui:mb-5"
-                  >
-                    {course.description}
-                  </p>
-                  <div
-                    class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:border-t ui:border-dashed ui:border-border"
-                  >
-                    <span class="ui:font-mono ui:text-sm ui:font-bold">
-                      {course.price || formatCurrency(course.cost, course.currency)}
-                    </span>
-                    <span
-                      class="ui:inline-flex ui:items-center ui:gap-1 ui:font-mono ui:text-xs ui:text-primary ui:font-bold"
-                      aria-hidden="true"
-                    >
-                      enroll
-                      <ArrowRightIcon class="ui:size-3.5" />
-                    </span>
-                  </div>
-                  {#if course.duration}
-                    <p
-                      class="ui:font-mono ui:text-[11px] ui:text-muted-foreground ui:mt-3 ui:inline-flex ui:items-center ui:gap-1.5"
-                    >
-                      <ClockIcon class="ui:size-3" />
-                      {course.duration}
-                    </p>
-                  {/if}
-                </a>
-              </BlurFade>
+              <TechCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
         </div>
@@ -123,11 +76,11 @@
     {/if}
   </main>
 
-  <OrgLandingPageLinks {links} variant="tech" />
+  <OrgLandingPageLinks {links} {labels} variant="tech" />
 
-  <OrgLandingPageEmbed {embed} variant="tech" />
+  <OrgLandingPageEmbed {embed} {labels} variant="tech" />
 
-  <OrgLandingPageCallout {callout} variant="tech" />
+  <OrgLandingPageCallout {callout} {labels} variant="tech" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
 </div>

packages/ui/src/custom/org-landing-page/tech/course-card.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import { getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCurrency(cost?: number, currency = 'USD') {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:flex ui:flex-col ui:h-full ui:p-7 ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)] ui:transition-colors ui:no-underline {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer ui:hover:bg-[var(--landing-card-soft)]/40'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  {#if courseTypeMeta}
+    <span
+      class="ui:inline-block ui:self-start ui:px-2.5 ui:py-1 ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:font-mono ui:text-[10px] ui:font-semibold ui:tracking-wider ui:uppercase ui:mb-4"
+    >
+      {courseTypeMeta.label}
+    </span>
+  {/if}
+  <h3 class="ui:text-xl ui:font-bold ui:tracking-tight ui:leading-tight ui:mb-3 ui:m-0">
+    {course.title}
+  </h3>
+  <p class="ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:flex-1 ui:m-0 ui:mb-5">
+    {course.description}
+  </p>
+  <div
+    class="ui:flex ui:items-center ui:justify-between ui:pt-4 ui:border-t ui:border-dashed ui:border-[var(--landing-border)]"
+  >
+    <span class="ui:font-mono ui:text-sm ui:font-bold">
+      {course.price || formatCurrency(course.cost, course.currency)}
+    </span>
+    <span
+      class="ui:inline-flex ui:items-center ui:gap-1 ui:font-mono ui:text-xs ui:text-[var(--landing-accent)] ui:font-bold"
+      aria-hidden="true"
+    >
+      {labels?.enrollLabel ?? 'enroll'}
+      <ArrowRightIcon class="ui:size-3.5" />
+    </span>
+  </div>
+  {#if course.duration}
+    <p
+      class="ui:font-mono ui:text-[11px] ui:text-[var(--landing-fg-muted)] ui:mt-3 ui:inline-flex ui:items-center ui:gap-1.5"
+    >
+      <ClockIcon class="ui:size-3" />
+      {course.duration}
+    </p>
+  {/if}
+</a>

packages/ui/src/custom/org-landing-page/tech/hero.svelte

@@ -3,7 +3,6 @@
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -15,7 +14,9 @@
 </script>
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:relative ui:bg-primary ui:text-primary-foreground ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20">
+  <section
+    class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20"
+  >
     <!-- subtle grid overlay -->
     <div
       class="ui:pointer-events-none ui:absolute ui:inset-0 ui:opacity-[0.08]"
@@ -31,56 +32,46 @@
       class="ui:relative ui:max-w-[1280px] ui:mx-auto ui:py-16 ui:lg:py-24 ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
     >
       <div>
-        <BlurFade delay={0} once={true}>
-          <p
-            class="ui:inline-block ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-primary-foreground/80 ui:bg-primary-foreground/10 ui:px-3 ui:py-1.5 ui:mb-6"
+        <p
+          class="ui:inline-block ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent-fg)]/80 ui:bg-[var(--landing-accent-fg)]/10 ui:px-3 ui:py-1.5 ui:mb-6"
+        >
+          // engineering academy
+        </p>
+        <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-extrabold ui:tracking-tight ui:leading-[0.95] ui:mb-6">
+          {hero.heading}
+        </h1>
+        <p
+          class="ui:text-lg ui:lg:text-xl ui:text-[var(--landing-accent-fg)]/80 ui:max-w-xl ui:mb-8 ui:leading-relaxed"
+        >
+          {hero.subheading}
+        </p>
+        <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
+          <Button
+            href={hero.primaryAction.href}
+            disabled={hero.primaryAction.disabled ?? false}
+            size="lg"
+            variant="secondary"
+            class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-[var(--landing-accent-fg)] ui:text-[var(--landing-accent)] ui:hover:bg-[var(--landing-accent-fg)]/90"
           >
-            // engineering academy
-          </p>
-        </BlurFade>
-        <BlurFade delay={0.12} once={true}>
-          <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-extrabold ui:tracking-tight ui:leading-[0.95] ui:mb-6">
-            {hero.heading}
-          </h1>
-        </BlurFade>
-        <BlurFade delay={0.24} once={true}>
-          <p class="ui:text-lg ui:lg:text-xl ui:text-primary-foreground/80 ui:max-w-xl ui:mb-8 ui:leading-relaxed">
-            {hero.subheading}
-          </p>
-        </BlurFade>
-        <BlurFade delay={0.36} once={true}>
-          <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
-            <Button
-              href={hero.primaryAction.href}
-              disabled={hero.primaryAction.disabled ?? false}
-              size="lg"
-              variant="secondary"
-              class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-primary-foreground ui:text-primary ui:hover:bg-primary-foreground/90"
-            >
-              {hero.primaryAction.label}
-            </Button>
-            {#if hero.secondaryAction}
-              <SecondaryActionButton
-                href={hero.secondaryAction.href}
-                label={hero.secondaryAction.label}
-                variant="tech"
-              />
-            {/if}
-          </div>
-        </BlurFade>
+            {hero.primaryAction.label}
+          </Button>
+          {#if hero.secondaryAction}
+            <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="tech" />
+          {/if}
+        </div>
       </div>
 
       {#if hero.image}
-        <BlurFade delay={0.3} once={true} class="ui:hidden ui:lg:block">
-          <div class="ui:relative">
-            <div class="ui:absolute ui:inset-0 ui:bg-primary-foreground/10 ui:translate-x-3 ui:translate-y-3"></div>
-            <img
-              src={hero.image}
-              alt=""
-              class="ui:relative ui:w-full ui:h-[460px] ui:object-cover ui:border ui:border-primary-foreground/20"
-            />
-          </div>
-        </BlurFade>
+        <div class="ui:relative">
+          <div
+            class="ui:absolute ui:inset-0 ui:bg-[var(--landing-accent-fg)]/10 ui:translate-x-3 ui:translate-y-3"
+          ></div>
+          <img
+            src={hero.image}
+            alt=""
+            class="ui:relative ui:w-full ui:h-[460px] ui:object-cover ui:border ui:border-[var(--landing-accent-fg)]/20"
+          />
+        </div>
       {/if}
     </div>
   </section>

packages/ui/src/custom/org-landing-page/tech/nav.svelte

@@ -17,10 +17,10 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:py-4 ui:text-primary-foreground">
+  <header class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:py-4 ui:text-[var(--landing-accent-fg)]">
     <a
       href="/"
-      class="ui:flex ui:items-center ui:gap-2 ui:font-bold ui:text-base ui:tracking-tight ui:text-primary-foreground ui:no-underline"
+      class="ui:flex ui:items-center ui:gap-2 ui:font-bold ui:text-base ui:tracking-tight ui:text-[var(--landing-accent-fg)] ui:no-underline ui:cursor-pointer"
     >
       {#if logoUrl}
         <img src={logoUrl} alt={orgName} class="ui:h-7 ui:w-auto" />
@@ -33,7 +33,7 @@
         {#each navItems as item (item.href + item.label)}
           <a
             href={item.href}
-            class="ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-transparent ui:text-primary-foreground/85 ui:hover:text-primary-foreground ui:hover:border-primary-foreground/30 ui:hover:bg-primary-foreground/10 ui:transition-colors ui:no-underline"
+            class="ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-transparent ui:text-[var(--landing-accent-fg)]/85 ui:hover:text-[var(--landing-accent-fg)] ui:hover:border-[var(--landing-accent-fg)]/30 ui:hover:bg-[var(--landing-accent-fg)]/10 ui:transition-colors ui:no-underline ui:cursor-pointer"
           >
             ( {item.label.toLowerCase()} )
           </a>
@@ -46,7 +46,7 @@
         href={authAction.href}
         size="sm"
         variant="outline"
-        class="ui:rounded-none ui:font-semibold ui:border-primary-foreground ui:text-primary-foreground ui:bg-transparent ui:hover:bg-primary-foreground/10 ui:hover:text-primary-foreground"
+        class="ui:rounded-none ui:font-semibold ui:border-[var(--landing-accent-fg)] ui:text-[var(--landing-accent-fg)] ui:bg-transparent ui:hover:bg-[var(--landing-accent-fg)]/10 ui:hover:text-[var(--landing-accent-fg)]"
       >
         {authAction.label} →
       </Button>

packages/ui/src/custom/org-landing-page/terminal.svelte

@@ -6,8 +6,9 @@
   import OrgLandingPageFooter from './landing-page-footer.svelte';
   import TerminalNav from './terminal/nav.svelte';
   import TerminalHero from './terminal/hero.svelte';
+  import TerminalCourseCard from './terminal/course-card.svelte';
   import { Button } from '../../base/button';
-  import { BlurFade } from '../animation/blurfade';
+  import { themeStyle } from './theme-style';
   import { getCourseTypeLandingMeta } from './landing-page-utils';
 
   let {
@@ -22,12 +23,13 @@
     embed,
     callout,
     links,
-    footer
+    footer,
+    labels
   }: OrgLandingPageProps = $props();
 
   function priceLabel(course: CourseItem): string {
     if (course.price) return course.price;
-    if (!course.cost) return 'Free';
+    if (!course.cost) return labels?.freeLabel ?? 'Free';
 
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
@@ -43,7 +45,7 @@
   );
 
   const tabs = $derived<{ key: TabKey; label: string }[]>([
-    { key: 'all', label: 'All' },
+    { key: 'all', label: labels?.filterAllLabel ?? 'All' },
     ...courseTypeKeys.map((type) => {
       const meta = getCourseTypeLandingMeta({ id: '', title: '', description: '', type } as CourseItem);
 
@@ -69,22 +71,8 @@
 </script>
 
 <div
-  class="ui:min-h-screen ui:font-sans ui:w-full"
-  style="
-    background: #06070a;
-    color: #e9eaed;
-    --terminal-bg: #06070a;
-    --terminal-bg-soft: #0c0e13;
-    --terminal-bg-card: #0f1218;
-    --terminal-bg-elevated: #14171f;
-    --terminal-line: #1c1f28;
-    --terminal-line-soft: #161922;
-    --terminal-line-strong: #262a35;
-    --terminal-ink: #e9eaed;
-    --terminal-ink-dim: #9da1ab;
-    --terminal-ink-muted: #61656f;
-    --terminal-ink-faint: #3d4049;
-  "
+  class="ui:min-h-screen ui:font-sans ui:w-full ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
+  style={themeStyle('terminal')}
 >
   <main>
     <TerminalHero {orgName} {hero} {courses}>
@@ -95,109 +83,59 @@
 
     {#if courses.length > 0}
       <section
-        class="ui:py-24 ui:px-6"
-        style="border-top: 1px solid var(--terminal-line); background: var(--terminal-bg);"
+        class="ui:py-24 ui:px-6 ui:bg-[var(--landing-bg)]"
+        style="border-top: 1px solid var(--landing-border-soft);"
       >
         <div class="ui:max-w-[1120px] ui:mx-auto">
-          <BlurFade delay={0} once={true}>
-            <p
-              class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
-              style="color: var(--primary);"
-            >
-              <span
-                class="ui:size-1.5 ui:rounded-full"
-                style="background: var(--primary); box-shadow: 0 0 12px var(--primary);"
-              ></span>
-              Catalog
-            </p>
-          </BlurFade>
+          <p
+            class="ui:font-mono ui:text-[11px] ui:tracking-[0.12em] ui:uppercase ui:mb-3 ui:inline-flex ui:items-center ui:gap-2"
+            style="color: var(--landing-accent);"
+          >
+            <span
+              class="ui:size-1.5 ui:rounded-full"
+              style="background: var(--landing-accent); box-shadow: 0 0 12px var(--landing-accent);"
+            ></span>
+            {labels?.catalogEyebrow ?? 'Catalog'}
+          </p>
 
-          <BlurFade delay={0.08} once={true}>
-            <h2
-              class="ui:text-4xl ui:lg:text-[40px] ui:font-semibold ui:tracking-tight ui:leading-[1.08] ui:m-0 ui:mb-3 ui:max-w-[700px]"
-              style="color: var(--terminal-ink);"
-            >
-              Programs your team can actually finish.
-            </h2>
-          </BlurFade>
+          <h2
+            class="ui:text-4xl ui:lg:text-[40px] ui:font-semibold ui:tracking-tight ui:leading-[1.08] ui:m-0 ui:mb-3 ui:max-w-[700px] ui:text-[var(--landing-fg)]"
+          >
+            {labels?.catalogHeading ?? 'Programs your team can actually finish.'}
+          </h2>
 
-          <BlurFade delay={0.14} once={true}>
-            <p class="ui:text-[15px] ui:max-w-xl ui:m-0 ui:mb-8" style="color: var(--terminal-ink-dim);">
-              Tracks built around real-world artifacts — pull requests, postmortems, and runbooks. No filler.
-            </p>
-          </BlurFade>
+          <p class="ui:text-[15px] ui:max-w-xl ui:m-0 ui:mb-8 ui:text-[var(--landing-fg-muted)]">
+            {labels?.catalogDescription ??
+              'Tracks built around real-world artifacts — pull requests, postmortems, and runbooks. No filler.'}
+          </p>
 
           {#if tabs.length > 1}
-            <BlurFade delay={0.2} once={true}>
-              <div
-                class="ui:inline-flex ui:items-center ui:gap-0.5 ui:p-1 ui:rounded-full ui:mb-8"
-                style="border: 1px solid var(--terminal-line-strong); background: var(--terminal-bg-card);"
-                role="tablist"
-              >
-                {#each tabs as tab (tab.key)}
-                  {@const isActive = activeTab === tab.key}
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={isActive}
-                    onclick={() => (activeTab = tab.key)}
-                    class="ui:px-3.5 ui:py-1.5 ui:text-[13px] ui:font-medium ui:rounded-full ui:transition-colors"
-                    style={isActive
-                      ? 'background: var(--terminal-ink); color: var(--terminal-bg);'
-                      : 'background: transparent; color: var(--terminal-ink-dim);'}
-                  >
-                    {tab.label}
-                  </button>
-                {/each}
-              </div>
-            </BlurFade>
+            <div
+              class="ui:inline-flex ui:items-center ui:gap-0.5 ui:p-1 ui:rounded-full ui:mb-8 ui:bg-[var(--landing-card)]"
+              style="border: 1px solid var(--landing-border);"
+              role="tablist"
+            >
+              {#each tabs as tab (tab.key)}
+                {@const isActive = activeTab === tab.key}
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={isActive}
+                  onclick={() => (activeTab = tab.key)}
+                  class="ui:px-3.5 ui:py-1.5 ui:text-[13px] ui:font-medium ui:rounded-full ui:transition-colors ui:cursor-pointer"
+                  style={isActive
+                    ? 'background: var(--landing-fg); color: var(--landing-bg);'
+                    : 'background: transparent; color: var(--landing-fg-muted);'}
+                >
+                  {tab.label}
+                </button>
+              {/each}
+            </div>
           {/if}
 
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-[14px]">
             {#each visibleCourses as course, index (course.id)}
-              <BlurFade delay={0.04 * index} once={true}>
-                <a
-                  href={disableCourseLinks
-                    ? undefined
-                    : course.link || (course.slug ? `/course/${course.slug}` : undefined)}
-                  aria-disabled={disableCourseLinks}
-                  tabindex={disableCourseLinks ? -1 : undefined}
-                  class="ui:relative ui:flex ui:flex-col ui:gap-2.5 ui:p-6 ui:rounded-xl ui:no-underline ui:transition-colors ui:h-full"
-                  style="
-                    background: linear-gradient(180deg, var(--terminal-bg-card) 0%, var(--terminal-bg-soft) 100%);
-                    border: 1px solid var(--terminal-line);
-                    color: var(--terminal-ink);
-                    min-height: 180px;
-                    cursor: {disableCourseLinks ? 'default' : 'pointer'};
-                  "
-                  onmouseenter={(e) =>
-                    !disableCourseLinks && (e.currentTarget.style.borderColor = 'var(--terminal-line-strong)')}
-                  onmouseleave={(e) => (e.currentTarget.style.borderColor = 'var(--terminal-line)')}
-                >
-                  <span class="ui:font-mono ui:text-[11px] ui:tracking-[0.04em]" style="color: var(--primary);">
-                    $ {slugify(course)}
-                  </span>
-                  <h3
-                    class="ui:text-[17px] ui:font-semibold ui:leading-snug ui:m-0"
-                    style="color: var(--terminal-ink); letter-spacing: -0.01em;"
-                  >
-                    {course.title}
-                  </h3>
-                  <p
-                    class="ui:text-[13.5px] ui:leading-[1.5] ui:m-0 ui:flex-1 ui:line-clamp-3"
-                    style="color: var(--terminal-ink-dim);"
-                  >
-                    {course.description}
-                  </p>
-                  <div
-                    class="ui:flex ui:items-center ui:justify-between ui:pt-3.5 ui:font-mono ui:text-[12px]"
-                    style="border-top: 1px dashed var(--terminal-line);"
-                  >
-                    <span style="color: var(--terminal-ink);">{priceLabel(course)}</span>
-                    <span aria-hidden="true" style="color: var(--terminal-ink-dim);">→</span>
-                  </div>
-                </a>
-              </BlurFade>
+              <TerminalCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
 
@@ -207,9 +145,9 @@
                 href={disableCourseLinks ? undefined : '/courses'}
                 variant="outline"
                 disabled={disableCourseLinks}
-                class="ui:rounded-full ui:px-5 ui:bg-transparent ui:border-[var(--terminal-line-strong)] ui:text-[var(--terminal-ink)] ui:hover:bg-white/5"
+                class="ui:rounded-full ui:px-5 ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-white/5"
               >
-                View all programs →
+                {labels?.browseCoursesLabel ?? 'View all programs →'}
               </Button>
             </div>
           {/if}
@@ -218,11 +156,11 @@
     {/if}
   </main>
 
-  <OrgLandingPageLinks {links} variant="terminal" />
+  <OrgLandingPageLinks {links} {labels} variant="terminal" />
 
-  <OrgLandingPageEmbed {embed} variant="terminal" />
+  <OrgLandingPageEmbed {embed} {labels} variant="terminal" />
 
-  <OrgLandingPageCallout {callout} variant="terminal" />
+  <OrgLandingPageCallout {callout} {labels} variant="terminal" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="terminal" />
 </div>

packages/ui/src/custom/org-landing-page/terminal/course-card.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function slugify(c: CourseItem): string {
+    if (c.slug) return c.slug;
+    return c.title
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  function priceLabel(c: CourseItem): string {
+    if (c.price) return c.price;
+    if (!c.cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: c.currency ?? 'USD',
+      maximumFractionDigits: 0
+    }).format(c.cost);
+  }
+</script>
+
+<a
+  {href}
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+  class="ui:relative ui:flex ui:flex-col ui:gap-2.5 ui:p-6 ui:rounded-xl ui:no-underline ui:transition-colors ui:h-full ui:text-[var(--landing-fg)] {disableCourseLinks
+    ? ''
+    : 'ui:cursor-pointer'}"
+  style="
+    background: linear-gradient(180deg, var(--landing-card) 0%, var(--landing-bg-section) 100%);
+    border: 1px solid var(--landing-border-soft);
+    min-height: 180px;
+    cursor: {disableCourseLinks ? 'default' : 'pointer'};
+  "
+  onmouseenter={(e) => !disableCourseLinks && (e.currentTarget.style.borderColor = 'var(--landing-border)')}
+  onmouseleave={(e) => (e.currentTarget.style.borderColor = 'var(--landing-border-soft)')}
+>
+  <span class="ui:font-mono ui:text-[11px] ui:tracking-[0.04em]" style="color: var(--landing-accent);">
+    $ {slugify(course)}
+  </span>
+  <h3
+    class="ui:text-[17px] ui:font-semibold ui:leading-snug ui:m-0 ui:text-[var(--landing-fg)]"
+    style="letter-spacing: -0.01em;"
+  >
+    {course.title}
+  </h3>
+  <p class="ui:text-[13.5px] ui:leading-[1.5] ui:m-0 ui:flex-1 ui:line-clamp-3 ui:text-[var(--landing-fg-muted)]">
+    {course.description}
+  </p>
+  <div
+    class="ui:flex ui:items-center ui:justify-between ui:pt-3.5 ui:font-mono ui:text-[12px]"
+    style="border-top: 1px dashed var(--landing-border-soft);"
+  >
+    <span class="ui:text-[var(--landing-fg)]">{priceLabel(course)}</span>
+    <span aria-hidden="true" class="ui:text-[var(--landing-fg-muted)]">→</span>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/terminal/hero.svelte

@@ -2,17 +2,16 @@
   import type { OrgLandingPageProps, CourseItem } from '../types';
   import type { Snippet } from 'svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
-    orgName: OrgLandingPageProps['orgName'];
+    orgName?: OrgLandingPageProps['orgName'];
     hero: OrgLandingPageProps['hero'];
     courses: OrgLandingPageProps['courses'];
     navigation: Snippet;
   }
 
-  let { orgName, hero, courses, navigation }: Props = $props();
+  let { orgName = '', hero, courses = [], navigation }: Props = $props();
 
   const programsCount = $derived(courses.length);
   const learnersCount = $derived(courses.reduce((sum, course) => sum + (course.totalStudents ?? 0), 0));
@@ -63,221 +62,188 @@
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20"
-    style="
-    background: #06070a;
-    --terminal-bg: #06070a;
-    --terminal-bg-soft: #0c0e13;
-    --terminal-bg-card: #0f1218;
-    --terminal-bg-elevated: #14171f;
-    --terminal-line: #1c1f28;
-    --terminal-line-soft: #161922;
-    --terminal-line-strong: #262a35;
-    --terminal-ink: #e9eaed;
-    --terminal-ink-dim: #9da1ab;
-    --terminal-ink-muted: #61656f;
-    --terminal-ink-faint: #3d4049;
-  "
+    class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20 ui:bg-[var(--landing-bg)]"
   >
     <div
       class="ui:pointer-events-none ui:absolute ui:inset-x-0 ui:-top-32 ui:h-[680px] ui:opacity-90"
-      style="background: radial-gradient(ellipse 60% 70% at 50% 30%, color-mix(in oklab, var(--primary) 22%, transparent) 0%, transparent 65%);"
+      style="background: radial-gradient(ellipse 60% 70% at 50% 30%, color-mix(in oklab, var(--landing-accent) 22%, transparent) 0%, transparent 65%);"
       aria-hidden="true"
     ></div>
 
     <div class="ui:relative ui:max-w-[1120px] ui:mx-auto ui:text-center">
-      <BlurFade delay={0} once={true}>
-        <h1
-          class="ui:font-semibold ui:leading-[0.95] ui:mb-10 ui:max-w-[20ch] ui:mx-auto ui:text-balance"
-          style="
-          font-size: clamp(48px, 9vw, 128px);
-          letter-spacing: -0.04em;
-          background: linear-gradient(180deg,
-            color-mix(in oklab, var(--primary) 60%, #ffffff) 0%,
-            color-mix(in oklab, var(--primary) 35%, transparent) 45%,
-            rgba(8, 10, 14, 0.3) 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 8px 60px color-mix(in oklab, var(--primary) 18%, transparent);
-          user-select: none;
-        "
-        >
-          {hero.heading}
-        </h1>
-      </BlurFade>
+      <h1
+        class="ui:font-semibold ui:leading-[0.95] ui:mb-10 ui:max-w-[20ch] ui:mx-auto ui:text-balance"
+        style="
+        font-size: clamp(48px, 9vw, 128px);
+        letter-spacing: -0.04em;
+        background: linear-gradient(180deg,
+          color-mix(in oklab, var(--landing-accent) 60%, #ffffff) 0%,
+          color-mix(in oklab, var(--landing-accent) 35%, transparent) 45%,
+          color-mix(in oklab, var(--landing-bg) 70%, transparent) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        text-shadow: 0 8px 60px color-mix(in oklab, var(--landing-accent) 18%, transparent);
+        user-select: none;
+      "
+      >
+        {hero.heading}
+      </h1>
 
-      <BlurFade delay={0.12} once={true}>
-        <div class="ui:inline-flex ui:items-center ui:gap-2 ui:mb-8">
-          {#if hero.secondaryAction}
-            <Button
-              href={hero.secondaryAction.href}
-              size="sm"
-              variant="outline"
-              class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-white/5 ui:border-[var(--terminal-line-strong)] ui:text-[var(--terminal-ink)] ui:hover:bg-white/10"
-            >
-              {hero.secondaryAction.label}
-            </Button>
-          {/if}
+      <div class="ui:inline-flex ui:items-center ui:gap-2 ui:mb-8">
+        {#if hero.secondaryAction}
           <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
+            href={hero.secondaryAction.href}
             size="sm"
-            class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[#f4f5f7] ui:text-[#0a0b0e] ui:hover:bg-white"
+            variant="outline"
+            class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-white/5 ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-white/10"
           >
-            {hero.primaryAction.label}
+            {hero.secondaryAction.label}
           </Button>
-        </div>
-      </BlurFade>
+        {/if}
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="sm"
+          class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[#f4f5f7] ui:text-[#0a0b0e] ui:hover:bg-white"
+        >
+          {hero.primaryAction.label}
+        </Button>
+      </div>
 
-      <BlurFade delay={0.22} once={true}>
-        <p class="ui:text-[15px] ui:mb-7 ui:max-w-xl ui:mx-auto" style="color: var(--terminal-ink-dim);">
-          {hero.subheading}
-        </p>
-      </BlurFade>
+      <p class="ui:text-[15px] ui:mb-7 ui:max-w-xl ui:mx-auto ui:text-[var(--landing-fg-muted)]">
+        {hero.subheading}
+      </p>
 
       {#if programsCount > 0}
-        <BlurFade delay={0.3} once={true}>
+        <span
+          class="ui:inline-flex ui:items-center ui:gap-3 ui:px-4 ui:py-2 ui:rounded-full ui:font-mono ui:text-[13px] ui:text-[var(--landing-fg-muted)]"
+          style="
+          border: 1px solid var(--landing-border);
+          background: rgba(255,255,255,0.02);
+          backdrop-filter: blur(8px);
+        "
+        >
+          <span style="color: var(--landing-accent);">&gt;</span>
           <span
-            class="ui:inline-flex ui:items-center ui:gap-3 ui:px-4 ui:py-2 ui:rounded-full ui:font-mono ui:text-[13px]"
-            style="
-            border: 1px solid var(--terminal-line-strong);
-            background: rgba(255,255,255,0.02);
-            backdrop-filter: blur(8px);
-            color: var(--terminal-ink-dim);
-          "
+            ><span class="ui:font-medium ui:text-[var(--landing-fg)]">{programsCount}</span>
+            {programsCount === 1 ? 'program' : 'programs'} running</span
           >
-            <span style="color: var(--primary);">&gt;</span>
-            <span
-              ><span style="color: var(--terminal-ink); font-weight: 500;">{programsCount}</span>
-              {programsCount === 1 ? 'program' : 'programs'} running</span
-            >
-            {#if learnersCount > 0}
-              <span class="ui:inline-block ui:w-px ui:h-3" style="background: var(--terminal-line-strong);"></span>
-              <span
-                ><span style="color: var(--terminal-ink); font-weight: 500;">{learnersFormatted}</span> learners</span
-              >
-            {/if}
-            {#if tracksCount > 1}
-              <span class="ui:inline-block ui:w-px ui:h-3" style="background: var(--terminal-line-strong);"></span>
-              <span><span style="color: var(--terminal-ink); font-weight: 500;">{tracksCount}</span> tracks</span>
-            {/if}
-          </span>
-        </BlurFade>
+          {#if learnersCount > 0}
+            <span class="ui:inline-block ui:w-px ui:h-3 ui:bg-[var(--landing-border)]"></span>
+            <span><span class="ui:font-medium ui:text-[var(--landing-fg)]">{learnersFormatted}</span> learners</span>
+          {/if}
+          {#if tracksCount > 1}
+            <span class="ui:inline-block ui:w-px ui:h-3 ui:bg-[var(--landing-border)]"></span>
+            <span><span class="ui:font-medium ui:text-[var(--landing-fg)]">{tracksCount}</span> tracks</span>
+          {/if}
+        </span>
       {/if}
 
       {#if hero.image}
-        <BlurFade delay={0.4} once={true}>
+        <div
+          class="ui:mt-14 ui:max-w-[880px] ui:mx-auto ui:rounded-xl ui:overflow-hidden ui:text-left ui:bg-[var(--landing-card)]"
+          style="
+          border: 1px solid var(--landing-border);
+          box-shadow:
+            0 30px 90px -30px rgba(0,0,0,0.7),
+            0 0 0 1px color-mix(in oklab, var(--landing-accent) 6%, transparent);
+        "
+        >
           <div
-            class="ui:mt-14 ui:max-w-[880px] ui:mx-auto ui:rounded-xl ui:overflow-hidden ui:text-left"
-            style="
-            border: 1px solid var(--terminal-line-strong);
-            background: var(--terminal-bg-card);
-            box-shadow:
-              0 30px 90px -30px rgba(0,0,0,0.7),
-              0 0 0 1px color-mix(in oklab, var(--primary) 6%, transparent);
-          "
+            class="ui:flex ui:items-center ui:gap-2 ui:px-4 ui:py-3 ui:bg-[var(--landing-card-soft)]"
+            style="border-bottom: 1px solid var(--landing-border-soft);"
           >
-            <div
-              class="ui:flex ui:items-center ui:gap-2 ui:px-4 ui:py-3"
-              style="border-bottom: 1px solid var(--terminal-line); background: var(--terminal-bg-elevated);"
+            <span class="ui:flex ui:gap-1.5 ui:mr-2">
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #ff5f57;"></span>
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #febc2e;"></span>
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #28c840;"></span>
+            </span>
+            <span
+              class="ui:flex-1 ui:text-center ui:font-mono ui:text-xs ui:truncate ui:text-[var(--landing-fg-muted)]"
             >
-              <span class="ui:flex ui:gap-1.5 ui:mr-2">
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #ff5f57;"></span>
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #febc2e;"></span>
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #28c840;"></span>
-              </span>
-              <span
-                class="ui:flex-1 ui:text-center ui:font-mono ui:text-xs ui:truncate"
-                style="color: var(--terminal-ink-dim);"
-              >
-                {orgSlug}/preview
-              </span>
-            </div>
-            <img src={hero.image} alt={orgName} class="ui:block ui:w-full ui:h-auto" />
+              {orgSlug}/preview
+            </span>
           </div>
-        </BlurFade>
+          <img src={hero.image} alt={orgName} class="ui:block ui:w-full ui:h-auto" />
+        </div>
       {:else if terminalRows.length > 0}
-        <BlurFade delay={0.4} once={true}>
+        <div
+          class="ui:mt-14 ui:max-w-[880px] ui:mx-auto ui:rounded-xl ui:overflow-hidden ui:text-left ui:bg-[var(--landing-card)]"
+          style="
+          border: 1px solid var(--landing-border);
+          box-shadow:
+            0 30px 90px -30px rgba(0,0,0,0.7),
+            0 0 0 1px color-mix(in oklab, var(--landing-accent) 6%, transparent);
+        "
+        >
           <div
-            class="ui:mt-14 ui:max-w-[880px] ui:mx-auto ui:rounded-xl ui:overflow-hidden ui:text-left"
-            style="
-            border: 1px solid var(--terminal-line-strong);
-            background: var(--terminal-bg-card);
-            box-shadow:
-              0 30px 90px -30px rgba(0,0,0,0.7),
-              0 0 0 1px color-mix(in oklab, var(--primary) 6%, transparent);
-          "
+            class="ui:flex ui:items-center ui:gap-2 ui:px-4 ui:py-3 ui:bg-[var(--landing-card-soft)]"
+            style="border-bottom: 1px solid var(--landing-border-soft);"
           >
-            <div
-              class="ui:flex ui:items-center ui:gap-2 ui:px-4 ui:py-3"
-              style="border-bottom: 1px solid var(--terminal-line); background: var(--terminal-bg-elevated);"
+            <span class="ui:flex ui:gap-1.5 ui:mr-2">
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #ff5f57;"></span>
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #febc2e;"></span>
+              <span class="ui:size-[11px] ui:rounded-full" style="background: #28c840;"></span>
+            </span>
+            <span
+              class="ui:flex-1 ui:text-center ui:font-mono ui:text-xs ui:truncate ui:text-[var(--landing-fg-muted)]"
             >
-              <span class="ui:flex ui:gap-1.5 ui:mr-2">
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #ff5f57;"></span>
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #febc2e;"></span>
-                <span class="ui:size-[11px] ui:rounded-full" style="background: #28c840;"></span>
-              </span>
+              {orgSlug}/main · catalog
+            </span>
+            <span class="ui:font-mono ui:text-[11px] ui:text-[var(--landing-fg-faint)]">
+              {programsCount}
+              {programsCount === 1 ? 'program' : 'programs'}
+            </span>
+          </div>
+
+          <div class="ui:p-5 ui:font-mono ui:text-[13px] ui:text-[var(--landing-fg)]" style="line-height: 1.7;">
+            <div
+              class="ui:flex ui:items-baseline ui:gap-2 ui:px-3 ui:py-2 ui:rounded-md ui:mb-3"
+              style="background: rgba(255,255,255,0.02); border: 1px solid var(--landing-border-soft);"
+            >
+              <span style="color: var(--landing-accent);">&gt;</span>
+              <span>list programs --org {orgSlug}</span>
+            </div>
+
+            <div class="ui:py-1 ui:text-[12px] ui:text-[var(--landing-fg-faint)]">
+              ● Loaded {programsCount}
+              {programsCount === 1 ? 'program' : 'programs'}
+            </div>
+
+            <div class="ui:mt-2 ui:flex ui:flex-col">
+              {#each terminalRows as row (row.slug)}
+                <div class="ui:flex ui:items-baseline ui:gap-4 ui:py-1.5 ui:text-[var(--landing-fg)]">
+                  <span class="ui:text-[var(--landing-fg-faint)]">{row.n}</span>
+                  <span class="ui:truncate ui:flex-1" style="color: var(--landing-accent);">{row.slug}</span>
+                  <span class="ui:text-[12px] ui:text-[var(--landing-fg-muted)]">{row.duration}</span>
+                  <span class="ui:text-[12px] ui:w-20 ui:text-right">{row.price}</span>
+                </div>
+              {/each}
+            </div>
+
+            <div class="ui:flex ui:items-baseline ui:gap-2 ui:mt-4">
+              <span style="color: var(--landing-accent);">&gt;</span>
               <span
-                class="ui:flex-1 ui:text-center ui:font-mono ui:text-xs ui:truncate"
-                style="color: var(--terminal-ink-dim);"
-              >
-                {orgSlug}/main · catalog
-              </span>
-              <span class="ui:font-mono ui:text-[11px]" style="color: var(--terminal-ink-muted);">
-                {programsCount}
-                {programsCount === 1 ? 'program' : 'programs'}
-              </span>
-            </div>
-
-            <div class="ui:p-5 ui:font-mono ui:text-[13px]" style="color: var(--terminal-ink); line-height: 1.7;">
-              <div
-                class="ui:flex ui:items-baseline ui:gap-2 ui:px-3 ui:py-2 ui:rounded-md ui:mb-3"
-                style="background: rgba(255,255,255,0.02); border: 1px solid var(--terminal-line);"
-              >
-                <span style="color: var(--primary);">&gt;</span>
-                <span>list programs --org {orgSlug}</span>
-              </div>
-
-              <div class="ui:py-1 ui:text-[12px]" style="color: var(--terminal-ink-muted);">
-                ● Loaded {programsCount}
-                {programsCount === 1 ? 'program' : 'programs'}
-              </div>
-
-              <div class="ui:mt-2 ui:flex ui:flex-col">
-                {#each terminalRows as row (row.slug)}
-                  <div class="ui:flex ui:items-baseline ui:gap-4 ui:py-1.5" style="color: var(--terminal-ink);">
-                    <span style="color: var(--terminal-ink-faint);">{row.n}</span>
-                    <span class="ui:truncate ui:flex-1" style="color: var(--primary);">{row.slug}</span>
-                    <span class="ui:text-[12px]" style="color: var(--terminal-ink-dim);">{row.duration}</span>
-                    <span class="ui:text-[12px] ui:w-20 ui:text-right">{row.price}</span>
-                  </div>
-                {/each}
-              </div>
-
-              <div class="ui:flex ui:items-baseline ui:gap-2 ui:mt-4">
-                <span style="color: var(--primary);">&gt;</span>
-                <span
-                  class="ui:inline-block ui:w-2 ui:h-[14px] ui:align-middle"
-                  style="background: var(--primary); animation: terminal-caret 1s steps(1) infinite;"
-                  aria-hidden="true"
-                ></span>
-              </div>
-            </div>
-
-            <div
-              class="ui:flex ui:items-center ui:justify-between ui:px-4 ui:py-2.5 ui:font-mono ui:text-[11px]"
-              style="border-top: 1px solid var(--terminal-line); background: var(--terminal-bg-soft); color: var(--terminal-ink-muted);"
-            >
-              <div class="ui:flex ui:gap-4">
-                <span>Enter enroll</span>
-                <span>↑/↓ navigate</span>
-                <span>^q quit</span>
-              </div>
-              <div style="color: var(--terminal-ink-dim);">{orgSlug}-cli</div>
+                class="ui:inline-block ui:w-2 ui:h-[14px] ui:align-middle"
+                style="background: var(--landing-accent); animation: terminal-caret 1s steps(1) infinite;"
+                aria-hidden="true"
+              ></span>
             </div>
           </div>
-        </BlurFade>
+
+          <div
+            class="ui:flex ui:items-center ui:justify-between ui:px-4 ui:py-2.5 ui:font-mono ui:text-[11px] ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg-faint)]"
+            style="border-top: 1px solid var(--landing-border-soft);"
+          >
+            <div class="ui:flex ui:gap-4">
+              <span>Enter enroll</span>
+              <span>↑/↓ navigate</span>
+              <span>^q quit</span>
+            </div>
+            <div class="ui:text-[var(--landing-fg-muted)]">{orgSlug}-cli</div>
+          </div>
+        </div>
       {/if}
     </div>
   </section>

packages/ui/src/custom/org-landing-page/terminal/nav.svelte

@@ -17,15 +17,14 @@
 </script>
 
 <EditableLandingSection sectionKey="navigation">
-  <header class="ui:relative ui:z-50 ui:px-6" style="background: transparent;">
+  <header class="ui:relative ui:z-50 ui:px-6 ui:bg-transparent">
     <div class="ui:max-w-[1120px] ui:mx-auto">
       <div class="ui:flex ui:items-center ui:justify-between ui:h-16">
         <div class="ui:flex ui:items-center ui:gap-8">
           <a
             href="/"
             aria-label={orgName}
-            class="ui:flex ui:items-center ui:gap-2 ui:no-underline ui:text-foreground"
-            style="color: var(--terminal-ink, #e9eaed);"
+            class="ui:flex ui:items-center ui:gap-2 ui:no-underline ui:text-[var(--landing-fg)] ui:cursor-pointer"
           >
             {#if logoUrl}
               <img src={logoUrl} alt={orgName} class="ui:h-6 ui:w-auto" />
@@ -47,16 +46,12 @@
               {#each navItems as item (item.href + item.label)}
                 <a
                   href={item.href}
-                  class="ui:text-[11px] ui:font-medium ui:tracking-[0.12em] ui:uppercase ui:no-underline ui:transition-colors"
-                  style="color: var(--terminal-ink-dim, #9da1ab);"
-                  onmouseenter={(e) => (e.currentTarget.style.color = 'var(--terminal-ink, #e9eaed)')}
-                  onmouseleave={(e) => (e.currentTarget.style.color = 'var(--terminal-ink-dim, #9da1ab)')}
+                  class="ui:text-[11px] ui:font-medium ui:tracking-[0.12em] ui:uppercase ui:no-underline ui:transition-colors ui:text-[var(--landing-fg-muted)] ui:hover:text-[var(--landing-fg)] ui:cursor-pointer"
                 >
                   {item.label}
                 </a>
               {/each}
-              <span class="ui:select-none" style="color: var(--terminal-ink-faint, #3d4049);" aria-hidden="true">/</span
-              >
+              <span class="ui:select-none ui:text-[var(--landing-fg-faint)]" aria-hidden="true">/</span>
             </nav>
           {/if}
         </div>
@@ -67,7 +62,7 @@
               href={authAction.href}
               size="sm"
               variant="outline"
-              class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-transparent ui:border-[var(--terminal-line-strong,#262a35)] ui:text-[var(--terminal-ink,#e9eaed)] ui:hover:bg-white/5"
+              class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-white/5"
             >
               {authAction.label}
             </Button>

packages/ui/src/custom/org-landing-page/theme-style.ts

@@ -0,0 +1,110 @@
+import type { OrgLandingPageTheme } from './types';
+
+export type LandingThemeVarName =
+  | '--landing-bg'
+  | '--landing-bg-section'
+  | '--landing-card'
+  | '--landing-card-soft'
+  | '--landing-fg'
+  | '--landing-fg-muted'
+  | '--landing-fg-faint'
+  | '--landing-border'
+  | '--landing-border-soft'
+  | '--landing-accent'
+  | '--landing-accent-fg'
+  | '--landing-button-primary-bg'
+  | '--landing-button-primary-fg'
+  | '--landing-button-primary-bg-hover'
+  | '--landing-button-secondary-bg'
+  | '--landing-button-secondary-fg'
+  | '--landing-button-secondary-border'
+  | '--landing-button-secondary-bg-hover'
+  | '--landing-button-tertiary-fg'
+  | '--landing-button-tertiary-bg-hover';
+
+export type LandingThemeVars = Record<LandingThemeVarName, string>;
+
+const baseTokenVars: LandingThemeVars = {
+  '--landing-bg': 'var(--background)',
+  '--landing-bg-section': 'var(--muted)',
+  '--landing-card': 'var(--card)',
+  '--landing-card-soft': 'var(--muted)',
+  '--landing-fg': 'var(--foreground)',
+  '--landing-fg-muted': 'var(--muted-foreground)',
+  '--landing-fg-faint': 'var(--muted-foreground)',
+  '--landing-border': 'var(--border)',
+  '--landing-border-soft': 'var(--border)',
+  '--landing-accent': 'var(--primary)',
+  '--landing-accent-fg': 'var(--primary-foreground)',
+  '--landing-button-primary-bg': 'var(--primary)',
+  '--landing-button-primary-fg': 'var(--primary-foreground)',
+  '--landing-button-primary-bg-hover': 'color-mix(in oklab, var(--primary) 88%, black)',
+  '--landing-button-secondary-bg': 'transparent',
+  '--landing-button-secondary-fg': 'var(--foreground)',
+  '--landing-button-secondary-border': 'var(--border)',
+  '--landing-button-secondary-bg-hover': 'var(--muted)',
+  '--landing-button-tertiary-fg': 'var(--primary)',
+  '--landing-button-tertiary-bg-hover': 'var(--muted)'
+};
+
+export const LANDING_THEME_VARS: Record<OrgLandingPageTheme, LandingThemeVars> = {
+  minimal: baseTokenVars,
+  bold: baseTokenVars,
+  classic: baseTokenVars,
+  saas: baseTokenVars,
+  tech: baseTokenVars,
+  studio: baseTokenVars,
+  corporate: baseTokenVars,
+  vibrant: baseTokenVars,
+  terminal: {
+    '--landing-bg': '#06070a',
+    '--landing-bg-section': '#0c0e13',
+    '--landing-card': '#0f1218',
+    '--landing-card-soft': '#14171f',
+    '--landing-fg': '#e9eaed',
+    '--landing-fg-muted': '#9da1ab',
+    '--landing-fg-faint': '#61656f',
+    '--landing-border': '#1c1f28',
+    '--landing-border-soft': '#161922',
+    '--landing-accent': 'var(--primary)',
+    '--landing-accent-fg': 'var(--primary-foreground)',
+    '--landing-button-primary-bg': '#f4f5f7',
+    '--landing-button-primary-fg': '#0a0b0e',
+    '--landing-button-primary-bg-hover': '#ffffff',
+    '--landing-button-secondary-bg': 'rgba(255,255,255,0.04)',
+    '--landing-button-secondary-fg': '#e9eaed',
+    '--landing-button-secondary-border': '#262a35',
+    '--landing-button-secondary-bg-hover': 'rgba(255,255,255,0.08)',
+    '--landing-button-tertiary-fg': 'var(--primary)',
+    '--landing-button-tertiary-bg-hover': 'rgba(255,255,255,0.06)'
+  },
+  editorial: {
+    '--landing-bg': '#f4f3ed',
+    '--landing-bg-section': '#ebeae3',
+    '--landing-card': '#fafaf5',
+    '--landing-card-soft': '#ecebe5',
+    '--landing-fg': '#1a1a1a',
+    '--landing-fg-muted': '#76746c',
+    '--landing-fg-faint': '#98968e',
+    '--landing-border': '#d9d8d0',
+    '--landing-border-soft': '#e3e2da',
+    '--landing-accent': '#c25237',
+    '--landing-accent-fg': '#fafaf5',
+    '--landing-button-primary-bg': '#1a1a1a',
+    '--landing-button-primary-fg': '#fafaf5',
+    '--landing-button-primary-bg-hover': '#2c2b29',
+    '--landing-button-secondary-bg': 'transparent',
+    '--landing-button-secondary-fg': '#1a1a1a',
+    '--landing-button-secondary-border': '#d9d8d0',
+    '--landing-button-secondary-bg-hover': '#ebeae3',
+    '--landing-button-tertiary-fg': '#c25237',
+    '--landing-button-tertiary-bg-hover': '#ebeae3'
+  }
+};
+
+export function themeStyle(theme: OrgLandingPageTheme): string {
+  const vars = LANDING_THEME_VARS[theme] ?? baseTokenVars;
+  return Object.entries(vars)
+    .map(([name, value]) => `${name}: ${value}`)
+    .join('; ');
+}

packages/ui/src/custom/org-landing-page/types.ts

@@ -8,7 +8,9 @@ export type OrgLandingPageTheme =
   | 'tech'
   | 'studio'
   | 'corporate'
-  | 'terminal';
+  | 'terminal'
+  | 'editorial'
+  | 'vibrant';
 
 export type CourseItem = {
   id: string;
@@ -122,6 +124,48 @@ export type LandingPageLinks = {
   cards: LandingPageLinkCard[];
 };
 
+/**
+ * Localizable UI chrome strings used across landing templates.
+ * Every field is optional; when absent, each template falls back to its own
+ * English default that fits the template's voice. Consumers (e.g. dashboard
+ * with translations) pass an object of resolved strings to override defaults
+ * in one place rather than per template.
+ */
+export interface OrgLandingPageLabels {
+  /** Eyebrow above the catalog section. Default per template (often "Catalog"). */
+  catalogEyebrow?: string;
+  /** Section heading for the catalog. Default per template (e.g. "Our Courses", "Programs starting this season."). */
+  catalogHeading?: string;
+  /** Optional description under the catalog heading. Default per template, only used where the template renders one. */
+  catalogDescription?: string;
+  /** Label for the catalog "browse all"/"view more" CTA. Default per template (e.g. "Browse all →", "View more courses"). */
+  browseCoursesLabel?: string;
+  /** Per-card CTA on a course card. Default: "Enroll" (Bold defaults to "Details"). */
+  enrollLabel?: string;
+  /** Displayed in place of the price when cost is 0. Default: "Free". */
+  freeLabel?: string;
+  /** Tag/badge prefix for a featured course (editorial hero, vibrant featured panel). Default: "Featured". */
+  featuredLabel?: string;
+  /** Filter chip label for "show all" in templates that render a filter bar. Default: "All". */
+  filterAllLabel?: string;
+  /** CTA for the featured-course block (vibrant). Default: "Start this course". */
+  startCourseLabel?: string;
+  /** Plural-aware lesson-count label. Default: `${count} lessons` / `1 lesson`. */
+  lessonsLabel?: (count: number) => string;
+  /** Plural-aware exercise-count label. Default: `${count} exercises` / `1 exercise`. */
+  exercisesLabel?: (count: number) => string;
+  /** Plural-aware enrolled-students label. Default: `${count} enrolled`. */
+  enrolledLabel?: (count: number) => string;
+  /** Eyebrow for the Resources/Links section. Default per template (typically "Resources"). */
+  resourcesEyebrow?: string;
+  /** Eyebrow for the Embed section in templates that render one (terminal). Default: "Embed". */
+  embedEyebrow?: string;
+  /** Eyebrow for the Callout section. Default per template (e.g. "Ready when you are", "Get started"). */
+  calloutEyebrow?: string;
+  /** Card footer CTA on the resources/links section. Default per template ("Learn more", "Visit"). Separate from the existing per-template `boldVisitLabel` / `classicLearnMoreLabel` on `LandingPageLinks`, which still apply to those specific templates. */
+  learnMoreLabel?: string;
+}
+
 export interface OrgLandingPageProps {
   orgName: string;
   logoUrl?: string;
@@ -145,4 +189,6 @@ export interface OrgLandingPageProps {
   callout?: LandingPageCallout;
   links?: LandingPageLinks;
   footer: OrgLandingPageFooterConfig;
+  /** Optional UI-chrome string overrides (eyebrows, CTA labels, plural-aware meta). */
+  labels?: OrgLandingPageLabels;
 }

packages/ui/src/custom/org-landing-page/vibrant.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import type { OrgLandingPageProps, CourseItem } from './types';
+  import OrgLandingPageEmbed from './embed.svelte';
+  import OrgLandingPageLinks from './links.svelte';
+  import OrgLandingPageCallout from './callout.svelte';
+  import OrgLandingPageFooter from './landing-page-footer.svelte';
+  import VibrantNav from './vibrant/nav.svelte';
+  import VibrantHero from './vibrant/hero.svelte';
+  import VibrantCourseCard from './vibrant/course-card.svelte';
+  import { themeStyle } from './theme-style';
+  import { Button } from '../../base/button';
+  import { getCourseTypeLandingMeta, defaultLessonsLabel, defaultExercisesLabel } from './landing-page-utils';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    links,
+    footer,
+    labels
+  }: OrgLandingPageProps = $props();
+
+  const featured = $derived(courses[0]);
+  const featuredTypeMeta = $derived(featured ? getCourseTypeLandingMeta(featured) : undefined);
+  const remainingCourses = $derived(courses.slice(1));
+
+  const resolvedLessonsLabel = $derived(labels?.lessonsLabel ?? defaultLessonsLabel);
+  const resolvedExercisesLabel = $derived(labels?.exercisesLabel ?? defaultExercisesLabel);
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+
+  function courseHref(course: CourseItem): string | undefined {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  }
+</script>
+
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('vibrant')}
+>
+  <main>
+    <VibrantHero {hero} {labels}>
+      {#snippet navigation()}
+        <VibrantNav {orgName} {logoUrl} {navItems} {authAction} />
+      {/snippet}
+    </VibrantHero>
+
+    {#if featured}
+      <section
+        class="ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-32"
+      >
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <div class="ui:grid ui:grid-cols-1 ui:lg:grid-cols-[1.15fr_1fr] ui:gap-12 ui:lg:gap-20 ui:items-center">
+            <div>
+              {#if featuredTypeMeta}
+                <span
+                  class="ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-full ui:px-3 ui:py-1 ui:text-[13px] ui:font-medium ui:mb-6 ui:text-[var(--landing-accent-fg)]"
+                  style="background: rgba(255,255,255,0.18);"
+                >
+                  {labels?.featuredLabel ?? 'Featured'} · {featuredTypeMeta.label}
+                </span>
+              {/if}
+              <h2
+                class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-medium ui:tracking-tight ui:m-0 ui:mb-6 ui:max-w-[520px]"
+                style="line-height: 1.05; letter-spacing: -0.025em;"
+              >
+                {featured.title}
+              </h2>
+              <p class="ui:text-lg ui:m-0 ui:mb-4 ui:max-w-[480px] ui:opacity-90" style="line-height: 1.5;">
+                {featured.description}
+              </p>
+              <div
+                class="ui:flex ui:flex-wrap ui:items-center ui:gap-x-5 ui:gap-y-2 ui:text-[14.5px] ui:mb-8 ui:opacity-85"
+              >
+                {#if featured.lessonCount}
+                  <span>{resolvedLessonsLabel(featured.lessonCount)}</span>
+                {/if}
+                {#if featured.exerciseCount}
+                  <span aria-hidden="true">·</span>
+                  <span>{resolvedExercisesLabel(featured.exerciseCount)}</span>
+                {/if}
+                {#if featured.duration}
+                  <span aria-hidden="true">·</span>
+                  <span>{featured.duration}</span>
+                {/if}
+              </div>
+              <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
+                <Button
+                  href={courseHref(featured)}
+                  disabled={disableCourseLinks}
+                  class="ui:rounded-md ui:px-6 ui:py-3 ui:text-base ui:font-medium ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:hover:opacity-90"
+                >
+                  {labels?.startCourseLabel ?? 'Start this course'}
+                </Button>
+                <span class="ui:text-base ui:font-medium ui:opacity-95">
+                  {featured.price || formatCost(featured.cost, featured.currency)}
+                </span>
+              </div>
+            </div>
+
+            <div
+              class="ui:relative ui:overflow-hidden ui:rounded-3xl ui:h-[440px] ui:md:h-[480px]"
+              style="
+                background:
+                  radial-gradient(50% 60% at 40% 40%, rgba(255,255,255,0.55) 0%, transparent 70%),
+                  radial-gradient(60% 70% at 70% 65%, rgba(255,255,255,0.32) 0%, transparent 70%),
+                  radial-gradient(40% 50% at 25% 75%, rgba(255,235,210,0.5) 0%, transparent 70%),
+                  linear-gradient(135deg, #b0a8a0 0%, #d4cabd 50%, #c8c0b5 100%);
+              "
+            >
+              <div
+                class="ui:absolute ui:left-1/2 ui:top-1/2 ui:w-[80%] ui:overflow-hidden ui:rounded-2xl ui:p-6"
+                style="
+                  transform: translate(-50%, -50%);
+                  background: #0c1320;
+                  color: #fff;
+                  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
+                "
+              >
+                <p class="ui:m-0 ui:mb-1 ui:text-[16px] ui:font-semibold">Course outline</p>
+                <p class="ui:m-0 ui:mb-5 ui:text-[13px]" style="color: #8a93a0;">
+                  Pick up where you left off — anytime.
+                </p>
+                <div class="ui:flex ui:flex-col ui:gap-2">
+                  {#each Array.from({ length: Math.min(featured.lessonCount ?? 4, 4) }) as _, idx (idx)}
+                    <div
+                      class="ui:flex ui:items-center ui:gap-3 ui:rounded-lg ui:px-3.5 ui:py-3"
+                      style="background: #131c2c;"
+                    >
+                      <span
+                        class="ui:inline-flex ui:items-center ui:justify-center ui:size-6 ui:rounded ui:text-[11px] ui:font-semibold ui:tabular-nums"
+                        style="background: #2a3548; color: #fff;"
+                      >
+                        {String(idx + 1).padStart(2, '0')}
+                      </span>
+                      <span class="ui:flex-1 ui:text-[13.5px] ui:font-medium" style="color: #fff;">
+                        {idx === 0
+                          ? 'Foundations & setup'
+                          : idx === 1
+                            ? 'Core concepts'
+                            : idx === 2
+                              ? 'Hands-on practice'
+                              : 'Capstone project'}
+                      </span>
+                      <span class="ui:text-[11.5px] ui:tabular-nums" style="color: #6c7585;">
+                        {idx === 0 ? '42 min' : idx === 1 ? '1h 12m' : idx === 2 ? '58 min' : '2h 30m'}
+                      </span>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    {#if remainingCourses.length > 0 || (!featured && courses.length > 0)}
+      {@const catalogCourses = featured ? remainingCourses : courses}
+      <section id="courses" class="ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-28 ui:bg-[var(--landing-bg)]">
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:justify-between ui:gap-6 ui:mb-12">
+            <div>
+              <p
+                class="ui:text-[13px] ui:font-medium ui:tracking-[0.08em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:m-0 ui:mb-3"
+              >
+                {labels?.catalogEyebrow ?? 'Catalog'}
+              </p>
+              <h2
+                class="ui:text-4xl ui:md:text-5xl ui:font-medium ui:tracking-tight ui:m-0 ui:text-[var(--landing-fg)] ui:max-w-2xl"
+                style="line-height: 1.05; letter-spacing: -0.025em;"
+              >
+                {labels?.catalogHeading ?? 'More courses to take next.'}
+              </h2>
+            </div>
+            {#if hasMoreCourses}
+              <Button
+                href={disableCourseLinks ? undefined : '/courses'}
+                variant="outline"
+                class="ui:rounded-md ui:px-5 ui:py-2.5 ui:font-medium ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)]"
+                disabled={disableCourseLinks}
+              >
+                {labels?.browseCoursesLabel ?? 'Browse all →'}
+              </Button>
+            {/if}
+          </div>
+
+          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-5">
+            {#each catalogCourses as course, index (course.id)}
+              <VibrantCourseCard {course} {disableCourseLinks} {labels} />
+            {/each}
+          </div>
+        </div>
+      </section>
+    {/if}
+  </main>
+
+  <OrgLandingPageLinks {links} {labels} variant="vibrant" />
+
+  <OrgLandingPageEmbed {embed} {labels} variant="vibrant" />
+
+  <OrgLandingPageCallout {callout} {labels} variant="vibrant" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
+</div>

packages/ui/src/custom/org-landing-page/vibrant/course-card.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { CourseItem, OrgLandingPageLabels } from '../types';
+  import { getCourseTypeLandingMeta } from '../landing-page-utils';
+
+  interface Props {
+    course: CourseItem;
+    disableCourseLinks?: boolean;
+    labels?: OrgLandingPageLabels;
+  }
+
+  let { course, disableCourseLinks = false, labels }: Props = $props();
+
+  const courseTypeMeta = $derived(getCourseTypeLandingMeta(course));
+
+  const href = $derived.by(() => {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  });
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+</script>
+
+<a
+  {href}
+  class="ui:group ui:flex ui:flex-col ui:h-full ui:overflow-hidden ui:rounded-[20px] ui:bg-[var(--landing-card-soft)] ui:no-underline ui:transition-colors ui:hover:bg-[var(--landing-card)] {disableCourseLinks
+    ? 'ui:cursor-default'
+    : 'ui:cursor-pointer'}"
+  aria-disabled={disableCourseLinks}
+  tabindex={disableCourseLinks ? -1 : undefined}
+>
+  {#if course.logo}
+    <div
+      class="ui:h-[180px] ui:bg-cover ui:bg-center"
+      style="background-image: url('{course.logo}');"
+      aria-hidden="true"
+    ></div>
+  {:else}
+    <div
+      class="ui:h-[180px] ui:relative ui:overflow-hidden"
+      style="
+        background:
+          radial-gradient(60% 80% at 30% 30%, color-mix(in oklab, var(--landing-accent) 40%, white) 0%, transparent 65%),
+          linear-gradient(135deg, color-mix(in oklab, var(--landing-accent) 70%, white) 0%, color-mix(in oklab, var(--landing-accent) 30%, white) 100%);
+      "
+      aria-hidden="true"
+    ></div>
+  {/if}
+
+  <div class="ui:flex ui:flex-col ui:flex-1 ui:p-7">
+    {#if courseTypeMeta}
+      <span
+        class="ui:text-[12px] ui:font-medium ui:tracking-[0.04em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:mb-3"
+      >
+        {courseTypeMeta.label}
+      </span>
+    {/if}
+    <h3
+      class="ui:text-xl ui:font-semibold ui:tracking-tight ui:m-0 ui:mb-2.5 ui:text-[var(--landing-fg)]"
+      style="letter-spacing: -0.015em;"
+    >
+      {course.title}
+    </h3>
+    <p
+      class="ui:text-[15px] ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:line-clamp-3 ui:m-0 ui:mb-5 ui:flex-1"
+    >
+      {course.description}
+    </p>
+    <div
+      class="ui:flex ui:items-center ui:justify-between ui:pt-5 ui:mt-auto"
+      style="border-top: 1px solid var(--landing-border-soft);"
+    >
+      <span class="ui:text-lg ui:font-semibold ui:text-[var(--landing-fg)]" style="letter-spacing: -0.01em;">
+        {course.price || formatCost(course.cost, course.currency)}
+      </span>
+      <span
+        class="ui:inline-flex ui:items-center ui:gap-1 ui:text-sm ui:font-medium ui:text-[var(--landing-accent)] ui:transition-transform ui:group-hover:translate-x-0.5"
+        aria-hidden="true"
+      >
+        {labels?.enrollLabel ?? 'Enroll'} <span>→</span>
+      </span>
+    </div>
+  </div>
+</a>

packages/ui/src/custom/org-landing-page/vibrant/hero.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { OrgLandingPageProps } from '../types';
+  import type { Snippet } from 'svelte';
+  import SecondaryActionButton from '../secondary-action-button.svelte';
+  import { Button } from '../../../base/button';
+  import EditableLandingSection from '../editable-section.svelte';
+
+  interface Props {
+    hero: OrgLandingPageProps['hero'];
+    labels?: OrgLandingPageProps['labels'];
+    navigation: Snippet;
+  }
+
+  let { hero, labels, navigation }: Props = $props();
+</script>
+
+{@render navigation()}
+
+<EditableLandingSection sectionKey="hero">
+  <section
+    class="ui:relative ui:px-6 ui:md:px-8 ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24 ui:bg-[var(--landing-bg)] ui:text-center"
+  >
+    <div class="ui:max-w-[1320px] ui:mx-auto">
+      <h1
+        class="ui:text-[64px] ui:md:text-[88px] ui:lg:text-[110px] ui:font-medium ui:tracking-tight ui:text-[var(--landing-fg)] ui:m-0 ui:mb-7 ui:max-w-[1100px] ui:mx-auto ui:text-balance"
+        style="line-height: 0.98; letter-spacing: -0.04em;"
+      >
+        {hero.heading}
+      </h1>
+
+      <p
+        class="ui:text-lg ui:md:text-xl ui:lg:text-[22px] ui:text-[var(--landing-fg-muted)] ui:max-w-[640px] ui:mx-auto ui:m-0 ui:mb-10"
+        style="line-height: 1.4; letter-spacing: -0.012em;"
+      >
+        {hero.subheading}
+      </p>
+
+      <div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          class="ui:rounded-md ui:px-7 ui:py-3.5 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
+        >
+          {hero.primaryAction.label}
+        </Button>
+        {#if hero.secondaryAction}
+          <SecondaryActionButton
+            href={hero.secondaryAction.href}
+            label={hero.secondaryAction.label}
+            variant="vibrant"
+          />
+        {/if}
+      </div>
+    </div>
+  </section>
+
+  <div
+    aria-hidden="true"
+    class="ui:h-[180px] ui:md:h-[220px]"
+    style="
+      background: linear-gradient(
+        to bottom,
+        var(--landing-bg) 0%,
+        var(--landing-bg) 18%,
+        color-mix(in oklab, var(--landing-accent) 12%, var(--landing-bg)) 38%,
+        color-mix(in oklab, var(--landing-accent) 40%, var(--landing-bg)) 58%,
+        color-mix(in oklab, var(--landing-accent) 78%, var(--landing-bg)) 78%,
+        var(--landing-accent) 100%
+      );
+    "
+  ></div>
+</EditableLandingSection>

packages/ui/src/custom/org-landing-page/vibrant/nav.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { NavItem } from '../types';
+  import { Button } from '../../../base/button';
+  import EditableLandingSection from '../editable-section.svelte';
+
+  interface Props {
+    orgName: string;
+    logoUrl?: string;
+    navItems: NavItem[];
+    authAction?: {
+      label: string;
+      href: string;
+    };
+  }
+
+  let { orgName, logoUrl, navItems, authAction }: Props = $props();
+</script>
+
+<EditableLandingSection sectionKey="navigation">
+  <header class="ui:sticky ui:top-0 ui:z-50 ui:bg-[var(--landing-bg)]">
+    <div class="ui:max-w-[1320px] ui:mx-auto ui:px-6 ui:md:px-8">
+      <div class="ui:flex ui:items-center ui:justify-between ui:h-[72px] ui:gap-6">
+        <div class="ui:flex ui:items-center ui:gap-8">
+          <a
+            href="/"
+            class="ui:inline-flex ui:items-center ui:gap-2 ui:font-semibold ui:text-[22px] ui:tracking-tight ui:text-[var(--landing-fg)] ui:no-underline ui:cursor-pointer"
+          >
+            {#if logoUrl}
+              <img src={logoUrl} alt={orgName} class="ui:h-7 ui:w-auto" />
+            {:else}
+              <span class="ui:relative ui:inline-block ui:size-[22px]" aria-hidden="true">
+                <span
+                  class="ui:absolute ui:left-0 ui:top-0 ui:w-[10px] ui:h-[22px] ui:rounded-[3px] ui:bg-[var(--landing-accent)]"
+                ></span>
+                <span
+                  class="ui:absolute ui:right-0 ui:top-[6px] ui:w-[10px] ui:h-[10px] ui:rounded-[3px] ui:bg-[var(--landing-accent)]"
+                ></span>
+              </span>
+            {/if}
+            <span>{orgName}</span>
+          </a>
+
+          {#if navItems.length > 0}
+            <nav class="ui:hidden ui:md:flex ui:gap-1 ui:items-center">
+              {#each navItems as item (item.href + item.label)}
+                <a
+                  href={item.href}
+                  class="ui:inline-flex ui:items-center ui:gap-1 ui:px-3.5 ui:py-2 ui:text-[15px] ui:font-medium ui:text-[var(--landing-fg)] ui:rounded-md ui:transition-colors ui:hover:bg-[var(--landing-card-soft)] ui:no-underline ui:cursor-pointer"
+                >
+                  {item.label}
+                </a>
+              {/each}
+            </nav>
+          {/if}
+        </div>
+
+        {#if authAction}
+          <div class="ui:flex ui:items-center ui:gap-4">
+            <Button
+              href={authAction.href}
+              size="sm"
+              class="ui:rounded-md ui:px-4 ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
+            >
+              {authAction.label}
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </header>
+</EditableLandingSection>

packages/ui/src/custom/widget-layouts/course-widget.svelte

@@ -16,6 +16,7 @@
 
   const cssVars = $derived(payload ? buildCssVarsFromDesign(payload.design) : '');
   const poweredByHref = $derived(payload ? buildPoweredByMarketingUrl(payload) : '');
+  const customCss = $derived(payload?.design.advanced.customCss?.trim() ?? '');
 
   $effect(() => {
     if (!payload || !rootEl) return;
@@ -27,6 +28,9 @@
   <div class="cio-widget cio-widget--empty">No widget payload provided.</div>
 {:else}
   <div bind:this={rootEl} class="cio-widget" style={cssVars} data-cio-layout={payload.layoutType}>
+    {#if customCss}
+      <svelte:element this={'style'} data-cio-widget-custom-css="">{customCss}</svelte:element>
+    {/if}
     {#if payload.layoutType === 'card_grid'}
       <CardGrid {payload} />
     {:else if payload.layoutType === 'tag_filter'}