fix: make public courses page filters responsive on mobile (#801)

* responsiveness styling

* Changed plain text to use the translation

* AI comment fixes

* Made changes to the Theme

* debug

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Tags",
       "types_title": "Typer",
       "search_placeholder": "Søg efter kurser...",
+      "clear_search": "Ryd søgning",
       "pricing_title": "Prissætning",
       "pricing_free": "Gratis",
-      "pricing_paid": "Betalt"
+      "pricing_paid": "Betalt",
+      "selected": "Valgt:",
+      "save_changes": "Gem ændringer"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Tags",
       "types_title": "Typen",
       "search_placeholder": "Kurse suchen...",
+      "clear_search": "Suche löschen",
       "pricing_title": "Preise",
       "pricing_free": "Kostenlos",
-      "pricing_paid": "Bezahlt"
+      "pricing_paid": "Bezahlt",
+      "selected": "Ausgewählt:",
+      "save_changes": "Änderungen speichern"
     }
   },
   "tags_admin": {

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

@@ -1300,7 +1300,10 @@
       "pricing_free": "Free",
       "pricing_paid": "Paid",
       "empty": "No tags available yet",
-      "search_placeholder": "Search courses..."
+      "search_placeholder": "Search courses...",
+      "clear_search": "Clear search",
+      "selected": "Selected:",
+      "save_changes": "Save Changes"
     },
     "empty": {
       "title": "No courses found",

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Etiquetas",
       "types_title": "Tipos",
       "search_placeholder": "Buscar cursos...",
+      "clear_search": "Borrar búsqueda",
       "pricing_title": "Precios",
       "pricing_free": "Gratis",
-      "pricing_paid": "Pagado"
+      "pricing_paid": "Pagado",
+      "selected": "Seleccionado:",
+      "save_changes": "Guardar cambios"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Étiquettes",
       "types_title": "Espèces",
       "search_placeholder": "Rechercher des cours...",
+      "clear_search": "Effacer la recherche",
       "pricing_title": "Tarifs",
       "pricing_free": "Gratuit",
-      "pricing_paid": "Payé"
+      "pricing_paid": "Prix",
+      "selected": "Sélectionné :",
+      "save_changes": "Enregistrer les modifications"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "टैग",
       "types_title": "प्रकार",
       "search_placeholder": "पाठ्यक्रम खोजें...",
+      "clear_search": "खोज साफ़ करें",
       "pricing_title": "मूल्य निर्धारण",
       "pricing_free": "निःशुल्क",
-      "pricing_paid": "भुगतान किया गया"
+      "pricing_paid": "भुगतान किया गया",
+      "selected": "चयनित:",
+      "save_changes": "परिवर्तन सहेजें"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Tagi",
       "types_title": "Typy",
       "search_placeholder": "Wyszukaj kursy...",
+      "clear_search": "Wyczyść szukanie",
       "pricing_title": "Ceny",
       "pricing_free": "Bezpłatny",
-      "pricing_paid": "Płatny"
+      "pricing_paid": "Płatny",
+      "selected": "Wybrane:",
+      "save_changes": "Zapisz zmiany"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Etiquetas",
       "types_title": "Tipos",
       "search_placeholder": "Pesquisar cursos...",
+      "clear_search": "Limpar pesquisa",
       "pricing_title": "Preços",
       "pricing_free": "Grátis",
-      "pricing_paid": "Pago"
+      "pricing_paid": "Pago",
+      "selected": "Selecionado:",
+      "save_changes": "Salvar alterações"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Теги",
       "types_title": "Типы",
       "search_placeholder": "Искать курсы...",
+      "clear_search": "Очистить поиск",
       "pricing_title": "Цены",
       "pricing_free": "Бесплатно",
-      "pricing_paid": "Платный"
+      "pricing_paid": "Платный",
+      "selected": "Выбрано:",
+      "save_changes": "Сохранить изменения"
     }
   },
   "tags_admin": {

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

@@ -3967,9 +3967,12 @@
       "tags_title": "Thẻ",
       "types_title": "Các loại",
       "search_placeholder": "Tìm kiếm khóa học...",
+      "clear_search": "Xóa tìm kiếm",
       "pricing_title": "Định giá",
       "pricing_free": "miễn phí",
-      "pricing_paid": "Đã trả tiền"
+      "pricing_paid": "Đã trả tiền",
+      "selected": "Đã chọn:",
+      "save_changes": "Lưu thay đổi"
     }
   },
   "tags_admin": {

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

@@ -11,20 +11,18 @@
   import { PoweredBy } from '$features/ui';
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
   import XIcon from '@lucide/svelte/icons/x';
-  import {
-    normalizeLandingPageSettings,
-    themeHeaderShellClass,
-    themeStyle,
-    themeRendersNavInsideHero
-  } from '$features/org/utils/landing-page';
+  import FilterIcon from '@lucide/svelte/icons/filter';
+  import { normalizeLandingPageSettings, themeRendersNavInsideHero } from '$features/org/utils/landing-page';
 
-  import { LandingButton, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
+  import { LandingButton, LandingThemeScope, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
 
   import { Checkbox } from '@cio/ui/base/checkbox';
   import { Input } from '@cio/ui/base/input';
   import { Empty } from '@cio/ui/custom/empty';
   import { Separator } from '@cio/ui/base/separator';
   import * as Pagination from '@cio/ui/base/pagination';
+  import * as Sheet from '@cio/ui/base/sheet';
+  import { Accordion } from '@cio/ui';
 
   let { data } = $props();
 
@@ -33,6 +31,10 @@
   let activeSearch = $derived(data.activeSearch || '');
   let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing);
   let searchInput = $state('');
+  let filterSheetOpen = $state(false);
+  type FilterSection = 'types' | 'pricing' | 'tags';
+  // let openFilterSection = $state<FilterSection | null>('types');
+  let openFilterSection = $state<FilterSection | string[] | undefined>('types');
 
   $effect(() => {
     searchInput = activeSearch;
@@ -59,8 +61,6 @@
         }
   );
 
-  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
-  const shellStyle = $derived(themeStyle(landingSettings.theme));
   const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
 
   const NavComponent = $derived(data.theme.Nav);
@@ -74,6 +74,8 @@
     image: ''
   });
 
+  const activeFilterCount = $derived(selectedTags.length + selectedTypes.length + (activePricing ? 1 : 0));
+
   async function applyFilters(next: {
     tags?: string[];
     types?: string[];
@@ -102,6 +104,42 @@
     });
   }
 
+  let isDesktop = $state(false);
+
+  let restoreSheetOnMobile = $state(false);
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(min-width: 1024px)');
+
+    function syncViewport(matches: boolean) {
+      isDesktop = matches;
+
+      if (matches) {
+        openFilterSection = ['types', 'pricing', 'tags'];
+
+        if (filterSheetOpen) {
+          restoreSheetOnMobile = true;
+          filterSheetOpen = false;
+        }
+      } else {
+        openFilterSection = 'types';
+
+        if (restoreSheetOnMobile) {
+          filterSheetOpen = true;
+          restoreSheetOnMobile = false;
+        }
+      }
+    }
+
+    syncViewport(mql.matches);
+
+    const onChange = (e: MediaQueryListEvent) => syncViewport(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  });
+
   async function goToPage(nextPage: number) {
     if (nextPage === data.pagination.page) {
       return;
@@ -203,21 +241,8 @@
   );
 </script>
 
-<PoweredBy />
-
-<main class={shellClass} style={shellStyle}>
-  {#if navInsideHero}
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
-      {#snippet navigation()}
-        <NavComponent
-          orgName={data.org.name}
-          logoUrl={data.org.avatarUrl ?? undefined}
-          navItems={landingSettings.navItems}
-          {authAction}
-        />
-      {/snippet}
-      {#snippet children()}
-        <div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
+{#snippet searchField()}
+  <div class="ui:relative ui:mx-auto ui:w-full ui:max-w-xl">
     <Input
       type="text"
       value={searchInput}
@@ -231,73 +256,36 @@
         type="button"
         onclick={clearSearch}
         class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
-              aria-label="Clear search"
+        aria-label={$t('public_courses.filters.clear_search')}
       >
         <XIcon class="ui:size-4" />
       </button>
     {/if}
   </div>
 {/snippet}
-    </HeroComponent>
-  {:else}
-    <NavComponent
-      orgName={data.org.name}
-      logoUrl={data.org.avatarUrl ?? undefined}
-      navItems={landingSettings.navItems}
-      {authAction}
-    />
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
-      {#snippet children()}
-        <div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
-          <Input
-            type="text"
-            value={searchInput}
-            oninput={(e) => onSearchInput(e.currentTarget.value)}
-            onkeydown={onSearchKeydown}
-            placeholder={$t('public_courses.filters.search_placeholder')}
-            class="ui:pr-8"
-          />
-          {#if searchInput}
-            <button
-              type="button"
-              onclick={clearSearch}
-              class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
-              aria-label="Clear search"
-            >
-              <XIcon class="ui:size-4" />
-            </button>
-          {/if}
-        </div>
-      {/snippet}
-    </HeroComponent>
-  {/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">
-      <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
-        {$t('public_courses.clear_filters')}
-      </LandingButton>
-    </div>
-
-    <div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
-      <aside
-        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 flex max-h-[calc(100dvh-2rem)] flex-col self-start rounded-lg border"
-      >
+{#snippet filtersContent(showHeader = true)}
+  {#if showHeader}
     <div class="p-4 pb-3">
       <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
       <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
     </div>
-
     <Separator class="ui:bg-[var(--landing-border)]" />
+  {/if}
 
-        <div class="flex-1 overflow-y-auto p-4">
-          <div class="space-y-5">
-            <div class="space-y-2">
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.types_title')}</h3>
-              <div class="space-y-2">
+  <div class="px-2 pb-2">
+    {#key isDesktop}
+      <Accordion.Root type={isDesktop ? 'multiple' : 'single'} bind:value={openFilterSection as never} class="w-full">
+        <!-- TYPES -->
+        <Accordion.Item value="types" class="ui:border-border">
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+            {$t('public_courses.filters.types_title')}
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <div class="space-y-2 px-1 pb-2">
               {#each COURSE_TYPES as courseType (courseType.value)}
                 <label
-                    class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
                 >
                   <Checkbox
                     checked={selectedTypes.includes(courseType.value)}
@@ -307,16 +295,19 @@
                 </label>
               {/each}
             </div>
-            </div>
+          </Accordion.Content>
+        </Accordion.Item>
 
-            <Separator class="ui:bg-[var(--landing-border)]" />
-
-            <div class="space-y-2">
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.pricing_title')}</h3>
-              <div class="space-y-2">
+        <!-- PRICING -->
+        <Accordion.Item value="pricing" class="ui:border-border">
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+            {$t('public_courses.filters.pricing_title')}
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <div class="space-y-2 px-1 pb-2">
               {#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
                 <label
-                    class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
                 >
                   <Checkbox
                     checked={activePricing === option.value}
@@ -327,29 +318,30 @@
                 </label>
               {/each}
             </div>
-            </div>
+          </Accordion.Content>
+        </Accordion.Item>
 
+        <!-- TAGS -->
         {#if displayTagGroups.length > 0}
-              <Separator class="ui:bg-[var(--landing-border)]" />
-
-              <div class="space-y-2">
-                <h3 class="text-sm font-semibold">{$t('public_courses.filters.tags_title')}</h3>
-              </div>
-
-              <div class="space-y-5">
+          <Accordion.Item value="tags" class="ui:border-border">
+            <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+              {$t('public_courses.filters.tags_title')}
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <div class="space-y-5 px-1 pb-2">
                 {#each displayTagGroups as group (group.id)}
                   <div class="space-y-2">
                     <div class="space-y-1">
                       <h3 class="text-sm font-semibold">{group.name}</h3>
                       {#if group.description}
-                        <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
+                        <p class="ui:text-muted-foreground text-xs">{group.description}</p>
                       {/if}
                     </div>
 
                     <div class="space-y-2">
                       {#each group.tags as tag (tag.id)}
                         <label
-                          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"
+                          class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
                         >
                           <div class="flex items-center gap-2">
                             <Checkbox
@@ -363,19 +355,91 @@
                             ></span>
                             <span class="text-sm">{tag.name}</span>
                           </div>
-                          <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                          <span class="ui:text-muted-foreground text-xs">{tag.courseCount}</span>
                         </label>
                       {/each}
                     </div>
                   </div>
                 {/each}
               </div>
+            </Accordion.Content>
+          </Accordion.Item>
         {/if}
+      </Accordion.Root>
+    {/key}
   </div>
+{/snippet}
+
+<PoweredBy />
+
+<LandingThemeScope theme={landingSettings.theme} class="ui:font-sans">
+  <main>
+    {#if navInsideHero}
+      <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
+        {#snippet navigation()}
+          <NavComponent
+            orgName={data.org.name}
+            logoUrl={data.org.avatarUrl ?? undefined}
+            navItems={landingSettings.navItems}
+            {authAction}
+          />
+        {/snippet}
+        {#snippet children()}
+          {@render searchField()}
+        {/snippet}
+      </HeroComponent>
+    {:else}
+      <NavComponent
+        orgName={data.org.name}
+        logoUrl={data.org.avatarUrl ?? undefined}
+        navItems={landingSettings.navItems}
+        {authAction}
+      />
+      <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
+        {#snippet children()}
+          {@render searchField()}
+        {/snippet}
+      </HeroComponent>
+    {/if}
+
+    <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
+      <!-- Actions row -->
+      <div class="mb-6 flex items-center justify-between gap-3">
+        <!-- Mobile only -->
+        <div class="lg:hidden">
+          <LandingButton variant="secondary" onclick={() => (filterSheetOpen = true)}>
+            <FilterIcon class="ui:size-4" />
+            {$t('public_courses.filters.title')}
+            {#if activeFilterCount > 0}
+              <span
+                class="ui:bg-primary ui:text-primary-foreground ml-1 inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs"
+              >
+                {activeFilterCount}
+              </span>
+            {/if}
+          </LandingButton>
+        </div>
+
+        <div class="ml-auto">
+          <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
+            {$t('public_courses.clear_filters')}
+          </LandingButton>
+        </div>
+      </div>
+
+      <!-- Layout: 1 col mobile, sidebar + content on desktop -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
+        <!-- Desktop sidebar -->
+        <aside
+          class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 hidden max-h-[calc(100dvh-2rem)] flex-col self-start overflow-hidden rounded-lg border lg:flex"
+        >
+          <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+            {@render filtersContent(true)}
           </div>
         </aside>
 
-      <div class="ui:@container space-y-4">
+        <!-- Course list -->
+        <div class="ui:@container min-w-0 space-y-4">
           {#if data.courses.length === 0}
             <Empty
               icon={LibraryBigIcon}
@@ -428,6 +492,40 @@
       </div>
     </section>
 
+    <!-- Mobile filter sheet -->
+    <Sheet.Root bind:open={filterSheetOpen}>
+      <Sheet.Content
+        side="right"
+        portalProps={{ disabled: true }}
+        class="ui:flex ui:w-full ui:flex-col ui:p-0 ui:sm:max-w-md"
+      >
+        <Sheet.Header class="ui:border-b ui:px-4 ui:py-4">
+          <Sheet.Title>{$t('public_courses.filters.title')}</Sheet.Title>
+          <Sheet.Description>
+            {$t('public_courses.filters.selected')}
+            <span
+              class="ui:bg-muted ui:text-foreground ml-1 inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium"
+            >
+              {activeFilterCount}
+            </span>
+          </Sheet.Description>
+        </Sheet.Header>
+
+        <div class="ui:min-h-0 ui:flex-1 ui:overflow-y-auto">
+          {@render filtersContent(false)}
+        </div>
+
+        <div class="ui:flex ui:gap-3 ui:border-t ui:p-4">
+          <LandingButton variant="secondary" class="ui:flex-1" onclick={clearFilters}>
+            {$t('public_courses.clear_filters')}
+          </LandingButton>
+          <LandingButton class="ui:flex-1" onclick={() => (filterSheetOpen = false)}
+            >{$t('public_courses.filters.save_changes')}</LandingButton
+          >
+        </div>
+      </Sheet.Content>
+    </Sheet.Root>
+
     <OrgLandingPageFooter
       orgName={data.org.name}
       logoUrl={data.org.avatarUrl ?? undefined}
@@ -435,3 +533,4 @@
       variant={landingSettings.theme}
     />
   </main>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('bold')}
->
+<LandingThemeScope theme="bold" class="ui:font-sans">
   <BoldNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
@@ -59,4 +56,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
-</div>
+</LandingThemeScope>

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

@@ -10,7 +10,7 @@
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { DotPattern } from '../../animation/dot-pattern';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -30,10 +30,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('bold')}
->
+<LandingThemeScope theme="bold" class="ui:font-sans">
   <BoldNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
@@ -78,4 +75,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="bold" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('classic')}
->
+<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
   <ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
@@ -59,4 +56,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="classic" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import ClassicCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg-section)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('classic')}
->
+<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
   <ClassicNav {orgName} {logoUrl} {navItems} {authAction} />
 
   <main>
@@ -79,4 +76,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="classic" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="classic" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('corporate')}
->
+<LandingThemeScope theme="corporate" class="ui:font-sans">
   <main>
     <CorporateHero {orgName} hero={heroProps}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="corporate" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import CorporateCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('corporate')}
->
+<LandingThemeScope theme="corporate" class="ui:font-sans">
   <main>
     <CorporateHero {orgName} {hero}>
       {#snippet navigation()}
@@ -85,4 +82,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="corporate" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="corporate" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('editorial')}
->
+<LandingThemeScope theme="editorial" class="ui:font-sans">
   <main>
     <EditorialHero hero={heroProps} courses={[]}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="editorial" />
-</div>
+</LandingThemeScope>

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

@@ -8,7 +8,7 @@
   import EditorialHero from './hero.svelte';
   import EditorialCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { Button } from '../../../base/button';
   import { getCourseTypeLandingMeta } from '../landing-page-utils';
 
@@ -87,10 +87,7 @@
   }
 </script>
 
-<div
-  class="ui:min-h-screen ui:font-sans ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
-  style={themeStyle('editorial')}
->
+<LandingThemeScope theme="editorial" class="ui:font-sans">
   <main>
     <EditorialHero {hero} {courses} {labels}>
       {#snippet navigation()}
@@ -185,4 +182,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="editorial" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="editorial" />
-</div>
+</LandingThemeScope>

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

@@ -69,6 +69,7 @@ export {
   courseCard as VibrantLandingCourseCard
 } from './vibrant';
 
+export { default as LandingThemeScope } from './landing-theme-scope.svelte';
 export { default as OrgLandingPageCoursesEmpty } from './courses-empty.svelte';
 export { default as LandingButton } from './landing-button.svelte';
 export { default as OrgLandingPageEmbed } from './embed.svelte';

packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { OrgLandingPageTheme } from './types';
+  import { themeStyle } from './theme-style';
+  import { cn } from '../../tools';
+
+  let {
+    theme,
+    class: className = '',
+    children
+  }: {
+    theme: OrgLandingPageTheme;
+    class?: string;
+    children: Snippet;
+  } = $props();
+</script>
+
+<div
+  class={cn('ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]', className)}
+  style={themeStyle(theme)}
+>
+  {@render children()}
+</div>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('minimal')}
->
+<LandingThemeScope theme="minimal" class="ui:font-sans">
   <main>
     <MinimalHero hero={heroProps}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="minimal" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import MinimalCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('minimal')}
->
+<LandingThemeScope theme="minimal" class="ui:font-sans">
   <main>
     <MinimalHero {hero}>
       {#snippet navigation()}
@@ -76,4 +73,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="minimal" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="minimal" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('saas')}
->
+<LandingThemeScope theme="saas" class="ui:font-sans">
   <main>
     <SaasHero hero={heroProps}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import SaasCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,8 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="saas-root ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('saas')}
->
+<LandingThemeScope theme="saas" class="ui:font-sans">
+  <div class="saas-root">
     <div class="frame">
       <SaasHero {hero}>
         {#snippet navigation()}
@@ -81,6 +79,11 @@
         </div>
       </section>
 
+      {#if links && links.cards.length > 0}
+        <div class="plus-row"></div>
+        <OrgLandingPageLinks {links} {labels} variant="saas" />
+      {/if}
+
     {#if links && links.enabled !== false && links.cards.length > 0}
       <div class="plus-row"></div>
       <OrgLandingPageLinks {links} {labels} variant="saas" />
@@ -96,9 +99,7 @@
       <OrgLandingPageCallout {callout} {labels} variant="saas" />
     {/if}
   </div>
-
-  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
-</div>
+</LandingThemeScope>
 
 <style>
   /* ============ FRAME (vertical lines + dotted bg) ============ */

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('studio')}
->
+<LandingThemeScope theme="studio" class="ui:font-sans">
   <main>
     <StudioHero hero={heroProps} courses={[]}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="studio" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import StudioCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('studio')}
->
+<LandingThemeScope theme="studio" class="ui:font-sans">
   <main>
     <StudioHero {hero} {courses}>
       {#snippet navigation()}
@@ -86,4 +83,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="studio" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="studio" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('tech')}
->
+<LandingThemeScope theme="tech" class="ui:font-sans">
   <main>
     <TechHero hero={heroProps}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import TechCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
 
   let {
     orgName,
@@ -29,10 +29,7 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('tech')}
->
+<LandingThemeScope theme="tech" class="ui:font-sans">
   <main>
     <TechHero {hero}>
       {#snippet navigation()}
@@ -85,4 +82,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="tech" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('terminal')}
->
+<LandingThemeScope theme="terminal" class="ui:font-sans">
   <main>
     <TerminalHero {orgName} hero={heroProps} courses={[]}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="terminal" />
-</div>
+</LandingThemeScope>

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

@@ -9,7 +9,7 @@
   import TerminalCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { getCourseTypeLandingMeta } from '../landing-page-utils';
 
   let {
@@ -72,10 +72,7 @@
   }
 </script>
 
-<div
-  class="ui:min-h-screen ui:font-sans ui:w-full ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)]"
-  style={themeStyle('terminal')}
->
+<LandingThemeScope theme="terminal" class="ui:w-full ui:font-sans">
   <main>
     <TerminalHero {orgName} {hero} {courses}>
       {#snippet navigation()}
@@ -167,4 +164,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="terminal" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="terminal" />
-</div>
+</LandingThemeScope>

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

@@ -11,7 +11,7 @@
   import CourseInstructor from '../course-instructor.svelte';
   import CourseReviews from '../course-reviews.svelte';
   import CoursePricing from '../course-pricing.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
 
   let {
@@ -37,10 +37,7 @@
   );
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('vibrant')}
->
+<LandingThemeScope theme="vibrant" class="ui:font-sans">
   <main>
     <VibrantHero hero={heroProps}>
       {#snippet navigation()}
@@ -61,4 +58,4 @@
   </main>
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
-</div>
+</LandingThemeScope>

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

@@ -8,7 +8,7 @@
   import VibrantHero from './hero.svelte';
   import VibrantCourseCard from './course-card.svelte';
   import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
-  import { themeStyle } from '../theme-style';
+  import LandingThemeScope from '../landing-theme-scope.svelte';
   import { Button } from '../../../base/button';
   import { getCourseTypeLandingMeta, defaultLessonsLabel, defaultExercisesLabel } from '../landing-page-utils';
 
@@ -47,10 +47,7 @@
   }
 </script>
 
-<div
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('vibrant')}
->
+<LandingThemeScope theme="vibrant" class="ui:font-sans">
   <main>
     <VibrantHero {hero} {labels}>
       {#snippet navigation()}
@@ -223,4 +220,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="vibrant" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
-</div>
+</LandingThemeScope>