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.
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.
Component path: src/blocks/hero/Hero3.tsx
Component usage path: src/app/blocks/hero/hero3/page.tsx
Preview link:
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" }