The purpose of your hero section

Your hero section is the most important section on any of your pages. It's the first thing people see when visiting your website, so it determines whether a visitor continues exploring the rest of your page— or leave.

People have short consideration spans. You don't get long to convince someone to spend time on your site. So you need to nail your hero section.

Typically, a hero section consists of a headline, a subheader, one or two call-to-actions, and an image. If you have space, you can also include some social proof (average rating) as the icing on the cake.

Remember from The layout of a top-selling homepage or landing page how hero sections make a big, bold claim and explain how you deliver on that claim?

This is an example of a hero section from Tailwind.

Note: In my opinion, this is an almost perfect hero section. But I think Tailwind could improve it with better copy in the call to action. Something that ties to the claim in the header, e.g., "Get started building modern websites, fast."

https://firebasestorage.googleapis.com/v0/b/reflect-prod.appspot.com/o/users%2FHUSJl0pZUWgrPwDPUuMupHWcIsv1%2F4ae58ddaa254485fbce71a74a69b53c7?alt=media&token=ffa5071f-8986-4522-bf62-81cc52780150

How to write the perfect hero section headline

The headline is the bold text at the top of your hero section. The best headlines:

The litmus test of any headline is whether the reader understands what you're selling and how it benefits them even if they only read your headline.

And it's even better if you can make them interested in reading more by creating a curiosity gap.

Specifically, explain the benefit of what you're selling

The first point has a dual purpose. First, by explicitly stating your offer, you filter out those for whom your product is irrelevant. There's no point in selling a boat to someone looking for a car.