Before After Comparison Cards

<div class="grid gap-6 sm:grid-cols-2">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
    .font-sans { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }</style>
  <div class="bg-white/95 backdrop-blur-sm rounded-xl p-6 border-l-4
    border-l-red-500 shadow-sm border border-gray-100">
    <div class="flex items-center gap-2 mb-4">
      <span class="inline-flex h-7 w-7 items-center justify-center rounded-md
        bg-red-500/10 ring-1 text-red-700 ring-red-200/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
          <path d="m18 6-12 12"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </span>
      <p class="text-lg font-semibold text-stone-900">Before Stellah</p>
    </div>
    <ul class="space-y-3 text-sm text-stone-700">
      <li class="flex items-start gap-2">
        <span class="text-red-500 mt-0.5">•</span>
        <span>4 receptionists struggling with 3,000+ leads</span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-red-500 mt-0.5">•</span>
        <span>6-hour response times on average</span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-red-500 mt-0.5">•</span>
        <span>40% show-up rate</span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-red-500 mt-0.5">•</span>
        <span>
          <span class="font-semibold">$14,000/month</span>
        </span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-red-500 mt-0.5">•</span>
        <span>Team constantly stressed</span>
      </li>
    </ul>
  </div>
  <div class="bg-white/95 backdrop-blur-sm border-l-green-500 rounded-xl
    border-l-4 p-6 shadow-sm border border-gray-100">
    <div class="flex items-center gap-2 mb-4">
      <span class="inline-flex h-7 w-7 items-center justify-center rounded-md
        bg-green-500/10 ring-1 text-green-700 ring-green-200/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </span>
      <p class="text-lg font-semibold text-stone-900">With Stellah</p>
    </div>
    <ul class="space-y-3 text-sm text-stone-700">
      <li class="flex items-start gap-2">
        <span class="text-green-500 mt-0.5">•</span>
        <span>3 staff focus on high-value consultations</span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-green-500 mt-0.5">•</span>
        <span>
          <span class="font-semibold">15-second</span>
        </span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-green-500 mt-0.5">•</span>
        <span>
          <span class="font-semibold">72%</span>
        </span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-green-500 mt-0.5">•</span>
        <span>
          <span class="font-semibold">68% cost-savings</span>
        </span>
      </li>
      <li class="flex items-start gap-2">
        <span class="text-green-500 mt-0.5">•</span>
        <span>Team energized and profitable</span>
      </li>
    </ul>
  </div>
</div>