Bootcamp Hero with Stats and Scrolling Marquee

<header class="lg:px-10 overflow-hidden text-white bg-[#18181B] rounded-b-[3rem] pt-12 pr-6 pb-24 pl-6 relative">
  <div class="max-w-[1400px] mx-auto">

    <!-- Top Hero Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center mb-20">

      <!-- Left Column -->
      <div class="lg:col-span-6 flex flex-col gap-8 z-10">
        <div class="">
          <h1 class="lg:text-[5.5rem] leading-[1] text-6xl text-white mb-6 font-medium tracking-tight">
            Logic Meets <br>
            <span class="text-[#9EF0A0]">Creativity.</span>
          </h1>
          <p class="text-[#A1A1AA] text-lg font-light leading-relaxed max-w-lg">
            We don't just teach syntax; we engineer mindsets. Join the #1 rated coding bootcamp and leave ready to
            deploy scalable applications on day one.
          </p>
        </div>

        <!-- CTA Area -->
        <div class="flex flex-wrap items-center gap-6 mt-2">
          <a href="#"
            class="px-8 py-4 bg-[#9EF0A0] text-[#18181B] rounded-xl font-semibold text-base hover:bg-[#8BE08D] transition-colors shadow-[0_0_20px_rgba(158,240,160,0.2)]">
            Get Started
          </a>

          <div class="flex flex-col border-l border-white/10 pl-6">
            <span class="text-sm font-medium text-white">Next Cohort</span>
            <span class="text-sm text-[#71717A]">Starts Oct 12</span>
          </div>
        </div>
      </div>

      <!-- Right Column -->
      <div class="lg:col-span-6 relative">
        <!-- Image Container -->
        <div class="relative rounded-3xl overflow-hidden border border-white/5 bg-[#27272A] aspect-[4/3]">
          <div
            class="absolute top-6 right-6 z-20 bg-white/90 backdrop-blur-md px-4 py-3 rounded-2xl shadow-lg max-w-[180px]">
            <div class="text-[10px] font-bold text-[#71717A] uppercase tracking-wider mb-1">5000+ Alumni</div>
            <div class="text-sm font-semibold text-[#18181B] leading-tight">See Our Latest Outcome Report</div>
          </div>

          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c366997c-6a03-4ceb-baf5-f1115ea453be_1600w.jpg" alt="Students coding" class="w-full h-full object-cover opacity-90 hover:scale-105 transition-transform duration-700">
        </div>

        <!-- Stats Row -->
        <div class="flex mt-8 pr-4 pl-4 space-x-4 items-start justify-between">
          <div class="text-center lg:text-left">
            <h3 class="text-3xl font-medium text-white tracking-tight mb-1">94%</h3>
            <p class="text-[#71717A] text-xs font-medium uppercase tracking-wide">Hired Rate</p>
          </div>
          <div class="text-center lg:text-left">
            <h3 class="text-3xl font-medium text-[#9EF0A0] tracking-tight mb-1">1.2k+</h3>
            <p class="text-[#71717A] text-xs font-medium uppercase tracking-wide">Active Students</p>
          </div>
          <div class="text-center lg:text-left">
            <h3 class="text-3xl font-medium text-[#B2A5FE] tracking-tight mb-1">$85k</h3>
            <p class="text-[#71717A] text-xs font-medium uppercase tracking-wide">Avg Salary</p>
          </div>
          <div class="text-center lg:text-left">
            <h3 class="text-3xl font-medium text-white tracking-tight mb-1">500+</h3>
            <p class="text-[#71717A] text-xs font-medium uppercase tracking-wide">Hiring Partners</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Scrolling Marquee Cards -->
    <div class="w-full relative">
      <!-- Alpha Mask -->
      <div
        class="absolute inset-0 z-10 pointer-events-none bg-gradient-to-r from-[#18181B] via-transparent to-[#18181B]">
      </div>

      <div class="flex overflow-hidden w-full">
        <div class="flex gap-6 animate-marquee w-max pt-4 pb-4 gap-x-6 gap-y-6">
          <!-- Card 1: Software Engineering (Consistent Style) -->
          <div
            class="w-[350px] bg-[#27272A] rounded-3xl p-8 flex flex-col h-full border border-white/10 hover:border-[#B2A5FE]/50 transition-colors group">
            <div
              class="w-12 h-12 bg-[#2E2E32] rounded-full flex items-center justify-center mb-6 text-[#B2A5FE] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:code-circle-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
                  opacity=".5" class=""></path>
                <path fill="currentColor"
                  d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06m-7 0a.75.75 0 0 1 1.06 1.06l-.171.172c-.682.682-1.138 1.14-1.434 1.528c-.283.37-.346.586-.346.77s.063.4.346.77c.296.387.752.846 1.434 1.528l.172.172a.75.75 0 1 1-1.061 1.06l-.208-.208c-.636-.635-1.166-1.165-1.53-1.642c-.384-.504-.653-1.036-.653-1.68s.27-1.176.653-1.68c.364-.477.894-1.007 1.53-1.642z"
                  class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-white mb-3 font-medium tracking-tight">Software Engineering</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Full-stack mastery. From database architecture to reactive front-end interfaces.
            </p>
          </div>

          <!-- Card 2: Web Design -->
          <div
            class="w-[350px] bg-[#9EF0A0]/5 rounded-3xl p-8 flex flex-col h-full border border-[#9EF0A0]/10 hover:bg-[#9EF0A0]/10 transition-colors group">
            <div
              class="w-12 h-12 bg-[#9EF0A0] rounded-full flex items-center justify-center mb-6 text-[#18181B] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:monitor-smartphone-bold-duotone"
                class="iconify text-2xl iconify--solar">
                <path fill="currentColor" fill-rule="evenodd"
                  d="M22 15v3c0 1.886 0 2.828-.586 3.414S19.886 22 18 22s-2.828 0-3.414-.586S14 19.886 14 18v-3c0-1.886 0-2.828.586-3.414S16.114 11 18 11s2.828 0 3.414.586S22 13.114 22 15m-5.75 5a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75"
                  clip-rule="evenodd" class=""></path>
                <path fill="currentColor"
                  d="M8 17c-2.829 0-4.243 0-5.122-.879c-.569-.569-.807-1.363-.878-2.621V13h10.516v.5c-.016.437-.016.912-.016 1.41v3.18c0 .865 0 1.659.086 2.304c.096.711.32 1.463.939 2.08l.025.026H8A.75.75 0 0 1 8 21h3.25v-4z"
                  class=""></path>
                <path fill="currentColor"
                  d="M10 2h4c3.771 0 5.657 0 6.828 1.172S22 6.229 22 10v.138c-.508-.333-1.069-.48-1.606-.551C19.75 9.5 18.955 9.5 18.09 9.5h-.18c-.865 0-1.659 0-2.304.087c-.711.095-1.463.32-2.08.938c-.588.588-.82 1.296-.924 1.975v.5H2v-.5c-.007-.45 0-.948 0-1.5v-1c0-3.771 0-5.657 1.172-6.828S6.229 2 10 2"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-[#9EF0A0] mb-3 font-medium tracking-tight">Web Design</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Master modern UI/UX principles and implement them with React and Tailwind CSS.
            </p>
          </div>

          <!-- Card 3: Digital Transformation -->
          <div
            class="w-[350px] bg-[#B2A5FE]/5 rounded-3xl p-8 flex flex-col h-full border border-[#B2A5FE]/10 hover:bg-[#B2A5FE]/10 transition-colors group">
            <div
              class="w-12 h-12 bg-[#B2A5FE] rounded-full flex items-center justify-center mb-6 text-[#18181B] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:rocket-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor" fill-rule="evenodd"
                  d="m14.447 16.377l5.847-5.83c.842-.839 1.263-1.259 1.484-1.792S22 7.627 22 6.44v-.567c0-1.826 0-2.739-.569-3.306S19.947 2 18.116 2h-.57c-1.19 0-1.785 0-2.32.221c-.536.221-.957.641-1.8 1.48L7.58 9.531c-.984.98-1.594 1.589-1.83 2.176a1.5 1.5 0 0 0-.112.562c0 .802.647 1.448 1.942 2.739l.174.173l2.038-2.069a.75.75 0 1 1 1.069 1.053L8.816 16.24l.137.137c1.295 1.29 1.943 1.936 2.747 1.936c.178 0 .348-.031.519-.094c.603-.222 1.219-.836 2.228-1.842m2.747-6.846a1.946 1.946 0 0 1-2.747 0a1.93 1.93 0 0 1 0-2.738a1.946 1.946 0 0 1 2.747 0a1.93 1.93 0 0 1 0 2.738"
                  clip-rule="evenodd" class=""></path>
                <path fill="currentColor"
                  d="M9.034 5.963L6.491 8.5c-.467.466-.896.893-1.235 1.28a6 6 0 0 0-.619.82l-.024-.025l-.095-.094a4.9 4.9 0 0 0-1.532-1.004l-.123-.05l-.379-.15a.764.764 0 0 1-.259-1.252C3.345 6.907 4.69 5.566 5.34 5.297a3.4 3.4 0 0 1 1.788-.229c.546.081 1.063.362 1.907.895m4.342 13.35c.205.208.34.355.464.512q.243.311.434.658c.142.26.253.537.474 1.092a.69.69 0 0 0 1.126.224l.084-.083c1.12-1.117 2.465-2.458 2.735-3.105a3.35 3.35 0 0 0 .229-1.782c-.081-.545-.362-1.06-.897-1.902l-2.552 2.544c-.478.477-.916.914-1.313 1.256c-.237.206-.497.41-.784.586"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-[#B2A5FE] mb-3 font-medium tracking-tight">Digital Transformation</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Learn how to architect scalable systems that drive business growth and efficiency.
            </p>
          </div>

          <!-- Card 4: Data Science (New) -->
          <div
            class="w-[350px] bg-[#27272A] rounded-3xl p-8 flex flex-col h-full border border-white/10 hover:border-white/30 transition-colors group">
            <div
              class="w-12 h-12 bg-[#2E2E32] rounded-full flex items-center justify-center mb-6 text-white group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:chart-2-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor"
                  d="M3.293 9.293C3 9.586 3 10.057 3 11v6c0 .943 0 1.414.293 1.707S4.057 19 5 19s1.414 0 1.707-.293S7 17.943 7 17v-6c0-.943 0-1.414-.293-1.707S5.943 9 5 9s-1.414 0-1.707.293"
                  class=""></path>
                <path fill="currentColor"
                  d="M17.293 2.293C17 2.586 17 3.057 17 4v13c0 .943 0 1.414.293 1.707S18.057 19 19 19s1.414 0 1.707-.293S21 17.943 21 17V4c0-.943 0-1.414-.293-1.707S19.943 2 19 2s-1.414 0-1.707.293"
                  opacity=".4" class=""></path>
                <path fill="currentColor"
                  d="M10 7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17z"
                  opacity=".7" class=""></path>
                <path fill="currentColor" d="M3 21.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5z" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-white mb-3 font-medium tracking-tight">Data Science</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Extract insights from complex datasets using Python, SQL, and Machine Learning.
            </p>
          </div>

          <!-- Duplicate Cards for Loop -->
          <!-- Card 1 Duplicate -->
          <div
            class="w-[350px] bg-[#27272A] rounded-3xl p-8 flex flex-col h-full border border-white/10 hover:border-[#B2A5FE]/50 transition-colors group">
            <div
              class="w-12 h-12 bg-[#2E2E32] rounded-full flex items-center justify-center mb-6 text-[#B2A5FE] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:code-circle-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
                  opacity=".5" class=""></path>
                <path fill="currentColor"
                  d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06m-7 0a.75.75 0 0 1 1.06 1.06l-.171.172c-.682.682-1.138 1.14-1.434 1.528c-.283.37-.346.586-.346.77s.063.4.346.77c.296.387.752.846 1.434 1.528l.172.172a.75.75 0 1 1-1.061 1.06l-.208-.208c-.636-.635-1.166-1.165-1.53-1.642c-.384-.504-.653-1.036-.653-1.68s.27-1.176.653-1.68c.364-.477.894-1.007 1.53-1.642z"
                  class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-white mb-3 font-medium tracking-tight">Software Engineering</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Full-stack mastery. From database architecture to reactive front-end interfaces.
            </p>
          </div>
          <!-- Card 2 Duplicate -->
          <div
            class="w-[350px] bg-[#9EF0A0]/5 rounded-3xl p-8 flex flex-col h-full border border-[#9EF0A0]/10 hover:bg-[#9EF0A0]/10 transition-colors group">
            <div
              class="w-12 h-12 bg-[#9EF0A0] rounded-full flex items-center justify-center mb-6 text-[#18181B] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:monitor-smartphone-bold-duotone"
                class="iconify text-2xl iconify--solar">
                <path fill="currentColor" fill-rule="evenodd"
                  d="M22 15v3c0 1.886 0 2.828-.586 3.414S19.886 22 18 22s-2.828 0-3.414-.586S14 19.886 14 18v-3c0-1.886 0-2.828.586-3.414S16.114 11 18 11s2.828 0 3.414.586S22 13.114 22 15m-5.75 5a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75"
                  clip-rule="evenodd" class=""></path>
                <path fill="currentColor"
                  d="M8 17c-2.829 0-4.243 0-5.122-.879c-.569-.569-.807-1.363-.878-2.621V13h10.516v.5c-.016.437-.016.912-.016 1.41v3.18c0 .865 0 1.659.086 2.304c.096.711.32 1.463.939 2.08l.025.026H8A.75.75 0 0 1 8 21h3.25v-4z"
                  class=""></path>
                <path fill="currentColor"
                  d="M10 2h4c3.771 0 5.657 0 6.828 1.172S22 6.229 22 10v.138c-.508-.333-1.069-.48-1.606-.551C19.75 9.5 18.955 9.5 18.09 9.5h-.18c-.865 0-1.659 0-2.304.087c-.711.095-1.463.32-2.08.938c-.588.588-.82 1.296-.924 1.975v.5H2v-.5c-.007-.45 0-.948 0-1.5v-1c0-3.771 0-5.657 1.172-6.828S6.229 2 10 2"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-[#9EF0A0] mb-3 font-medium tracking-tight">Web Design</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Master modern UI/UX principles and implement them with React and Tailwind CSS.
            </p>
          </div>
          <!-- Card 3 Duplicate -->
          <div
            class="w-[350px] bg-[#B2A5FE]/5 rounded-3xl p-8 flex flex-col h-full border border-[#B2A5FE]/10 hover:bg-[#B2A5FE]/10 transition-colors group">
            <div
              class="w-12 h-12 bg-[#B2A5FE] rounded-full flex items-center justify-center mb-6 text-[#18181B] group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:rocket-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor" fill-rule="evenodd"
                  d="m14.447 16.377l5.847-5.83c.842-.839 1.263-1.259 1.484-1.792S22 7.627 22 6.44v-.567c0-1.826 0-2.739-.569-3.306S19.947 2 18.116 2h-.57c-1.19 0-1.785 0-2.32.221c-.536.221-.957.641-1.8 1.48L7.58 9.531c-.984.98-1.594 1.589-1.83 2.176a1.5 1.5 0 0 0-.112.562c0 .802.647 1.448 1.942 2.739l.174.173l2.038-2.069a.75.75 0 1 1 1.069 1.053L8.816 16.24l.137.137c1.295 1.29 1.943 1.936 2.747 1.936c.178 0 .348-.031.519-.094c.603-.222 1.219-.836 2.228-1.842m2.747-6.846a1.946 1.946 0 0 1-2.747 0a1.93 1.93 0 0 1 0-2.738a1.946 1.946 0 0 1 2.747 0a1.93 1.93 0 0 1 0 2.738"
                  clip-rule="evenodd" class=""></path>
                <path fill="currentColor"
                  d="M9.034 5.963L6.491 8.5c-.467.466-.896.893-1.235 1.28a6 6 0 0 0-.619.82l-.024-.025l-.095-.094a4.9 4.9 0 0 0-1.532-1.004l-.123-.05l-.379-.15a.764.764 0 0 1-.259-1.252C3.345 6.907 4.69 5.566 5.34 5.297a3.4 3.4 0 0 1 1.788-.229c.546.081 1.063.362 1.907.895m4.342 13.35c.205.208.34.355.464.512q.243.311.434.658c.142.26.253.537.474 1.092a.69.69 0 0 0 1.126.224l.084-.083c1.12-1.117 2.465-2.458 2.735-3.105a3.35 3.35 0 0 0 .229-1.782c-.081-.545-.362-1.06-.897-1.902l-2.552 2.544c-.478.477-.916.914-1.313 1.256c-.237.206-.497.41-.784.586"
                  opacity=".5" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-[#B2A5FE] mb-3 font-medium tracking-tight">Digital Transformation</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Learn how to architect scalable systems that drive business growth and efficiency.
            </p>
          </div>
          <!-- Card 4 Duplicate -->
          <div
            class="w-[350px] bg-[#27272A] rounded-3xl p-8 flex flex-col h-full border border-white/10 hover:border-white/30 transition-colors group">
            <div
              class="w-12 h-12 bg-[#2E2E32] rounded-full flex items-center justify-center mb-6 text-white group-hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:chart-2-bold-duotone" class="iconify text-2xl iconify--solar">
                <path fill="currentColor"
                  d="M3.293 9.293C3 9.586 3 10.057 3 11v6c0 .943 0 1.414.293 1.707S4.057 19 5 19s1.414 0 1.707-.293S7 17.943 7 17v-6c0-.943 0-1.414-.293-1.707S5.943 9 5 9s-1.414 0-1.707.293"
                  class=""></path>
                <path fill="currentColor"
                  d="M17.293 2.293C17 2.586 17 3.057 17 4v13c0 .943 0 1.414.293 1.707S18.057 19 19 19s1.414 0 1.707-.293S21 17.943 21 17V4c0-.943 0-1.414-.293-1.707S19.943 2 19 2s-1.414 0-1.707.293"
                  opacity=".4" class=""></path>
                <path fill="currentColor"
                  d="M10 7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17z"
                  opacity=".7" class=""></path>
                <path fill="currentColor" d="M3 21.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5z" class=""></path>
              </svg>
            </div>
            <h3 class="text-2xl text-white mb-3 font-medium tracking-tight">Data Science</h3>
            <p class="text-[#A1A1AA] text-sm leading-relaxed">
              Extract insights from complex datasets using Python, SQL, and Machine Learning.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>