Animated 3-Column Value Proposition Section

<div class="xl:mt-20 xl:mb-20 border-gradient before:rounded-3xl [animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll bg-neutral-900/40 max-w-7xl rounded-3xl mt-20 mr-auto mb-20 ml-auto pt-8 pr-8 pb-8 pl-8" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(2)">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left: Core differentiator -->
        <div class="overflow-hidden bg-center border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6fa84c43-2fad-44f7-93e0-fca897a6e819_800w.webp)] bg-cover ring-white/10 ring-1 rounded-2xl relative" style="">
          <div class="sm:h-[520px] sm:p-8 flex flex-col h-[440px] pt-6 pr-6 pb-6 pl-6 relative">
            <div class="flex items-center gap-3">
              <div class="">
                <p class="text-sm text-neutral-300 font-sans">Our Edge</p>
                <p class="text-xs sm:text-sm mt-1 text-neutral-400 font-sans">Strategic Design Thinking</p>
              </div>
            </div>
            <div class="mt-auto">
              <div class="sm:text-4xl text-2xl text-white tracking-tight mb-4 font-manrope font-semibold" style="">Design
                with<span class="inline xl:text-emerald-200 text-blue-500 ml-2 font-manrope font-semibold" style="">Purpose</span></div>
              <div class="flex items-center gap-2 text-neutral-200 mb-6">
                <div class="flex items-center gap-1">
                  <div class="h-2 w-2 rounded-full bg-blue-500"></div>
                  <div class="h-2 w-2 rounded-full bg-blue-400"></div>
                  <div class="h-2 w-2 rounded-full bg-blue-600"></div>
                </div>
                <p class="text-sm font-sans">Every pixel has intention</p>
              </div>
              <div class="flex items-center gap-2 text-xs text-neutral-300 font-sans">
                Discover our approach
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </div>
            </div>
          </div>
        </div>

        <!-- Middle: Results & methodology -->
        <div class="sm:p-8 overflow-hidden border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll bg-white/5 border-white/10 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
          <div class="pointer-events-none absolute inset-0">
          </div>
          <div class="relative">
            <p class="text-sm text-neutral-400 font-sans">Proven Results:</p>
            <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight text-neutral-100 font-manrope font-semibold" style="">
              <span class="text-blue-500 font-manrope font-semibold" style="">3x</span> faster project delivery,
              <span class="text-blue-400 font-manrope font-semibold" style="">2x</span> higher engagement
            </h3>

            <p class="mt-8 text-sm text-neutral-400 font-sans">Our Methodology:</p>
            <div class="mt-4 space-y-3">
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
                Strategic Discovery &amp; Research
              </div>
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>
                Collaborative Design Process
              </div>
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-600"></span>
                Data-Driven Optimization
              </div>
            </div>

            <div class="mt-8 rounded-xl border p-5 border-white/10 bg-black/30 border-gradient before:rounded-xl">
              <div class="flex items-center gap-1 text-amber-300 mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
              </div>
              <p class="text-sm text-neutral-300 mt-3 font-sans">"Aura doesn't just create designs—they craft
                experiences. Their strategic thinking elevated our entire brand presence."</p>
              <div class="mt-4 flex items-center gap-3">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/096dab35-ecaf-418f-a932-5b514543b035_320w.jpg" alt="" class="h-8 w-8 rounded-full object-cover" style="">
                <div class="text-sm">
                  <p class="text-neutral-200 font-sans">Michael Torres</p>
                  <p class="text-xs text-neutral-500 font-sans">CEO, Innovation Labs</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Trust indicators & guarantees -->
        <div class="grid grid-rows-2 gap-6">
          <!-- Trust & expertise -->
          <div class="sm:p-8 border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll bg-white/5 border-white/10 rounded-2xl pt-6 pr-6 pb-6 pl-6">
            <div class="flex items-center sm:block">
              <div class="relative h-28 w-28 sm:mx-auto">
                <div class="absolute inset-0 rounded-full bg-blue-500"></div>
                <div class="absolute inset-[10px] rounded-full bg-black/40 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check text-blue-400"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
                </div>
              </div>
              <div class="ml-5 sm:ml-0 sm:mt-6 text-center">
                <h4 class="text-lg font-light tracking-tight text-white font-sans">100% Satisfaction</h4>
                <p class="mt-2 text-sm text-neutral-400 font-sans">Guaranteed results or we'll make it right. Your
                  success is our mission.</p>
              </div>
            </div>
          </div>

          <!-- Key metrics -->
          <div class="sm:p-8 border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll bg-white/5 border-white/10 rounded-2xl pt-6 pr-6 pb-6 pl-6">
            <div class="grid grid-cols-2 gap-4 mb-6">
              <div class="">
                <div class="text-2xl tracking-tight text-white font-manrope font-semibold" style="">150+</div>
                <p class="text-xs mt-1 text-neutral-400 font-sans">Projects delivered</p>
              </div>
              <div class="">
                <div class="text-2xl tracking-tight text-white font-manrope font-semibold" style="">48h</div>
                <p class="text-xs mt-1 text-neutral-400 font-sans">Average start time</p>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Brand Strategy</span>
                <span class="text-blue-500 font-sans">Expert</span>
              </div>
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Visual Design</span>
                <span class="text-blue-400 font-sans">Expert</span>
              </div>
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Digital Marketing</span>
                <span class="text-blue-600 font-sans">Expert</span>
              </div>
            </div>

            <div class="mt-6 pt-4 border-t border-white/10">
              <div class="flex items-center gap-2 text-xs text-neutral-300 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Lumina Certified Team
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>