> For the complete documentation index, see [llms.txt](https://docs.shipped.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shipped.club/components/hero.md).

# Hero

<figure><img src="/files/eE0gV7MRTmLnwyp5MXUj" alt=""><figcaption></figcaption></figure>

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](https://figma.com/) to design, but I know that [Canva](https://www.canva.com/) is a great product too).

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

{% code title="page.tsx" %}

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

{% endcode %}

### 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:

<figure><img src="/files/FZoWggQl1tWcuSudooAT" alt=""><figcaption><p>userdesk.io</p></figcaption></figure>

<figure><img src="/files/6d0yd1TIpJK9hXdcZIiK" alt=""><figcaption><p>inboxs.io</p></figcaption></figure>

<figure><img src="/files/1l5F20pqASN2jnE1XNnl" alt=""><figcaption><p>hivoe.com</p></figcaption></figure>

<figure><img src="/files/l5hgMfa099rdPEidmB0D" alt=""><figcaption><p>usewuf.com</p></figcaption></figure>

<figure><img src="/files/hs0HehcpAfAW5z7TwHda" alt=""><figcaption><p>omniwrite.ai</p></figcaption></figure>

***

{% hint style="info" %}
If you need basic components like buttons, inputs, etc, they are all available with [ChakraUI](https://chakra-ui.com/).
{% endhint %}