Collaboration Feature Landing Section with Stats & CTA

<div class="max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
    <div class="grid gap-12 lg:grid-cols-2">
      <!-- Diagram -->
      

      <!-- Copy & stats -->
      <div class="">
        <div class="tech-content" id="technology">
          <h3 class="sm:text-5xl transition-colors duration-500 text-4xl font-semibold text-slate-900 tracking-tight">Seamless team collaboration, built for modern workflows</h3>
          
          <!-- Additional technology details -->
          <div class="mt-8">
            <div class="border-t border-neutral-200 pt-6">
              <h4 class="text-lg font-semibold text-slate-900 mb-4">Core Collaboration 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-blue-100 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" class="text-blue-600">
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
                    </svg>
                  </div>
                  <div class="">
                    <h5 class="font-medium text-slate-900">Instant Communication</h5>
                    <p class="text-sm text-slate-600 mt-1">Built-in chat, video calls, and screen sharing with contextual project discussions and file sharing.</p>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 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" class="text-blue-600">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                      <polyline points="14,2 14,8 20,8" class=""></polyline>
                      <line x1="16" y1="13" x2="8" y2="13" class=""></line>
                      <line x1="16" y1="17" x2="8" y2="17" class=""></line>
                      <polyline points="10,9 9,9 8,9" class=""></polyline>
                    </svg>
                  </div>
                  <div class="">
                    <h5 class="font-medium text-slate-900">Smart Project Management</h5>
                    <p class="text-sm text-slate-600 mt-1">Automated task assignment, progress tracking, and intelligent reporting with customizable workflows.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-neutral-200 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 class="">
                <div class="flex items-baseline gap-2">
                  <span class="text-2xl tracking-tight font-sans font-semibold rating-number text-slate-900" data-target="4.9">4.9</span>
                  <span class="text-sm text-slate-600 font-sans">/5</span>
                </div>
                <p class="text-xs text-slate-600 font-sans">18k+ team collaboration reviews</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-sans font-semibold rating-number text-slate-900" data-target="87">87%</span>
                </div>
                <p class="text-xs text-slate-600 font-sans">Faster project delivery</p>
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-neutral-200 pt-6 mt-8">
          <button class="cursor-pointer inline-flex flex-col leading-none outline-none overflow-hidden no-underline align-baseline whitespace-nowrap select-none transition-all duration-150 hover:opacity-85 focus:outline-none focus:ring-4 focus:ring-black/50 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] text-base text-white text-center bg-gradient-to-b from-neutral-700 to-neutral-900 border-0 rounded-xl pt-2.5 pr-5 pb-2.5 pl-5 items-center justify-center" role="button">Team Features</button>
        </div>
      </div><div class="relative bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/347ae071-e53a-4247-a97a-e708e4ae14a7_1600w.jpg)] bg-cover rounded-[36px] pt-5 pr-5 pb-5 pl-5">
        <article class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900/70 border-neutral-700 border rounded-3xl shadow-xl backdrop-blur-xl" style="background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(64, 64, 64, 0.35);">
          <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">Collaborative Workflows</h3>
              <span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-2.5 py-1">
                <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-blue-400">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                  <circle cx="9" cy="7" r="4" class=""></circle>
                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
                </svg>
                Team sync
              </span>
            </div>

            <!-- Illustration -->
            <div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5 mb-8">
              <!-- Main project dashboard -->
              <div class="absolute left-3 sm:left-6 top-4 sm:top-6 w-[70%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                  <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">PROJECT BOARD</span>
                  <div class="flex items-center gap-1">
                    <div class="h-3 w-3 rounded-full bg-green-500/70"></div>
                    <span class="text-[10px] text-green-400">Active</span>
                  </div>
                </div>
                <div class="p-2 space-y-1.5">
                  <div class="flex items-center justify-between text-[10px] sm:text-xs">
                    <div class="flex items-center gap-2">
                      <div class="h-2 w-2 rounded bg-blue-400"></div>
                      <span class="text-neutral-300">UI Design</span>
                    </div>
                    <span class="text-blue-400">In Progress</span>
                  </div>
                  <div class="flex items-center justify-between text-[10px] sm:text-xs">
                    <div class="flex items-center gap-2">
                      <div class="h-2 w-2 rounded bg-green-400"></div>
                      <span class="text-neutral-300">API Integration</span>
                    </div>
                    <span class="text-green-400">Complete</span>
                  </div>
                  <div class="flex items-center justify-between text-[10px] sm:text-xs">
                    <div class="flex items-center gap-2">
                      <div class="h-2 w-2 rounded bg-yellow-400"></div>
                      <span class="text-neutral-300">Testing</span>
                    </div>
                    <span class="text-yellow-400">Review</span>
                  </div>
                </div>
              </div>

              <!-- Team chat -->
              <div class="absolute right-4 sm:right-6 top-5 sm:top-7 w-[38%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                  <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">TEAM CHAT</span>
                  <div class="h-2 w-2 rounded-full bg-green-500"></div>
                </div>
                <div class="p-2 space-y-2">
                  <div class="flex items-start gap-2">
                    <div class="h-4 w-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 flex-shrink-0 mt-0.5"></div>
                    <div class="min-w-0">
                      <div class="text-[9px] text-neutral-400 mb-0.5">Sarah</div>
                      <div class="bg-white/10 rounded-lg px-2 py-1 text-[9px] text-neutral-300">Design looks great!</div>
                    </div>
                  </div>
                  <div class="flex items-start gap-2">
                    <div class="h-4 w-4 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex-shrink-0 mt-0.5"></div>
                    <div class="min-w-0">
                      <div class="text-[9px] text-neutral-400 mb-0.5">Mike</div>
                      <div class="bg-white/10 rounded-lg px-2 py-1 text-[9px] text-neutral-300">API ready for testing</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Progress indicator -->
              <div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[55%] h-[28%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
                <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                  <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">PROGRESS</span>
                  <span class="text-[10px] text-green-400">78%</span>
                </div>
                <div class="p-2">
                  <div class="h-2 bg-neutral-800 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-blue-400 to-green-400 rounded-full" style="width: 78%;"></div>
                  </div>
                  <div class="flex justify-between mt-1 text-[9px] text-neutral-400">
                    <span>12 tasks done</span>
                    <span>3 remaining</span>
                  </div>
                </div>
              </div>

              <!-- Team avatars -->
              <div class="absolute right-4 bottom-4 flex -space-x-1">
                <div class="h-6 w-6 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 ring-2 ring-neutral-800"></div>
                <div class="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-green-600 ring-2 ring-neutral-800"></div>
                <div class="h-6 w-6 rounded-full bg-gradient-to-r from-purple-400 to-purple-600 ring-2 ring-neutral-800"></div>
                <div class="h-6 w-6 rounded-full bg-neutral-700 ring-2 ring-neutral-800 flex items-center justify-center">
                  <span class="text-[8px] text-neutral-300">+2</span>
                </div>
              </div>
            </div>

            <!-- Features grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
              <div>
                <h4 class="text-lg font-semibold tracking-tight text-white">Real‑time Collaboration</h4>
                <p class="mt-2 text-sm text-neutral-400">Work together seamlessly with live updates, instant messaging, and shared workspaces.</p>
              </div>
              <div class="">
                <h4 class="text-lg font-semibold tracking-tight text-white">Project Tracking</h4>
                <p class="mt-2 text-sm text-neutral-400">Monitor progress with visual dashboards, automated reports, and milestone tracking.</p>
              </div>
            </div>

            <!-- CTA -->
            <div class="">
              <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
                Start collaborating
                <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>
    </div>
  </div>