Hero16
The Hero16 is a hero section featuring a responsive video player that auto-plays when scrolled into view, combined with review data, a headline with optional caption, and a secondary button.
All available props for the Hero16 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/Hero16.tsx
Component usage path: src/app/blocks/hero/hero16/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero16
Props Details
reviewData
{ avatarList: string[]; rating: number; totalReviews: string; }
User reviews information.
{ avatarList: ['/images/avatar1.jpg'], rating: 4.7, totalReviews: '150 Reviews' }
heading
string
Main heading text for the hero section.
"Discover Our Latest Innovations"
caption
string (Optional)
Optional subheading or additional descriptive text.
"Our SaaS platform delivers a flawless user experience and unmatched results."
secondaryBtn
ButtonProps
Properties for the secondary button.
{ variant: 'outlined', color: 'primary', children: 'Watch Now' }
poster
ImageComponentProps
Poster image for the video element.
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' }
videoSrc
string
Source URL of the video to be played.
'/videos/hero-video.mp4'
Last updated