AI Budget Assistant Hero Section with Chart

<section class="sm:px-8 sm:mt-32 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate max-w-7xl mt-32 mr-auto ml-auto pr-6 pl-6">
  <div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-16 bg-gradient-to-br from-gray-500/10 via-gray-500/0 to-gray-500/10 rounded-3xl pt-8 pr-8 pb-8 pl-8 gap-x-y-12 gap-y-12 items-center" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
    <!-- Left: Content -->
    <div class="lg:col-span-6">
      <span class="inline-flex items-center gap-2 text-xs font-medium text-emerald-300 tracking-tight font-geist bg-emerald-600/10 rounded-full ring-emerald-500/30 ring-1 pt-1.5 pr-4 pb-1.5 pl-4">SMART AI FEATURE</span>

      <h2 class="sm:text-5xl lg:text-6xl text-4xl font-light text-white tracking-tight font-geist mt-6">Meet Your AI Budget Assistant</h2>

      <p class="mt-6 text-lg leading-8 font-geist text-neutral-300">
        Plan smarter with predictive AI that tracks your spending, forecasts savings, and helps you make better
        financial decisions effortlessly.
      </p>

      <ul class="mt-6 space-y-4">
        <li class="flex items-center gap-3 text-base sm:text-lg font-geist text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="shrink-0 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Predict Monthly Expenses
        </li>
        <li class="flex items-center gap-3 text-base sm:text-lg font-geist text-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="shrink-0 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Optimize Saving Strategies
        </li>
      </ul>

      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center rounded-full px-6 sm:px-8 py-3.5 text-sm sm:text-base font-medium tracking-tight ring-1 font-geist text-white ring-emerald-400/30" style="background: linear-gradient(135deg, rgb(16,185,129) 0%, rgb(5,150,105) 100%);">
          Try It Now
        </a>
      </div>
    </div>

    <!-- Right: Chart Card -->
    <div class="lg:col-span-6">
      <div class="overflow-visible max-h-fit border rounded-2xl pt-4 pr-4 pb-8 pl-4 relative bg-black/40 border-white/10">

        <h3 class="text-lg font-semibold tracking-tight mb-2 font-geist">AI Insights Dashboard</h3>
        <p class="text-sm mb-4 font-geist text-gray-300">
          Visualize your expenses, track habits, and uncover patterns that help improve your financial health.
        </p>

        <div class="relative rounded-xl border ring-1 overflow-hidden p-4 sm:p-6 bg-neutral-900/60 border-white/10 ring-white/5">

          <!-- Connectors -->
          <div class="sm:left-36 sm:right-36 z-0 flex flex-col gap-2 pointer-events-none absolute top-0 right-28 bottom-0 left-28 items-stretch justify-center">
            <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/80">
              <div class="absolute inset-0 bg-gradient-to-r h-full animate-pulse from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite; transform: translateX(-100%);"></div>
            </div>
            <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/60">
              <div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.3s; transform: translateX(-100%);"></div>
            </div>
            <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/40">
              <div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.6s; transform: translateX(-100%);"></div>
            </div>
          </div>

          <!-- Nodes -->
          <div class="z-10 flex relative items-center justify-between">
            <!-- Left: AI Core -->
            <div class="flex flex-col items-center gap-2">
              <div class="relative w-24 h-24 sm:w-28 sm:h-28 rounded-xl border ring-1 backdrop-blur-sm overflow-hidden border-white/10 bg-neutral-900/70 ring-white/10">
                <div class="absolute -left-4 top-2 w-20 h-20 rounded-full bg-gradient-to-tr from-emerald-500/70 to-lime-500/40 blur-2xl">
                </div>
                <div class="absolute left-6 top-1/2 -translate-y-1/2 w-14 h-14 rounded-full bg-gradient-to-tr to-emerald-500/30 blur-xl from-lime-400/70">
                </div>
                <div class="absolute right-3 bottom-3 w-8 h-8 rounded-full bg-gradient-to-tr to-transparent blur-lg from-emerald-300/60">
                </div>
                <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7cb11911-53c5-45cc-a756-9dbe2010e635_320w.jpg)] bg-cover ring-1 rounded-xl ring-white/5">
                </div>
              </div>
              <span class="text-xs font-geist text-neutral-300">AI Core</span>
            </div>

            <!-- Animated Connectors -->
            <div class="sm:left-36 sm:right-36 z-0 flex flex-col gap-2 pointer-events-none absolute top-0 right-28 bottom-0 left-28 items-stretch justify-center">
              <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/80">
                <div class="absolute inset-0 bg-gradient-to-r h-full animate-pulse from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite; transform: translateX(-100%);"></div>
              </div>
              <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/60">
                <div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.3s; transform: translateX(-100%);"></div>
              </div>
              <div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/40">
                <div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.6s; transform: translateX(-100%);"></div>
              </div>
            </div>

            <!-- Right: User Data -->
            <div class="flex flex-col items-center gap-2">
              <div class="relative w-24 h-24 sm:w-28 sm:h-28 rounded-xl border ring-1 backdrop-blur-sm overflow-hidden border-white/10 bg-neutral-900/70 ring-white/10">
                <div class="absolute right-4 top-4 w-8 h-6 bg-gradient-to-br to-lime-500 from-emerald-400" style="clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);"></div>
                <div class="absolute left-4 bottom-5 w-12 h-7 bg-gradient-to-br from-lime-500 to-emerald-500" style="clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);"></div>
                <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9f2ed82e-900a-4e17-843f-6340215c86a0_320w.jpg)] bg-cover ring-1 rounded-xl ring-white/5">
                </div>
              </div>
              <span class="text-xs font-geist text-neutral-300">User Data</span>
            </div>

            <style>
              @keyframes flowLeft {
                0% {
                  transform: translateX(-100%);
                  opacity: 0;
                }

                50% {
                  opacity: 1;
                }

                100% {
                  transform: translateX(100%);
                  opacity: 0;
                }
              }
            </style>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" class=""></script>
  <script class="">
    (function () {
      const el = document.getElementById('aura-growth-chart');
      if (!el) return;

      const ctx = el.getContext('2d');
      const gradient = ctx.createLinearGradient(0, 0, 0, el.height);
      gradient.addColorStop(0, 'rgba(139, 92, 246, 0.35)');
      gradient.addColorStop(1, 'rgba(139, 92, 246, 0.00)');

      const grid = 'rgba(148,163,184,0.15)';
      const label = 'rgba(226,232,240,0.8)';

      new Chart(el, {
        type: 'line',
        data: {
          labels: ['','10','20','30','40','50','60','Yesterday',''],
          datasets: [
            {
              label: 'Primary',
              data: [12,14,13,20,38,62,48,54,56],
              borderColor: '#7c3aed',
              backgroundColor: gradient,
              fill: true,
              borderWidth: 2.5,
              pointRadius: 0,
              tension: 0.35
            },
            {
              label: 'Secondary',
              data: [10,11,15,16,18,22,30,44,40],
              borderColor: 'rgba(255,255,255,0.85)',
              borderWidth: 2,
              pointRadius: 0,
              tension: 0.35
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(17,24,39,0.95)',
              titleColor: '#fff',
              bodyColor: '#e5e7eb',
              displayColors: false,
              padding: 10
            }
          },
          scales: {
            x: {
              grid: { color: grid, drawBorder: false },
              ticks: { color: label, maxTicksLimit: 8 }
            },
            y: {
              grid: { color: grid, drawBorder: false },
              ticks: { color: label, maxTicksLimit: 6 }
            }
          }
        }
      });
    })();
  </script>
</section>