Hero

Config options

hero: {
  showcase: {
    kicker: "Next.js SaaS Boilerplate — Ship faster",
    title: "Ship your SaaS faster",
    titleHighlight: "with everything already built in",
    description: "A short sentence below the heading.",
    primaryCtaPlanName: "Advanced",
    imageSrc: "/features/hero.png",
    imageAlt: "Screenshot",
  }
},

• kicker — small label above the headline. Often used for a tagline or category.
• title — the main headline. This is the most-read text on your page.
• titleHighlight — the part of the headline rendered with a gradient. Placed on a second line for emphasis.
• description — one sentence below the headline that clarifies what you offer.
• primaryCtaPlanName — the plan name to charge for when the primary button is clicked. Must match a plan name in your Stripe or Lemon Squeezy config exactly.
• imageSrc — path to your product screenshot in /public. Set to null to show the built-in animated mockup card instead.
• imageAlt — alt text for the product image, used by screen readers and search engines.

Product image vs mockup card

When imageSrc is set, the hero renders your product screenshot at right. Set it to null to display the built-in animated mockup card — useful before you have a real screenshot.

Gradient title highlight

The titleHighlight text is rendered with a gradient. To change the colors, edit src/components/Hero.tsx and find:

bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent

Swap from-blue-400 to-cyan-400 for any Tailwind color pair you prefer.

CTA buttons

The primary button fires checkout for the plan named in primaryCtaPlanName. The secondary button scrolls to the features section. Both are in src/components/Hero.tsx — edit the file directly to change button copy or behavior.