Hero6
The Hero6 component is a responsive hero section featuring an optional chip, a centered heading with caption, primary and secondary buttons, and a carousel of images displayed using react-slick.
All available props for the Hero6 component are defined and handled within Component usage path file. This allows for easy modifications to the content of the hero section.
Component path: src/blocks/hero/Hero6.tsx
Component usage path: src/app/blocks/hero/hero6/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero6
Props Details
chip
{ label: ChipProps['label']; link?: LinkProps; } (Optional)
Optional chip component with text and an optional link.
{ label: "Featured", link: { href: "/featured" } }
heading
string
Main heading text
"Explore Our New Collection"
caption
string
Secondary caption text
"Discover the latest trends and styles in our newest collection."
primaryBtn
ButtonProps
Properties for the primary button
{ variant: "contained", color: "primary", children: "Shop Now" }
secondaryBtn
ButtonProps
Properties for the secondary button
{ variant: "outlined", color: "primary", children: "Learn More" }
images
ImageCommonProps[]
Array of
Image path or Array of object with light and dark image path.
["path-to-image.svg"]
or
[{ light: 'path-to-image-light.svg', dark: 'path-to-image-dark.svg' }]
Last updated