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 and by useFormCapture to redirect after submission.
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 an offerSlug, it redirects to /success?offer={slug}. You can also create dedicated pages at /success/{slug}.
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 does two things:
- Includes the offer slug in the
form_submittedevent payload - Redirects to
/success?offer=mentorshipafter submission