Hero2
The Hero2 component is a customizable hero section that utilizes Material-UI and Framer Motion to create an animated, visually appealing layout with optional chip, headline, caption, and buttons, alongside a background image with a gradient overlay and background dots pattern.
All available props for the Hero2 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/Hero2.tsx
Component usage path: src/app/blocks/hero/hero2/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero2
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"
captionLine
string (Optional)
Optional caption text for additional information.
"Discover the most advanced features designed for your needs."
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' }
primaryBtn
ButtonProps (Optional)
Optional properties for the primary button.
{ children: "Learn More", href: "/learn-more", variant: "contained", size: "large" }
secondaryBtn
ButtonProps (Optional)
Optional properties for the secondary button.
{ children: "Get Started", href: "/get-started", variant: "outlined", size: "large" }
Last updated