The Feature20 component is a responsive section that displays a heading and caption, a grid of feature cards with icons and text, and action buttons. It uses Material-UI for layout and styling, Framer Motion for animations, and adapts to different screen sizes to ensure a clean presentation.
Component path: src/blocks/feature/Feature20.tsx
Component usage path: src/app/blocks/feature/feature20/page.tsx
Preview link:
heading
string
Main title of the feature section.
"Discover Our Key Features"
caption
string
Additional description or subtitle
"Explore the features that make our product stand out."
image
ImageCommonProps (Optional)
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' }
features
IconCardProps[]
Array of feature objects with icons and text.
[ { "icon": "icon1", "title": "Feature 1", "content": "Details" }, ... ]
actionBtn
ButtonProps (Optional)
Properties for the primary action button.
{ "variant": "contained", "color": "primary", "children": "Get Started" }
secondaryBtn
ButtonProps (Optional)
Properties for the secondary action button.
Optional properties for a secondary button.