Customize Hero

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

locales/en.json

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

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

"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."

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

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

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

"buyersText": "customers already using this"

"buyersText": "founders finding leads daily"

npm run dev

Advanced Customization

Modify Hero Component Layout

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

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

Remove Event Banner

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

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

Verification

After making changes, verify:

1. ✅ Headline displays correctly on desktop and mobile
2. ✅ Description line breaks work as expected
3. ✅ Both CTA buttons link to correct destinations
4. ✅ Button text is clear and action-oriented
5. ✅ 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