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.
Component: <Hero />
File: src/components/Hero/Hero.tsx
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:
If you need basic components like buttons, inputs, etc, they are all available with ChakraUI.
Last updated