AI Platform Feature Section with Animated Cards & CTAs

<section class="overflow-hidden lg:py-24 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/72c90007-7638-4902-8dda-5a6c20e92741_3840w.jpg)] bg-cover pt-16 pb-16 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)" id="resources">
  <!-- Decorative grid lines -->
  <div class="pointer-events-none z-0 absolute inset-0">
    <div class="absolute inset-y-0 left-[12.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent"></div>
    <div class="absolute inset-y-0 left-[37.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent"></div>
    <div class="absolute inset-y-0 left-1/2 w-px bg-gradient-to-b from-transparent via-white/8 to-transparent"></div>
    <div class="absolute inset-y-0 left-[62.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent"></div>
    <div class="absolute inset-x-0 top-1/2 h-px bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto px-6 md:px-8">
    <!-- Section header -->
    <div class="max-w-3xl">
      <div class="inline-flex text-[11px] ring-1 ring-white/10 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.05s_both] font-medium text-white/70 font-geist bg-white/5 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center">Key Features</div>
      <h2 class="mt-4 sm:text-5xl md:text-6xl text-4xl font-normal tracking-tighter font-geist animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.15s_both]">
        Experience AI-Powered Excellence
      </h2>
      <p class="md:mt-4 mt-3 md:text-lg text-base text-white/70 leading-relaxed font-geist animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.25s_both]">
        Our platform delivers cutting-edge capabilities designed to transform your workflow with intelligent automation and seamless integration.
      </p>
    </div>

    <!-- Features grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 mt-10 gap-x-6 gap-y-6">
      <!-- Card 1 -->
      <div class="md:p-6 overflow-hidden animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both] bg-slate-900/50 ring-white/10 ring-1 rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-md">
        <h3 class="text-xl md:text-2xl font-normal tracking-tighter font-geist">Intelligent Recording</h3>
        <p class="mt-2 text-sm text-slate-400 font-geist">
          Capture every moment with precision. Our advanced transcription technology delivers unmatched accuracy for your most important conversations.
        </p>

        <!-- Mini transcript UI -->
        <div class="mt-5 rounded-2xl bg-black/30 ring-1 ring-white/10 p-4">
          <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-2 text-xs text-slate-300 font-geist">
              <svg class="w-4 h-4 opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                <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>
              Live transcript
            </div>
            <div class="inline-flex items-center gap-2 bg-white/5 ring-1 ring-white/10 px-2 py-1 rounded-full">
              <div class="w-1.5 h-1.5 rounded-full bg-orange-300"></div>
              <span class="text-[10px] text-slate-200 font-geist">Recording</span>
            </div>
          </div>
          <div class="mt-3 space-y-2">
            <div class="text-[11px] text-slate-300/90 font-geist">Welcome to the session</div>
            <div class="text-[11px] text-slate-300/90 font-geist">How can we assist you today?</div>
            <div class="text-[11px] text-slate-300/90 font-geist">Let's review the details</div>
            <div class="text-[11px] text-slate-300/90 font-geist">Thank you for your time</div>
          </div>
        </div>
      </div>

      <!-- Card 2 (highlight) -->
      <div class="relative rounded-3xl overflow-hidden ring-1 ring-white/15 bg-gradient-to-b from-white/10 to-white/5 backdrop-blur-md animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.28s_both]">
        <div class="absolute inset-0">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/459579f4-e2d0-4218-a12d-f974a4b89651_800w.jpg" alt="Seamless connection" class="opacity-70 w-full h-full object-cover">
          <div class="bg-gradient-to-t from-slate-950/80 via-slate-950/30 to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
        </div>
        <div class="relative p-5 md:p-6">
          <h3 class="text-xl md:text-2xl font-normal tracking-tighter font-geist">Seamless Collaboration</h3>
          <p class="mt-2 text-sm text-slate-200/80 font-geist">
            Focus on what matters most. Spend less time managing tasks and more time building meaningful connections.
          </p>
        </div>
        <div class="relative p-5 md:p-6 pt-0">
          <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 text-[11px] text-white/80 ring-1 ring-white/15 font-geist">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
              <path d="M5 3v4" class=""></path>
              <path d="M19 17v4" class=""></path>
              <path d="M3 5h4" class=""></path>
              <path d="M17 19h4" class=""></path>
            </svg>
            Auto‑summaries &amp; smart insights
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="md:p-6 overflow-hidden animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.36s_both] bg-slate-900/50 ring-white/10 ring-1 rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-md">
        <h3 class="text-xl md:text-2xl font-normal tracking-tighter font-geist">Customizable Templates</h3>
        <p class="mt-2 text-sm text-slate-400 font-geist">
          Built for professionals who demand flexibility. Our platform adapts to your unique workflow and documentation needs.
        </p>

        <!-- Template preview -->
        <div class="mt-5 rounded-2xl bg-[radial-gradient(ellipse_at_top_left,rgba(255,255,255,0.06),rgba(2,6,23,0.6))] ring-1 ring-white/10 p-4">
          <div class="flex items-center gap-2">
            <div class="w-7 h-7 rounded-lg bg-white/10 ring-1 ring-white/10 flex items-center justify-center">
              <svg class="w-4 h-4 text-slate-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
              </svg>
            </div>
            <div class="">
              <p class="text-sm font-normal text-slate-200 font-geist">Professional Template</p>
              <p class="text-[11px] text-slate-400 font-geist">Comprehensive session documentation</p>
            </div>
          </div>

          <div class="mt-4 grid grid-cols-2 gap-3 text-[11px] text-slate-300 font-geist">
            <div class="flex items-center gap-2">
              <svg class="w-3.5 h-3.5 opacity-80" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                <rect width="18" height="18" x="3" y="4" rx="2" ry="2" class=""></rect>
                <line x1="16" x2="16" y1="2" y2="6" class=""></line>
                <line x1="8" x2="8" y1="2" y2="6" class=""></line>
                <line x1="3" x2="21" y1="10" y2="10" class=""></line>
              </svg>
              <span>November 21, 2025</span>
            </div>
            <div class="flex items-center gap-2">
              <svg class="w-3.5 h-3.5 opacity-80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" class=""></path>
              </svg>
              <span>Virtual Session</span>
            </div>
          </div>

          <div class="mt-4 space-y-2">
            <p class="text-[11px] text-slate-400 font-geist"><span class="text-slate-300">Subject:</span> Strategic planning discussion initiated last week</p>
            <p class="text-[11px] text-slate-400 font-geist"><span class="text-slate-300">Focus:</span> Implementation roadmap and key milestones</p>
          </div>
        </div>
      </div>
    </div>

    <!-- CTAs -->
    <div class="flex flex-wrap animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.4s_both] mt-10 gap-x-3 gap-y-3">
      <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white text-neutral-900 ring-1 ring-white/20 px-4 py-2.5 text-sm font-medium font-geist hover:bg-neutral-100 transition">
        Start free trial
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </a>
      <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white/10 text-white ring-1 ring-white/15 px-4 py-2.5 text-sm font-medium font-geist hover:bg-white/15 transition">
        Explore features
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
          <path d="M5 3v4" class=""></path>
          <path d="M19 17v4" class=""></path>
          <path d="M3 5h4" class=""></path>
          <path d="M17 19h4" class=""></path>
        </svg>
      </a>
      <a href="#" class="group inline-flex items-center gap-2 text-sm font-medium font-geist text-white/90 underline decoration-white/30 underline-offset-4 hover:decoration-white/60">
        View security details
        <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
          <path d="m9 12 2 2 4-4" class=""></path>
        </svg>
      </a>
    </div>
  </div>
</section>