Feature Showcase Section with Image Grid & CTA

<section class="sm:p-8 max-w-7xl relative bg-neutral-900/60 border-white/10 border rounded-3xl mt-32 mr-auto mb-20 ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
    <!-- Background dividers -->
    

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
      <!-- Left: Heading + copy -->
      <div class="flex flex-col min-h-full justify-between">
        <div class="">
          <span class="text-sm font-normal text-neutral-400">Interface</span>
          <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-white tracking-tighter mt-2">
            A timeline built for speed and focus.
          </h2>

          <!-- subtle plus markers with divider -->
          <div class="mt-8 relative">
            
            <div class="hidden sm:flex flex-col gap-4 relative text-neutral-300 bg-transparent pr-4 pl-4">
  <div class="relative">
    <div class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-emerald-400 via-indigo-400 to-purple-400"></div>
    
    <div class="flex gap-4 items-start">
      <div class="flex-shrink-0 w-4 h-4 z-10 relative bg-neutral-900 border-emerald-400 border-2 rounded-full mt-0.5">
        <div class="w-1.5 h-1.5 absolute top-0.5 left-0.5 bg-emerald-400 rounded-full"></div>
      </div>
      <div class="flex-1 pb-6">
        <span class="text-sm font-medium text-emerald-300">Magnetic timeline</span>
        <p class="text-xs text-neutral-400 mt-1">Smart snapping and precision editing</p>
      </div>
    </div>
  </div>

  <div class="relative">
    <div class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-emerald-400 via-indigo-400 to-purple-400"></div>
    
    <div class="flex gap-4 items-start">
      <div class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-indigo-400 bg-neutral-900 z-10 relative mt-0.5">
        <div class="w-1.5 h-1.5 rounded-full bg-indigo-400 absolute top-0.5 left-0.5"></div>
      </div>
      <div class="flex-1 pb-6">
        <span class="text-sm font-medium text-indigo-300">Ripple trim</span>
        <p class="text-xs text-neutral-400 mt-1">Maintain sync across all tracks</p>
      </div>
    </div>
  </div>

  <div class="relative">
    <div class="flex items-start gap-4">
      <div class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-purple-400 bg-neutral-900 z-10 relative mt-0.5">
        <div class="w-1.5 h-1.5 rounded-full bg-purple-400 absolute top-0.5 left-0.5"></div>
      </div>
      <div class="flex-1">
        <span class="text-sm font-medium text-purple-300">Realtime scopes</span>
        <p class="text-xs text-neutral-400 mt-1">Live waveform and vector analysis</p>
      </div>
    </div>
  </div>
</div>
          </div>
        </div>

        <div class="w-full mt-10">
          <div class="">
            <p class="text-sm font-medium text-white tracking-tight">Accelerate every cut</p>
            <p class="text-sm text-neutral-300 mt-1 max-w-sm">
              Skimming, precise trimming, gap detection, and AI‑powered transcript editing that keeps you in flow.
            </p>
            <a href="#features" class="inline-flex items-center justify-center gap-2 h-10 hover:bg-emerald-600/90 transition text-sm font-normal text-white bg-emerald-600 rounded-full mt-4 px-4 max-w-sm">
              Explore features
              <span class="inline-flex h-2 w-2 rounded-full bg-white"></span>
            </a>
          </div>
        </div>
      </div>

      <!-- Right: Project grid (screens) -->
      <div class="grid grid-cols-2 gap-4 relative">
        <article class="relative overflow-hidden aspect-[4/3] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/01296f44-0b19-41ad-b7cb-1d401455f1af_800w.jpg)]" style="">
          <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/15 to-black/60"></div>
          <div class="absolute top-3 left-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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="scissors" class="lucide lucide-scissors h-3.5 w-3.5" style="stroke-width:1.5"><circle cx="6" cy="6" r="3" class=""></circle><path d="M8.12 8.12 12 12" class=""></path><path d="M20 4 8.12 15.88" class=""></path><circle cx="6" cy="18" r="3" class=""></circle><path d="M14.8 14.8 20 20" class=""></path></svg>
            </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Timeline</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight">Precision editing</p>
          </div>
        </article>

        <article class="relative overflow-hidden aspect-[4/3] bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8d8ff092-132d-4cec-88a1-ac20bce98b33_800w.jpg)] bg-cover border-white/10 rounded-2xl" style="">
          <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
          <div class="absolute top-3 left-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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="clapperboard" class="lucide lucide-clapperboard w-[14px] h-[14px]" style="stroke-width:1.5"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" class=""></path><path d="m6.2 5.3 3.1 3.9" class=""></path><path d="m12.4 3.4 3.1 4" class=""></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" class=""></path></svg>
            </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Multicam</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight">Sync in seconds</p>
          </div>
        </article><article class="relative overflow-hidden aspect-[4/5] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cf8a505e-077b-4767-a4a6-5f049de93919_800w.jpg)]" style="">
          <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
          <div class="absolute top-3 left-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="audio-lines" class="lucide lucide-audio-lines w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(255, 255, 255);"><path d="M2 10v3" class=""></path><path d="M6 6v11" class=""></path><path d="M10 3v18" class=""></path><path d="M14 8v7" class=""></path><path d="M18 5v13" class=""></path><path d="M22 10v3" class=""></path></svg>
            </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Audio</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight">Dialogue enhance</p>
          </div>
        </article><article class="relative overflow-hidden aspect-[4/5] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f7d84a3f-8703-4f20-b660-fd8965a83b5c_800w.jpg)]" style="">
          <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
          <div class="absolute top-3 left-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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="palette" class="lucide lucide-palette h-3.5 w-3.5" style="stroke-width:1.5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
            </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Color</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight">Advanced grading</p>
          </div>
        </article>

        

        
      </div>
    </div>
  </section>