MyApp

The hero section is the first thing visitors see on your homepage. This guide shows you how to customize it to match your product's value proposition.

What You'll Customize

Hero headline (two-line format)
Description text
Primary and secondary CTA buttons
Event banner (optional)
Total buyers display

Steps

Locate the Hero Content

All hero section content is stored in the locale file:

locales/en.json

Navigate to homePage.heroSection in the JSON structure.

Update the Headline

The headline uses a two-line format with the second line highlighted in brand color:

locales/en.json

{
  "homePage": {
    "heroSection": {
      "title": {
        "firstLine": "Your headline goes here",
        "secondLine": "with a strong value proposition"
      }
    }
  }
}

Example:

"title": {
  "firstLine": "Find Your Next Customer",
  "secondLine": "on Reddit in Minutes"
}

Update the Description

The description supports multi-line text using \n for line breaks:

locales/en.json

"description": "Describe what your product does, who it's for, and why it matters.\nKeep it clear and concise to help visitors understand\nyour unique value."

Example:

"description": "Automatically discover relevant Reddit discussions\nwhere your product can help. Turn conversations\ninto qualified leads."

Line breaks (\n) in the JSON will render as actual line breaks on desktop. On mobile, text wraps naturally.

Customize CTA Buttons

The hero has two call-to-action buttons:

locales/en.json

"cta": {
  "primary": {
    "text": "Get Started",
    "href": "/#buy"
  },
  "secondary": {
    "text": "Read the docs",
    "href": "/docs"
  }
}

Primary Button:

Displays with your logo icon
Uses brand colors
Typically links to pricing or signup

Secondary Button:

Uses secondary styling
Displays a book icon
Typically links to docs or demo

Example:

"cta": {
  "primary": {
    "text": "Start Free Trial",
    "href": "/sign-up"
  },
  "secondary": {
    "text": "Watch Demo",
    "href": "/#demo"
  }
}

Update Buyers Text

The "Total Buyers" component displays social proof below the hero:

locales/en.json

"buyersText": "customers already using this"

Example:

"buyersText": "founders finding leads daily"

The actual count is fetched from your Stripe data. This text appears after the number.

Preview Your Changes

Start the development server:

npm run dev

Visit http://localhost:3000 to see your updated hero section.

Advanced Customization

Modify Hero Component Layout

If you need to change the structure (not just content), edit the component:

components/Hero.tsx

export function Hero() {
  const heroLocale = locale?.homePage?.heroSection;

  return (
    <Section offsetTop className="max-md:gap-20 mt-20 h-max justify-center">
      <div className="flex flex-col gap-14 items-center z-10">
        {/* Your custom layout here */}
      </div>
    </Section>
  );
}

Change Hero Styling

The hero uses Tailwind classes. Common customizations:

// Adjust spacing
<div className="flex flex-col gap-14 items-center"> // Change gap-14

// Modify text alignment
<div className="text-center"> // Change to text-left or text-right

// Adjust top margin
<Section offsetTop className="mt-20"> // Change mt-20

The <Event /> component displays optional event banners. To remove it:

components/Hero.tsx

// Remove or comment out this line:
<Event />

Verification

After making changes, verify:

✅ Headline displays correctly on desktop and mobile
✅ Description line breaks work as expected
✅ Both CTA buttons link to correct destinations
✅ Button text is clear and action-oriented
✅ Buyers text makes grammatical sense with the count

Common Issues

Line Breaks Not Working

Ensure you're using \n (not \\n) in the JSON:

// ❌ Wrong
"description": "Line one\\nLine two"

// ✅ Correct
"description": "Line one\nLine two"

CTA Buttons Not Linking

Check that href values start with / for internal links:

// ❌ Wrong
"href": "docs"

// ✅ Correct
"href": "/docs"

Brand Color Not Showing

The text-brand-highlight class is applied automatically. Ensure your Tailwind config includes brand colors in components/styles/globals.css.

Next Steps

Customize FAQ Items - Update frequently asked questions
Add Testimonials - Add social proof
Change Colors - Customize brand colors

The hero section is the first thing visitors see on your homepage. This guide shows you how to customize it to match your product's value proposition.

What You'll Customize

Hero headline (two-line format)
Description text
Primary and secondary CTA buttons
Event banner (optional)
Total buyers display

Steps

Locate the Hero Content

All hero section content is stored in the locale file:

locales/en.json

Navigate to homePage.heroSection in the JSON structure.

Update the Headline

The headline uses a two-line format with the second line highlighted in brand color:

locales/en.json

{
  "homePage": {
    "heroSection": {
      "title": {
        "firstLine": "Your headline goes here",
        "secondLine": "with a strong value proposition"
      }
    }
  }
}

Example:

"title": {
  "firstLine": "Find Your Next Customer",
  "secondLine": "on Reddit in Minutes"
}

Update the Description

The description supports multi-line text using \n for line breaks:

locales/en.json

"description": "Describe what your product does, who it's for, and why it matters.\nKeep it clear and concise to help visitors understand\nyour unique value."

Example:

"description": "Automatically discover relevant Reddit discussions\nwhere your product can help. Turn conversations\ninto qualified leads."

Line breaks (\n) in the JSON will render as actual line breaks on desktop. On mobile, text wraps naturally.

Customize CTA Buttons

The hero has two call-to-action buttons:

locales/en.json

"cta": {
  "primary": {
    "text": "Get Started",
    "href": "/#buy"
  },
  "secondary": {
    "text": "Read the docs",
    "href": "/docs"
  }
}

Primary Button:

Displays with your logo icon
Uses brand colors
Typically links to pricing or signup

Secondary Button:

Uses secondary styling
Displays a book icon
Typically links to docs or demo

Example:

"cta": {
  "primary": {
    "text": "Start Free Trial",
    "href": "/sign-up"
  },
  "secondary": {
    "text": "Watch Demo",
    "href": "/#demo"
  }
}

Update Buyers Text

The "Total Buyers" component displays social proof below the hero:

locales/en.json

"buyersText": "customers already using this"

Example:

"buyersText": "founders finding leads daily"

The actual count is fetched from your Stripe data. This text appears after the number.

Preview Your Changes

Start the development server:

npm run dev

Visit http://localhost:3000 to see your updated hero section.

Advanced Customization

Modify Hero Component Layout

If you need to change the structure (not just content), edit the component:

components/Hero.tsx

export function Hero() {
  const heroLocale = locale?.homePage?.heroSection;

  return (
    <Section offsetTop className="max-md:gap-20 mt-20 h-max justify-center">
      <div className="flex flex-col gap-14 items-center z-10">
        {/* Your custom layout here */}
      </div>
    </Section>
  );
}

Change Hero Styling

The hero uses Tailwind classes. Common customizations:

// Adjust spacing
<div className="flex flex-col gap-14 items-center"> // Change gap-14

// Modify text alignment
<div className="text-center"> // Change to text-left or text-right

// Adjust top margin
<Section offsetTop className="mt-20"> // Change mt-20

The <Event /> component displays optional event banners. To remove it:

components/Hero.tsx

// Remove or comment out this line:
<Event />

Verification

After making changes, verify:

✅ Headline displays correctly on desktop and mobile
✅ Description line breaks work as expected
✅ Both CTA buttons link to correct destinations
✅ Button text is clear and action-oriented
✅ Buyers text makes grammatical sense with the count

Common Issues

Line Breaks Not Working

Ensure you're using \n (not \\n) in the JSON:

// ❌ Wrong
"description": "Line one\\nLine two"

// ✅ Correct
"description": "Line one\nLine two"

CTA Buttons Not Linking

Check that href values start with / for internal links:

// ❌ Wrong
"href": "docs"

// ✅ Correct
"href": "/docs"

Brand Color Not Showing

The text-brand-highlight class is applied automatically. Ensure your Tailwind config includes brand colors in components/styles/globals.css.

Next Steps

Customize FAQ Items - Update frequently asked questions
Add Testimonials - Add social proof
Change Colors - Customize brand colors

Customize Hero

What You'll Customize

Steps

Locate the Hero Content

Update the Headline

Update the Description

Customize CTA Buttons

Update Buyers Text

Preview Your Changes

Advanced Customization

Modify Hero Component Layout

Change Hero Styling

Remove Event Banner

Verification

Common Issues

Line Breaks Not Working

CTA Buttons Not Linking

Brand Color Not Showing

Next Steps

On this page

Customize Hero

What You'll Customize

Steps

Locate the Hero Content

Update the Headline

Update the Description

Customize CTA Buttons

Update Buyers Text

Preview Your Changes

Advanced Customization

Modify Hero Component Layout

Change Hero Styling

Remove Event Banner

Verification

Common Issues

Line Breaks Not Working

CTA Buttons Not Linking

Brand Color Not Showing

Next Steps

On this page