CTA sectionPro
A dark closing call to action with meteors and an email capture.
What's inside
- Meteors background
- Email capture with validation
- Success state
- Button mode
When to use
- The end of landing and pricing pages.
When not to use
- More than once per page.
Installation
Usage
Import it from @/components/blocks/cta-section after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { CtaSection } from "@/components/blocks/cta-section";
<CtaSection title="Start building today" onSubmit={(email) => joinWaitlist(email)} />Built fromMeteorsPro
API reference
CtaSection
A dark closing section with email capture or two buttons. Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | string | – | The ask. |
| emailCapture | boolean | true | Email form; false shows primary and secondary buttons. |
| onSubmit | (email) => Promise<void> | – | Throw with a message to show an error. |
| primary / secondary | { label; href } | – | Buttons in button mode. |
Keyboard interactions
| Keys | Action |
|---|---|
| Enter | Submit the email |
Accessibility
- The field is labelled, errors use role="alert" and success is a status message.
Motion
- Meteors streak behind; the form swaps to a success pill.
Responsive behavior
- The field and button stack on phones.
Performance
- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
Notes for AI
- Validate the email again on the server.
This page as Markdown, for assistants and coding agents:
/blocks/cta-section/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt