fix(dashboard): restore paid course payment modal on landing page (#737)

* fix(dashboard): restore paid course payment modal on landing page

Wire the existing PaymentModal back into the theme-based course landing
page. Paid course CTAs now open the name/email modal and redirect to the
configured payment link instead of navigating to the blocked enroll route.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): reset payment modal on close without effect loop

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* docs: add Svelte 5 rerender and effect loop guidance to AGENTS.md

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): avoid double-applying discount on course landing pricing

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

AGENTS.md

@@ -320,6 +320,69 @@ In Svelte 5, the built-in `Set` and `Map` classes are **not** reactive. Use `Sve
 </script>
 ```
 
+### Avoiding Svelte 5 rerender and `$effect` loops
+
+`$effect` re-runs when any reactive value it **reads** changes. Writing state inside an effect can retrigger it and cause infinite loops, redundant work, or flicker. Prefer explicit event handlers and bindings over effect-driven syncing.
+
+**Do not reset UI state in an effect tied to a steady condition** (e.g. “whenever `open` is false”). While the condition stays true, the effect keeps running and rewriting state:
+
+```svelte
+// ❌ don't — resets on every run while closed; can loop with bound children
+$effect(() => {
+  if (open) return;
+
+  step = STEPS.STEP_1;
+  fields = { fullname: '', email: '' };
+  errors = { fullname: '', email: '' };
+});
+```
+
+**Reset on transitions** — when a dialog closes, a route changes, or the user submits — not on every render where a flag is false:
+
+```svelte
+// ✅ do — reset only when the dialog actually closes
+function resetForm() {
+  step = STEPS.STEP_1;
+  fields.fullname = '';
+  fields.email = '';
+  errors.fullname = '';
+  errors.email = '';
+}
+
+function handleOpenChange(isOpen: boolean) {
+  open = isOpen;
+
+  if (!isOpen) {
+    resetForm();
+  }
+}
+```
+
+```svelte
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+```
+
+**Prefer `bind:` over `$effect` for keeping two sources in sync.** If a control can bind directly to a store or `$state` field, use that instead of reading one value in an effect and writing another (see **Svelte store binding** above).
+
+**When resetting bound form state, mutate properties in place** instead of replacing the whole object. Reassigning `fields = { ... }` breaks `bind:value={fields.fullname}` and can trigger extra updates downstream:
+
+```svelte
+// ❌ don't
+fields = { fullname: '', email: '' };
+
+// ✅ do
+fields.fullname = '';
+fields.email = '';
+```
+
+**Other common pitfalls:**
+
+- **Effect writes what it reads** — e.g. `$effect(() => { count = count + 1 })` loops forever.
+- **Effect mirrors props into local state** — use `$bindable`, `bind:`, or derive a value; only copy props when you need a draft the user can cancel.
+- **Effect fetches or navigates on every dependency tick** — gate with a guard, run on submit/route enter, or track “already loaded” so work runs once per intent.
+
+When cleanup or reset must follow a specific lifecycle moment, use the matching hook: `onOpenChange` for dialogs, submit/success handlers for forms, `onMount` / load functions for one-time setup.
+
 ### Server-Side API Calls
 
 Use `.server.ts` files for server-side code to isolate API keys.
@@ -351,6 +414,8 @@ Use `.server.ts` files for server-side code to isolate API keys.
 - Use non-null assertion (`!`) for `user` when `authMiddleware` is present
 - Put all user-facing copy in translations and reference by key
 - Use `SvelteSet`/`SvelteMap` from `svelte/reactivity` for reactive collections (not `new Set`/`new Map`)
+- Reset modal/form state in close/submit handlers or `onOpenChange`, not in `$effect` tied to a steady “closed” condition
+- Mutate bound `$state` object fields in place when clearing forms (don't reassign the whole object)
 
 ### ❌ DON'T
 - Put business logic in routes or queries
@@ -365,6 +430,8 @@ Use `.server.ts` files for server-side code to isolate API keys.
 - Write plain English strings in components
 - Use `new Set()`/`new Map()` for mutable reactive state — use `SvelteSet`/`SvelteMap` instead
 - Wrap `SvelteSet`/`SvelteMap` in `$state()` — they are already reactive
+- **Use `$effect` to reset form/modal state whenever a boolean is false** — use `onOpenChange` or explicit handlers on close instead
+- **Reassign whole bound state objects to clear forms** (e.g. `fields = {}`) — mutate properties in place
 - **Use inline type imports** (e.g. `import('Package').Type` in type positions) — use top-level `import type` instead
 
 ## Checklist for New Routes

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

@@ -32,9 +32,24 @@
 
   let step = $state(STEPS.STEP_1);
 
+  function resetForm() {
+    step = STEPS.STEP_1;
+    fields.fullname = '';
+    fields.email = '';
+    errors.fullname = '';
+    errors.email = '';
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+
+    if (!isOpen) {
+      resetForm();
+    }
+  }
+
   async function onSubmit() {
     errors = coursePaymentValidation(fields);
-    console.log('coursePayment errors', errors);
 
     if (Object.keys(errors).length) {
       return;
@@ -51,13 +66,11 @@
   }
 
   function onClickPaymentLink() {
-    fields.fullname = '';
-    fields.email = '';
     open = false;
   }
 </script>
 
-<Dialog.Root bind:open>
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
   <Dialog.Content class="w-96">
     <Dialog.Header>
       <Dialog.Title>Process course payment</Dialog.Title>

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

@@ -11,8 +11,11 @@
   import type { Course } from '$features/course/utils/types';
   import type { AccountOrg } from '$features/app/types';
   import UploadWidget from '$features/ui/upload-widget/upload-widget.svelte';
+  import PaymentModal from './components/payment-modal.svelte';
   import { buildCourseLandingPageProps } from './utils';
   import { handleOpenWidget } from './store';
+  import { calcCourseDiscount, isCourseFree } from '$lib/utils/functions/course';
+  import { capturePosthogEvent } from '$lib/utils/services/posthog';
 
   interface Props {
     editMode?: boolean;
@@ -24,6 +27,8 @@
 
   let { editMode = false, courseData = $bindable(), org = null, themeComponent = null }: Props = $props();
 
+  let openPaymentModal = $state(false);
+
   const activeOrg = $derived(org ?? $currentOrg);
   const landingSettings = $derived(normalizeLandingPageSettings(activeOrg.landingpage));
 
@@ -47,11 +52,34 @@
   const enrollmentsOpen = $derived(get(courseData, 'metadata.allowNewStudent') === true);
   const enrollDisabled = $derived(editMode || !enrollmentsOpen);
 
+  const discount = $derived(get(courseData, 'metadata.discount', 0));
+  const showDiscount = $derived(get(courseData, 'metadata.showDiscount', false));
+  const calculatedCost = $derived(calcCourseDiscount(discount, courseData.cost || 0, !!showDiscount));
+  const isFree = $derived(isCourseFree(calculatedCost));
+
+  function handlePaidEnrollClick(event: MouseEvent) {
+    event.preventDefault();
+
+    if (editMode || !$currentOrg.siteName) {
+      return;
+    }
+
+    capturePosthogEvent('join_course', {
+      course_id: courseData.id,
+      course_title: courseData.title,
+      course_cost: courseData.cost,
+      course_free: isFree
+    });
+
+    openPaymentModal = true;
+  }
+
   const landingProps = $derived(
     buildCourseLandingPageProps(courseData, activeOrg, {
       enrollHref,
       enrollDisabled,
-      authAction
+      authAction,
+      onPaidEnrollClick: handlePaidEnrollClick
     })
   );
 
@@ -77,6 +105,12 @@
   });
 </script>
 
+<PaymentModal
+  bind:open={openPaymentModal}
+  paymentLink={get(courseData, 'metadata.paymentLink', '')}
+  courseId={courseData.id}
+/>
+
 {#if ThemeComponent}
   {#if editMode && $handleOpenWidget.open}
     <div class="mx-auto w-full max-w-7xl px-6 py-3">

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

@@ -7,6 +7,8 @@ import get from 'lodash/get';
 import type { AccountOrg } from '$features/app/types';
 import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
 import type { CourseLandingPageProps, OrgLandingPageTheme } from '@cio/ui/custom/org-landing-page';
+import { calcCourseDiscount, isCourseFree } from '$lib/utils/functions/course';
+import { t } from '$lib/utils/functions/translations';
 
 export type LandingPageLesson = {
   id: string;
@@ -116,6 +118,7 @@ export function buildCourseLandingPageProps(
     enrollHref: string;
     enrollDisabled: boolean;
     authAction?: { label: string; href: string };
+    onPaidEnrollClick?: (event: MouseEvent) => void;
   }
 ): CourseLandingPageProps {
   const landing = normalizeLandingPageSettings(org.landingpage);
@@ -161,7 +164,14 @@ export function buildCourseLandingPageProps(
     hasCertificate ? { label: 'Certificate', value: 'Included' } : null
   ].filter(Boolean) as Array<{ label: string; value: string }>;
 
-  const pricingCtaLabel = course.cost && course.cost > 0 ? 'Enrol now' : 'Start free';
+  const discount = metadata?.discount ?? 0;
+  const showDiscount = metadata?.showDiscount ?? false;
+  const calculatedCost = calcCourseDiscount(discount, course.cost ?? 0, !!showDiscount);
+  const isFree = isCourseFree(calculatedCost);
+  const pricingCtaLabel = isFree
+    ? t.get('course.navItem.landing_page.pricing_section.enroll')
+    : t.get('course.navItem.landing_page.pricing_section.buy');
+  const paidEnrollClick = !isFree && !options.enrollDisabled ? options.onPaidEnrollClick : undefined;
 
   return {
     theme: landing.theme as OrgLandingPageTheme,
@@ -174,7 +184,8 @@ export function buildCourseLandingPageProps(
       subheading: course.description ?? landing.hero.subheading,
       primaryAction: {
         label: pricingCtaLabel,
-        href: options.enrollHref,
+        href: paidEnrollClick ? undefined : options.enrollHref,
+        onclick: paidEnrollClick,
         disabled: options.enrollDisabled
       },
       secondaryAction: { label: 'View curriculum', href: '#curriculum' },
@@ -237,7 +248,8 @@ export function buildCourseLandingPageProps(
       discount: metadata?.discount,
       showDiscount: metadata?.showDiscount,
       ctaLabel: pricingCtaLabel,
-      ctaHref: options.enrollHref,
+      ctaHref: paidEnrollClick ? undefined : options.enrollHref,
+      ctaOnclick: paidEnrollClick,
       reward: metadata?.reward?.show ? { show: true, description: metadata.reward.description ?? '' } : undefined
     },
     footer: landing.footer

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -29,14 +29,11 @@
       {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-wrap ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
+          <CoursePrimaryAction
+            action={hero.primaryAction}
             size="lg"
             class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-[var(--landing-accent)]/20 ui:hover:-translate-y-1 ui:transition-all"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          />
           {#if hero.secondaryAction}
             <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
           {/if}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import { BlurIn } from '../../animation/blurin';
   import { DotPattern } from '../../animation/dot-pattern';
   import EditableLandingSection from '../editable-section.svelte';
@@ -41,14 +41,7 @@
       {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:px-8 ui:font-semibold"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          <CoursePrimaryAction action={hero.primaryAction} size="lg" class="ui:px-8 ui:font-semibold" />
           {#if hero.secondaryAction}
             <SecondaryActionButton
               href={hero.secondaryAction.href}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -57,13 +57,7 @@
           {/if}
           {#if showActions}
             <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
-              <Button
-                href={hero.primaryAction.href}
-                disabled={hero.primaryAction.disabled ?? false}
-                class="ui:rounded-none ui:px-6 ui:font-medium"
-              >
-                {hero.primaryAction.label}
-              </Button>
+              <CoursePrimaryAction action={hero.primaryAction} class="ui:rounded-none ui:px-6 ui:font-medium" />
               {#if hero.secondaryAction}
                 <SecondaryActionButton
                   href={hero.secondaryAction.href}

packages/ui/src/custom/org-landing-page/course-landing-page.helpers.ts

@@ -8,7 +8,8 @@ export function alignHeroCtaWithPricing(
     ...hero,
     primaryAction: {
       label: pricing.ctaLabel,
-      href: pricing.ctaHref ?? '#pricing',
+      href: pricing.ctaOnclick ? undefined : (pricing.ctaHref ?? '#pricing'),
+      onclick: pricing.ctaOnclick,
       disabled: hero.primaryAction.disabled
     }
   };

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

@@ -71,7 +71,13 @@
           </ul>
         {/if}
 
-        <LandingButton variant="primary" size="lg" href={pricing.ctaHref ?? '#enroll'} class={t.pricingCta}>
+        <LandingButton
+          variant="primary"
+          size="lg"
+          href={pricing.ctaOnclick ? undefined : (pricing.ctaHref ?? '#enroll')}
+          onclick={pricing.ctaOnclick}
+          class={t.pricingCta}
+        >
           {pricing.ctaLabel}
         </LandingButton>
 

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Button, type ButtonVariant } from '../../base/button';
+  import type { LandingPrimaryAction } from './types';
+
+  interface Props {
+    action: LandingPrimaryAction;
+    size?: 'default' | 'sm' | 'lg';
+    variant?: ButtonVariant;
+    class?: string;
+  }
+
+  let { action, size = 'default', variant = 'default', class: className = '' }: Props = $props();
+</script>
+
+<Button
+  href={action.onclick ? undefined : action.href}
+  onclick={action.onclick}
+  disabled={action.disabled ?? false}
+  {size}
+  {variant}
+  class={className}
+>
+  {action.label}
+</Button>

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
   import { getCourseTypeLandingMeta } from '../landing-page-utils';
 
@@ -83,14 +83,11 @@
           {/if}
           {#if showActions}
             <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2.5 {featured ? '' : 'ui:justify-center'}">
-              <Button
-                href={hero.primaryAction.href}
-                disabled={hero.primaryAction.disabled ?? false}
+              <CoursePrimaryAction
+                action={hero.primaryAction}
                 size="lg"
                 class="ui:rounded-full ui:px-6 ui:font-medium ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:hover:opacity-90"
-              >
-                {hero.primaryAction.label}
-              </Button>
+              />
               {#if hero.secondaryAction}
                 <SecondaryActionButton
                   href={hero.secondaryAction.href}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import { DotPattern } from '../../animation/dot-pattern';
   import { ShinnyText } from '../../animation/shinny-text';
   import EditableLandingSection from '../editable-section.svelte';
@@ -55,14 +55,7 @@
       {/if}
       {#if showActions}
         <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:rounded-full"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          <CoursePrimaryAction action={hero.primaryAction} size="lg" class="ui:rounded-full" />
           {#if hero.secondaryAction}
             <SecondaryActionButton
               href={hero.secondaryAction.href}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -44,14 +44,7 @@
       {/if}
       {#if showActions}
         <div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            size="lg"
-            class="ui:rounded-full ui:px-6"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          <CoursePrimaryAction action={hero.primaryAction} size="lg" class="ui:rounded-full ui:px-6" />
           {#if hero.secondaryAction}
             <SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
           {/if}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -70,13 +70,7 @@
       {/if}
       {#if showActions}
         <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
-            class="ui:rounded-md ui:px-5"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          <CoursePrimaryAction action={hero.primaryAction} class="ui:rounded-md ui:px-5" />
           {#if hero.secondaryAction}
             <SecondaryActionButton
               href={hero.secondaryAction.href}

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -57,15 +57,12 @@
         {/if}
         {#if showActions}
           <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
-            <Button
-              href={hero.primaryAction.href}
-              disabled={hero.primaryAction.disabled ?? false}
+            <CoursePrimaryAction
+              action={hero.primaryAction}
               size="lg"
               variant="secondary"
               class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-[var(--landing-accent-fg)] ui:text-[var(--landing-accent)] ui:hover:bg-[var(--landing-accent-fg)]/90"
-            >
-              {hero.primaryAction.label}
-            </Button>
+            />
             {#if hero.secondaryAction}
               <SecondaryActionButton
                 href={hero.secondaryAction.href}

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

@@ -2,6 +2,7 @@
   import type { OrgLandingPageProps, CourseItem } from '../types';
   import type { Snippet } from 'svelte';
   import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -107,14 +108,11 @@
               {hero.secondaryAction.label}
             </Button>
           {/if}
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
+          <CoursePrimaryAction
+            action={hero.primaryAction}
             size="sm"
             class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[#f4f5f7] ui:text-[#0a0b0e] ui:hover:bg-white"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          />
         </div>
       {/if}
 

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

@@ -214,6 +214,13 @@ export type CourseInstructor = {
   coursesNo?: number;
 };
 
+export type LandingPrimaryAction = {
+  label: string;
+  href?: string;
+  disabled?: boolean;
+  onclick?: (event: MouseEvent) => void;
+};
+
 export type CoursePricing = {
   cost: number;
   currency: string;
@@ -221,6 +228,7 @@ export type CoursePricing = {
   showDiscount?: boolean;
   ctaLabel: string;
   ctaHref?: string;
+  ctaOnclick?: (event: MouseEvent) => void;
   features?: string[];
   reward?: {
     show: boolean;
@@ -307,7 +315,7 @@ export interface CourseLandingPageProps {
   hero: {
     heading: string;
     subheading: string;
-    primaryAction: { label: string; href: string; disabled?: boolean };
+    primaryAction: LandingPrimaryAction;
     secondaryAction?: { label: string; href: string };
     image?: string;
     stats?: Array<{ label: string; value: string }>;
@@ -339,7 +347,7 @@ export interface OrgLandingPageProps {
   hero: {
     heading: string;
     subheading: string;
-    primaryAction: { label: string; href: string; disabled?: boolean };
+    primaryAction: LandingPrimaryAction;
     secondaryAction?: { label: string; href: string };
     image?: string;
     stats?: Array<{ label: string; value: string }>;

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

@@ -2,7 +2,7 @@
   import type { OrgLandingPageProps } from '../types';
   import type { Snippet } from 'svelte';
   import SecondaryActionButton from '../secondary-action-button.svelte';
-  import { Button } from '../../../base/button';
+  import CoursePrimaryAction from '../course-primary-action.svelte';
   import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
@@ -45,13 +45,10 @@
       {/if}
       {#if showActions}
         <div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
-          <Button
-            href={hero.primaryAction.href}
-            disabled={hero.primaryAction.disabled ?? false}
+          <CoursePrimaryAction
+            action={hero.primaryAction}
             class="ui:rounded-md ui:px-7 ui:py-3.5 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
-          >
-            {hero.primaryAction.label}
-          </Button>
+          />
           {#if hero.secondaryAction}
             <SecondaryActionButton
               href={hero.secondaryAction.href}