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 <[email protected]>

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 {
+  import FilterIcon from '@lucide/svelte/icons/filter';
-    normalizeLandingPageSettings,
+  import { normalizeLandingPageSettings, themeRendersNavInsideHero } from '$features/org/utils/landing-page';
-    themeHeaderShellClass,
-    themeStyle,
-    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,153 +241,107 @@
   );
 </script>
 
-<PoweredBy />
+{#snippet searchField()}
-
+  <div class="ui:relative ui:mx-auto ui:w-full ui:max-w-xl">
-<main class={shellClass} style={shellStyle}>
+    <Input
-  {#if navInsideHero}
+      type="text"
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
+      value={searchInput}
-      {#snippet navigation()}
+      oninput={(e) => onSearchInput(e.currentTarget.value)}
-        <NavComponent
+      onkeydown={onSearchKeydown}
-          orgName={data.org.name}
+      placeholder={$t('public_courses.filters.search_placeholder')}
-          logoUrl={data.org.avatarUrl ?? undefined}
+      class="ui:pr-8"
-          navItems={landingSettings.navItems}
-          {authAction}
-        />
-      {/snippet}
-      {#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>
-  {: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}>
+    {#if searchInput}
-      {#snippet children()}
+      <button
-        <div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
+        type="button"
-          <Input
+        onclick={clearSearch}
-            type="text"
+        class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
-            value={searchInput}
+        aria-label={$t('public_courses.filters.clear_search')}
-            oninput={(e) => onSearchInput(e.currentTarget.value)}
+      >
-            onkeydown={onSearchKeydown}
+        <XIcon class="ui:size-4" />
-            placeholder={$t('public_courses.filters.search_placeholder')}
+      </button>
-            class="ui:pr-8"
+    {/if}
-          />
+  </div>
-          {#if searchInput}
+{/snippet}
-            <button
+
-              type="button"
+{#snippet filtersContent(showHeader = true)}
-              onclick={clearSearch}
+  {#if showHeader}
-              class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
+    <div class="p-4 pb-3">
-              aria-label="Clear search"
+      <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>
-              <XIcon class="ui:size-4" />
+    </div>
-            </button>
+    <Separator class="ui:bg-[var(--landing-border)]" />
-          {/if}
-        </div>
-      {/snippet}
-    </HeroComponent>
   {/if}
 
-  <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
+  <div class="px-2 pb-2">
-    <div class="mb-6 flex items-center justify-end gap-4">
+    {#key isDesktop}
-      <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
+      <Accordion.Root type={isDesktop ? 'multiple' : 'single'} bind:value={openFilterSection as never} class="w-full">
-        {$t('public_courses.clear_filters')}
+        <!-- TYPES -->
-      </LandingButton>
+        <Accordion.Item value="types" class="ui:border-border">
-    </div>
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
-
+            {$t('public_courses.filters.types_title')}
-    <div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
+          </Accordion.Trigger>
-      <aside
+          <Accordion.Content>
-        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"
+            <div class="space-y-2 px-1 pb-2">
-      >
+              {#each COURSE_TYPES as courseType (courseType.value)}
-        <div class="p-4 pb-3">
+                <label
-          <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
-          <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
+                >
-        </div>
+                  <Checkbox
-
+                    checked={selectedTypes.includes(courseType.value)}
-        <Separator class="ui:bg-[var(--landing-border)]" />
+                    onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
-
+                  />
-        <div class="flex-1 overflow-y-auto p-4">
+                  <span class="text-sm">{courseType.label}</span>
-          <div class="space-y-5">
+                </label>
-            <div class="space-y-2">
+              {/each}
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.types_title')}</h3>
-              <div class="space-y-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"
-                  >
-                    <Checkbox
-                      checked={selectedTypes.includes(courseType.value)}
-                      onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
-                    />
-                    <span class="text-sm">{courseType.label}</span>
-                  </label>
-                {/each}
-              </div>
             </div>
+          </Accordion.Content>
+        </Accordion.Item>
 
-            <Separator class="ui:bg-[var(--landing-border)]" />
+        <!-- PRICING -->
-
+        <Accordion.Item value="pricing" class="ui:border-border">
-            <div class="space-y-2">
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.pricing_title')}</h3>
+            {$t('public_courses.filters.pricing_title')}
-              <div class="space-y-2">
+          </Accordion.Trigger>
-                {#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
+          <Accordion.Content>
-                  <label
+            <div class="space-y-2 px-1 pb-2">
-                    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"
+              {#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
-                  >
+                <label
-                    <Checkbox
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
-                      checked={activePricing === option.value}
+                >
-                      onCheckedChange={(checked) =>
+                  <Checkbox
-                        applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
+                    checked={activePricing === option.value}
-                    />
+                    onCheckedChange={(checked) =>
-                    <span class="text-sm">{option.label}</span>
+                      applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
-                  </label>
+                  />
-                {/each}
+                  <span class="text-sm">{option.label}</span>
-              </div>
+                </label>
+              {/each}
             </div>
+          </Accordion.Content>
+        </Accordion.Item>
 
-            {#if displayTagGroups.length > 0}
+        <!-- TAGS -->
-              <Separator class="ui:bg-[var(--landing-border)]" />
+        {#if displayTagGroups.length > 0}
-
+          <Accordion.Item value="tags" class="ui:border-border">
-              <div class="space-y-2">
+            <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
-                <h3 class="text-sm font-semibold">{$t('public_courses.filters.tags_title')}</h3>
+              {$t('public_courses.filters.tags_title')}
-              </div>
+            </Accordion.Trigger>
-
+            <Accordion.Content>
-              <div class="space-y-5">
+              <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,75 +355,182 @@
                             ></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>
-            {/if}
+            </Accordion.Content>
-          </div>
+          </Accordion.Item>
-        </div>
-      </aside>
-
-      <div class="ui:@container space-y-4">
-        {#if data.courses.length === 0}
-          <Empty
-            icon={LibraryBigIcon}
-            title={$t('public_courses.empty.title')}
-            description={$t('public_courses.empty.description')}
-            variant="page"
-          />
-        {:else}
-          <div class={courseGridClass}>
-            {#each data.courses as course, index (course.id)}
-              <CourseCardComponent {course} {index} />
-            {/each}
-          </div>
-
-          {#if data.pagination.totalPages > 1}
-            <Pagination.Root
-              count={data.pagination.total}
-              perPage={data.pagination.perPage}
-              page={data.pagination.page}
-              onPageChange={goToPage}
-              class="mt-8"
-            >
-              {#snippet children({ pages, currentPage })}
-                <Pagination.Content>
-                  <Pagination.Item>
-                    <Pagination.PrevButton />
-                  </Pagination.Item>
-                  {#each pages as pageItem (pageItem.key)}
-                    {#if pageItem.type === 'ellipsis'}
-                      <Pagination.Item>
-                        <Pagination.Ellipsis />
-                      </Pagination.Item>
-                    {:else}
-                      <Pagination.Item>
-                        <Pagination.Link page={pageItem} isActive={currentPage === pageItem.value}>
-                          {pageItem.value}
-                        </Pagination.Link>
-                      </Pagination.Item>
-                    {/if}
-                  {/each}
-                  <Pagination.Item>
-                    <Pagination.NextButton />
-                  </Pagination.Item>
-                </Pagination.Content>
-              {/snippet}
-            </Pagination.Root>
-          {/if}
         {/if}
-      </div>
+      </Accordion.Root>
-    </div>
+    {/key}
-  </section>
+  </div>
+{/snippet}
 
-  <OrgLandingPageFooter
+<PoweredBy />
-    orgName={data.org.name}
+
-    logoUrl={data.org.avatarUrl ?? undefined}
+<LandingThemeScope theme={landingSettings.theme} class="ui:font-sans">
-    footer={landingSettings.footer}
+  <main>
-    variant={landingSettings.theme}
+    {#if navInsideHero}
-  />
+      <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
-</main>
+        {#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>
+
+        <!-- Course list -->
+        <div class="ui:@container min-w-0 space-y-4">
+          {#if data.courses.length === 0}
+            <Empty
+              icon={LibraryBigIcon}
+              title={$t('public_courses.empty.title')}
+              description={$t('public_courses.empty.description')}
+              variant="page"
+            />
+          {:else}
+            <div class={courseGridClass}>
+              {#each data.courses as course, index (course.id)}
+                <CourseCardComponent {course} {index} />
+              {/each}
+            </div>
+
+            {#if data.pagination.totalPages > 1}
+              <Pagination.Root
+                count={data.pagination.total}
+                perPage={data.pagination.perPage}
+                page={data.pagination.page}
+                onPageChange={goToPage}
+                class="mt-8"
+              >
+                {#snippet children({ pages, currentPage })}
+                  <Pagination.Content>
+                    <Pagination.Item>
+                      <Pagination.PrevButton />
+                    </Pagination.Item>
+                    {#each pages as pageItem (pageItem.key)}
+                      {#if pageItem.type === 'ellipsis'}
+                        <Pagination.Item>
+                          <Pagination.Ellipsis />
+                        </Pagination.Item>
+                      {:else}
+                        <Pagination.Item>
+                          <Pagination.Link page={pageItem} isActive={currentPage === pageItem.value}>
+                            {pageItem.value}
+                          </Pagination.Link>
+                        </Pagination.Item>
+                      {/if}
+                    {/each}
+                    <Pagination.Item>
+                      <Pagination.NextButton />
+                    </Pagination.Item>
+                  </Pagination.Content>
+                {/snippet}
+              </Pagination.Root>
+            {/if}
+          {/if}
+        </div>
+      </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}
+      footer={landingSettings.footer}
+      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
+<LandingThemeScope theme="bold" class="ui:font-sans">
-  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>
@@ -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
+<LandingThemeScope theme="bold" class="ui:font-sans">
-  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>
@@ -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
+<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
-  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>
@@ -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
+<LandingThemeScope theme="classic" class="ui:bg-[var(--landing-bg-section)] ui:font-sans">
-  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>
@@ -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
+<LandingThemeScope theme="corporate" class="ui:font-sans">
-  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={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
+<LandingThemeScope theme="corporate" class="ui:font-sans">
-  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()}
@@ -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
+<LandingThemeScope theme="editorial" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('editorial')}
->
   <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
+<LandingThemeScope theme="editorial" class="ui:font-sans">
-  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()}
@@ -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
+<LandingThemeScope theme="minimal" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('minimal')}
->
   <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
+<LandingThemeScope theme="minimal" class="ui:font-sans">
-  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()}
@@ -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
+<LandingThemeScope theme="saas" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('saas')}
->
   <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,57 +29,60 @@
   }: OrgLandingPageProps = $props();
 </script>
 
-<div
+<LandingThemeScope theme="saas" class="ui:font-sans">
-  class="saas-root ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  <div class="saas-root">
-  style={themeStyle('saas')}
+    <div class="frame">
->
+      <SaasHero {hero}>
-  <div class="frame">
+        {#snippet navigation()}
-    <SaasHero {hero}>
+          <SaasNav {orgName} {logoUrl} {navItems} {authAction} />
-      {#snippet navigation()}
+        {/snippet}
-        <SaasNav {orgName} {logoUrl} {navItems} {authAction} />
+      </SaasHero>
-      {/snippet}
-    </SaasHero>
 
-    <div class="plus-row"></div>
+      <div class="plus-row"></div>
 
-    <section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
+      <section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
-      <div class="ui:max-w-[1180px] ui:mx-auto">
+        <div class="ui:max-w-[1180px] ui:mx-auto">
-        <div
+          <div
-          class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-8 ui:md:mb-12"
+            class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-8 ui:md:mb-12"
-        >
+          >
-          <div>
+            <div>
-            <p
+              <p
-              class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
+                class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
-            >
+              >
-              {labels?.catalogEyebrow ?? 'Catalog'}
+                {labels?.catalogEyebrow ?? 'Catalog'}
-            </p>
+              </p>
-            <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
+              <h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
-              {labels?.catalogHeading ?? 'Featured courses.'}
+                {labels?.catalogHeading ?? 'Featured courses.'}
-            </h2>
+              </h2>
+            </div>
+            {#if hasMoreCourses && courses.length > 0}
+              <Button
+                href={disableCourseLinks ? undefined : '/courses'}
+                variant="outline"
+                class="ui:rounded-full ui:self-start ui:md:self-auto"
+                disabled={disableCourseLinks}
+              >
+                {labels?.browseCoursesLabel ?? 'Browse catalog'}
+              </Button>
+            {/if}
           </div>
-          {#if hasMoreCourses && courses.length > 0}
+
-            <Button
+          {#if coursesLoaded && courses.length === 0}
-              href={disableCourseLinks ? undefined : '/courses'}
+            <OrgLandingPageCoursesEmpty {labels} />
-              variant="outline"
+          {:else}
-              class="ui:rounded-full ui:self-start ui:md:self-auto"
+            <div class="course-grid ui:relative">
-              disabled={disableCourseLinks}
+              {#each courses as course, index (course.id)}
-            >
+                <SaasCourseCard {course} {disableCourseLinks} {labels} />
-              {labels?.browseCoursesLabel ?? 'Browse catalog'}
+              {/each}
-            </Button>
+            </div>
           {/if}
         </div>
+      </section>
 
-        {#if coursesLoaded && courses.length === 0}
+      {#if links && links.cards.length > 0}
-          <OrgLandingPageCoursesEmpty {labels} />
+        <div class="plus-row"></div>
-        {:else}
+        <OrgLandingPageLinks {links} {labels} variant="saas" />
-          <div class="course-grid ui:relative">
+      {/if}
-            {#each courses as course, index (course.id)}
-              <SaasCourseCard {course} {disableCourseLinks} {labels} />
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </section>
 
     {#if links && links.enabled !== false && links.cards.length > 0}
       <div class="plus-row"></div>
@@ -96,9 +99,7 @@
       <OrgLandingPageCallout {callout} {labels} variant="saas" />
     {/if}
   </div>
-
+</LandingThemeScope>
-  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
-</div>
 
 <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
+<LandingThemeScope theme="studio" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('studio')}
->
   <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
+<LandingThemeScope theme="studio" class="ui:font-sans">
-  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()}
@@ -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
+<LandingThemeScope theme="tech" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('tech')}
->
   <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
+<LandingThemeScope theme="tech" class="ui:font-sans">
-  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()}
@@ -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
+<LandingThemeScope theme="terminal" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('terminal')}
->
   <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
+<LandingThemeScope theme="terminal" class="ui:w-full ui:font-sans">
-  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}>
       {#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
+<LandingThemeScope theme="vibrant" class="ui:font-sans">
-  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
-  style={themeStyle('vibrant')}
->
   <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
+<LandingThemeScope theme="vibrant" class="ui:font-sans">
-  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()}
@@ -223,4 +220,4 @@
   <OrgLandingPageCallout {callout} {labels} variant="vibrant" />
 
   <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
-</div>
+</LandingThemeScope>