Hero15
The Hero15 component displays a hero section with a review profile, a heading and caption, an image, benefit data, and two call-to-action buttons, all arranged using MUI's responsive layout and themed with background images and overlays.
All available props for the Hero15 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/Hero15.tsx
Component usage path: src/app/blocks/hero/hero15/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero15
Props Details
reviewData
{ avatarList: string[]; rating: number; totalReviews: string; }
User reviews information.
{ avatarList: ['/path/to/avatar1.jpg'], rating: 4.5, totalReviews: '150 Reviews' }
heading
string
Main heading text for the hero section.
"Discover the Best Services for Your Needs"
caption
string (Optional)
Optional subheading or additional descriptive text.
"Empowering Businesses with a Customizable, Data-Driven CRM Solution."
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' }
imageBorder
boolean (Optiona)
Optional prop to apply a border around the image.
Default it will not show border, If you want it then pass true in this prop.
bgImage
BgImageProps
Background image properties for the benefit data card.
{ light: '/assets/images/bg-light.svg', dark: '/assets/images/bg-dark.svg' }
benefitData
{ counter: string; caption: string; defaultUnit?: string; }
Data for the benefit statistics card.
{ counter: '50+', caption: 'Projects Completed', defaultUnit: '+' }
primaryBtn
ButtonProps
Properties for the primary button.
{ variant: 'contained', color: 'primary', children: 'Get Started' }
secondaryBtn
ButtonProps
Properties for the secondary button.
{ variant: 'outlined', color: 'primary', children: 'Learn More' }
Last updated