Market Overview Portfolio Card

<div class="flex flex-col p-8 max-w-sm h-[600px] hover:scale-105 transition-all duration-300 hover:shadow-3xl group text-white bg-zinc-900 bg-cover rounded-3xl shadow-2xl justify-between opacity-0 translate-y-[40px] blur-lg animate-[fadeInSlideBlur_0.8s_ease-out_forwards]" style="background-image: url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/81a82278-7c4d-4f1a-b091-8363387c969c_1600w.jpg); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px;">
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <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="w-7 h-7 text-purple-400 group-hover:scale-110 transition-transform">
        <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"></path>
        <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
      </svg>
      <span class="text-xs px-3 py-1.5 bg-purple-500/20 text-purple-400 rounded-full font-geist">Portfolio</span>
    </div>
    <h2 class="text-5xl sm:text-6xl tracking-tight font-geist font-semibold">Markets</h2>
    <div class="space-y-3 text-sm">
      <div class="flex justify-between items-center hover:bg-zinc-800 p-2 rounded-xl transition-colors">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-emerald-400 rounded-full"></div>
          <span class="font-geist">NVDA</span>
        </div>
        <span class="text-emerald-400 font-medium font-geist">
          +8.24%
          <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="inline w-3 h-3 ml-1">
            <path d="M16 7h6v6"></path>
            <path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
        </span>
      </div>
      <div class="flex justify-between items-center hover:bg-zinc-800 p-2 rounded-xl transition-colors">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
          <span class="font-geist">TSLA</span>
        </div>
        <span class="text-blue-400 font-medium font-geist">
          +4.71%
          <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="inline w-3 h-3 ml-1">
            <path d="M16 7h6v6"></path>
            <path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
        </span>
      </div>
      <div class="flex justify-between items-center hover:bg-zinc-800 p-2 rounded-xl transition-colors">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-yellow-400 rounded-full"></div>
          <span class="font-geist">AMZN</span>
        </div>
        <span class="text-yellow-400 font-medium font-geist">
          +2.18%
          <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="inline w-3 h-3 ml-1">
            <path d="M16 7h6v6"></path>
            <path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
        </span>
      </div>
      <div class="flex justify-between items-center hover:bg-zinc-800 p-2 rounded-xl transition-colors">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-rose-400 rounded-full"></div>
          <span class="font-geist">META</span>
        </div>
        <span class="text-rose-400 font-medium font-geist">
          -1.24%
          <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="inline w-3 h-3 ml-1">
            <path d="M16 17h6v-6"></path>
            <path d="m22 17-8.5-8.5-5 5L2 7"></path>
          </svg>
        </span>
      </div>
      <div class="flex justify-between items-center hover:bg-zinc-800 p-2 rounded-xl transition-colors">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-cyan-400 rounded-full"></div>
          <span class="font-geist">GOOGL</span>
        </div>
        <span class="text-cyan-400 font-medium font-geist">
          +1.87%
          <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="inline w-3 h-3 ml-1">
            <path d="M16 7h6v6"></path>
            <path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
  <div class="space-y-4 border-t border-zinc-800 pt-6">
    <p class="text-zinc-400 text-sm leading-relaxed font-geist">
      Real-time market overview with performance indicators. Diversified portfolio showing strong upward momentum.
    </p>
    <div class="flex justify-between items-center">
      <div class="flex items-center gap-2">
        <span class="font-semibold text-sm tracking-tight font-geist">VERTEX</span>
        <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="w-4 h-4 text-purple-400">
          <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </div>
      <a href="#" class="text-purple-400 text-sm hover:underline transition-colors font-geist">vertex.trade</a>
    </div>
  </div>
  <style>@keyframes fadeInSlideBlur { to { opacity: 1; transform: translateY(0); filter: blur(0px); } }</style>
</div>