Hero Section

<section className="relative min-h-[600px] flex items-center">
  <div className="absolute inset-0">
    <Image src="/images/hero/hero-main.webp" alt="..." fill className="object-cover" />
    <div className="absolute inset-0 bg-gradient-to-r from-background/95 to-background/60" />
  </div>
  <div className="relative max-w-6xl mx-auto px-6 md:px-10 py-20">
    <h1 className="text-5xl md:text-6xl font-bold mb-6">
      Your Headline <span className="text-primary">Here</span>
    </h1>
    <p className="text-lg text-muted-foreground max-w-2xl mb-8">
      Supporting copy that expands on the headline promise.
    </p>
    <div className="flex gap-3">
      <Button size="lg">Primary Action</Button>
      <Button size="lg" variant="outline">Secondary</Button>
    </div>
  </div>
</section>