The Hero1 component is a hero section that combines scrolling effects with animations using Framer Motion and Material-UI. It features a customizable layout including optional chip, headline, caption, and buttons, along with a sticky image card that scales based on scroll position.
Component path: src/blocks/hero/Hero1.tsx
Component usage path: src/app/blocks/hero/hero1/page.tsx
Preview link:
chip
{ label: ChipProps['label']; link?: LinkProps; } (Optional)
Optional chip component with text and an optional link.
{ label: "New Feature", link: { href: "/features", passHref: true } }
headLine
string | ReactElement
Main headline for the hero section. Can be text or a React element.
"Effortless CRM Management, Seamless BusinessGrowth"
captionLine
string (Optional)
Optional caption text for additional information.
"Explore the future of technology with our latest products and services."
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' }
primaryBtn
ButtonProps (Optional)
Optional properties for the primary button.
{ children: "Learn More", href: "/learn-more", variant: "contained", size: "large" }
secondaryBtn
ButtonProps (Optional)
Optional properties for the secondary button.
{ children: "Get Started", href: "/get-started", variant: "outlined", size: "large" }