Hero3
Hero3 React component that renders a hero section layout with customizable elements including images, text, a list, and a button, styled using Material-UI and Next.js components.
All available props for the Hero3 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/Hero3.tsx
Component usage path: src/app/blocks/hero/hero3/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero3
Props Details
chip
{ label: ChipProps['label']; link?: LinkProps; } (Optional)
Optional chip with text and optional link.
{ label: "New Feature", link: { href: "/features", passHref: true } }
headLine
string | ReactElement
Main headline for the hero section. Can be text or a React element.
"Effortless CRM Management, Seamless BusinessGrowth"
boxImage1
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image1.svg"
or
{ light: 'path-to-image1-light.svg', dark: 'path-to-image1-dark.svg' }
boxImage2
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image2.svg"
or
{ light: 'path-to-image2-light.svg', dark: 'path-to-image2-dark.svg' }
boxImage3
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image3.svg"
or
{ light: 'path-to-image3-light.svg', dark: 'path-to-image3-dark.svg' }
listData
ListDataProps[] (Optional)
Array of list items with titles and optional links.
[{ title: "Feature 1", link: { href: "/feature1", passHref: true } }, { title: "Feature 2", link: { href: "/feature2", passHref: true } }]
description
string (Optional)
Optional description text.
"Discover the amazing features of our new product range."
exploreBtn
ButtonProps (Optional)
Optional properties for an "Explore" button.
{ children: "Explore Now", href: "/explore", variant: "outlined", size: "small" }
Last updated