Hero Section Copywriting The framework that Converts 3x
Tags: webdev, javascript, beginners, programming
Published: 2024-04-16 01:57:20

Your landing page has less than 3 seconds to hook visitors.

If they only read this text on your page, will they know exactly what you offer? Or even better, will it tempt them to learn more about your brand?

A weak message will make people instantly bounce.

Here's my go-to framework:

**Headline**

Explain the specific value people get that only your brand can offer. This is your promise to prospects, your big idea, and the reason your brand exists.

No vague claims like "get more done!" or "increase collaboration!"

The trick is to not talk actually talk about what you do, but instead what transformation you're helping with. Tap into either their deepest desires or their most superficial, nothing in between.

Example: a tax software for startups

Old headline: Have your taxes automated ---> New headline: Get $20k back from the IRS in 20 minutes

The old headline explains what they do, which is a helpful service. Saving time on manually doing taxes is great, but what people really want to hear is them either saving or making more money.

**Subheadline**

This is where you can give more detail about your offer. To show people how you give value while handling any objections they may have.

What you do + who you're helping + how you're helping.

Following our tax software example: We help SaaS startups claim tax credits that most accountants miss.

You can also add a guarantee to help with any uncertainties they have. "Pay $0 if we don't save you any money."

**Main CTA**

drives excitement, fomo, and reduces friction. More of a call-to-value than call-to-action. Don’t add any pressure, let them take action on their terms.

- learn more —> create your ___ now
- sign up —> start your free trial, no CC required
- get started —> start building
- buy now —> get x% off today!

**Bonus tips**:

- Write how your audience talks. You can take examples from positive reviews of your brand and negative reviews from your competitors
- Eliminate uncertainty by addressing their objections and showing social proof.
- Take stand with your audience. relate to them, empathize, and be by their side.
- Don't sell products, sell painkillers, lifestyle upgrades, transformations, investments.
- If possible, have different landing pages depending on the source of traffic and how aware they are of your product. The landing page of someone unaware + coming from tik tok has a different message than the landing page people see after actively searching on google.

**Resources**

Design

- Repository of design resources - https://neede.co/#/
- Repository of design resources - Brad Traversy's Resource Collecttion
- Repository of design resources - https://hoard.fyi/
- Color schemes - https://colorhunt.co/ | https://coolors.co/ | https://paletton.com/

Photos

- CC0 attribution-free stock photos [see license] - https://unsplash.com/
- CC0 attribution-free stock photos [see license] - https://www.pexels.com/

Icons

- Customizable SVG icons - https://tablericons.com/
- CSS/SVG Icons - https://css.gg/
- Vector Icons - https://fontawesome.com/
- Icons, Photos and Vectors - https://icons8.com/
- Free SVG drawings - https://undraw.co/search
- 681 customisable icons - https://tablericons.com/
- Custom Icon pack creation - https://icomoon.io/
- PNG/SVG icon packs - www.flaticon.com
- 2M+ Royalty-free icons - https://thenounproject.com/

CSS

- CSS Hover animations - https://ianlunn.github.io/Hover/
- CSS Animations - https://animista.net/
- Frame comparisons - https://juxtapose.knightlab.com/
- Box Shadow generator - https://www.cssmatic.com/box-shadow
- CSS Gradient generator - https://cssgradient.io/
- CSS @ font-face generator - https://transfonter.org/
- Cubic-Bezier Curve visualizer for css animations
JS

- JS Tilt effects - https://micku7zu.github.io/vanilla-tilt.js/index.html
- O'Reilly JavaScript education - https://github.com/getify/You-Dont-Know-JS/tree/1st-ed

Notion Template

[Founders Stash](https://365daysgrowth.gumroad.com/l/founderstash)- A notion template for writing your ideas and execution with the framework of the "Grow Method".

Hope it was helpful!