Offers & Success Pages

Offer Pages

Offer pages live at content/pages/offers/ and provide detail about each validation path (mentorship, a product, a booking, etc.):

---
title: 1-on-1 Mentorship
description: Weekly sessions with a technical founder who's been there.
label: Mentorship
image: /images/mentorship.jpg
links:
  - label: Book a Session
    icon: i-lucide-calendar
    to: https://cal.com/yourname/mentorship
    target: _blank
---

Detailed offer content here...

Offer pages typically use the article layout:

routeRules: {
  '/offers/**': { appLayout: 'article' },
}

Routing Configuration

The base path for offers is configured in app.config.ts:

content: {
  routing: {
    offers: '/offers',    // Base path for offer pages
    success: '/success',  // Base path for success pages
  },
}

These paths are used by ConvertInternal to resolve offer slugs. When successRedirect is explicitly set on a form, useFormCapture uses the success path for redirection.

Success Pages

Success pages confirm a conversion and are shown after form submission or offer click. They live at content/pages/success/:

---
title: You're In!
description: Thanks for signing up. Check your email.
hero: false
---

::confetti
::

## What Happens Next

We'll be in touch within 24 hours...

The ::confetti component fires a celebratory animation on load.

Offer-Specific Success Pages

Create success pages per offer by matching the slug:

content/pages/success/index.md         → /success (default)
content/pages/success/mentorship.md    → /success/mentorship

When ConvertForm submits with a successRedirect prop, it navigates to that path. Without successRedirect, a success toast is shown instead of redirecting. You can also create dedicated success pages at /success/{slug} and point successRedirect there.

Success pages use the landing layout:

routeRules: {
  '/success': { appLayout: 'landing' },
  '/success/**': { appLayout: 'landing' },
}

Linking Offers to Forms

Use the offerSlug prop on ConvertForm to associate a form with an offer:

::convert-form{location="mentorship-page" offer-slug="mentorship" submit-label="Apply Now"}
::

This includes the offer slug in the form_submitted event payload. To also redirect after submission, add the successRedirect prop:

::convert-form{location="mentorship-page" offer-slug="mentorship" submit-label="Apply Now" success-redirect="/success/mentorship"}
::

Without successRedirect, a success toast is shown and the visitor stays on the page.