Hero

The hero section of your landing page

Designed for the landing pages, the hero goes at the top of your page.

It includes:

• a headline to show the problem solved, or the transformation you'll allow your customers to achieve.

• a strong Call to Action (Try FREE now).

• optionally, a "Talk to us" button (or Book a demo), you can define the Calendly link in the config.ts file.

• a testimonials section, if you already have customers, show their avatars.

• a placeholder for your product image (I use Figma to design, but I know that Canva is a great product too).

Component: <Hero /> File: src/components/Hero/Hero.tsx

page.tsx

import { Hero } from "@/components/Hero/Hero";

Props

The Hero component has a few props

Prop	Type	Description
showBookDemo	boolean	Shows or hides the "Talk to us" button
showCta	boolean	Shows or hides the Call to Action button
showUsers	boolean	Shows or hides the testimonial users section

Examples

Some examples of hero sections from my products:

userdesk.io

inboxs.io

hivoe.com

usewuf.com

omniwrite.ai

---

If you need basic components like buttons, inputs, etc, they are all available with ChakraUI.