oneuptime/Home/views/features-table.ejs

<div class="bg-white">
    <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
      <div class="sm:align-center sm:flex sm:flex-col">
        <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">The Open-Source Platform for all your SRE needs.</h1>
        <p class="mt-5 text-xl text-gray-500 sm:text-center">With OneUptime, you get a complete SRE toolchain out-of-the-box. One interface. One conversation. One permission model. Thousands of features. You'll be amazed at everything OneUptime can do today. And we're just getting started.</p>
        
      </div>
      <div class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-4">
        <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
          <div class="p-6">
            <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      
                </div> <div>Status Page</div>
              </div>
            <p class="mt-4 text-sm text-gray-500">Status Page for your Business</p>
          </div>
          <div class="px-6 pt-6 pb-8">
            <h3 class="text-sm font-medium text-gray-900">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500"> Unlimited Public Status Pages</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Unlimited Private Status Pages</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Unlimited Subscribers</span>
              </li>
  
              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Custom Domain Support</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Custom Branding</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Post Announcements</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Post Incidents</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-500">Scheduled Maintenance</span>
              </li>
            </ul>
            <h3 class="text-sm font-medium text-gray-900 mt-5">Coming soon</h3>
            <ul role="list" class="mt-6 space-y-4">
              <li class="flex space-x-3">
             
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                  </svg>
                  
                  
                  
                <span class="text-sm text-gray-500">Show status of dependencies.</span>
              </li>
  
              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                  </svg>
                  
                  
                <span class="text-sm text-gray-500">SLA Certificates.</span>
              </li>

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                  </svg>
                  
                  
                <span class="text-sm text-gray-500">RSS Feeds.</span>
              </li>
            </ul>
            
          </div>
          <div class="p-6 border-t-2 border-gray-200">
            <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
            <p class="mt-4 text-sm text-gray-500">StatusPage.io, FreshPing, etc.</p>
          </div>
        </div>

  
       

          <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
            <div class="p-6">
              <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                      </svg>
                      
                </div> <div>Incident Management</div>
              </div>
              <p class="mt-4 text-sm text-gray-500">Respond to incidents faster</p>
            </div>
            <div class="px-6 pt-6 pb-8">
              <h3 class="text-sm font-medium text-gray-900">What's included</h3>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                  </svg>
                  <span class="text-sm text-gray-500">Integrates with monitoring tool</span>
                </li>

                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                  </svg>
                  <span class="text-sm text-gray-500">Show Incident on Status Page</span>
                </li>
  
                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                  </svg>
                  <span class="text-sm text-gray-500">Custom Incident States</span>
                </li>
  
                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                  </svg>
                  <span class="text-sm text-gray-500">Custom Incident Severity</span>
                </li>

                <li class="flex space-x-3">
                    <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm text-gray-500">Post Public Postmortem</span>
                  </li>

                  <li class="flex space-x-3">
                    <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm text-gray-500">Private Postmortem Notes</span>
                  </li>

                  <li class="flex space-x-3">
                    <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm text-gray-500">Integrate with Slack</span>
                  </li>

                  <li class="flex space-x-3">
                    <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm text-gray-500">5000+ integrations</span>
                  </li>
    
                
  
                
              </ul>
              <h3 class="text-sm font-medium text-gray-900 mt-5">Coming soon</h3>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3">
               
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                    
                    
                    
                  <span class="text-sm text-gray-500">Incident Workflows.</span>
                </li>
    
                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                    
                    
                  <span class="text-sm text-gray-500">On-Call Rotation and Alerts</span>
                </li>
             

              <li class="flex space-x-3">
                <!-- Heroicon name: mini/check -->
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                  </svg>
                  
                  
                <span class="text-sm text-gray-500">Active Monitoring</span>
              </li>
            </ul>
              
            </div>
            <div class="p-6 border-t-2 border-gray-200">
              <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
              <p class="mt-4 text-sm text-gray-500">Incident.io, Fire Hydrant, etc.</p>
            </div>
          </div>


          <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
            <div class="p-6">
                <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                          </svg>
                          
                          
                    </div> <div>Monitoring</div>
                  </div>
              <p class="mt-4 text-sm text-gray-500">Monitor status of any resource</p>
            </div>
            <div class="px-6 pt-6 pb-8">
              <h3 class="text-sm font-medium text-gray-900">What's included</h3>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3">
                  <!-- Heroicon name: mini/check -->
                  <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                  </svg>
                  <span class="text-sm text-gray-500"> Static Monitors </span>
                </li>
  
                </ul>
              <h3 class="text-sm font-medium text-gray-900 mt-5">Coming soon</h3>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3">
               
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                    
                    
                    
                  <span class="text-sm text-gray-500">Monitor Website</span>
                </li>
                <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor API</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor IPv4 and IPv6</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Inbound Webhook Monitoring</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor VM's &amp; Servers</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor Docker Containers</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor Kubernetes Clusters</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Monitor your Network</span>
                  </li>


                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Advanced Workflows</span>
                  </li>
    
                
              </ul>
              
            </div>
            <div class="p-6 border-t-2 border-gray-200">
              <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will replace</h2>
              <p class="mt-4 text-sm text-gray-500">Pingdom, New Relic, DataDog, etc. </p>
            </div>
          </div>

          <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
            <div class="p-6">
                <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                          </svg>
                          
                          
                          
                    </div> <div>On-Call &amp; Alerts</div>
                  </div>
              
              <p class="mt-4 text-sm text-gray-500">Alert your team.</p>
            </div>
            <div class="px-6 pt-6 pb-8">
             
              <h3 class="text-sm font-medium text-gray-900">Coming soon</h3>
              <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3">
               
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                    
                    
                    
                  <span class="text-sm text-gray-500">Phone Alerts</span>
                </li>

                <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">SMS Alerts</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Email Alerts</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Webhook Alerts</span>
                  </li>
    
                <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">On-Call Rotation</span>
                  </li>
    
    
                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Vacation and OOO Policy</span>
                  </li>
    
                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">On-Call Escalation</span>
                  </li>
    
                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">On-Call Pay</span>
                  </li>

                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Integrates with Slack / Team</span>
                  </li>
                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Advanced Workflows</span>
                  </li>
                  <li class="flex space-x-3">
               
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                      </svg>
                      
                      
                      
                    <span class="text-sm text-gray-500">Reports</span>
                  </li>
              </ul>
              
            </div>
            <div class="p-6 border-t-2 border-gray-200">
              <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will replace</h2>
              <p class="mt-4 text-sm text-gray-500">PagerDuty, OpsGenie, Splunk</p>
            </div>
          </div>
      </div>

      
    </div>
  </div>