Hero

Hero section component for landing pages with title, description, search, CTAs, and optional components.

Props

Prop	Type	Required	Default	Description
`title`	`string`	No	-	Hero title
`title_tag`	`'h1' \| 'h2' \| 'h3' \| 'p'`	No	-	HTML tag for title
`title_variant`	`TypographyVariant`	No	`'hero-text'`	Typography variant for title styling
`description`	`JSONRTE`	No	-	Rich text description
`show_search`	`boolean`	No	-	Whether to show search bar
`ctas`	`CtaWrapper[]`	No	-	Array of CTA buttons
`components`	`HeroComponents[]`	No	-	Additional components (e.g., Media)
`$`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields

Usage

1import { Hero } from '@/components/organisms/Hero';
2
3<Hero
4  title="Welcome to Our Platform"
5  title_tag="h1"
6  description={richTextContent}
7  show_search={true}
8  ctas={[
9    { cta: { link: { href: "/signup", title: "Get Started" }, variant: "PrimaryFillButton" } }
10  ]}
11/>

import { Hero } from '@/components/organisms/Hero';

<Hero
  title="Welcome to Our Platform"
  title_tag="h1"
  description={richTextContent}
  show_search={true}
  ctas={[
    { cta: { link: { href: "/signup", title: "Get Started" }, variant: "PrimaryFillButton" } }
  ]}
/>

Features

Flexible layout: Two-column layout on desktop (content + components)
Rich text: Supports rich text description
Search bar: Optional search functionality
Multiple CTAs: Supports multiple call-to-action buttons
Component support: Can include Media or other hero components
Responsive: Stacks vertically on mobile

Layout

Left column (3.5 flex): Title, description, search, CTAs
Right column (2 flex): Optional components (Media, etc.)

Notes

Uses Title component with "hero-text" variant
Description uses RichTextRenderer with prose styling
CTAs are wrapped in flex container with gap-4
Components rendered using ComponentsRenderer
The first media component inside the hero is prioritized for faster LCP