Feature10

The Feature10 component displays a section with a heading, caption, and a split grid of animated icon cards. It also includes a video thumbnail that, when clicked, opens a modal with the video player. It supports optional primary and secondary buttons for additional actions.

All available props for the Feature10component are defined and handled within Component usage path file. This allows for easy modifications to the content of the feature section.

Component path: src/blocks/feature/Feature10.tsx

Component usage path: src/app/blocks/feature/feature10/page.tsx

Preview link: https://www.saasable.io/blocks/feature/feature10

Props Details

Prop	Type	Description	Displayed as
heading	string	Main heading for the feature section	"Explore Our Features"
caption	string (Optional)	Additional context or description under the heading.	"Discover the features that will transform your customer relationships"
features	IconCardProps[]	Array of feature details to display	[ { icon: 'icon1', title: 'Feature 1', content: 'Description of Feature 1', animationDelay: 0.3 }, ... ]
video	{ thumbnail: string; src: string; overlay?: boolean }	Video thumbnail, source and optional overlay	{ thumbnail: '/path/to/thumbnail.jpg', src: '/path/to/video.mp4' }
typesetPosition	StackProps['textAlign'] (Optional)	Optional text alignment for heading and caption	It will display an aligned heading and caption.
primaryBtn	ButtonProps (Optional)	Optional primary button configuration	{ children: 'Buy Figma' }
secondaryBtn	ButtonProps (Optional)	Optional secondary button configuration	{ children: 'Live Figma Preview' }