> 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

The hero section of your landing page

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FqqoPEk0rcNscqMJhecV7%2Fhero.png?alt=media&amp;token=ddfed282-5121-4134-aede-8554031b9d92" 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="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2F4Tu2nWruEYG3DrGZrvYn%2Fimage.png?alt=media&amp;token=b8d1ee30-8af3-47cd-b67f-732db02e476b" alt=""><figcaption><p>userdesk.io</p></figcaption></figure>

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FxD0h8bXZXYf8SBekdjP7%2Fimage.png?alt=media&amp;token=6fde8dff-e4fe-4774-aa6d-06c3c4812a5d" alt=""><figcaption><p>inboxs.io</p></figcaption></figure>

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FeeCRDph87k0Fx070P3BN%2Fimage.png?alt=media&amp;token=706c4eff-553a-41b3-9163-2972c4ff3805" alt=""><figcaption><p>hivoe.com</p></figcaption></figure>

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FiFWSNYlppseN5hac7EoN%2Fimage.png?alt=media&amp;token=8457de63-7d4f-4967-bafa-b3689b122c73" alt=""><figcaption><p>usewuf.com</p></figcaption></figure>

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FqkoFkH8eR0EHhZoK4JF2%2Fimage.png?alt=media&amp;token=8481d1d5-6102-4496-8d7c-5e39e2c47e6d" 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 %}