Event Detail Card with Attendees and Upload CTA

<section
  class="flex-1 overflow-hidden bg-gradient-to-b from-neutral-900 to-neutral-950 border-neutral-800 border rounded-3xl relative shadow-xl max-w-md mx-auto m-8">
  <div class="flex border-neutral-800/70 border-b pt-6 pr-6 pb-4 pl-6 items-center justify-between">
    <button class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-100 transition rounded-full px-3 py-1 hover:bg-neutral-800/60 border border-transparent hover:border-neutral-700 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
            <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:alt-arrow-left-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M11.596 8.303L8.165 11.63a.5.5 0 0 0 0 .74l6.63 6.43c.414.401 1.205.158 1.205-.37v-5.723z" class=""></path><path fill="currentColor" d="M16 11.293V5.57c0-.528-.791-.771-1.205-.37l-2.482 2.406z" opacity=".5" class=""></path></svg>
            <span class="tracking-tight font-sans">Catalog</span>
          </button>
    <button class="h-9 w-9 rounded-full flex items-center justify-center border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
            <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:star-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
          </button>
  </div>

  <div class="px-6 pb-6 space-y-6">
    <div class="mt-4 space-y-1">
      <p class="text-xs font-medium text-emerald-400 uppercase tracking-[0.2em] font-sans">
        Course Overview
      </p>
      <h2 class="text-2xl text-neutral-50 font-sans tracking-tight">
        Explorations in Linear Models &amp; Geometry
      </h2>
    </div>

    <div class="grid grid-cols-3 gap-4 text-sm border-y border-neutral-800/70 pt-4 pb-4">
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Term
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          3 months
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Credits
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          4.0
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Exam
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          Mid-term, Final
        </p>
      </div>
    </div>

    <p class="text-sm leading-relaxed text-neutral-300 font-sans">
      This course builds an intuitive bridge between geometry and
      statistical modeling. You'll learn how linear structures power
      dimensionality reduction, prediction, and optimization in modern
      data workflows, with emphasis on practical tooling.
    </p>

    <div class="space-y-3 border-t border-neutral-800/70 pt-4">
      <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.22em] font-sans">
        Course Schedule
      </p>
      <div class="space-y-2 text-sm">
        <div class="flex items-center justify-between gap-3 pb-2 border-b border-neutral-800/70">
          <div class="">
            <p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
              Lesson 01
            </p>
            <p class="text-neutral-50 font-medium tracking-tight font-sans">
              Vectors &amp; Notation for Data
            </p>
          </div>
          <p class="text-xs text-neutral-400 font-sans">
            Feb 22 · 19:30
          </p>
        </div>
        <div class="flex items-center justify-between gap-3 pb-2 border-b border-neutral-800/70">
          <div class="">
            <p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
              Lesson 02
            </p>
            <p class="text-neutral-50 font-medium tracking-tight font-sans">
              Linear Operators in Practice
            </p>
          </div>
          <p class="text-xs text-neutral-400 font-sans">
            Feb 28 · 19:30
          </p>
        </div>
        <div class="flex items-center justify-between gap-3">
          <div class="">
            <p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
              Lesson 03
            </p>
            <p class="text-neutral-50 font-medium tracking-tight font-sans">
              Projection &amp; Dimensionality
            </p>
          </div>
          <p class="text-xs text-neutral-400 font-sans">
            Mar 5 · 19:30
          </p>
        </div>
      </div>
    </div>
  </div>
</section>