Interactive Performance Chart

<div class="col-span-1 lg:col-span-5 md:p-8 flex flex-col opacity-0 bg-black border-neutral-900 border rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-sm" style="animation: fadeInUp 0.8s ease-out 0.4s forwards; opacity: 0;">
  <div class="flex items-start justify-between mb-6">
    <div>
      <p class="text-sm text-neutral-500 mb-1 font-geist">Weekly Performance</p>
      <p class="text-sm mb-2 text-neutral-600 font-geist">Dec 4-10, 2024</p>
      <p class="text-4xl md:text-5xl text-neutral-200 font-jakarta font-medium">€2,847.50</p>
      <div class="flex items-center gap-2 mt-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-emerald-500">
          <path d="M16 7h6v6"></path>
          <path d="m22 7-8.5 8.5-5-5L2 17"></path>
        </svg>
        <span class="text-sm font-medium text-emerald-400 font-geist">+12.5%</span>
        <span class="text-sm text-neutral-500 font-geist">vs last week</span>
      </div>
    </div>
    <div class="flex gap-2">
      <button class="w-9 h-9 flex items-center justify-center rounded-full transition bg-neutral-900 hover:bg-neutral-800">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-neutral-400">
          <path d="M8 2v4"></path>
          <path d="M16 2v4"></path>
          <rect width="18" height="18" x="3" y="4" rx="2"></rect>
          <path d="M3 10h18"></path>
        </svg>
      </button>
      <button class="w-9 h-9 flex items-center justify-center rounded-full transition bg-neutral-900 hover:bg-neutral-800">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-neutral-400">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="flex h-40 md:h-48 bg-[url(https://cdn.midjourney.com/19c5ff20-1da3-4b42-8d6f-c94cbd1dd244/0_1.png?w=800&q=80)] bg-cover rounded-3xl mt-4 pt-4 pr-4 pb-4 pl-4 items-end justify-between">
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[35%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-200 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Mon</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[65%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-300 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Tue</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[45%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-400 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Wed</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[80%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-500 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Thu</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[55%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-600 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Fri</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[25%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-700 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Sat</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
      <div class="w-6 md:w-8 h-full rounded-t-xl flex flex-col justify-end transition-colors bg-neutral-800 hover:bg-neutral-700">
        <div class="h-[20%] bg-gradient-to-t to-violet-500 rounded-t-xl transition-all duration-700 delay-800 from-violet-400"></div>
      </div>
      <span class="text-xs text-neutral-500 font-medium font-geist">Sun</span>
    </div>
  </div>
  <style>
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  </style>
</div>