AI Tab Management Feature Showcase Section

<section class="sm:px-6 sm:mt-24 md:mt-32 max-w-7xl mt-16 mr-auto ml-auto pr-4 pl-4 relative">
  <div class="max-w-7xl mr-auto ml-auto">
    <div class="grid gap-12 lg:grid-cols-2">
      <!-- Diagram -->
      <div
        class="bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5aa83035-c72b-4cb5-9937-66ce103b64ef_1600w.webp)] bg-cover rounded-[36px] pt-5 pr-5 pb-5 pl-5 relative"
        style="mask-image: linear-gradient(130deg, transparent, black 10%, black 70%, transparent); -webkit-mask-image: linear-gradient(130deg, transparent, black 10%, black 70%, transparent);">
        <article
          class="group relative overflow-hidden transition-shadow hover:shadow-md bg-black/70 border-white/10 border rounded-3xl shadow-xl backdrop-blur-xl">
          <div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
              <h3 class="text-2xl font-semibold tracking-tight text-white font-jakarta">Smart Tab Management</h3>
              <span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-white/80 bg-white/5 border border-white/10 rounded-full px-2.5 py-1 backdrop-blur-sm font-geist">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-lime-400">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                AI Powered
              </span>
            </div>

            <!-- Illustration -->
            <div
              class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-white/5 to-white/10 ring-1 ring-inset ring-white/5 mb-8 backdrop-blur-sm">
              <!-- Main browser window -->
              <div
                class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-black/90 backdrop-blur border border-white/10 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
                  <div class="flex items-center gap-2">
                    <div class="flex gap-1.5">
                      <div class="w-2 h-2 rounded-full bg-red-400"></div>
                      <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
                      <div class="w-2 h-2 rounded-full bg-green-400"></div>
                    </div>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="text-[10px] sm:text-xs tracking-tight text-white/60 font-geist">12 tabs active</span>
                  </div>
                </div>
                <div class="p-3 space-y-2">
                  <div class="flex items-center gap-2 bg-lime-500/10 border border-lime-500/20 rounded-lg px-2 py-1.5">
                    <div class="w-3 h-3 bg-lime-400 rounded"></div>
                    <div class="flex-1">
                      <div class="h-1.5 w-20 bg-lime-400/40 rounded"></div>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-lime-400">
                      <path
                        d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
                        class=""></path>
                    </svg>
                  </div>
                  <div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5">
                    <div class="w-3 h-3 bg-white/20 rounded"></div>
                    <div class="flex-1">
                      <div class="h-1.5 w-16 bg-white/20 rounded"></div>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5">
                    <div class="w-3 h-3 bg-white/20 rounded"></div>
                    <div class="flex-1">
                      <div class="h-1.5 w-24 bg-white/20 rounded"></div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Tab groups sidebar -->
              <div
                class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-black/90 backdrop-blur border border-white/10 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
                  <span class="text-[10px] sm:text-xs tracking-widest text-white/60 font-geist">TAB GROUPS</span>
                </div>
                <div class="p-2 space-y-1.5">
                  <div
                    class="flex items-center gap-2 text-xs bg-blue-500/10 border border-blue-500/20 rounded px-2 py-1">
                    <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
                    <span class="text-white/80 font-geist">Work (5)</span>
                  </div>
                  <div
                    class="flex items-center gap-2 text-xs bg-purple-500/10 border border-purple-500/20 rounded px-2 py-1">
                    <div class="w-2 h-2 bg-purple-400 rounded-full"></div>
                    <span class="text-white/80 font-geist">Research (3)</span>
                  </div>
                  <div
                    class="flex items-center gap-2 text-xs bg-orange-500/10 border border-orange-500/20 rounded px-2 py-1">
                    <div class="w-2 h-2 bg-orange-400 rounded-full"></div>
                    <span class="text-white/80 font-geist">Shopping (4)</span>
                  </div>
                </div>
              </div>

              <!-- Mobile preview -->
              <div
                class="absolute left-3 sm:left-6 bottom-3 sm:bottom-4 w-[38%] h-[44%] rounded-2xl bg-black/90 backdrop-blur border border-white/10 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
                  <span class="text-[10px] sm:text-xs tracking-widest text-white/60 font-geist">SYNC</span>
                </div>
                <div class="p-2 space-y-2">
                  <div class="flex items-center gap-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-lime-400">
                      <rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
                      <rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
                      <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
                      <rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
                    </svg>
                    <div class="h-1 w-12 bg-lime-400/40 rounded"></div>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-white/40">
                      <rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
                      <path d="M7 7h10" class=""></path>
                      <path d="M7 12h10" class=""></path>
                      <path d="M7 17h10" class=""></path>
                    </svg>
                    <div class="h-1 w-10 bg-white/20 rounded"></div>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-white/40">
                      <path d="M4 7V4h16v3" class=""></path>
                      <path d="M5 20h14" class=""></path>
                      <path d="M16 21v-8a4 4 0 0 0-8 0v8" class=""></path>
                    </svg>
                    <div class="h-1 w-14 bg-white/20 rounded"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Features grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 mb-8 gap-x-6 gap-y-6">
              <div>
                <h4 class="text-lg font-semibold text-white tracking-tight font-jakarta">Auto-Organize</h4>
                <p class="mt-2 text-sm text-white/60 font-geist">AI automatically groups related tabs by topic, project,
                  or task for effortless organization.</p>
              </div>
              <div>
                <h4 class="text-lg font-semibold tracking-tight text-white font-jakarta">Cross-Device Sync</h4>
                <p class="mt-2 text-sm text-white/60 font-geist">Access your tab groups instantly across all devices
                  with seamless cloud synchronization.</p>
              </div>
            </div>

            <!-- CTA -->
            <div class="">
              <a href="#"
                class="inline-flex items-center gap-2 text-xs font-medium text-white/90 hover:text-white font-geist">
                Explore tab features
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </a>
            </div>
          </div>
        </article>
      </div>

      <!-- Copy & stats -->
      <div class="">
        <div class="tech-content" id="technology">
          <h3
            class="sm:text-5xl transition-colors duration-500 text-4xl font-medium text-white tracking-tight font-jakarta">
            Revolutionary tab intelligence, built for productivity</h3>

          <!-- Additional technology details -->
          <div class="mt-8">
            <div class="border-t border-white/10 pt-6">
              <h4 class="text-lg font-semibold text-white mb-4 font-jakarta">Core Intelligence Features</h4>
              <div class="space-y-4">
                <div class="flex items-start gap-3">
                  <div
                    class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-500/10 flex items-center justify-center mt-0.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="brain-circuit" class="lucide lucide-brain-circuit w-[16px] h-[16px]"
                      data-icon-replaced="true" style="color: rgb(163, 230, 53); width: 16px; height: 16px;">
                      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"
                        class=""></path>
                      <path d="M9 13a4.5 4.5 0 0 0 3-4" class=""></path>
                      <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" class=""></path>
                      <path d="M3.477 10.896a4 4 0 0 1 .585-.396" class=""></path>
                      <path d="M6 18a4 4 0 0 1-1.967-.516" class=""></path>
                      <path d="M12 13h4" class=""></path>
                      <path d="M12 18h6a2 2 0 0 1 2 2v1" class=""></path>
                      <path d="M12 8h8" class=""></path>
                      <path d="M16 8V5a2 2 0 0 1 2-2" class=""></path>
                      <circle cx="16" cy="13" r=".5" class=""></circle>
                      <circle cx="18" cy="3" r=".5" class=""></circle>
                      <circle cx="20" cy="21" r=".5" class=""></circle>
                      <circle cx="20" cy="8" r=".5" class=""></circle>
                    </svg>
                  </div>
                  <div class="">
                    <h5 class="font-medium text-white font-geist">Intelligent Grouping</h5>
                    <p class="text-sm text-white/60 mt-1 font-geist">Machine learning analyzes content and context to
                      automatically organize tabs into logical groups based on your workflow.</p>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div
                    class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-500/10 flex items-center justify-center mt-0.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="brain-cog" class="lucide lucide-brain-cog text-lime-400 w-[16px] h-[16px]"
                      data-icon-replaced="true" style="color: rgb(163, 230, 53); width: 16px; height: 16px">
                      <path d="m10.852 14.772-.383.923" class=""></path>
                      <path d="m10.852 9.228-.383-.923" class=""></path>
                      <path d="m13.148 14.772.382.924" class=""></path>
                      <path d="m13.531 8.305-.383.923" class=""></path>
                      <path d="m14.772 10.852.923-.383" class=""></path>
                      <path d="m14.772 13.148.923.383" class=""></path>
                      <path
                        d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 0 0-5.63-1.446 3 3 0 0 0-.368 1.571 4 4 0 0 0-2.525 5.771"
                        class=""></path>
                      <path d="M17.998 5.125a4 4 0 0 1 2.525 5.771" class=""></path>
                      <path d="M19.505 10.294a4 4 0 0 1-1.5 7.706" class=""></path>
                      <path d="M4.032 17.483A4 4 0 0 0 11.464 20c.18-.311.892-.311 1.072 0a4 4 0 0 0 7.432-2.516"
                        class=""></path>
                      <path d="M4.5 10.291A4 4 0 0 0 6 18" class=""></path>
                      <path d="M6.002 5.125a3 3 0 0 0 .4 1.375" class=""></path>
                      <path d="m9.228 10.852-.923-.383" class=""></path>
                      <path d="m9.228 13.148-.923.383" class=""></path>
                      <circle cx="12" cy="12" r="3" class=""></circle>
                    </svg>
                  </div>
                  <div class="">
                    <h5 class="font-medium text-white font-geist">Memory Management</h5>
                    <p class="text-sm text-white/60 mt-1 font-geist">Automatic tab suspension frees up system resources
                      while keeping your workspace intact for instant restoration.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-white/10 pt-6 mt-8">
          <div class="grid gap-6 sm:grid-cols-2">
            <div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
              <div>
                <div class="flex items-baseline gap-2">
                  <span class="text-2xl tracking-tight font-jakarta font-medium text-white">89%</span>
                </div>
                <p class="text-xs text-white/60 font-geist">Faster tab switching reported</p>
              </div>
            </div>

            <div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
              <div class="">
                <div class="flex items-baseline gap-2">
                  <span class="text-2xl tracking-tight font-jakarta font-medium text-white">3.2M</span>
                </div>
                <p class="text-xs text-white/60 font-geist">Tab groups created daily</p>
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-white/10 pt-6 mt-8">
          <a href="#"
            class="inline-flex items-center justify-center gap-2 h-10 hover:bg-lime-600/90 transition text-sm font-normal text-white bg-lime-600 rounded-full px-4 font-geist">
            Learn about tab management
            <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" class="h-4 w-4">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>