Hero card floating children

<div class="relative w-full h-[600px] flex items-center justify-center perspective-1000">
          <!-- Background Blob for depth -->
          <div class="absolute inset-0 m-auto w-[450px] h-[450px] bg-gradient-to-tr rounded-full blur-[80px] -z-10 opacity-60 from-blue-100 to-emerald-100"></div>

          <!-- Instructor Image (Central) -->
          <div class="relative z-10 w-[340px] md:w-[380px] h-[480px] md:h-[520px] rounded-3xl overflow-hidden shadow-2xl border-[6px] ring-1 group transform transition-transform hover:scale-[1.01] duration-500 border-white/80 ring-slate-900/5">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Friendly Instructor" class="w-full h-full object-cover">
            <!-- Subtle gradient overlay at bottom for name -->
            <div class="absolute bottom-0 inset-x-0 h-32 bg-gradient-to-t to-transparent flex items-end p-6 from-black/60">
              <div class="text-white">
                <p class="font-semibold text-lg font-manrope">Sarah Jenkins</p>
                <p class="text-xs font-medium font-manrope opacity-90 text-slate-200">
                  Lead Instructor &amp; Excel MVP
                </p>
              </div>
            </div>
          </div>

          <!-- Floating Card 1: Excel (Bottom Left - Overlapping slightly) -->
          <div class="absolute bottom-16 -left-4 md:left-0 lg:-left-12 z-20 w-64 rounded-2xl shadow-[0_20px_40px_-10px_rgba(16,185,129,0.15)] border p-4 animate-float-delay bg-white border-slate-100">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-emerald-100 text-emerald-600">
                <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" data-lucide="table-2" class="lucide lucide-table-2 w-5 h-5">
                  <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" class=""></path>
                </svg>
              </div>
              <div class="">
                <p class="text-xs font-semibold uppercase tracking-wider font-manrope text-slate-400" style="">
                  Spreadsheets
                </p>
                <p class="text-sm font-semibold font-manrope text-slate-900" style="">
                  Budget_FINAL.xlsx
                </p>
              </div>
            </div>
            <div class="space-y-2">
              <div class="flex justify-between text-xs text-slate-500">
                <span style="" class="font-manrope">Formula Accuracy</span>
                <span class="font-bold font-manrope text-emerald-600" style="">
                  100%
                </span>
              </div>
              <div class="h-16 rounded-lg border excel-grid relative overflow-hidden bg-slate-50 border-slate-100">
                <div class="absolute top-2 left-2 right-2 h-3 rounded w-3/4 bg-emerald-100/50"></div>
                <div class="absolute top-7 left-2 right-2 h-3 rounded w-1/2 bg-slate-200/50"></div>
                <div class="absolute bottom-2 right-2 bg-emerald-500 text-[10px] px-2 py-0.5 rounded shadow-sm font-manrope text-white" style="">
                  =SUM(A1:B4)
                </div>
              </div>
            </div>
          </div>

          <!-- Floating Card 2: PowerPoint (Top Right - Floating freely) -->
          <div class="-right-4 md:right-0 lg:-right-8 z-20 animate-float w-56 border rounded-2xl pt-4 pr-4 pb-4 pl-4 absolute top-10 shadow-[0_20px_40px_-10px_rgba(249,115,22,0.15)] -translate-x-4 -translate-y-12 bg-white border-slate-100">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-orange-100 text-orange-600">
                <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" data-lucide="presentation" class="lucide lucide-presentation w-4 h-4">
                  <path d="M2 3h20"></path>
                  <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path>
                  <path d="m7 21 5-5 5 5"></path>
                </svg>
              </div>
              <div class="">
                <p class="text-[10px] font-semibold uppercase tracking-wider font-manrope text-slate-400" style="">
                  Decks
                </p>
                <p class="text-xs font-semibold font-manrope text-slate-900" style="">
                  Q4 Strategy.pptx
                </p>
              </div>
            </div>
            <div class="aspect-video rounded-lg flex items-center justify-center relative overflow-hidden bg-orange-50">
              <!-- Chart simulation -->
              <svg viewBox="0 0 100 100" class="w-12 h-12 transform -rotate-90">
                <circle cx="50" cy="50" r="40" stroke="#fed7aa" stroke-width="20" fill="none"></circle>
                <circle cx="50" cy="50" r="40" stroke="#f97316" stroke-width="20" fill="none" stroke-dasharray="180 251" class=""></circle>
              </svg>
              <div class="absolute bottom-2 left-2 text-[9px] font-medium px-2 py-0.5 rounded-full backdrop-blur-sm font-manrope text-orange-800 bg-white/80" style="">
                Animation On
              </div>
            </div>
          </div>

          <!-- Floating Card 3: Word (Bottom Right - Lower than center) -->
          <div class="absolute bottom-32 -right-8 md:right-[-20px] lg:-right-16 z-30 w-60 rounded-2xl shadow-[0_30px_60px_-15px_rgba(37,99,235,0.2)] border p-4 animate-float-delay bg-white border-slate-100" style="animation-delay: 2s;">
            <div class="flex items-center justify-between mb-4 border-b pb-3 border-slate-100">
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-100 text-blue-600">
                  <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" data-lucide="file-text" class="lucide lucide-file-text w-4 h-4">
                    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
                    <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
                    <path d="M10 9H8"></path>
                    <path d="M16 13H8"></path>
                    <path d="M16 17H8"></path>
                  </svg>
                </div>
                <div>
                  <p class="text-[10px] font-semibold uppercase tracking-wider font-manrope text-slate-400" style="">
                    Docs
                  </p>
                  <p class="text-xs font-semibold font-manrope text-slate-900" style="">
                    Proposal.docx
                  </p>
                </div>
              </div>
              <div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
            </div>

            <div class="space-y-2">
              <div class="h-1.5 rounded-full w-full bg-slate-100"></div>
              <div class="h-1.5 rounded-full w-5/6 bg-slate-100"></div>

              <div class="mt-3 p-2 rounded-lg border flex items-center gap-2 bg-blue-50 border-blue-100">
                <div class="w-5 h-5 rounded-full flex items-center justify-center shrink-0 bg-blue-600 text-white">
                  <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" data-lucide="sparkles" class="lucide lucide-sparkles w-2.5 h-2.5">
                    <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path>
                    <path d="M20 2v4"></path>
                    <path d="M22 4h-4"></path>
                    <circle cx="4" cy="20" r="2"></circle>
                  </svg>
                </div>
                <p class="text-[10px] font-medium font-manrope text-blue-900" style="">
                  Formatting Fixed
                </p>
              </div>
            </div>
          </div>
        </div>