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.
