Tri-Pane Inbox Dashboard with Sidebar & Detail View

<section class="relative py-24">
  <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-flex gap-2 text-xs text-zinc-300 bg-white/5 border-white/10 border rounded-full pt-1 pr-3 pb-1 pl-3 items-center mb-6">
        <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" class="h-3.5 w-3.5">
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
        </svg>
        <span class="font-medium font-sans">Platform Features</span>
      </div>
      <h2 class="text-4xl sm:text-5xl font-light tracking-tighter font-geist text-white mb-4">Everything you need to ship faster</h2>
      <p class="text-lg text-zinc-300 font-sans">Powerful tools that adapt to your workflow, from initial planning to final deployment.</p>
    </div>

    <!-- Bento Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
      <!-- Large Feature Card - 2/3 width -->
      <article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
        <div class="p-6 sm:p-8">
          <!-- Illustration -->
          <div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Main Dashboard -->
            <div class="absolute inset-4 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10">
              <!-- Header -->
              <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
                <div class="flex items-center gap-3">
                  <span class="h-2 w-2 rounded-full bg-red-500/60"></span>
                  <span class="h-2 w-2 rounded-full bg-yellow-500/60"></span>
                  <span class="h-2 w-2 rounded-full bg-green-500/60"></span>
                </div>
                <span class="text-xs text-zinc-400 font-sans">Insight Engine</span>
              </div>
              
              <!-- Content Grid -->
              <div class="grid grid-cols-12 gap-3 p-4 h-full">
                <!-- Velocity Chart -->
                <div class="col-span-8 bg-white/5 rounded-lg p-3 border border-white/5">
                  <div class="flex items-center justify-between mb-3">
                    <span class="text-xs text-zinc-300 font-medium">Team Velocity</span>
                    <span class="text-xs text-emerald-400">↗ +23%</span>
                  </div>
                  <svg viewBox="0 0 200 60" class="w-full h-12 text-zinc-700">
                    <defs class="">
                      
                    </defs>
                    <path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round" class=""></path>
                    <path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15 L 200 60 L 0 60 Z" fill="url(#velocityGradient)" class=""></path>
                  </svg>
                </div>

                <!-- Stats -->
                <div class="col-span-4 space-y-2">
                  <div class="bg-white/5 rounded-lg p-3 border border-white/5">
                    <div class="text-xs text-zinc-400 mb-1">Active Issues</div>
                    <div class="text-lg font-semibold text-white">127</div>
                  </div>
                  <div class="bg-white/5 rounded-lg p-3 border border-white/5">
                    <div class="text-xs text-zinc-400 mb-1">Cycle Time</div>
                    <div class="text-lg font-semibold text-emerald-400">2.4d</div>
                  </div>
                </div>

                <!-- Progress Bars -->
                <div class="col-span-12 space-y-2">
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Frontend</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-blue-500 h-1.5 rounded-full w-3/4"></div>
                    </div>
                    <span class="text-xs text-blue-400">75%</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Backend</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-emerald-500 h-1.5 rounded-full w-4/5"></div>
                    </div>
                    <span class="text-xs text-emerald-400">80%</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Design</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-purple-500 h-1.5 rounded-full w-1/2"></div>
                    </div>
                    <span class="text-xs text-purple-400">50%</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Floating notifications -->
            <div class="absolute top-6 right-6 w-48 space-y-2">
              <div class="bg-zinc-900/95 border border-emerald-500/30 rounded-lg p-2 backdrop-blur">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 bg-emerald-500 rounded-full"></div>
                  <span class="text-xs text-emerald-300">Deploy completed</span>
                </div>
              </div>
              <div class="bg-zinc-900/95 border border-blue-500/30 rounded-lg p-2 backdrop-blur">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 bg-blue-500 rounded-full"></div>
                  <span class="text-xs text-blue-300">PR merged</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Advanced Analytics</h3>
            </div>
            <p class="text-zinc-300 text-base leading-relaxed font-sans">Get deep insights into your team's performance with automated metrics, cycle time analysis, and predictive forecasting to optimize your workflow.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                Explore analytics
                <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" 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>
      </article>

      <!-- Small Feature Card - 1/3 width -->
      <article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
        <div class="p-6">
          <!-- Illustration -->
          <div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Code Editor Mock -->
            <div class="absolute inset-3 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10 overflow-hidden">
              <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="h-2 w-2 bg-red-500/60 rounded-full"></div>
                  <div class="h-2 w-2 bg-yellow-500/60 rounded-full"></div>
                  <div class="h-2 w-2 bg-green-500/60 rounded-full"></div>
                </div>
                <span class="text-xs text-zinc-400">main.js</span>
              </div>
              <div class="p-3 space-y-1">
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">1</span>
                  <span class="text-xs text-blue-400">import</span>
                  <span class="text-xs text-zinc-300 ml-1">{ createIssue }</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">2</span>
                  <span class="text-xs text-purple-400">const</span>
                  <span class="text-xs text-zinc-300 ml-1">issue =</span>
                  <span class="text-xs text-yellow-400 ml-1">'ENG-241'</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">3</span>
                  <span class="text-xs text-emerald-400">await</span>
                  <span class="text-xs text-zinc-300 ml-1">deploy()</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">4</span>
                  <span class="text-xs text-zinc-600"># Auto-linked to PR</span>
                </div>
              </div>
            </div>
            <!-- Link indicator -->
            
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex gap-3 mb-4 items-center">
              
              <h3 class="text-xl font-normal text-white tracking-tight font-geist">Smart Linking</h3>
            </div>
            <p class="text-zinc-300 text-sm leading-relaxed font-sans">Automatically connect commits, PRs, and deployments to issues. Never lose context across your development workflow.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                View integrations
                <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" 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>
      </article>
    </div>

    <!-- Second Row - Reversed Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
      <!-- Small Feature Card - 1/3 width -->
      <article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
        <div class="p-6">
          <!-- Illustration -->
          <div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Team Avatars -->
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="relative">
                <!-- Center hub -->
                <div class="w-16 h-16 flex ring-1 ring-white/20 bg-gradient-to-r from-slate-900 to-slate-700 rounded-full items-center justify-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" class="w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(255, 255, 255);">
                    <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" class=""></path>
                    <polyline points="3,7 12,13 21,7" class=""></polyline>
                  </svg>
                </div>
                
                <!-- Orbiting avatars -->
                <img class="absolute -top-8 -left-4 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fe82ca0-ec91-4df3-b0fb-d97b643f2178_320w.jpg">
                <img class="absolute -top-6 -right-6 w-8 h-8 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ec17a2e2-e4f4-4164-b631-f074e640a0c1_320w.jpg">
                <img class="absolute -bottom-8 -right-2 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e08496f1-bdba-4cb4-83c1-96ac5be57ace_320w.jpg">
                <img class="absolute -bottom-6 -left-6 w-8 h-8 object-cover border-white/30 border-1 rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c1bfea42-f5c9-4b52-974e-36fe36212b17_320w.jpg">
                
                <!-- Connection lines -->
                <div class="absolute inset-0 pointer-events-none">
                  <svg class="w-full h-full" viewBox="0 0 100 100">
                    <line x1="50" y1="50" x2="25" y2="25" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
                    <line x1="50" y1="50" x2="75" y2="20" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
                    <line x1="50" y1="50" x2="80" y2="80" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
                    <line x1="50" y1="50" x2="20" y2="75" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
                  </svg>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="text-xl font-normal text-white tracking-tight font-geist">Team Collaboration</h3>
            </div>
            <p class="text-zinc-300 text-sm leading-relaxed font-sans">Real-time updates, smart notifications, and seamless handoffs keep everyone synchronized across time zones.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                See team features
                <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" 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>
      </article>

      <!-- Large Feature Card - 2/3 width -->
      <article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
        <div class="p-6 sm:p-8">
          <!-- Illustration -->
          <div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Automation Flow -->
            <div class="absolute inset-4">
              <!-- Nodes -->
              <div class="absolute top-4 left-8 w-16 h-12 bg-blue-500/20 border border-blue-500/40 rounded-lg flex items-center justify-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" class="h-5 w-5 text-blue-400">
                  <polyline points="16 18 22 12 16 6" class=""></polyline>
                  <polyline points="8 6 2 12 8 18" class=""></polyline>
                </svg>
              </div>
              
              <div class="absolute top-4 right-8 w-16 h-12 bg-emerald-500/20 border border-emerald-500/40 rounded-lg flex items-center justify-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" class="h-5 w-5 text-emerald-400">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
                  <polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
                  <polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
                  <polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
                </svg>
              </div>
              
              <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-16 h-12 bg-purple-500/20 border border-purple-500/40 rounded-lg flex items-center justify-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" class="h-5 w-5 text-purple-400">
                  <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>
              </div>

              <!-- Connection Lines -->
              <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 300 200">
                <defs class="">
                  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto" class="">
                    <polygon points="0 0, 10 3.5, 0 7" fill="rgba(255,255,255,0.4)" class=""></polygon>
                  </marker>
                </defs>
                <path d="M 80 25 Q 150 15 220 25" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
                  <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
                </path>
                <path d="M 220 40 Q 200 100 150 150" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
                  <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
                </path>
                <path d="M 140 150 Q 100 100 80 40" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
                  <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
                </path>
              </svg>

              <!-- Status Indicators -->
              <div class="absolute top-20 left-4 space-y-1">
                <div class="flex items-center gap-2 text-xs">
                  <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div>
                  <span class="text-emerald-400">Tests passed</span>
                </div>
                <div class="flex items-center gap-2 text-xs">
                  <div class="h-2 w-2 bg-blue-500 rounded-full animate-pulse"></div>
                  <span class="text-blue-400">Building...</span>
                </div>
                <div class="flex items-center gap-2 text-xs">
                  <div class="h-2 w-2 bg-yellow-500 rounded-full"></div>
                  <span class="text-yellow-400">Deploy queued</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Automated Workflows</h3>
            </div>
            <p class="text-zinc-300 text-base leading-relaxed font-sans">Streamline your pipeline with intelligent automation. From code to deployment, reduce manual work and eliminate bottlenecks with smart triggers and actions.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                Build workflows
                <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" 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>
      </article>
    </div>

    <!-- Third Row - Standard Layout -->
    
  </div>
</section>