Upcoming Events Section with CTA Buttons

<section class="relative sm:py-10 pt-8 pb-8">
      <section id="exo9-upcoming-events" class="relative z-10 max-w-7xl md:px-8 mt-10 mr-auto ml-auto pr-6 pl-6">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
    <a href="#" class="inline-flex items-center gap-2 rounded-xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-2 text-sm font-medium text-emerald-300 hover:bg-emerald-500/15 transition">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
      <span class="tracking-wide">Explore EXO9 Calendar</span>
    </a>
    <a href="#" class="inline-flex items-center gap-2 hover:bg-white/10 transition text-sm font-medium text-white/80 bg-white/5 border-white/10 border rounded-xl pt-2 pr-4 pb-2 pl-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-4 w-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
      <span class="tracking-wide">Sign up for our newsletter</span>
    </a>
  </div>

  <h2 class="mt-6 text-4xl md:text-5xl font-semibold tracking-tight text-white/95 uppercase">Upcoming Events</h2>

  <div class="mt-6 space-y-4">
    <!-- Event 1 -->
    <article class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] backdrop-blur px-5 py-4">
      <div class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] items-center gap-4">
        <div class="flex items-center md:block justify-between">
          <div class="flex gap-2 text-[11px] uppercase text-slate-400 tracking-wide items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar-days" class="lucide lucide-calendar-days h-3.5 w-3.5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path><path d="M8 14h.01" class=""></path><path d="M12 14h.01" class=""></path><path d="M16 14h.01" class=""></path><path d="M8 18h.01" class=""></path><path d="M12 18h.01" class=""></path><path d="M16 18h.01" class=""></path></svg>
            <span class="">Oct, 15</span>
          </div>
          <p class="md:mt-2 text-2xl md:text-3xl font-semibold tracking-tight text-white/95">Sunday</p>
        </div>
        <div class="">
          
          <h3 class="mt-1 text-base md:text-lg font-semibold tracking-tight">Launch Lab: Building Micro‑Rockets</h3>
          <p class="mt-1 text-sm text-white/60">Hands‑on family workshop with take‑home kits.</p>
        </div>
        <a href="#" aria-label="View Sunday event" class="justify-self-end h-10 w-10 grid place-items-center rounded-xl border border-white/10 bg-white/5 text-white/80 hover:bg-white/10 transition">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
        </a>
      </div>
    </article>

    <!-- Featured Event -->
    <article class="group relative overflow-hidden rounded-2xl border border-emerald-400/30 bg-emerald-500/5 backdrop-blur shadow-lg shadow-emerald-500/20">
      <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?q=80&amp;w=1974&amp;auto=format&amp;fit=crop" alt="Aurora over Europa artwork" class="absolute inset-0 h-full w-full object-cover opacity-60" style="">
      <div class="absolute inset-0 bg-gradient-to-r from-slate-900/80 via-slate-900/50 to-slate-900/20"></div>
      <div class="relative px-5 py-5">
        <div class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] items-center gap-4">
          <div class="flex items-center md:block justify-between">
            <div class="flex gap-2 text-[11px] uppercase text-slate-400 tracking-wide items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar-clock" class="lucide lucide-calendar-clock h-3.5 w-3.5"><path d="M16 14v2.2l1.6 1" class=""></path><path d="M16 2v4" class=""></path><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5" class=""></path><path d="M3 10h5" class=""></path><path d="M8 2v4" class=""></path><circle cx="16" cy="16" r="6" class=""></circle></svg>
              <span class="">Oct, 27</span>
            </div>
            <p class="md:mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white">Friday</p>
          </div>
          <div class="">
            <div class="flex gap-2 text-[11px] uppercase text-emerald-300 tracking-wide items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="scan-eye" class="lucide lucide-scan-eye h-3.5 w-3.5"><path d="M3 7V5a2 2 0 0 1 2-2h2" class=""></path><path d="M17 3h2a2 2 0 0 1 2 2v2" class=""></path><path d="M21 17v2a2 2 0 0 1-2 2h-2" class=""></path><path d="M7 21H5a2 2 0 0 1-2-2v-2" class=""></path><circle cx="12" cy="12" r="1" class=""></circle><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0" class=""></path></svg>
              <span class="">EXO9 Virtual Dome</span>
            </div>
            <h3 class="mt-1 text-lg md:text-2xl font-semibold tracking-tight text-white">Live Virtual Dome: Aurora Over Europa</h3>
            <p class="mt-1 text-sm text-white/80">A real‑time guided stream with interactive Q&amp;A.</p>
          </div>
          <a href="#" aria-label="Join Live Virtual Dome" class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
          </a>
        </div>
      </div>
      <span class="pointer-events-none absolute -inset-px rounded-2xl ring-1 ring-emerald-400/30"></span>
    </article>

    <!-- Event 3 -->
    <article class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] backdrop-blur px-5 py-4">
      <div class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] items-center gap-4">
        <div class="flex items-center md:block justify-between">
          <div class="flex gap-2 text-[11px] uppercase text-slate-400 tracking-wide items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar-range" class="lucide lucide-calendar-range h-3.5 w-3.5"><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M16 2v4" class=""></path><path d="M3 10h18" class=""></path><path d="M8 2v4" class=""></path><path d="M17 14h-6" class=""></path><path d="M13 18H7" class=""></path><path d="M7 14h.01" class=""></path><path d="M17 18h.01" class=""></path></svg>
            <span>Nov, 4</span>
          </div>
          <p class="md:mt-2 text-2xl md:text-3xl font-semibold tracking-tight text-white/95">Saturday</p>
        </div>
        <div class="">
          <div class="flex gap-2 text-[11px] uppercase text-slate-400 tracking-wide items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin h-3.5 w-3.5"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
            <span class="">EXO9 Main Concourse</span>
          </div>
          <h3 class="mt-1 text-base md:text-lg font-semibold tracking-tight">New Exhibit Premiere: Quantum Rockets</h3>
          <p class="mt-1 text-sm text-white/60">Grand opening with curator talk and demos.</p>
        </div>
        <a href="#" aria-label="View Saturday event" class="justify-self-end h-10 w-10 grid place-items-center rounded-xl border border-white/10 bg-white/5 text-white/80 hover:bg-white/10 transition">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
        </a>
      </div>
    </article>
  </div>
</section>
      
</section>