Hero - Gradient Background

Eye-catching hero with gradient background and centered layout

Preview

Transform Your Energy Management

Join thousands of businesses optimizing their energy usage

Code

<SectionBlock
  padding="xl"
  background="gradient"
  alignment="center"
  titleSize="xl"
  title="Transform Your Energy Management"
  subtitle="Join thousands of businesses optimizing their energy usage"
  cta1={{ text: "Start Free Trial", variant: "default" }}
/>

Usage Notes

Import the SectionBlock component from @/components/ui/section-block
Customize props to match your design requirements
Use the children prop to add custom content
All variants support responsive design out of the box