feat(courses): add type, search, and pricing filters to org landing page

- Add Types section to the Filter sidebar with all 4 course types
- Add full-text search input centered in the hero (title + description)
- Add Pricing section (Free / Paid) based on course cost
- Compact hero prop across all 10 themes to halve vertical padding
- Children snippet support in all hero themes for the search input
- All filters are URL-driven (?types=, ?search=, ?tags=, ?pricing=)
- Full-stack: validation schema, DB queries, service, API route, server load, UI

apps/api/src/routes/organization/organization.ts

@@ -383,15 +383,21 @@ export const organizationRouter = new Hono()
    */
   .get('/courses/public', zValidator('query', ZGetCoursesBySiteName), async (c) => {
     try {
-      const { siteName, tags, page, limit } = c.req.valid('query');
+      const { siteName, tags, types, search, pricing, page, limit } = c.req.valid('query');
-      const tagSlugs = tags
+      const splitParam = (param: string | undefined) =>
-        ?.split(',')
+        param
-        .map((value) => value.trim())
+          ?.split(',')
-        .filter(Boolean);
+          .map((v) => v.trim())
+          .filter(Boolean);
+      const tagSlugs = splitParam(tags);
+      const courseTypes = splitParam(types);
       const pagination = page !== undefined || limit !== undefined ? { page, limit } : undefined;
       const courses = await getPublicCourses(
         siteName,
-        tagSlugs && tagSlugs.length > 0 ? tagSlugs : undefined,
+        tagSlugs?.length ? tagSlugs : undefined,
+        courseTypes?.length ? courseTypes : undefined,
+        search || undefined,
+        pricing || undefined,
         pagination
       );
 

apps/api/src/services/organization.ts

@@ -256,6 +256,9 @@ export async function removeAudienceMember(orgId: string, memberId: number, remo
 export async function getPublicCourses(
   siteName: string,
   tagSlugs?: string[],
+  courseTypes?: string[],
+  search?: string,
+  pricing?: 'free' | 'paid',
   pagination?: { page?: number; limit?: number }
 ) {
   try {
@@ -286,8 +289,22 @@ export async function getPublicCourses(
       }
     }
 
-    const totalCourses = await countPublishedCoursesBySiteName(siteName, filteredCourseIds);
+    const totalCourses = await countPublishedCoursesBySiteName(
-    const courses = await getPublishedCoursesBySiteName(siteName, filteredCourseIds, limit, offset);
+      siteName,
+      filteredCourseIds,
+      courseTypes,
+      search,
+      pricing
+    );
+    const courses = await getPublishedCoursesBySiteName(
+      siteName,
+      filteredCourseIds,
+      courseTypes,
+      search,
+      pricing,
+      limit,
+      offset
+    );
     const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
       org.id,
       courses.map((course) => course.id)

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Filtrer efter tags",
       "help": "Vælg et eller flere tags for at filtrere kurser",
-      "empty": "Ingen tags tilgængelige endnu"
+      "empty": "Ingen tags tilgængelige endnu",
+      "tags_title": "Tags",
+      "types_title": "Typer",
+      "search_placeholder": "Søg efter kurser...",
+      "pricing_title": "Prissætning",
+      "pricing_free": "Gratis",
+      "pricing_paid": "Betalt"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Nach Tags filtern",
       "help": "Wählen Sie einen oder mehrere Tags aus, um Kurse zu filtern",
-      "empty": "Noch keine Tags verfügbar"
+      "empty": "Noch keine Tags verfügbar",
+      "tags_title": "Schlagworte",
+      "types_title": "Typen",
+      "search_placeholder": "Kurse suchen...",
+      "pricing_title": "Preise",
+      "pricing_free": "Kostenlos",
+      "pricing_paid": "Bezahlt"
     }
   },
   "tags_admin": {

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

@@ -1218,9 +1218,15 @@
     "subtitle": "Browse all published courses",
     "clear_filters": "Clear Filters",
     "filters": {
-      "title": "Filter by Tags",
+      "title": "Filter",
-      "help": "Select one or more tags to filter courses",
+      "help": "Filter courses by type, tags, or search by name",
-      "empty": "No tags available yet"
+      "tags_title": "Tags",
+      "types_title": "Types",
+      "pricing_title": "Pricing",
+      "pricing_free": "Free",
+      "pricing_paid": "Paid",
+      "empty": "No tags available yet",
+      "search_placeholder": "Search courses..."
     },
     "empty": {
       "title": "No courses found",

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Filtrar por etiquetas",
       "help": "Seleccione una o más etiquetas para filtrar cursos",
-      "empty": "Aún no hay etiquetas disponibles"
+      "empty": "Aún no hay etiquetas disponibles",
+      "tags_title": "Etiquetas",
+      "types_title": "Tipos",
+      "search_placeholder": "Buscar cursos...",
+      "pricing_title": "Precios",
+      "pricing_free": "Gratis",
+      "pricing_paid": "Pagado"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Filtrer par balises",
       "help": "Sélectionnez une ou plusieurs balises pour filtrer les cours",
-      "empty": "Aucun tag disponible pour l'instant"
+      "empty": "Aucun tag disponible pour l'instant",
+      "tags_title": "Balises",
+      "types_title": "Espèces",
+      "search_placeholder": "Rechercher des cours...",
+      "pricing_title": "Tarifs",
+      "pricing_free": "Gratuit",
+      "pricing_paid": "Payé"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "टैग द्वारा फ़िल्टर करें",
       "help": "पाठ्यक्रमों को फ़िल्टर करने के लिए एक या अधिक टैग चुनें",
-      "empty": "अभी तक कोई टैग उपलब्ध नहीं है"
+      "empty": "अभी तक कोई टैग उपलब्ध नहीं है",
+      "tags_title": "टैग",
+      "types_title": "प्रकार",
+      "search_placeholder": "पाठ्यक्रम खोजें...",
+      "pricing_title": "मूल्य निर्धारण",
+      "pricing_free": "निःशुल्क",
+      "pricing_paid": "भुगतान किया गया"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Filtruj według tagów",
       "help": "Wybierz jeden lub więcej tagów, aby filtrować kursy",
-      "empty": "Brak dostępnych tagów"
+      "empty": "Brak dostępnych tagów",
+      "tags_title": "Tagi",
+      "types_title": "Typy",
+      "search_placeholder": "Wyszukaj kursy...",
+      "pricing_title": "Ceny",
+      "pricing_free": "Bezpłatny",
+      "pricing_paid": "Płatny"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Filtrar por tags",
       "help": "Selecione uma ou mais tags para filtrar cursos",
-      "empty": "Nenhuma tag disponível ainda"
+      "empty": "Nenhuma tag disponível ainda",
+      "tags_title": "Etiquetas",
+      "types_title": "Tipos",
+      "search_placeholder": "Pesquisar cursos...",
+      "pricing_title": "Preços",
+      "pricing_free": "Grátis",
+      "pricing_paid": "Pago"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Фильтровать по тегам",
       "help": "Выберите один или несколько тегов, чтобы отфильтровать курсы.",
-      "empty": "Тегов пока нет"
+      "empty": "Тегов пока нет",
+      "tags_title": "Теги",
+      "types_title": "Типы",
+      "search_placeholder": "Искать курсы...",
+      "pricing_title": "Цены",
+      "pricing_free": "Бесплатно",
+      "pricing_paid": "Платный"
     }
   },
   "tags_admin": {

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

@@ -3741,7 +3741,13 @@
     "filters": {
       "title": "Lọc theo thẻ",
       "help": "Chọn một hoặc nhiều thẻ để lọc các khóa học",
-      "empty": "Chưa có thẻ nào"
+      "empty": "Chưa có thẻ nào",
+      "tags_title": "Thẻ",
+      "types_title": "Các loại",
+      "search_placeholder": "Tìm kiếm khóa học...",
+      "pricing_title": "Định giá",
+      "pricing_free": "miễn phí",
+      "pricing_paid": "Đã trả tiền"
     }
   },
   "tags_admin": {

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

@@ -32,6 +32,14 @@ export const load = async ({ parent, url }) => {
   const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
   const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;
 
+  const normalizedTypes = normalizeTagsParam(url.searchParams.get('types'));
+  const normalizedTypesQuery = normalizedTypes.length > 0 ? normalizedTypes.join(',') : undefined;
+
+  const activeSearch = url.searchParams.get('search')?.trim() ?? '';
+
+  const rawPricing = url.searchParams.get('pricing');
+  const activePricing = rawPricing === 'free' || rawPricing === 'paid' ? rawPricing : undefined;
+
   const requestedPage = Number(url.searchParams.get('page'));
   const currentPage = Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
 
@@ -41,7 +49,10 @@ export const load = async ({ parent, url }) => {
         query: {
           siteName,
           page: String(currentPage),
-          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
+          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {}),
+          ...(normalizedTypesQuery ? { types: normalizedTypesQuery } : {}),
+          ...(activeSearch ? { search: activeSearch } : {}),
+          ...(activePricing ? { pricing: activePricing } : {})
         }
       })
     ),
@@ -89,6 +100,9 @@ export const load = async ({ parent, url }) => {
     courses: courseData.courses,
     tagGroups: tagsResult.ok ? tagsResult.body.data : [],
     activeTags: normalizedTags,
+    activeTypes: normalizedTypes,
+    activeSearch,
+    activePricing,
     pagination: {
       page: courseData.page,
       perPage: courseData.limit,

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

@@ -10,6 +10,7 @@
 
   import { PoweredBy } from '$features/ui';
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
+  import XIcon from '@lucide/svelte/icons/x';
   import {
     normalizeLandingPageSettings,
     themeHeaderShellClass,
@@ -20,6 +21,7 @@
   import { LandingButton, 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';
@@ -27,6 +29,21 @@
   let { data } = $props();
 
   let selectedTags = $derived<string[]>(data.activeTags || []);
+  let selectedTypes = $derived<string[]>(data.activeTypes || []);
+  let activeSearch = $derived(data.activeSearch || '');
+  let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing);
+  let searchInput = $state('');
+
+  $effect(() => {
+    searchInput = activeSearch;
+  });
+
+  const COURSE_TYPES = [
+    { value: 'SELF_PACED', label: t.get('analytics.popularTypes.types.SELF_PACED') },
+    { value: 'LIVE_CLASS', label: t.get('analytics.popularTypes.types.LIVE_CLASS') },
+    { value: 'COMPLIANCE', label: t.get('analytics.popularTypes.types.COMPLIANCE') },
+    { value: 'PUBLIC', label: t.get('analytics.popularTypes.types.PUBLIC') }
+  ] as const;
 
   const landingSettings = $derived(normalizeLandingPageSettings(data.org.landingpage));
 
@@ -57,15 +74,22 @@
     image: ''
   });
 
-  async function applyTagFilters(nextTags: string[]) {
+  async function applyFilters(next: {
+    tags?: string[];
+    types?: string[];
+    search?: string;
+    pricing?: 'free' | 'paid' | null;
+  }) {
     const params = new SvelteURLSearchParams(page.url.searchParams);
+    const nextTags = next.tags ?? selectedTags;
+    const nextTypes = next.types ?? selectedTypes;
+    const nextSearch = next.search !== undefined ? next.search : activeSearch;
+    const nextPricing = 'pricing' in next ? next.pricing : activePricing;
 
-    if (nextTags.length > 0) {
+    nextTags.length ? params.set('tags', nextTags.join(',')) : params.delete('tags');
-      params.set('tags', nextTags.join(','));
+    nextTypes.length ? params.set('types', nextTypes.join(',')) : params.delete('types');
-    } else {
+    nextSearch ? params.set('search', nextSearch) : params.delete('search');
-      params.delete('tags');
+    nextPricing ? params.set('pricing', nextPricing) : params.delete('pricing');
-    }
-
     params.delete('page');
 
     const query = params.toString();
@@ -105,15 +129,47 @@
       next.delete(tagSlug);
     }
 
-    applyTagFilters(Array.from(next));
+    applyFilters({ tags: Array.from(next) });
+  }
+
+  function toggleType(typeValue: string, checked: boolean) {
+    const next = new SvelteSet(selectedTypes);
+    if (checked) {
+      next.add(typeValue);
+    } else {
+      next.delete(typeValue);
+    }
+
+    applyFilters({ types: Array.from(next) });
   }
 
   function clearFilters() {
-    if (selectedTags.length === 0) {
+    if (selectedTags.length === 0 && selectedTypes.length === 0 && !activeSearch && !activePricing) {
       return;
     }
 
-    applyTagFilters([]);
+    searchInput = '';
+    applyFilters({ tags: [], types: [], search: '', pricing: null });
+  }
+
+  let searchDebounce: ReturnType<typeof setTimeout>;
+  function onSearchInput(value: string) {
+    searchInput = value;
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => applyFilters({ search: value }), 300);
+  }
+
+  function onSearchKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      clearTimeout(searchDebounce);
+      applyFilters({ search: searchInput });
+    }
+  }
+
+  function clearSearch() {
+    searchInput = '';
+    clearTimeout(searchDebounce);
+    applyFilters({ search: '' });
   }
 
   function isTagSelected(tagSlug: string) {
@@ -141,13 +197,17 @@
       tags: tagsByGroupId[group.id] ?? []
     }));
   });
+
+  const hasActiveFilters = $derived(
+    selectedTags.length > 0 || selectedTypes.length > 0 || !!activeSearch || !!activePricing
+  );
 </script>
 
 <PoweredBy />
 
 <main class={shellClass} style={shellStyle}>
   {#if navInsideHero}
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
       {#snippet navigation()}
         <NavComponent
           orgName={data.org.name}
@@ -156,6 +216,28 @@
           {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
@@ -164,12 +246,35 @@
       navItems={landingSettings.navItems}
       {authAction}
     />
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
+    <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={selectedTags.length === 0}>
+      <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
         {$t('public_courses.clear_filters')}
       </LandingButton>
     </div>
@@ -186,44 +291,87 @@
         <Separator class="ui:bg-[var(--landing-border)]" />
 
         <div class="flex-1 overflow-y-auto p-4">
-          {#if displayTagGroups.length === 0}
+          <div class="space-y-5">
-            <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
+            <div class="space-y-2">
-          {:else}
+              <h3 class="text-sm font-semibold">{$t('public_courses.filters.types_title')}</h3>
-            <div class="space-y-5">
+              <div class="space-y-2">
-              {#each displayTagGroups as group (group.id)}
+                {#each COURSE_TYPES as courseType (courseType.value)}
-                <div class="space-y-2">
+                  <label
-                  <div class="space-y-1">
+                    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"
-                    <h3 class="text-sm font-semibold">{group.name}</h3>
+                  >
-                    {#if group.description}
+                    <Checkbox
-                      <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
+                      checked={selectedTypes.includes(courseType.value)}
-                    {/if}
+                      onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
-                  </div>
+                    />
-
+                    <span class="text-sm">{courseType.label}</span>
-                  <div class="space-y-2">
+                  </label>
-                    {#each group.tags as tag (tag.id)}
+                {/each}
-                      <label
+              </div>
-                        class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
-                      >
-                        <div class="flex items-center gap-2">
-                          <Checkbox
-                            checked={isTagSelected(tag.slug)}
-                            onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
-                          />
-                          <span
-                            class="inline-block h-2.5 w-2.5 rounded-full border"
-                            style={`background-color: ${tag.color}`}
-                            aria-hidden="true"
-                          ></span>
-                          <span class="text-sm">{tag.name}</span>
-                        </div>
-                        <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
-              {/each}
             </div>
-          {/if}
+
+            <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">
+                {#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"
+                  >
+                    <Checkbox
+                      checked={activePricing === option.value}
+                      onCheckedChange={(checked) =>
+                        applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
+                    />
+                    <span class="text-sm">{option.label}</span>
+                  </label>
+                {/each}
+              </div>
+            </div>
+
+            {#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">
+                {#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>
+                      {/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"
+                        >
+                          <div class="flex items-center gap-2">
+                            <Checkbox
+                              checked={isTagSelected(tag.slug)}
+                              onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
+                            />
+                            <span
+                              class="inline-block h-2.5 w-2.5 rounded-full border"
+                              style={`background-color: ${tag.color}`}
+                              aria-hidden="true"
+                            ></span>
+                            <span class="text-sm">{tag.name}</span>
+                          </div>
+                          <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                        </label>
+                      {/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
         </div>
       </aside>
 

packages/db/src/queries/course/course.ts

@@ -11,7 +11,7 @@ import {
   TNewCourseSection,
   TProfile
 } from '@db/types';
-import { and, count, desc, eq, ilike, inArray, isNotNull, isNull, or, sql } from 'drizzle-orm';
+import { and, count, desc, eq, gt, ilike, inArray, isNotNull, isNull, or, sql } from 'drizzle-orm';
 
 import { ROLE } from '@cio/utils/constants';
 import { db, type DbOrTxClient } from '@db/drizzle';
@@ -59,6 +59,9 @@ export interface TStudentCourse extends TBaseCourse {
 export const getPublishedCoursesBySiteName = async (
   siteName: string,
   courseIds?: string[],
+  courseTypes?: string[],
+  search?: string,
+  pricing?: 'free' | 'paid',
   limit?: number,
   offset?: number
 ): Promise<TBaseCourse[]> => {
@@ -77,6 +80,21 @@ export const getPublishedCoursesBySiteName = async (
       conditions.push(inArray(schema.course.id, courseIds));
     }
 
+    if (courseTypes && courseTypes.length > 0) {
+      conditions.push(inArray(schema.course.type, courseTypes as (typeof schema.courseType.enumValues)[number][]));
+    }
+
+    if (search) {
+      const pattern = `%${search}%`;
+      conditions.push(or(ilike(schema.course.title, pattern), ilike(schema.course.description, pattern))!);
+    }
+
+    if (pricing === 'free') {
+      conditions.push(eq(schema.course.cost, 0));
+    } else if (pricing === 'paid') {
+      conditions.push(gt(schema.course.cost, 0));
+    }
+
     const exerciseCountSql = sql<number>`(
       SELECT COUNT(*)::bigint
       FROM ${schema.exercise} as ex
@@ -127,7 +145,13 @@ export const getPublishedCoursesBySiteName = async (
   }
 };
 
-export const countPublishedCoursesBySiteName = async (siteName: string, courseIds?: string[]): Promise<number> => {
+export const countPublishedCoursesBySiteName = async (
+  siteName: string,
+  courseIds?: string[],
+  courseTypes?: string[],
+  search?: string,
+  pricing?: 'free' | 'paid'
+): Promise<number> => {
   try {
     if (courseIds && courseIds.length === 0) {
       return 0;
@@ -143,6 +167,21 @@ export const countPublishedCoursesBySiteName = async (siteName: string, courseId
       conditions.push(inArray(schema.course.id, courseIds));
     }
 
+    if (courseTypes && courseTypes.length > 0) {
+      conditions.push(inArray(schema.course.type, courseTypes as (typeof schema.courseType.enumValues)[number][]));
+    }
+
+    if (search) {
+      const pattern = `%${search}%`;
+      conditions.push(or(ilike(schema.course.title, pattern), ilike(schema.course.description, pattern))!);
+    }
+
+    if (pricing === 'free') {
+      conditions.push(eq(schema.course.cost, 0));
+    } else if (pricing === 'paid') {
+      conditions.push(gt(schema.course.cost, 0));
+    }
+
     const [result] = await db
       .select({
         total: count(schema.course.id)

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { OrgLandingPageProps } from '../types';
+  import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
   import EditableLandingSection from '../editable-section.svelte';
@@ -7,16 +8,25 @@
   interface Props {
     hero: OrgLandingPageProps['hero'];
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, showActions = true }: Props = $props();
+  let { hero, showActions = true, compact = false, children }: Props = $props();
 </script>
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:py-10 ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center">
+  <section
+    class="{compact
+      ? 'ui:py-5'
+      : 'ui:py-10'} ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center"
+  >
     <div>
       <h1 class="ui:text-5xl ui:lg:text-7xl ui:font-black ui:leading-[1.1] ui:tracking-tighter">{hero.heading}</h1>
       <p class="ui:text-xl ui:text-[var(--landing-fg-muted)] ui:mb-10 ui:leading-relaxed">{hero.subheading}</p>
+      {#if children}
+        <div class="ui:mt-6">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-wrap ui:gap-4">
           <Button

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { OrgLandingPageProps } from '../types';
+  import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
   import { BlurIn } from '../../animation/blurin';
@@ -9,14 +10,18 @@
   interface Props {
     hero: OrgLandingPageProps['hero'];
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, showActions = true }: Props = $props();
+  let { hero, showActions = true, compact = false, children }: Props = $props();
 </script>
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
+    class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:overflow-hidden {compact
+      ? 'ui:py-12 ui:sm:py-16'
+      : 'ui:py-24 ui:sm:py-32'} ui:px-6 ui:lg:px-8"
   >
     {#if hero.image}
       <div class="ui:absolute ui:inset-0 ui:opacity-10">
@@ -31,6 +36,9 @@
         {hero.heading}
       </BlurIn>
       <p class="ui:text-lg ui:sm:text-xl ui:text-[var(--landing-bg)]/80 ui:mb-10">{hero.subheading}</p>
+      {#if children}
+        <div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
           <Button

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

@@ -10,9 +10,11 @@
     hero: OrgLandingPageProps['hero'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { orgName, hero, navigation, showActions = true }: Props = $props();
+  let { orgName, hero, navigation, showActions = true, compact = false, children }: Props = $props();
 
   const stats = $derived(hero.stats ?? []);
 </script>
@@ -20,7 +22,9 @@
 {@render navigation()}
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:px-6 ui:pt-12 ui:pb-24 ui:md:pt-16 ui:md:pb-28">
+  <section
+    class="ui:px-6 {compact ? 'ui:pt-6 ui:pb-12 ui:md:pt-8 ui:md:pb-14' : 'ui:pt-12 ui:pb-24 ui:md:pt-16 ui:md:pb-28'}"
+  >
     <div class="ui:max-w-[1120px] ui:mx-auto">
       <div class="ui:flex ui:items-center ui:gap-4 ui:pb-5 ui:mb-10 ui:border-b ui:border-[var(--landing-border)]">
         <span class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-[var(--landing-fg)]">
@@ -48,6 +52,9 @@
             {hero.subheading}
           </p>
 
+          {#if children}
+            <div class="ui:mt-6">{@render children()}</div>
+          {/if}
           {#if showActions}
             <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
               <Button

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

@@ -12,9 +12,11 @@
     labels?: OrgLandingPageProps['labels'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, courses = [], labels, navigation, showActions = true }: Props = $props();
+  let { hero, courses = [], labels, navigation, showActions = true, compact = false, children }: Props = $props();
 
   const featured = $derived(courses[0]);
   const featuredTypeMeta = $derived(featured ? getCourseTypeLandingMeta(featured) : undefined);
@@ -38,7 +40,11 @@
 {@render navigation()}
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:px-6 ui:md:px-8 ui:pt-16 ui:md:pt-20 ui:pb-12 ui:bg-[var(--landing-bg)]">
+  <section
+    class="ui:px-6 ui:md:px-8 {compact
+      ? 'ui:pt-8 ui:md:pt-10 ui:pb-6'
+      : 'ui:pt-16 ui:md:pt-20 ui:pb-12'} ui:bg-[var(--landing-bg)]"
+  >
     <div class="ui:max-w-[1240px] ui:mx-auto">
       <div
         class="ui:grid ui:grid-cols-1 ui:gap-12 ui:lg:gap-14 ui:items-start {featured
@@ -72,6 +78,9 @@
             {hero.subheading}
           </p>
 
+          {#if children}
+            <div class="ui:mt-6 {featured ? '' : 'ui:flex ui:justify-center'}">{@render children()}</div>
+          {/if}
           {#if showActions}
             <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2.5 {featured ? '' : 'ui:justify-center'}">
               <Button

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

@@ -11,9 +11,11 @@
     hero: OrgLandingPageProps['hero'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, navigation, showActions = true }: Props = $props();
+  let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
 
   const heroGradientBackground = `
     radial-gradient(
@@ -32,7 +34,7 @@
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:overflow-hidden ui:px-4 ui:pt-4 ui:pb-16 ui:md:pb-24"
+    class="ui:relative ui:overflow-hidden ui:px-4 ui:pt-4 {compact ? 'ui:pb-8 ui:md:pb-12' : 'ui:pb-16 ui:md:pb-24'}"
     style={`background: ${heroGradientBackground};`}
   >
     <DotPattern class="ui:opacity-[0.08]" />
@@ -40,7 +42,7 @@
       {@render navigation()}
     </div>
 
-    <div class="ui:relative ui:py-20 ui:text-center ui:max-w-4xl ui:mx-auto">
+    <div class="ui:relative {compact ? 'ui:py-10' : 'ui:py-20'} ui:text-center ui:max-w-4xl ui:mx-auto">
       <h1 class="ui:text-5xl ui:md:text-6xl ui:font-semibold ui:tracking-tight ui:mb-6">{hero.heading}</h1>
       <ShinnyText
         shimmerWidth={120}
@@ -48,6 +50,9 @@
       >
         {hero.subheading}
       </ShinnyText>
+      {#if children}
+        <div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
           <Button

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

@@ -9,18 +9,24 @@
     hero: OrgLandingPageProps['hero'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, navigation, showActions = true }: Props = $props();
+  let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
 </script>
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:relative ui:px-6 ui:pt-4 ui:pb-20 ui:md:pb-24">
+  <section class="ui:relative ui:px-6 ui:pt-4 {compact ? 'ui:pb-10 ui:md:pb-12' : 'ui:pb-20 ui:md:pb-24'}">
     <div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:sticky ui:top-4 ui:z-50">
       {@render navigation()}
     </div>
 
-    <div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:pt-16 ui:md:pt-20 ui:text-center">
+    <div
+      class="ui:relative ui:max-w-[1180px] ui:mx-auto {compact
+        ? 'ui:pt-8 ui:md:pt-10'
+        : 'ui:pt-16 ui:md:pt-20'} ui:text-center"
+    >
       <h1
         class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
       >
@@ -33,6 +39,9 @@
         {hero.subheading}
       </p>
 
+      {#if children}
+        <div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
           <Button

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

@@ -10,9 +10,11 @@
     courses: OrgLandingPageProps['courses'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, courses = [], navigation, showActions = true }: Props = $props();
+  let { hero, courses = [], navigation, showActions = true, compact = false, children }: Props = $props();
 
   const coursesCount = $derived(courses.length);
 
@@ -29,7 +31,11 @@
 {@render navigation()}
 
 <EditableLandingSection sectionKey="hero">
-  <section class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-20 ui:pb-20 ui:md:pt-24 ui:md:pb-24">
+  <section
+    class="ui:relative ui:overflow-hidden ui:px-6 {compact
+      ? 'ui:pt-10 ui:pb-10 ui:md:pt-12 ui:md:pb-12'
+      : 'ui:pt-20 ui:pb-20 ui:md:pt-24 ui:md:pb-24'}"
+  >
     <div
       class="ui:pointer-events-none ui:absolute ui:-top-32 ui:-left-24 ui:h-[520px] ui:w-[520px] ui:rounded-full ui:opacity-60 ui:blur-3xl"
       style="background: radial-gradient(circle, color-mix(in oklab, var(--landing-accent) 35%, transparent) 0%, transparent 70%);"
@@ -59,6 +65,9 @@
         {hero.subheading}
       </p>
 
+      {#if children}
+        <div class="ui:mt-6">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2">
           <Button

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

@@ -9,14 +9,18 @@
     hero: OrgLandingPageProps['hero'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, navigation, showActions = true }: Props = $props();
+  let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
 </script>
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20"
+    class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 {compact
+      ? 'ui:pb-10'
+      : 'ui:pb-20'}"
   >
     <!-- subtle grid overlay -->
     <div
@@ -30,7 +34,9 @@
     </div>
 
     <div
-      class="ui:relative ui:max-w-[1280px] ui:mx-auto ui:py-16 ui:lg:py-24 ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
+      class="ui:relative ui:max-w-[1280px] ui:mx-auto {compact
+        ? 'ui:py-8 ui:lg:py-12'
+        : 'ui:py-16 ui:lg:py-24'} ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
     >
       <div>
         <p
@@ -46,6 +52,9 @@
         >
           {hero.subheading}
         </p>
+        {#if children}
+          <div class="ui:mt-6">{@render children()}</div>
+        {/if}
         {#if showActions}
           <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
             <Button

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

@@ -10,9 +10,11 @@
     courses: OrgLandingPageProps['courses'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { orgName = '', hero, courses = [], navigation, showActions = true }: Props = $props();
+  let { orgName = '', hero, courses = [], navigation, showActions = true, compact = false, children }: Props = $props();
 
   const coursesCount = $derived(courses.length);
   const learnersCount = $derived(courses.reduce((sum, course) => sum + (course.totalStudents ?? 0), 0));
@@ -63,7 +65,9 @@
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20 ui:bg-[var(--landing-bg)]"
+    class="ui:relative ui:overflow-hidden ui:px-6 {compact
+      ? 'ui:pt-8 ui:pb-8 ui:md:pt-10 ui:md:pb-10'
+      : 'ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20'} ui:bg-[var(--landing-bg)]"
   >
     <div
       class="ui:pointer-events-none ui:absolute ui:inset-x-0 ui:-top-32 ui:h-[680px] ui:opacity-90"
@@ -118,6 +122,9 @@
         {hero.subheading}
       </p>
 
+      {#if children}
+        <div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
+      {/if}
       {#if coursesCount > 0}
         <span
           class="ui:inline-flex ui:items-center ui:gap-3 ui:px-4 ui:py-2 ui:rounded-full ui:font-mono ui:text-[13px] ui:text-[var(--landing-fg-muted)]"

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

@@ -10,16 +10,20 @@
     labels?: OrgLandingPageProps['labels'];
     navigation: Snippet;
     showActions?: boolean;
+    compact?: boolean;
+    children?: Snippet;
   }
 
-  let { hero, labels, navigation, showActions = true }: Props = $props();
+  let { hero, labels, navigation, showActions = true, compact = false, children }: Props = $props();
 </script>
 
 {@render navigation()}
 
 <EditableLandingSection sectionKey="hero">
   <section
-    class="ui:relative ui:px-6 ui:md:px-8 ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24 ui:bg-[var(--landing-bg)] ui:text-center"
+    class="ui:relative ui:px-6 ui:md:px-8 {compact
+      ? 'ui:pt-10 ui:md:pt-12 ui:pb-10 ui:md:pb-12'
+      : 'ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24'} ui:bg-[var(--landing-bg)] ui:text-center"
   >
     <div class="ui:max-w-[1320px] ui:mx-auto">
       <h1
@@ -36,6 +40,9 @@
         {hero.subheading}
       </p>
 
+      {#if children}
+        <div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
+      {/if}
       {#if showActions}
         <div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
           <Button

packages/utils/src/validation/organization/organization.ts

@@ -19,6 +19,9 @@ export type TGetOrganizations = z.infer<typeof ZGetOrganizations>;
 export const ZGetCoursesBySiteName = z.object({
   siteName: z.string().min(1),
   tags: z.string().optional(),
+  types: z.string().optional(),
+  search: z.string().trim().optional(),
+  pricing: z.enum(['free', 'paid']).optional(),
   page: z.coerce.number().int().min(1).optional(),
   limit: z.coerce.number().int().min(1).max(100).optional()
 });