# Hero Section

### Side Hero

* **Component**: \<HeroSide/>
* **Path**: /components/home/hero-side.tsx
* **Import**:

```typescript
import { HeroSide } from "@/components/home/hero-side";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FmL4qib1a7kH9360gykem%2FCapture%20d%E2%80%99%C3%A9cran%202024-07-09%20113008.png?alt=media&#x26;token=02d0c58b-5483-48b6-a1d9-81a35473594e" alt=""><figcaption><p>Side Hero</p></figcaption></figure>

Side Hero is best suited for information-rich directories where you can't afford to lose space.

It can be used to showcase your website concept with an image or a video too.

### Center Hero

* **Component**: \<HeroCenter/>
* **Path**: /components/home/hero-center.tsx
* **Import**:

```typescript
import { HeroCenter } from "@/components/home/hero-center";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FETpAtJX3uevTWq2uRlrW%2FCapture%20d%E2%80%99%C3%A9cran%202024-07-09%20113024.png?alt=media&#x26;token=f9845cbe-8586-48ed-9e3f-8f0416e48def" alt=""><figcaption><p>Side Hero</p></figcaption></figure>

Since most directories are self-explanatory, Centered Hero will naturally lead visitors to action.