Hero - With Image

Hero section with title, CTAs, and image/illustration in content area

Preview

Energy Management Simplified

Monitor, optimize, and control your energy systems from a single platform

Code

<SectionBlock
  padding="lg"
  container="wide"
  alignment="left"
  titleSize="lg"
  title="Energy Management Simplified"
  subtitle="Monitor, optimize, and control your energy systems from a single platform"
  cta1={{ text: "Get Started", variant: "default" }}
  cta2={{ text: "Watch Demo", variant: "outline" }}
>
  <div className="mt-8 rounded-lg overflow-hidden border bg-muted/30">
    <img
      src="/api/placeholder/1200/600"
      alt="Dashboard preview"
      className="w-full h-auto"
    />
  </div>
</SectionBlock>

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