<!DOCTYPE html>
<html lang="en" id="home">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
  <title>OneUptime | Dashboards - Visualize All Your Data in One Place</title>
  <meta name="description"
    content="Build custom dashboards to visualize metrics, logs, traces, and status data. Drag-and-drop builder, real-time updates, and shareable views for your entire team.">
  <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

<body>
  <%- include('nav') -%>

  <main id="main-content">
    <!-- Hero Section -->
    <div class="relative isolate overflow-hidden bg-white" id="dashboards-hero-section">
      <!-- Subtle grid pattern background -->
      <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

      <!-- Grid glow effect that follows cursor - indigo color -->
      <div id="dashboards-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(99, 102, 241, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>

      <div class="py-20 sm:py-28 lg:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <div class="mx-auto max-w-3xl text-center">
            <!-- Minimal badge -->
            <p class="text-sm font-medium text-indigo-600 mb-4">Unified Observability</p>

            <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
              Visualize everything in one place
            </h1>
            <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
              Build beautiful, real-time dashboards that bring together metrics, logs, traces, and status data. Get complete visibility into your systems.
            </p>

            <div class="mt-10 flex items-center justify-center gap-x-6">
              <a href="/accounts/register"
                class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
                Get started
              </a>
              <a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
                Request demo <span aria-hidden="true">&rarr;</span>
              </a>
            </div>

            <!-- Subtle feature list -->
            <div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
              <span>Drag & drop builder</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Real-time updates</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Multiple data sources</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Shareable links</span>
            </div>
          </div>

          <!-- Clean hero image -->
          <div class="mt-16 sm:mt-20">
            <div class="relative mx-auto max-w-5xl">
              <div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
                <img src="/img/apm-3.png" alt="OneUptime custom dashboard" width="2432" height="1442"
                  class="rounded-lg shadow-lg">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%- include('logo-roll') -%>

    <!-- How It Works -->
    <div class="relative bg-gray-50 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <p class="text-sm font-medium text-indigo-600 uppercase tracking-wide mb-3">How It Works</p>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Build dashboards in minutes
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Create powerful visualizations without any coding. Drag, drop, and customize.
          </p>
        </div>

        <div class="mx-auto max-w-5xl">
          <!-- Connecting line for desktop -->
          <div class="hidden lg:block relative">
            <div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-indigo-200"></div>
          </div>

          <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Step 1 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">1</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Create Dashboard</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Start with a blank canvas or choose from pre-built templates.</p>
            </div>

            <!-- Step 2 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">2</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Add Widgets</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Drag and drop charts, tables, and visualizations.</p>
            </div>

            <!-- Step 3 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">3</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Connect Data</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Link widgets to metrics, logs, traces, or status data.</p>
            </div>

            <!-- Step 4 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-indigo-600 ring-2 ring-indigo-600">4</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Share & Monitor</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Share with your team or display on TV screens.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Why OneUptime Section -->
    <div class="relative overflow-hidden bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <!-- Section Header -->
        <div class="mx-auto max-w-2xl text-center mb-20">
          <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
            <svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
            </svg>
            Why OneUptime
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
            Build beautiful dashboards in minutes
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            Create stunning, real-time dashboards with our intuitive drag-and-drop builder. Visualize all your data in one place with powerful widgets and integrations.
          </p>
        </div>

        <!-- Feature Blocks -->
        <div class="space-y-24 lg:space-y-32">
          <!-- Feature 1: Drag & Drop Builder -->
          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <div class="relative">
              <div class="flex items-center gap-4 mb-6">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                  <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Drag & Drop</span>
              </div>
              <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Build dashboards without code</h3>
              <p class="text-lg text-gray-600 mb-6">
                Our intuitive drag-and-drop builder lets you create professional dashboards in minutes. No coding required - just drag widgets, resize, and customize.
              </p>
              <ul class="space-y-3 mb-8">
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Intuitive click, drag, and drop interface
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Flexible layouts with resizable widgets
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Responsive design for any screen size
                </li>
              </ul>
              <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
                Get started
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </a>
            </div>
          <div class="relative lg:order-last">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Dashboard Grid Builder -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Browser header -->
                <div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
                  <div class="flex gap-1.5">
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500">Edit Mode</span>
                    <div class="w-8 h-4 bg-blue-500 rounded-full relative">
                      <div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
                    </div>
                  </div>
                </div>

                <!-- Dashboard grid content -->
                <div class="p-4 bg-gray-50">
                  <!-- Toolbar -->
                  <div class="flex items-center gap-2 mb-3 pb-3 border-b border-gray-200">
                    <div class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
                      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      Add Widget
                    </div>
                    <div class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
                      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
                      </svg>
                      Layout
                    </div>
                  </div>

                  <!-- Grid layout -->
                  <div class="grid grid-cols-4 gap-2">
                    <!-- Large chart widget -->
                    <div class="col-span-2 row-span-2 bg-white rounded-lg border-2 border-dashed border-blue-300 p-3 min-h-[100px] flex flex-col">
                      <div class="flex items-center justify-between mb-2">
                        <span class="text-xs font-medium text-gray-700">Request Rate</span>
                        <svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                        </svg>
                      </div>
                      <!-- Mini chart SVG -->
                      <svg class="w-full flex-1" viewBox="0 0 100 40" preserveAspectRatio="none">
                        <path d="M0 35 Q25 20, 50 25 T100 15" fill="none" stroke="#3b82f6" stroke-width="2"/>
                        <path d="M0 35 Q25 20, 50 25 T100 15 L100 40 L0 40 Z" fill="url(#blueGrad)" opacity="0.2"/>
                        <defs>
                          <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.3" />
                            <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
                          </linearGradient>
                        </defs>
                      </svg>
                    </div>

                    <!-- Small stat widget -->
                    <div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
                      <span class="text-lg font-bold text-gray-800">99.9%</span>
                      <span class="text-[10px] text-gray-500">Uptime</span>
                    </div>

                    <!-- Small stat widget -->
                    <div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
                      <span class="text-lg font-bold text-blue-600">142ms</span>
                      <span class="text-[10px] text-gray-500">Avg Latency</span>
                    </div>

                    <!-- Small gauge widget -->
                    <div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
                      <svg class="w-8 h-8" viewBox="0 0 36 36">
                        <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
                        <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#22c55e" stroke-width="3" stroke-dasharray="75, 100"/>
                      </svg>
                      <span class="text-[10px] text-gray-500">CPU</span>
                    </div>

                    <!-- Small list widget -->
                    <div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
                      <div class="space-y-1">
                        <div class="flex items-center gap-1">
                          <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                          <span class="text-[9px] text-gray-600 truncate">api-prod</span>
                        </div>
                        <div class="flex items-center gap-1">
                          <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                          <span class="text-[9px] text-gray-600 truncate">web-app</span>
                        </div>
                      </div>
                    </div>

                    <!-- Wide bar chart -->
                    <div class="col-span-2 bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
                      <div class="flex items-end justify-around h-8 gap-1">
                        <div class="w-3 bg-blue-200 rounded-t" style="height: 60%"></div>
                        <div class="w-3 bg-blue-300 rounded-t" style="height: 80%"></div>
                        <div class="w-3 bg-blue-400 rounded-t" style="height: 45%"></div>
                        <div class="w-3 bg-blue-500 rounded-t" style="height: 90%"></div>
                        <div class="w-3 bg-blue-600 rounded-t" style="height: 70%"></div>
                      </div>
                    </div>

                    <!-- Empty placeholder -->
                    <div class="col-span-2 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 p-3 flex items-center justify-center">
                      <div class="text-center">
                        <svg class="w-5 h-5 text-gray-400 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        <span class="text-[10px] text-gray-400">Drop widget here</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Feature Block 2: Rich Visualizations -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
          <div class="relative lg:order-first">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Chart Type Cards Grid -->
              <div class="relative max-w-md mx-auto">
                <div class="grid grid-cols-3 gap-3">
                  <!-- Line Chart -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex items-end">
                      <svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
                        <path d="M0 25 L15 18 L30 22 L45 10 L60 15" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
                        <circle cx="15" cy="18" r="2" fill="#3b82f6"/>
                        <circle cx="30" cy="22" r="2" fill="#3b82f6"/>
                        <circle cx="45" cy="10" r="2" fill="#3b82f6"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Line Chart</div>
                  </div>

                  <!-- Bar Chart -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex items-end justify-around gap-1">
                      <div class="w-2 bg-blue-300 rounded-t" style="height: 50%"></div>
                      <div class="w-2 bg-blue-400 rounded-t" style="height: 80%"></div>
                      <div class="w-2 bg-blue-500 rounded-t" style="height: 60%"></div>
                      <div class="w-2 bg-blue-600 rounded-t" style="height: 90%"></div>
                      <div class="w-2 bg-blue-500 rounded-t" style="height: 70%"></div>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Bar Chart</div>
                  </div>

                  <!-- Area Chart -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3">
                      <svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
                        <path d="M0 28 Q15 20, 30 22 T60 12 L60 30 L0 30 Z" fill="url(#areaGrad)" opacity="0.6"/>
                        <path d="M0 28 Q15 20, 30 22 T60 12" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
                        <defs>
                          <linearGradient id="areaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.4" />
                            <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.1" />
                          </linearGradient>
                        </defs>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Area Chart</div>
                  </div>

                  <!-- Gauge -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex items-center justify-center">
                      <svg class="w-10 h-10" viewBox="0 0 36 36">
                        <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
                        <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="72, 100"/>
                        <text x="18" y="21" text-anchor="middle" class="text-[8px] fill-gray-600 font-medium">72%</text>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Gauge</div>
                  </div>

                  <!-- Pie Chart -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex items-center justify-center">
                      <svg class="w-10 h-10" viewBox="0 0 32 32">
                        <circle cx="16" cy="16" r="12" fill="#dbeafe"/>
                        <path d="M16 4 A12 12 0 0 1 28 16 L16 16 Z" fill="#3b82f6"/>
                        <path d="M28 16 A12 12 0 0 1 16 28 L16 16 Z" fill="#60a5fa"/>
                        <path d="M16 28 A12 12 0 0 1 4 16 L16 16 Z" fill="#93c5fd"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Pie Chart</div>
                  </div>

                  <!-- Stat Card -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex flex-col items-center justify-center">
                      <span class="text-xl font-bold text-blue-600">1.2K</span>
                      <span class="text-[9px] text-green-500 flex items-center gap-0.5">
                        <svg class="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                        </svg>
                        12%
                      </span>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Stat Card</div>
                  </div>

                  <!-- Table -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex flex-col justify-center gap-1">
                      <div class="h-2 bg-gray-200 rounded w-full"></div>
                      <div class="h-1.5 bg-blue-100 rounded w-full"></div>
                      <div class="h-1.5 bg-blue-50 rounded w-full"></div>
                      <div class="h-1.5 bg-blue-100 rounded w-full"></div>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Table</div>
                  </div>

                  <!-- Heatmap -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 grid grid-cols-5 grid-rows-3 gap-0.5">
                      <div class="bg-blue-100 rounded-sm"></div>
                      <div class="bg-blue-300 rounded-sm"></div>
                      <div class="bg-blue-200 rounded-sm"></div>
                      <div class="bg-blue-500 rounded-sm"></div>
                      <div class="bg-blue-100 rounded-sm"></div>
                      <div class="bg-blue-400 rounded-sm"></div>
                      <div class="bg-blue-200 rounded-sm"></div>
                      <div class="bg-blue-600 rounded-sm"></div>
                      <div class="bg-blue-300 rounded-sm"></div>
                      <div class="bg-blue-100 rounded-sm"></div>
                      <div class="bg-blue-200 rounded-sm"></div>
                      <div class="bg-blue-500 rounded-sm"></div>
                      <div class="bg-blue-300 rounded-sm"></div>
                      <div class="bg-blue-400 rounded-sm"></div>
                      <div class="bg-blue-200 rounded-sm"></div>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Heatmap</div>
                  </div>

                  <!-- Log Stream -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                    <div class="w-full h-12 mb-3 flex flex-col justify-center gap-0.5 font-mono">
                      <div class="flex items-center gap-1">
                        <span class="w-1 h-1 rounded-full bg-green-500"></span>
                        <span class="text-[7px] text-gray-500 truncate">INFO: OK</span>
                      </div>
                      <div class="flex items-center gap-1">
                        <span class="w-1 h-1 rounded-full bg-yellow-500"></span>
                        <span class="text-[7px] text-gray-500 truncate">WARN: slow</span>
                      </div>
                      <div class="flex items-center gap-1">
                        <span class="w-1 h-1 rounded-full bg-green-500"></span>
                        <span class="text-[7px] text-gray-500 truncate">INFO: done</span>
                      </div>
                    </div>
                    <div class="text-gray-700 text-xs font-medium text-center">Log Stream</div>
                  </div>
                </div>

                <!-- Footer label -->
                <div class="mt-4 text-center text-xs text-gray-400">
                  + Scatter plots, sparklines, status grids & more
                </div>
              </div>
            </div>
          </div>
          <div class="lg:pl-8">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Visualizations</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
              20+ widget types to choose from
            </h3>
            <p class="text-lg text-gray-600 mb-6">
              From simple counters to complex time series charts, we have the right visualization for every type of data. Customize colors, legends, and labels to match your brand.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Time series, area, bar, and stacked charts
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Tables, logs, and real-time data streams
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Gauges, stat cards, and progress indicators
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Feature Block 3: Multiple Data Sources -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
          <div class="lg:pr-8">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Data Sources</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
              All your data in one view
            </h3>
            <p class="text-lg text-gray-600 mb-6">
              Combine metrics, logs, traces, and status data on a single dashboard. See the complete picture of your system's health without switching between tools.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                OpenTelemetry metrics and APM data
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Log streams filtered by service or severity
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Status, incidents, and on-call schedules
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
          <div class="relative lg:order-last">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Data Sources Connection UI -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Browser header -->
                <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                  <div class="flex gap-1.5">
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                  </div>
                  <span class="text-xs text-gray-500">Data Sources</span>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Header -->
                  <div class="flex items-center justify-between mb-4">
                    <div class="text-gray-800 text-sm font-medium">Connected Sources</div>
                    <span class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
                      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                      Add Source
                    </span>
                  </div>

                  <!-- Data source cards -->
                  <div class="space-y-2">
                    <!-- Metrics -->
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                      <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-700 text-sm font-medium">Metrics</div>
                          <div class="text-gray-400 text-xs">OpenTelemetry</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 text-xs text-green-600">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        Active
                      </span>
                    </div>

                    <!-- Logs -->
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                      <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-700 text-sm font-medium">Logs</div>
                          <div class="text-gray-400 text-xs">Log Management</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 text-xs text-green-600">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        Active
                      </span>
                    </div>

                    <!-- Traces -->
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                      <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-700 text-sm font-medium">Traces</div>
                          <div class="text-gray-400 text-xs">Distributed Tracing</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 text-xs text-green-600">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        Active
                      </span>
                    </div>

                    <!-- Status Page -->
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                      <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-700 text-sm font-medium">Status</div>
                          <div class="text-gray-400 text-xs">Status Page Data</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 text-xs text-green-600">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        Active
                      </span>
                    </div>

                    <!-- Monitors -->
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                      <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-700 text-sm font-medium">Monitors</div>
                          <div class="text-gray-400 text-xs">Uptime & Health</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 text-xs text-green-600">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        Active
                      </span>
                    </div>
                  </div>

                  <!-- Footer -->
                  <div class="mt-3 pt-3 border-t border-gray-100 text-center text-xs text-gray-400">
                    All data unified in one dashboard
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Feature Block 4: Sharing & Collaboration -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
          <div class="relative lg:order-first">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Sharing & Permissions UI -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Browser header -->
                <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                  <div class="flex gap-1.5">
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                  </div>
                  <span class="text-xs text-gray-500">Share Dashboard</span>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Share link section -->
                  <div class="mb-4">
                    <div class="text-gray-800 text-sm font-medium mb-2">Share Link</div>
                    <div class="flex items-center gap-2">
                      <div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 text-xs text-gray-500 font-mono truncate border border-gray-200">
                        https://oneuptime.com/dash/prod-overview
                      </div>
                      <button class="px-3 py-2 bg-blue-600 text-white text-xs font-medium rounded-lg hover:bg-blue-700">
                        Copy
                      </button>
                    </div>
                  </div>

                  <!-- Access control -->
                  <div class="mb-4">
                    <div class="text-gray-800 text-sm font-medium mb-2">Access Control</div>
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
                      <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                      </svg>
                      <span class="text-xs text-gray-600">Team members only</span>
                      <svg class="w-3 h-3 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                      </svg>
                    </div>
                  </div>

                  <!-- Team members with access -->
                  <div class="mb-4">
                    <div class="text-gray-800 text-sm font-medium mb-2">People with access</div>
                    <div class="space-y-2">
                      <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                        <div class="flex items-center gap-2">
                          <div class="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">JD</div>
                          <div>
                            <div class="text-gray-700 text-xs font-medium">John Doe</div>
                            <div class="text-gray-400 text-[10px]">john@company.com</div>
                          </div>
                        </div>
                        <span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Owner</span>
                      </div>

                      <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                        <div class="flex items-center gap-2">
                          <div class="w-7 h-7 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium">SA</div>
                          <div>
                            <div class="text-gray-700 text-xs font-medium">Sarah Adams</div>
                            <div class="text-gray-400 text-[10px]">sarah@company.com</div>
                          </div>
                        </div>
                        <span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Edit</span>
                      </div>

                      <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                        <div class="flex items-center gap-2">
                          <div class="w-7 h-7 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium">MK</div>
                          <div>
                            <div class="text-gray-700 text-xs font-medium">Mike Kim</div>
                            <div class="text-gray-400 text-[10px]">mike@company.com</div>
                          </div>
                        </div>
                        <span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">View</span>
                      </div>
                    </div>
                  </div>

                  <!-- TV Mode toggle -->
                  <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100">
                    <div class="flex items-center gap-2">
                      <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      <span class="text-xs font-medium text-blue-700">TV Mode</span>
                    </div>
                    <div class="w-8 h-4 bg-blue-500 rounded-full relative">
                      <div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lg:pl-8">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Sharing</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
              Share insights with anyone
            </h3>
            <p class="text-lg text-gray-600 mb-6">
              Share dashboards with your team or create public links for stakeholders. Control who can view and edit with fine-grained permissions.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Public or private shareable links
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Full-screen TV mode for NOC displays
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Role-based access control
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Grid Section -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
            <svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            <span class="text-sm font-medium text-indigo-700">More Features</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Comprehensive dashboard features
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            Powerful features to create the perfect visualization for your team.
          </p>
        </div>

        <div class="mx-auto max-w-7xl">
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <!-- Feature 1 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                  <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Real-time Updates</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Dashboards automatically refresh with the latest data. See changes as they happen.</p>
              </div>
            </div>

            <!-- Feature 2 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
                  <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Time Range Selector</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Quickly switch between time ranges. Zoom in on incidents or view long-term trends.</p>
              </div>
            </div>

            <!-- Feature 3 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-violet-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
                  <svg class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Templates</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Start with pre-built templates for common use cases. Customize to fit your needs.</p>
              </div>
            </div>

            <!-- Feature 4 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                  <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Dark Mode</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Switch between light and dark themes. Perfect for different environments and preferences.</p>
              </div>
            </div>

            <!-- Feature 5 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                  <svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Variables & Filters</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Create dashboard variables to filter data dynamically. Build one dashboard for multiple use cases.</p>
              </div>
            </div>

            <!-- Feature 6 -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-violet-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
                  <svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Export & Reports</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Export dashboards as images or PDFs. Schedule automated reports to stakeholders.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Use Cases Section -->
    <div class="relative bg-gray-900 py-24 sm:py-32 overflow-hidden">
      <div class="relative mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur border border-white/20 mb-6">
            <svg class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
            <span class="text-sm font-medium text-white">Use Cases</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
            Dashboards for every team
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-300">
            Create dashboards tailored to different roles and use cases across your organization.
          </p>
        </div>

        <div class="mx-auto max-w-5xl">
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
                  <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">NOC Displays</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">Real-time monitoring walls for operations centers</p>
              </div>
            </div>

            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
                  <svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">Executive Reports</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">High-level KPIs and SLA compliance for leadership</p>
              </div>
            </div>

            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15 hover:shadow-lg">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200 mb-6">
                  <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">DevOps Metrics</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">Deployment frequency, lead time, and DORA metrics</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Team Notifications Section -->
    <div class="relative overflow-hidden bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <!-- Content -->
          <div class="relative">
            <p class="text-sm font-medium text-indigo-600 uppercase tracking-wide mb-3">Team Notifications</p>
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              Dashboard alerts where your team already works
            </h2>
            <p class="mt-4 text-lg text-gray-600 leading-relaxed">
              Get instant notifications in Slack and Microsoft Teams when metrics cross thresholds. Share dashboard insights without context switching.
            </p>

            <!-- Integration cards -->
            <div class="mt-10 space-y-3">
              <!-- Slack -->
              <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                    <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
                    <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
                    <path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
                    <path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <h3 class="text-sm font-semibold text-gray-900">Slack</h3>
                  <p class="text-sm text-gray-500">Instant alerts with interactive actions</p>
                </div>
              </div>

              <!-- Microsoft Teams -->
              <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                    <path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
                    <circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
                    <path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
                    <circle cx="10" cy="3" r="3" fill="#7B83EB"/>
                    <path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
                  <p class="text-sm text-gray-500">Native adaptive cards integration</p>
                </div>
              </div>
            </div>

            <!-- Features list -->
            <div class="mt-8 grid grid-cols-2 gap-4">
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Threshold alerts
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Scheduled reports
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Anomaly detection
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Action buttons
              </div>
            </div>
          </div>

          <!-- Illustration - Interactive Slack Notification -->
          <div class="mt-16 lg:mt-0">
            <div class="relative" id="dashboards-slack-demo">
              <!-- Decorative background elements -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Slack Window -->
              <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
                <!-- Slack window header -->
                <div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
                  <div class="flex items-center gap-3">
                    <div class="flex gap-2">
                      <div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
                      <div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
                      <div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
                    <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                    </svg>
                    <span class="text-white text-sm font-semibold">dashboards</span>
                    <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                  </div>
                  <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
                      <span class="text-white text-xs font-bold">M</span>
                    </div>
                  </div>
                </div>

                <!-- Messages area -->
                <div class="bg-[#1a1d21] px-4 py-4" id="dashboards-slack-messages">
                  <!-- Original dashboard message -->
                  <div class="group relative">
                    <div class="flex items-start gap-3">
                      <img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
                      <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                          <span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
                          <span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
                          <span class="text-gray-500 text-xs">10:15 AM</span>
                        </div>

                        <!-- Dashboard card -->
                        <div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
                          <div class="h-1 bg-gradient-to-r from-amber-500 to-orange-500"></div>
                          <div class="p-4">
                            <div class="flex items-start justify-between">
                              <div>
                                <div class="flex items-center gap-2">
                                  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-medium">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
                                    Warning
                                  </span>
                                </div>
                                <h4 class="text-white font-semibold mt-2">CPU Usage exceeded 85%</h4>
                                <p class="text-gray-400 text-sm mt-1">Production servers threshold: 80%</p>
                              </div>
                            </div>
                            <div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
                              <div class="flex items-center gap-1.5 text-xs text-gray-500">
                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                </svg>
                                Infrastructure Dashboard
                              </div>
                              <div class="flex items-center gap-1.5 text-xs text-gray-500">
                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Triggered 5m ago
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- Action buttons -->
                        <div class="mt-3 flex flex-wrap gap-2" id="dashboards-slack-buttons">
                          <button onclick="dashboardsViewDashboard()" id="dashboards-btn-view" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                            View Dashboard
                          </button>
                          <button onclick="dashboardsSnooze()" id="dashboards-btn-snooze" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Snooze 1hr
                          </button>
                          <button onclick="dashboardsCreateIncident()" id="dashboards-btn-incident" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            Create Incident
                          </button>
                        </div>

                        <!-- Reactions -->
                        <div class="mt-3 flex items-center gap-2" id="dashboards-slack-reactions">
                          <div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
                            <span>👀</span>
                            <span class="text-gray-300">2</span>
                          </div>
                        </div>

                        <!-- Thread replies container -->
                        <div id="dashboards-slack-thread" class="mt-4 space-y-3"></div>

                        <!-- Thread count indicator -->
                        <div id="dashboards-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
                          <div class="flex -space-x-1" id="dashboards-thread-avatars"></div>
                          <span id="dashboards-thread-count"></span>
                          <span class="text-gray-500">Last reply 1m ago</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Message input -->
                <div class="bg-[#1a1d21] px-4 pb-4">
                  <div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    <span class="text-gray-500 text-sm">Message #dashboards</span>
                    <div class="ml-auto flex items-center gap-2">
                      <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                      </svg>
                      <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <script>
          (function() {
            let dashboardsViewClicked = false;
            let dashboardsSnoozeClicked = false;
            let dashboardsIncidentClicked = false;
            let dashboardsReplyCount = 0;
            const dashboardsAvatars = [];

            function updateDashboardsThreadIndicator() {
              const indicator = document.getElementById('dashboards-thread-indicator');
              const countEl = document.getElementById('dashboards-thread-count');
              const avatarsEl = document.getElementById('dashboards-thread-avatars');

              if (dashboardsReplyCount > 0) {
                indicator.classList.remove('hidden');
                indicator.classList.add('flex');
                countEl.textContent = dashboardsReplyCount + (dashboardsReplyCount === 1 ? ' reply' : ' replies');
                avatarsEl.innerHTML = dashboardsAvatars.slice(-3).map(a =>
                  a.isBot
                    ? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
                    : `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
                        <span class="text-white text-[8px] font-bold">${a.initial}</span>
                      </div>`
                ).join('');
              }
            }

            function addDashboardsReaction(emoji) {
              const reactions = document.getElementById('dashboards-slack-reactions');
              const newReaction = document.createElement('div');
              newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors';
              newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
              newReaction.style.animation = 'bounceIn 0.3s ease-out';
              reactions.appendChild(newReaction);
            }

            function addDashboardsThreadReply(avatar, name, time, message, isBot) {
              const thread = document.getElementById('dashboards-slack-thread');
              const reply = document.createElement('div');
              reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
              reply.style.animation = 'fadeSlideIn 0.3s ease-out';

              const avatarClass = avatar;
              const initial = name.charAt(0);

              if (!isBot) {
                dashboardsAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
              } else {
                dashboardsAvatars.push({ bg: '', initial: 'O', isBot: true });
              }
              dashboardsReplyCount++;
              updateDashboardsThreadIndicator();

              const avatarHtml = isBot
                ? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
                : `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;

              reply.innerHTML = `
                ${avatarHtml}
                <div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
                  <div class="flex items-center gap-2">
                    <span class="font-semibold text-white text-sm">${name}</span>
                    ${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
                    <span class="text-gray-500 text-[11px]">${time}</span>
                  </div>
                  <p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
                </div>
              `;
              thread.appendChild(reply);
            }

            window.dashboardsViewDashboard = function() {
              if (dashboardsViewClicked) return;
              dashboardsViewClicked = true;

              const btn = document.getElementById('dashboards-btn-view');
              btn.disabled = true;
              btn.classList.add('opacity-70');
              btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Opening...</span>';

              setTimeout(() => {
                btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Viewing</span>';
                btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
                btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');

                addDashboardsReaction('📊');
                addDashboardsThreadReply('from-indigo-400 to-indigo-600', 'Mike Chen', '10:17 AM', 'Looking at this now. Checking the server metrics...', false);

                setTimeout(() => {
                  addDashboardsThreadReply('from-indigo-400 to-indigo-600', 'Mike Chen', '10:19 AM', 'Found it! The batch job at 10:00 AM caused the spike. It should auto-resolve in ~10 minutes.', false);
                  addDashboardsReaction('👍');
                }, 1200);
              }, 800);
            };

            window.dashboardsSnooze = function() {
              if (dashboardsSnoozeClicked) return;
              dashboardsSnoozeClicked = true;

              const btn = document.getElementById('dashboards-btn-snooze');
              btn.disabled = true;
              btn.classList.add('opacity-70');
              btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Snoozing...</span>';

              setTimeout(() => {
                btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Snoozed</span>';
                btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
                btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');

                addDashboardsReaction('😴');
                addDashboardsThreadReply('from-green-400 to-green-600', 'OneUptime', '10:20 AM', '⏰ Alert snoozed for 1 hour by <strong class="text-white">Mike Chen</strong><br/><span class="text-gray-400">Will re-alert at 11:20 AM if still above threshold</span>', true);
              }, 800);
            };

            window.dashboardsCreateIncident = function() {
              if (dashboardsIncidentClicked) return;
              dashboardsIncidentClicked = true;

              const btn = document.getElementById('dashboards-btn-incident');
              btn.disabled = true;
              btn.classList.add('opacity-70');
              btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Creating...</span>';

              setTimeout(() => {
                btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Created</span>';
                btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
                btn.classList.add('bg-rose-600/20', 'border', 'border-rose-500/50', 'text-rose-400');

                addDashboardsReaction('🚨');
                addDashboardsThreadReply('from-green-400 to-green-600', 'OneUptime', '10:21 AM', '🎫 Incident <strong class="text-white">#INC-2847</strong> created<br/><span class="text-gray-400">High CPU Usage - Production Servers<br/>Assigned to: SRE Team</span>', true);
              }, 800);
            };
          })();
          </script>

          <style>
            @keyframes fadeSlideIn {
              from { opacity: 0; transform: translateY(10px); }
              to { opacity: 1; transform: translateY(0); }
            }
            @keyframes bounceIn {
              0% { opacity: 0; transform: scale(0.8); }
              50% { transform: scale(1.1); }
              100% { opacity: 1; transform: scale(1); }
            }
          </style>
        </div>
      </div>
    </div>

    <%- include('./Partials/enterprise-ready') -%>
    <%- include('features-table') -%>
    <%- include('cta') -%>
  </main>

  <%- include('footer') -%>

  <style>
    @keyframes fadeInSlack {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fadeInSlack {
      opacity: 0;
      animation: fadeInSlack 0.5s ease-out forwards;
    }
  </style>

  <script>
    // Grid glow effect for dashboards hero section
    (function() {
      const heroSection = document.getElementById('dashboards-hero-section');
      const gridGlow = document.getElementById('dashboards-grid-glow');

      if (heroSection && gridGlow) {
        heroSection.addEventListener('mousemove', (e) => {
          const rect = heroSection.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;

          gridGlow.style.setProperty('--mouse-x', `${x}px`);
          gridGlow.style.setProperty('--mouse-y', `${y}px`);
          gridGlow.style.opacity = '1';
        });

        heroSection.addEventListener('mouseleave', () => {
          gridGlow.style.opacity = '0';
        });
      }
    })();
  </script>
</body>

</html>
