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.
Component path: src/blocks/hero/Hero15.tsx
Component usage path: src/app/blocks/hero/hero15/page.tsx
Preview link:
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' }