<section class="relative min-h-screen pt-20 overflow-hidden" id="hero">
  <div
    class="absolute inset-0 bg-cover bg-center"
    style="
      background-image: url('{{ sections.hero.heroImage.src }}');
    "
  ></div>
  <div
    class="absolute inset-0 bg-gradient-to-r from-primary/90 to-transparent"
  ></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
    <div class="max-w-2xl">
      <h1
        class="text-4xl sm:text-5xl md:text-6xl font-playfair font-bold text-white leading-tight mb-6"
      >
        {{ sections.hero.title }}
      </h1>
      <p class="text-lg sm:text-xl text-white/90 mb-8">
        {{ sections.hero.description }}
      </p>
      <div class="flex flex-wrap gap-4">
        <a
          href="#about"
          class="px-8 py-3 bg-white text-primary font-medium !rounded-button hover:bg-white/90"
        >
          Discover Products
        </a>

        <a
          href="#challenges"
          class="px-8 py-3 bg-transparent border-2 border-white text-white font-medium !rounded-button hover:bg-white/10"
        >
          Learn More
        </a>
      </div>
    </div>
  </div>
</section>

