Site Hero Section

Hero Section

The first screen: a landscape or an Indian pattern, a line in capitals, and your buttons.

Preview

LIVE IT. NOW

111 Zostels. 80+ destinations. A friend in every corner.

MEETDANCEEATBELONG

A friend in every corner.

Usage

tsx

import { HeroSection, Button } from "zostel-ui";

<HeroSection
  title="LIVE IT. NOW"
  subtitle="111 Zostels. 80+ destinations. A friend in every corner."
  backgroundImage="/brand/scenes/valleys.svg"
>
  <Button>Find a bed</Button>
</HeroSection>

<HeroSection pattern="kolam" themeProps={{ theme: "flowers" }} />

Props

Prop	Type	Default	Description
`title`	`string`	—	LIVE IT. NOW or a verb line — capitals.
`subtitle`	`string`	—	One line under it.
`themeProps`	`ThemeLinesProps`	—	Four stacked verbs above the title.
`backgroundImage`	`string`	—	A landscape (/brand/scenes) or a photo.
`pattern`	`PatternKey`	—	With no picture: an Indian pattern on Steel Grey.
`overlay`	`boolean`	`true`	A flat Steel Grey veil over the picture so white type reads (no gradients).
`children`	`ReactNode`	—	Buttons, a search bar.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

title

Type: string

Default: —

LIVE IT. NOW or a verb line — capitals.

subtitle

Type: string

Default: —

One line under it.

themeProps

Type: ThemeLinesProps

Default: —

Four stacked verbs above the title.

backgroundImage

Type: string

Default: —

A landscape (/brand/scenes) or a photo.

pattern

Type: PatternKey

Default: —

With no picture: an Indian pattern on Steel Grey.

overlay

Type: boolean

Default: true

A flat Steel Grey veil over the picture so white type reads (no gradients).

children

Type: ReactNode

Default: —

Buttons, a search bar.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).