Animated Crypto Data Feature Card with Gradient Connectors

<div class="relative overflow-visi overflow-visible bg-black/40 max-h-fit border-white/10 border rounded-2xl pt-4 pr-4 pb-8 pl-4">
  <div class="absolute inset-0 pointer-events-none" style="background:
      radial-gradient(220px 140px at 0% 100%, rgba(139,92,246,0.20), transparent 60%),
      radial-gradient(240px 160px at 100% 0%, rgba(232,121,249,0.10), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>

  <h3 class="text-lg tracking-tight font-semibold mb-2">Crypto Data Solutions</h3>
  <p class="text-sm text-gray-300 mb-4">Your on‑chain guide to making informed crypto decisions.</p>

  <div class="relative rounded-xl bg-neutral-900/60 border border-white/10 ring-1 ring-white/5 overflow-hidden p-4 sm:p-6">
    <!-- Connectors -->
    <div class="absolute inset-y-0 left-28 right-28 sm:left-36 sm:right-36 z-0 flex flex-col items-stretch justify-center gap-2 pointer-events-none">
      <div class="h-px bg-gradient-to-r from-transparent via-violet-400/80 to-transparent"></div>
      <div class="h-px bg-gradient-to-r from-transparent via-violet-400/60 to-transparent"></div>
      <div class="h-px bg-gradient-to-r from-transparent via-violet-400/40 to-transparent"></div>
    </div>

    <!-- Nodes -->
    <div class="relative z-10 flex items-center justify-between">
  <!-- Left: Our solution -->
  <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 border-white/10 bg-neutral-900/70 ring-1 ring-white/10 backdrop-blur-sm overflow-hidden">
      <div class="absolute -left-4 top-2 w-20 h-20 rounded-full bg-gradient-to-tr from-violet-500/70 to-fuchsia-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 from-fuchsia-400/70 to-violet-500/30 blur-xl"></div>
      <div class="absolute right-3 bottom-3 w-8 h-8 rounded-full bg-gradient-to-tr from-violet-300/60 to-transparent blur-lg"></div>
      <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a38df6cd-82bf-450c-b1d7-2f5c17da8d53_320w.jpg)] bg-cover ring-white/5 ring-1 rounded-xl"></div>
    </div>
    <span class="text-xs text-neutral-300">Our solution</span>
  </div>

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

  <!-- Right: Your stack -->
  <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 border-white/10 bg-neutral-900/70 ring-1 ring-white/10 backdrop-blur-sm overflow-hidden">
      <!-- Geometric logo approximation -->
      <div class="absolute right-4 top-4 w-8 h-6 bg-gradient-to-br from-violet-400 to-fuchsia-500" 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-fuchsia-500 to-violet-500" style="clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);"></div>
      <div class="absolute inset-0 ring-white/5 ring-1 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c70d18bc-d03b-4452-a10e-b582be3d1aba_320w.jpg)] bg-cover rounded-xl"></div>
    </div>
    <span class="text-xs text-neutral-300">Your stack</span>
  </div>

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

  <!-- Subtle meta row -->
  <div class="mt-3 flex items-center gap-2">
    <span class="inline-flex items-center gap-1.5 text-[10px] px-2 py-0.5 rounded bg-white/5 border border-white/10 text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-emerald-300">
        <path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
      </svg>
      See Growth
    </span>
    <span class="text-[10px] px-2 py-0.5 rounded bg-black/40 border border-white/10 text-gray-300">On‑chain metrics</span>
    <span class="text-[10px] px-2 py-0.5 rounded bg-black/40 border border-white/10 text-gray-300">Last 24h</span>
  </div>
</div>