The Hero9 component creates a visually engaging hero section with a background featuring dotted patterns, a central content area with a chip label, headline, caption, and a call-to-action button, and a list of icons with titles. It also includes an image with a styled border and radius.
Component path: src/blocks/hero/Hero9.tsx
Component usage path: src/app/blocks/hero/hero9/page.tsx
Preview link:
chip
{ label: ChipProps['label'] }
Chip component with a label, either a string or custom element
{ label: 'New Feature' }
headLine
string
Main headline text
"Discover Our Latest Innovations"
captionLine
string
Secondary descriptive text
"Explore the cutting-edge features that are redefining the industry."
primaryBtn
ButtonProps
Properties for the primary button, including text and event handlers
{ variant: "contained", color: "primary", children: "Get Started" }
image
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image.svg"
or
{ light: 'path-to-image-light.svg', dark: 'path-to-image-dark.svg' }
listData
ListDataProps[]
Array of items with icons and titles to display
[{ icon: "tabler-heart", title: "Loved by Users" }, { icon: "tabler-star", title: "Highly Rated" }]