# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shipped.club/components/hero.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.