This business website hero section UI is a rounded green banner on a warm cream background. It pairs a clear headline with a photo of a person at a desk.

The hero is where a business website makes its first promise. Here a deep green banner gives the page weight, the headline is large and easy to read, and two buttons offer a main action and a lighter one. The photo of a person at work adds a human touch and breaks up the large area of colour. The rounded banner also works well as a contained block, so you can place it under a header without a full-width background.

What you get

• A cream panel with a deep green rounded banner
• The headline "Transform Your Business With Smarter Digital Solutions"
• A short paragraph, a yellow Book a Call button and an outlined Learn More button
• A row of small avatars with a trust line, which is placeholder text
• A photo of a woman at a laptop on a desk, inside a lighter green circle

How to use it in Figma

Click the copy button, then paste into Figma with Ctrl or Cmd + V. Edit the headline and buttons, replace the photo and change the green and yellow to your brand. Remove or rewrite the trust line before you use the design.

Best for

• Consultancy, IT and digital service sites
• Small business landing pages
• Pitch decks and proposals
• Website redesign mockups

Customisation tips

• Keep one clear call to action. Make the secondary button quiet.
• Use a cut-out photo so it sits cleanly on the circle.
• For a lighter layout, compare the SaaS hero section. See all Hero Sections.