Before/After Solar Savings Comparison Block

<div
  class="md:p-16 flex flex-col md:flex-row gap-12 md:gap-20 transition-all duration-500 hover:shadow-md animate-enter w-full max-w-5xl border-0 rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-sm gap-x-12 gap-y-12 items-center justify-center">

  <!-- Left Column (Before) -->
  <div class="flex flex-col gap-10 text-center md:text-right flex-1 w-full">

    <!-- Electricity Bill -->
    <div class="group animate-enter delay-100">
      <h3 class="text-lg font-normal text-slate-500 mb-1" style="">Facture sans solaire</h3>
      <div
        class="md:text-4xl text-3xl font-medium text-red-500 tracking-tight transition-transform duration-300 group-hover:-translate-y-0.5">
        332 385 XPF<span class="text-xl md:text-2xl font-normal text-red-400">/AN</span>
      </div>
    </div>

    <!-- CO2 Emission -->
    <div class="animate-enter delay-200 group">
      <h3 class="text-lg text-slate-500 font-normal mb-1">Émission de CO2</h3>
      <div
        class="text-2xl md:text-3xl text-red-500 font-medium tracking-tight transition-transform duration-300 group-hover:-translate-y-0.5">
        4.50 tCO2<span class="text-lg md:text-xl font-normal text-red-400">/AN</span>
      </div>
    </div>

  </div>

  <!-- Center Arrow -->
  <div class="flex-shrink-0 transform md:rotate-0 transition-transform duration-500 hover:scale-105 relative rotate-90"
    style="">
    <!-- Custom SVG Arrow with continuous orange animation -->
    <svg width="140" height="140" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"
      class="md:w-36 md:h-36 drop-shadow-sm w-[96px] h-[96px]" stroke-width="2" data-icon-replaced="true"
      style="width: 96px; height: 96px; color: rgb(15, 23, 42);">
      <defs>
        <linearGradient id="arrow-gradient-orange" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#fb923c;stop-opacity:1"></stop> <!-- orange-400 -->
          <stop offset="100%" style="stop-color:#ea580c;stop-opacity:1"></stop> <!-- orange-600 -->
        </linearGradient>
      </defs>
      <style>
        @keyframes drawOrangeLoop {
          0% {
            stroke-dashoffset: 200;
            opacity: 0;
          }

          15% {
            opacity: 1;
          }

          85% {
            opacity: 1;
          }

          100% {
            stroke-dashoffset: 0;
            opacity: 0;
          }
        }
      </style>
      <!-- Top part of the chevron -->
      <path d="M60 25 L90 50" stroke="url(#arrow-gradient-orange)" stroke-width="6" stroke-linecap="round"
        stroke-linejoin="round" class="animate-path"
        style="stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawOrangeLoop 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;">
      </path>
      <!-- Bottom part: Tail -> Down -> Up to join chevron -->
      <path d="M5 60 L60 60 L60 75 L90 50" stroke="url(#arrow-gradient-orange)" stroke-width="6" stroke-linecap="round"
        stroke-linejoin="round" class="animate-path"
        style="stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawOrangeLoop 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;">
      </path>
    </svg>
  </div>

  <!-- Right Column (After) -->
  <div class="flex flex-col gap-10 text-center md:text-left flex-1 w-full">

    <!-- Final Bill -->
    <div class="animate-enter delay-500 group">
      <h3 class="text-lg font-normal text-slate-500 mb-1" style="">Facture avec solaire</h3>
      <div
        class="md:text-4xl transition-transform duration-300 group-hover:-translate-y-0.5 text-3xl font-medium text-green-500 tracking-tight">
        85 020 XPF<span class="text-xl md:text-2xl font-normal text-green-400">/AN</span>
      </div>
    </div>

    <!-- CO2 Emission Reduction -->
    <div class="animate-enter delay-700 group">
      <h3 class="text-lg text-slate-500 font-normal mb-1">Émission de CO2</h3>
      <div
        class="text-2xl md:text-3xl text-green-500 font-medium tracking-tight transition-transform duration-300 group-hover:-translate-y-0.5">
        -32,6 tCO2<span class="text-lg md:text-xl font-normal text-green-400">/AN</span>
      </div>
    </div>

  </div>

</div>