fix(landing): rename catalog 'Programs' labels to 'Courses'

The org landing templates used 'Program(s)' in catalog headings, the
'view all' link, and the studio/terminal hero counters. That collided
with the app's actual Programs feature and confused users into thinking
a landing-page Program meant an app Program. Default copy now says
'Courses'; renamed the programsCount var to coursesCount to match.
This commit is contained in:
Rotimi Best
2026-06-16 23:25:11 +01:00
parent 58aea2ab15
commit 3f4e00bde8
9 changed files with 21 additions and 21 deletions
@@ -39,7 +39,7 @@
<section class="ui:py-10 ui:px-6 ui:lg:px-8 ui:max-w-7xl ui:mx-auto">
<div class="ui:text-center ui:mb-8">
<h2 class="ui:text-3xl ui:font-bold ui:text-[var(--landing-fg)]">
{labels?.catalogHeading ?? 'Featured Programs'}
{labels?.catalogHeading ?? 'Featured Courses'}
</h2>
<div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-[var(--landing-border)] ui:mx-auto"></div>
</div>
@@ -49,7 +49,7 @@
{labels?.catalogEyebrow ?? 'Catalog'}
</p>
<h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0 ui:max-w-xl">
{labels?.catalogHeading ?? 'Programs your teams are taking'}
{labels?.catalogHeading ?? 'Courses your teams are taking'}
</h2>
</div>
{#if hasMoreCourses}
@@ -108,11 +108,11 @@
class="ui:text-3xl ui:md:text-[40px] ui:font-medium ui:tracking-tight ui:m-0 ui:leading-[1.1] ui:text-[var(--landing-fg)]"
style="letter-spacing: -0.025em;"
>
{labels?.catalogHeading ?? 'Programs starting this season.'}
{labels?.catalogHeading ?? 'Courses starting this season.'}
</h2>
<p class="ui:text-base ui:mt-3 ui:max-w-xl ui:m-0 ui:text-[var(--landing-fg-muted)]">
{labels?.catalogDescription ??
'Cohort-based and self-paced — every program ends with a reviewed project and a certificate of completion.'}
'Cohort-based and self-paced — every course ends with a reviewed project and a certificate of completion.'}
</p>
</div>
{#if hasMoreCourses}
@@ -53,7 +53,7 @@
{labels?.catalogEyebrow ?? 'Catalog'}
</p>
<h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
{labels?.catalogHeading ?? 'Featured programs.'}
{labels?.catalogHeading ?? 'Featured courses.'}
</h2>
</div>
{#if hasMoreCourses}
@@ -14,11 +14,11 @@
let { hero, courses = [], navigation, showActions = true }: Props = $props();
const programsCount = $derived(courses.length);
const coursesCount = $derived(courses.length);
const statusLabel = $derived(
programsCount > 0
? `Now in session · ${programsCount} ${programsCount === 1 ? 'program' : 'programs'} running`
coursesCount > 0
? `Now in session · ${coursesCount} ${coursesCount === 1 ? 'course' : 'courses'} running`
: 'Studio opening soon'
);
@@ -48,7 +48,7 @@
{labels?.catalogEyebrow ?? 'Catalog'}
</p>
<h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0">
{labels?.catalogHeading ?? 'Programs your team can actually finish.'}
{labels?.catalogHeading ?? 'Courses your team can actually finish.'}
</h2>
</div>
{#if hasMoreCourses}
@@ -14,7 +14,7 @@
let { orgName = '', hero, courses = [], navigation, showActions = true }: Props = $props();
const programsCount = $derived(courses.length);
const coursesCount = $derived(courses.length);
const learnersCount = $derived(courses.reduce((sum, course) => sum + (course.totalStudents ?? 0), 0));
const tracksCount = $derived(new Set(courses.map((course) => course.type).filter(Boolean)).size);
@@ -118,7 +118,7 @@
{hero.subheading}
</p>
{#if programsCount > 0}
{#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)]"
style="
@@ -129,8 +129,8 @@
>
<span style="color: var(--landing-accent);">&gt;</span>
<span
><span class="ui:font-medium ui:text-[var(--landing-fg)]">{programsCount}</span>
{programsCount === 1 ? 'program' : 'programs'} running</span
><span class="ui:font-medium ui:text-[var(--landing-fg)]">{coursesCount}</span>
{coursesCount === 1 ? 'course' : 'courses'} running</span
>
{#if learnersCount > 0}
<span class="ui:inline-block ui:w-px ui:h-3 ui:bg-[var(--landing-border)]"></span>
@@ -195,8 +195,8 @@
{orgSlug}/main · catalog
</span>
<span class="ui:font-mono ui:text-[11px] ui:text-[var(--landing-fg-faint)]">
{programsCount}
{programsCount === 1 ? 'program' : 'programs'}
{coursesCount}
{coursesCount === 1 ? 'course' : 'courses'}
</span>
</div>
@@ -206,12 +206,12 @@
style="background: rgba(255,255,255,0.02); border: 1px solid var(--landing-border-soft);"
>
<span style="color: var(--landing-accent);">&gt;</span>
<span>list programs --org {orgSlug}</span>
<span>list courses --org {orgSlug}</span>
</div>
<div class="ui:py-1 ui:text-[12px] ui:text-[var(--landing-fg-faint)]">
● Loaded {programsCount}
{programsCount === 1 ? 'program' : 'programs'}
● Loaded {coursesCount}
{coursesCount === 1 ? 'course' : 'courses'}
</div>
<div class="ui:mt-2 ui:flex ui:flex-col">
@@ -101,7 +101,7 @@
<h2
class="ui:text-4xl ui:lg:text-[40px] ui:font-semibold ui:tracking-tight ui:leading-[1.08] ui:m-0 ui:mb-3 ui:max-w-[700px] ui:text-[var(--landing-fg)]"
>
{labels?.catalogHeading ?? 'Programs your team can actually finish.'}
{labels?.catalogHeading ?? 'Courses your team can actually finish.'}
</h2>
<p class="ui:text-[15px] ui:max-w-xl ui:m-0 ui:mb-8 ui:text-[var(--landing-fg-muted)]">
@@ -147,7 +147,7 @@
disabled={disableCourseLinks}
class="ui:rounded-full ui:px-5 ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-white/5"
>
{labels?.browseCoursesLabel ?? 'View all programs →'}
{labels?.browseCoursesLabel ?? 'View all courses →'}
</Button>
</div>
{/if}
@@ -148,7 +148,7 @@ export type LandingPageLinks = {
export interface OrgLandingPageLabels {
/** Eyebrow above the catalog section. Default per template (often "Catalog"). */
catalogEyebrow?: string;
/** Section heading for the catalog. Default per template (e.g. "Our Courses", "Programs starting this season."). */
/** Section heading for the catalog. Default per template (e.g. "Our Courses", "Courses starting this season."). */
catalogHeading?: string;
/** Optional description under the catalog heading. Default per template, only used where the template renders one. */
catalogDescription?: string;