<section class="relative min-h-screen bg-gradient-to-br from-sky-50 via-indigo-50 to-purple-50 overflow-hidden" if="hero">
  <!-- Animated background elements -->
  <div class="absolute inset-0">
    <div class="absolute top-0 left-0 w-full h-full">
      <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-300/20 rounded-full mix-blend-multiply filter blur-3xl animate-float"></div>
      <div class="absolute top-1/3 right-1/4 w-72 h-72 bg-purple-300/15 rounded-full mix-blend-multiply filter blur-3xl animate-float animation-delay-2000"></div>
      <div class="absolute bottom-1/4 right-1/3 w-80 h-80 bg-pink-300/15 rounded-full mix-blend-multiply filter blur-3xl animate-float animation-delay-4000"></div>
    </div>
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0aDZ2NmgtNnpNNDIgNDBoNnY2aC02ek0zMCA0MGg2djZoLTZ6TTQyIDM0aDZ2NmgtNnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-50"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
    <!-- Main content container -->
    <div class="grid lg:grid-cols-2 gap-12 items-center">
      <!-- Content side -->
      <div class="order-2 lg:order-1">
        <!-- Badge -->
        <div class="inline-flex items-center mb-6 px-4 py-1.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-600 shadow-sm">
          <span class="flex h-2 w-2 rounded-full bg-indigo-500 mr-2 animate-pulse"></span>
          <span>Innovative Design</span>
        </div>
        
        <!-- Title with gradient -->
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 tracking-tight leading-tight">
          {{ sections.hero.title }}
        </h1>
        
        <!-- Description with custom typography -->
        <p class="text-slate-600 text-lg md:text-xl leading-relaxed mb-8 max-w-xl">
          {{ sections.hero.description }}
        </p>
        
        <!-- CTA buttons with fancy effects -->
        <div class="flex flex-wrap gap-4 mt-6">
          {% for btn in sections.hero.ctaButtons %}
          {% if loop.first %}
          <a
            href="{{ btn.url }}"
            aria-label="{{ btn.ariaLabel }}"
            class="group relative inline-flex items-center justify-center overflow-hidden rounded-full p-0.5 font-medium"
          >
            <span class="absolute h-full w-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></span>
            <span class="relative flex items-center space-x-2 px-8 py-3.5 transition-all duration-300 ease-out bg-white rounded-full group-hover:bg-opacity-0 group-hover:text-white">
              <span class="font-semibold">{{ btn.label }}</span>
              <svg class="w-5 h-5 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </span>
          </a>
          {% else %}
          <a
            href="{{ btn.url }}"
            aria-label="{{ btn.ariaLabel }}"
            class="inline-flex items-center justify-center px-8 py-3.5 rounded-full border-2 border-slate-200 text-slate-600 font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all duration-300"
          >
            <span>{{ btn.label }}</span>
          </a>
          {% endif %}
          {% endfor %}
        </div>
        
        <!-- Trust indicators -->
        <div class="mt-12">
          <p class="text-slate-500 text-sm mb-4">Trusted by innovative companies</p>
          <div class="flex flex-wrap items-center gap-8">
            <div class="h-8 w-auto opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
              <svg viewBox="0 0 124 24" fill="currentColor" class="h-full w-auto text-slate-400">
                <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 22c-5.5 0-10-4.5-10-10S6.5 2 12 2s10 4.5 10 10-4.5 10-10 10zm1-15h-2v6h6v-2h-4V7z"/>
                <path d="M40 18h-4V6h4c3.3 0 6 2.7 6 6s-2.7 6-6 6zm0-10h-2v8h2c2.2 0 4-1.8 4-4s-1.8-4-4-4zM55 6h-4v12h4c3.3 0 6-2.7 6-6s-2.7-6-6-6zm0 10h-2V8h2c2.2 0 4 1.8 4 4s-1.8 4-4 4zM70 6h8v2h-6v3h5v2h-5v3h6v2h-8zM94 11l-3-5h-2l4 6.5-4 5.5h2l3-5 3 5h2l-4-5.5L99 6h-2z"/>
                <path d="M106 6h8v2h-6v3h5v2h-5v3h6v2h-8zM119 16h5v2h-7V6h2z"/>
              </svg>
            </div>
            <div class="h-6 w-auto opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
              <svg viewBox="0 0 124 24" fill="currentColor" class="h-full w-auto text-slate-400">
                <path d="M6 6h2v12H6zM12 6h8v2h-6v3h5v2h-5v5h-2zM26 6h8v2h-6v3h5v2h-5v3h6v2h-8zM40 6h2v12h-2zM48 6h2l6 8V6h2v12h-2l-6-8v8h-2zM64 6h8v2h-6v3h5v2h-5v3h6v2h-8zM78 6h8v2h-3v10h-2V8h-3zM92 6h2v12h-2zM100 6h2l6 8V6h2v12h-2l-6-8v8h-2z"/>
              </svg>
            </div>
            <div class="h-7 w-auto opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
              <svg viewBox="0 0 124 24" fill="currentColor" class="h-full w-auto text-slate-400">
                <path d="M12 6C5.4 6 0 11.4 0 18h4c0-4.4 3.6-8 8-8s8 3.6 8 8h4c0-6.6-5.4-12-12-12zM36 18h-4V6h4c3.3 0 6 2.7 6 6s-2.7 6-6 6zm0-10h-2v8h2c2.2 0 4-1.8 4-4s-1.8-4-4-4zM48 6h2v12h-2zM57 6h2l6 8V6h2v12h-2l-6-8v8h-2zM73 6h8v2h-6v3h5v2h-5v3h6v2h-8zM87 6h2v10h6v2h-8zM99 6h8v2h-3v10h-2V8h-3z"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Image side with fancy effects -->
      <div class="order-1 lg:order-2 relative">
        <div class="relative rounded-2xl overflow-hidden shadow-2xl">
          <!-- Decorative elements -->
          <div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-300/30 rounded-full filter blur-2xl"></div>
          <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-purple-300/30 rounded-full filter blur-2xl"></div>
          
          <!-- Decorative frame -->
          <div class="absolute inset-0 border-8 border-white/50 rounded-2xl z-10 pointer-events-none"></div>
          
          <!-- Main image -->
          <div class="relative overflow-hidden rounded-xl">
            <img
              src="{{ sections.hero.heroImage.src }}"
              alt="{{ sections.hero.heroImage.alt }}"
              class="w-full h-full object-cover object-center transform hover:scale-105 transition-transform duration-700"
              loading="{% if sections.hero.heroImage.lazyLoad %}lazy{% else %}eager{% endif %}"
            />
            
            <!-- Floating elements -->
            <div class="absolute top-4 right-4 bg-white/90 backdrop-blur-sm rounded-lg shadow-lg p-3 flex items-center space-x-2 animate-float animation-delay-1000">
              <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
              </div>
              <div>
                <p class="text-xs text-slate-500">Success Rate</p>
                <p class="text-sm font-bold text-slate-800">98.7%</p>
              </div>
            </div>
            
            <div class="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg shadow-lg p-3 flex items-center space-x-2 animate-float animation-delay-3000">
              <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
              </div>
              <div>
                <p class="text-xs text-slate-500">Customer Rating</p>
                <p class="text-sm font-bold text-slate-800">4.9/5</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Floating card -->
        <div class="absolute -bottom-6 -right-6 md:bottom-8 md:right-8 bg-white rounded-xl shadow-xl p-4 animate-float animation-delay-2000">
          <div class="flex items-center space-x-3">
            <div class="flex -space-x-2">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white">
              <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white">
              <div class="w-8 h-8 rounded-full bg-indigo-100 border-2 border-white flex items-center justify-center text-indigo-600 text-xs font-bold">+5k</div>
            </div>
            <div>
              <p class="text-xs text-slate-500">Join our community</p>
              <p class="text-sm font-bold text-slate-800">5,000+ users</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Wave divider -->
    <div class="absolute bottom-0 left-0 right-0">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" class="w-full h-auto">
        <path fill="#ffffff" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960