Space Science Explore Section with Search & Cards

<section class="relative z-10 animate-[fadeInUp_1s_ease-out_1.2s_forwards] mt-32" style="transform: translateY(50px);" id="explore-space">
  <div class="max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
    <div class="text-center pb-14">
      <h2 class="text-4xl md:text-5xl tracking-tight font-semibold uppercase text-white/95">Let's Explore Space Science</h2>
      <div class="mx-auto mt-8 max-w-3xl">
        <div class="relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl overflow-hidden">
          <div class="grid grid-cols-[1fr_auto] items-center">
            <input type="text" placeholder="Research, Activities and Science" class="h-14 w-full md:px-6 placeholder-white/50 focus:outline-none focus:ring-0 text-white/90 bg-transparent pr-4 pl-4">
            <button class="h-14 md:px-6 hover:from-emerald-300 hover:to-lime-300 transition uppercase text-sm font-medium text-slate-900 tracking-wide bg-gradient-to-tl from-blue-400 to-emerald-400 pr-4 pl-4">
              Search
            </button>
          </div>
          <span class="pointer-events-none absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-emerald-400 via-cyan-400 to-lime-400 opacity-80"></span>
        </div>
      </div>
      <p class="mt-8 text-xs uppercase tracking-wide text-white/60">Or browse by category:</p>
    </div>

    <div class="supports-[backdrop-filter]:bg-white/5 md:p-6 border-white/10 border rounded-2xl mt-6 pt-4 pr-4 pb-4 pl-4 backdrop-blur-2xl">
      <div class="grid gap-3 md:gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Card 1 -->
        <div class="flex flex-col w-full max-w-sm aspect-[3/5] hover:scale-105 transition-all duration-500 hover:shadow-2xl group text-zinc-800 bg-slate-700/10 border-white/5 border rounded-2xl pt-8 pr-8 pb-8 pl-8 shadow-lg backdrop-blur-none justify-between">
  <!-- Main image section -->
  <div class="flex flex-1 bg-cover bg-center border rounded-2xl p-8 items-center justify-center border-stone-600/50 shadow-inner relative overflow-hidden group-hover:border-emerald-300/70 transition-all duration-300" style="background-image: url('https://cdn.midjourney.com/9f1965f4-3248-45f5-892d-d95e1b652e35/0_0.png');">
    
  </div>

  <!-- Content section -->
  <div class="space-y-6 mt-8">
    <!-- Header with progress dots -->
    <div class="flex items-center justify-between">
      <span class="text-xs uppercase tracking-widest text-zinc-500 font-medium font-sans">Space Science Journal</span>
      <div class="flex gap-1">
        <div class="w-2 h-2 bg-slate-50 rounded-full shadow-sm"></div>
        <div class="w-2 h-2 bg-slate-400 rounded-full shadow-sm"></div>
        <div class="w-2 h-2 bg-slate-400 rounded-full shadow-sm"></div>
      </div>
    </div>

    <!-- Title -->
    <h2 class="sm:text-2xl leading-tight text-xl font-semibold text-slate-50 tracking-tight">
      Reflect on your exploration journey
    </h2>

    <!-- Footer with features and arrow -->
    <div class="flex items-center justify-between pt-2">
      <div class="text-sm text-zinc-500 space-y-1 font-light font-sans">
        <p class="">Daily discoveries &amp; observations</p>
        <p class="">Track mood &amp; curiosity level</p>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 text-zinc-400 group-hover:text-zinc-600"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
    </div>
  </div>
</div>

        <!-- Card 2 (featured) -->
        <a href="#" class="group hover:scale-105 transition-all duration-500 hover:shadow-2xl hover:bg-white/5 flex flex-col items-center text-center bg-white/0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d1ec84a0-bb6f-445a-8aea-00d1fab64f7b_800w.jpg)] bg-cover border-white/10 border rounded-xl pt-5 pr-5 pb-5 pl-5" style="">
          <div class="relative">
            <div class="h-14 w-14 rounded-full bg-white/5 border border-emerald-400/30 grid place-items-center">
              <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="cpu" class="lucide lucide-cpu w-6 h-6 text-emerald-300"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
            </div>
            <span class="pointer-events-none absolute inset-[-10px] rounded-full border border-dashed border-emerald-400/30 opacity-80"></span>
          </div>
          <h3 class="text-base font-semibold tracking-tight mt-4">Technology and Space Science</h3>
          <span class="mt-3 inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wide text-emerald-300">
            Read more
            <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="chevron-right" class="lucide lucide-chevron-right w-3.5 h-3.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </span>
          <span class="pointer-events-none absolute -inset-px rounded-xl ring-1 ring-emerald-400/20"></span>
        </a>

        <!-- Card 3 -->
        

        <!-- Card 4 -->
        <a href="#" class="group hover:scale-105 transition-all duration-500 hover:shadow-2xl hover:bg-white/5 flex flex-col items-center text-center bg-white/0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c971ca15-2f95-49f2-bf48-60b6ba4a00cb_800w.jpg)] bg-cover border-white/10 border rounded-xl pt-5 pr-5 pb-5 pl-5">
  <div class="relative">
    <div class="h-14 w-14 rounded-full bg-white/5 border border-white/10 grid place-items-center">
      <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="telescope" class="lucide lucide-telescope w-[24px] h-[24px] text-slate-500" data-icon-replaced="true" style="width: 24px; height: 24px;"><path d="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44" class=""></path><path d="m13.56 11.747 4.332-.924" class=""></path><path d="m16 21-3.105-6.21" class=""></path><path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z" class=""></path><path d="m6.158 8.633 1.114 4.456" class=""></path><path d="m8 21 3.105-6.21" class=""></path><circle cx="12" cy="13" r="2" class=""></circle></svg>
    </div>
    <span class="pointer-events-none absolute inset-[-10px] rounded-full border border-dashed border-white/10 opacity-60"></span>
  </div>
  <h3 class="mt-4 text-base font-semibold tracking-tight">Observatory Programs</h3>
</a><a href="#" class="group hover:scale-105 transition-all duration-500 hover:shadow-2xl hover:bg-white/5 flex flex-col items-center text-center bg-white/0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/930dd95c-ac31-40eb-b571-12e8505d3de7_800w.jpg)] bg-cover border-white/10 border rounded-xl pt-5 pr-5 pb-5 pl-5" style="">
          <div class="relative">
            <div class="h-14 w-14 rounded-full bg-white/5 border border-white/10 grid place-items-center">
              <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="book-open" class="lucide lucide-book-open w-[24px] h-[24px] text-slate-500" data-icon-replaced="true" style="width: 24px; height: 24px;"><path d="M12 7v14" class=""></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" class=""></path></svg>
            </div>
            <span class="pointer-events-none absolute inset-[-10px] rounded-full border border-dashed border-white/10 opacity-60"></span>
          </div>
          <h3 class="mt-4 text-base font-semibold tracking-tight">Educational Activities</h3>
        </a>
      </div>
    </div>
  </div>
</section>