Customize Hero

Learn how to customize your Plainform homepage hero section including headline, description, and call-to-action buttons.

Goal

By the end of this recipe, you'll have customized your hero section to match your product's value proposition.

Prerequisites

• A working Plainform installation
• Basic understanding of JSON syntax

What You'll Customize

• Hero headline with animated underline
• Description text
• Primary and secondary CTA buttons
• Event banner (optional)
• Total customers display

Steps

locales/en.json

{
  "homePage": {
    "heroSection": {
      "title": "Build faster\nLaunch smarter"
    }
  }
}

"title": "Find Your Next Customer\non 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"
  }
}

"customersText": "customers already using this"

"customersText": "founders finding leads daily"

npm run dev

Advanced Customization

Modify Highlighter Effect

The title uses the Highlighter component with an underline effect. To customize:

<h1 className="leading-14 whitespace-pre-line">
  <Highlighter 
    action="underline"  // Change to 'highlight', 'box', 'circle', etc.
    color="#758cff"     // Change color
    strokeWidth={1.5}   // Adjust thickness
  >
    {heroLocale?.title}
  </Highlighter>
</h1>

Available actions: highlight, underline, box, circle, strike-through, crossed-off, bracket

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 className="max-md:gap-20 h-max mt-20 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 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. ✅ Animated underline effect works
3. ✅ Description line breaks work as expected
4. ✅ Both CTA buttons link to correct destinations
5. ✅ Button text is clear and action-oriented
6. ✅ Customers text makes grammatical sense with the count

Common Issues

Line Breaks Not Working

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

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

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

CTA Buttons Not Linking

Check that href values start with / for internal links:

// ❌ Wrong
"href": "docs"

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

Highlighter Not Showing

The Highlighter component requires client-side rendering. Ensure it's imported correctly and the color is valid.

Next Steps

• Highlighter Component - Customize the underline effect
• Customize FAQ Items - Update frequently asked questions
• Add Testimonials - Add social proof