Agency Value Proposition Grid Section

<div
  class="animate-[slideUp_0.6s_ease-out_0.5s_both] bg-neutral-900/40 border-white/10 border rounded-2xl pt-8 pr-8 pb-8 pl-8 max-w-7xl">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left: Core differentiator -->
    <div
      class="relative overflow-hidden bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7b3a5f3f-a38a-47b5-8f19-6d90cb6f3137_800w.jpg)] bg-cover border-white/10 border rounded-2xl">

      <div class="relative h-[440px] sm:h-[520px] sm:p-8 flex flex-col pt-6 pr-6 pb-6 pl-6">
        <div class="flex items-center gap-3">

          <div class="">
            <p class="text-sm font-geist text-neutral-300" style="">Our Edge</p>
            <p class="text-xs sm:text-sm mt-1 font-geist text-neutral-400" style="">Strategic Design Thinking</p>
          </div>
        </div>
        <div class="mt-auto">
          <div class="sm:text-4xl text-2xl font-semibold text-white tracking-tight font-geist mb-4" style="">Design
            with<span class="text-blue-500" 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-geist" style="">Every pixel has intention</p>
          </div>
          <div class="flex items-center gap-2 text-xs font-geist text-neutral-300" style="">
            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="relative sm:p-8 overflow-hidden bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
      <div class="pointer-events-none absolute inset-0 opacity-20"
        style="background: repeating-radial-gradient(circle at 80% -20%, rgba(59,130,246,0.08) 0 1px, transparent 1px 60px);">
      </div>
      <div class="relative">
        <p class="text-sm font-geist text-neutral-400" style="">Proven Results:</p>
        <h3 class="mt-2 text-2xl sm:text-3xl font-geist font-light tracking-tight text-neutral-100" style="">
          <span class="font-semibold text-blue-500" style="">3x</span> faster project delivery,
          <span class="font-semibold text-blue-400" style="">2x</span> higher engagement
        </h3>

        <p class="mt-8 text-sm font-geist text-neutral-400" style="">Our Methodology:</p>
        <div class="mt-4 space-y-3">
          <div class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
            <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 font-geist text-neutral-200" style="">
            <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 font-geist text-neutral-200" style="">
            <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">
          <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="mt-3 text-sm font-geist text-neutral-300" style="">"Lumina 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">
            <div class="text-sm">
              <p class="font-geist text-neutral-200" style="">Michael Torres</p>
              <p class="text-xs text-neutral-500 font-geist" style="">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="rounded-2xl border p-6 sm:p-8 border-white/10 bg-white/5">
        <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-geist font-light tracking-tight text-white" style="">100% Satisfaction</h4>
            <p class="mt-2 text-sm font-geist text-neutral-400" style="">Guaranteed results or we'll make it right. Your
              success is our mission.</p>
          </div>
        </div>
      </div>

      <!-- Key metrics -->
      <div class="rounded-2xl border p-6 sm:p-8 border-white/10 bg-white/5">
        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="">
            <div class="text-2xl font-geist font-light tracking-tight text-white" style="">150+</div>
            <p class="text-xs mt-1 font-geist text-neutral-400" style="">Projects delivered</p>
          </div>
          <div class="">
            <div class="text-2xl font-geist font-light tracking-tight text-white" style="">48h</div>
            <p class="text-xs mt-1 font-geist text-neutral-400" style="">Average start time</p>
          </div>
        </div>

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

        <div class="mt-6 pt-4 border-t border-white/10">
          <div class="flex items-center gap-2 text-xs font-geist text-neutral-300" style="">
            <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>