CTA

What it does

CTA is a high-contrast banner designed to sit at the bottom of the landing page. It renders a background photo with a dark overlay, a kicker line, a headline, a subline, and a primary checkout button — automatically wired to the same plan as the hero.

Usage

import CTA from "@/components/CTA";

<CTA />

Customizing

Open src/components/CTA.tsx and edit the three text strings directly in the JSX:

• The kicker — the small uppercase label above the headline ("Join thousands of teams").
• The headline — the large bold text ("Start building something great.").
• The subline — the supporting sentence below the headline.

To change the background photo, replace /public/cta.jpg with your own image. The path is set in the backgroundImage style on the background div.

Checkout button

The button automatically uses the same plan as config.hero.showcase.primaryCtaPlanName. Change that value in src/config.ts and both the hero and CTA buttons update together.