<section id="hero" class="pt-28 pb-16 relative overflow-hidden">
  <div class="absolute top-0 right-0 w-full h-full"
    style="background-image: url('{{ sections.hero.heroImage.src }}'); background-position: right center; background-size: cover; background-repeat: no-repeat;">
  </div>
  <div class="container mx-auto px-4 relative z-10">
    <div class="w-full flex flex-col md:flex-row items-center">
      <div class="w-full md:w-1/2  bg-[linear-gradient(to_right,rgba(255,255,255,1)_0%,rgba(255,255,255,1)_60%,rgba(248,250,252,0.8)_80%,rgba(241,245,249,0.6)_100%)]  py-12 px-4 md:px-8">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">{{ sections.hero.title }}</h1>
        <p class="text-lg md:text-xl text-gray-700 mb-8">{{ sections.hero.description }}</p>
        <div class="flex flex-col sm:flex-row gap-4">
          {% for btn in sections.hero.ctaButtons %}
          <a href="{{ btn.url }}" 
             class="group relative inline-flex items-center justify-center px-8 py-4 rounded-xl font-semibold text-center whitespace-nowrap transition-all duration-300 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-primary/20
             {% if btn.style == 'primary' or not btn.style %}
             bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-md hover:from-blue-700 hover:to-purple-700
             {% else %}
             bg-white text-gray-900 border-2 border-gray-300 hover:border-primary hover:bg-gray-50
             {% endif %}">
            {{ btn.label }}
            <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
            </svg>
          </a>
          {% endfor %}
        </div>
        <div class="mt-8 flex flex-col sm:flex-row items-center">
          <div class="flex -space-x-2">
            <img src="https://dolze-templates-uat.s3.eu-north-1.amazonaws.com/sample_imgs/client3.jpeg" alt="User"
              class="w-10 h-10 rounded-full border-2 border-white object-cover object-top">
            <img src="https://dolze-templates-uat.s3.eu-north-1.amazonaws.com/sample_imgs/client4.jpeg" alt="User"
              class="w-10 h-10 rounded-full border-2 border-white object-cover object-top">
            <img src="https://dolze-templates-uat.s3.eu-north-1.amazonaws.com/sample_imgs/client5.jpeg" alt="User"
              class="w-10 h-10 rounded-full border-2 border-white object-cover object-top">
          </div>
          <p class="mt-2 sm:mt-0 sm:ml-4 text-sm text-gray-600">{{ sections.hero.stats[0].label }}</p>
        </div>
      </div>
    </div>
  </div>
</section>