The Hero4 component is a section that includes a headline and caption, an optional chip, and two image blocks with decorative patterns. It features a responsive layout with a Grid layout for arranging images and a list of items, each displaying an icon and description, all wrapped in styled GraphicsCard components.
Component path: src/blocks/hero/Hero4.tsx
Component usage path: src/app/blocks/hero/hero4/page.tsx
Preview link:
chip
{ label: ChipProps['label']; link?: LinkProps; } (Optional)
Optional chip component with text and an optional link.
{ label: "Learn More", link: { href: "/more-info" } }
headLine
string
Main heading text
"Explore Our Latest Innovations"
captionLine
string
Secondary caption text
"Discover groundbreaking technology and design."
image1
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image1.svg"
or
{ light: 'path-to-image1-light.svg', dark: 'path-to-image1-dark.svg' }
image2
ImageCommonProps
Image path or object with light and dark image path.
"path-to-image2.svg"
or
{ light: 'path-to-image2-light.svg', dark: 'path-to-image2-dark.svg' }
listData
ListDataProps[]
List items with icon, title, and description
[{ icon: { name: "icon-design" }, title: "Design Excellence", description: "Innovative and user-centric designs." }, { icon: { name: "icon-technology" }, title: "Advanced Technology", description: "Cutting-edge technology for better performance." }]