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

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

<head>
    <title>Full Observability | Logs, Metrics, Traces in One Platform</title>
    <meta name="description"
        content="Complete observability platform combining logs, metrics, and traces. Get full visibility into your systems with correlated data and AI-powered insights.">
        <%- 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">
      <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>

      <div class="mx-auto max-w-7xl px-6 pt-24 pb-20 sm:pt-32 sm:pb-24 lg:pt-40 lg:pb-32 lg:px-8">
        <div class="mx-auto max-w-3xl text-center">
          <!-- Badge -->
          <div class="mb-8 inline-flex items-center gap-2 rounded-full bg-cyan-600 px-4 py-2 text-sm font-medium text-white shadow-lg">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            </svg>
            <span>Full Observability</span>
          </div>

          <!-- Main Headline -->
          <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
            See everything. <br class="hidden sm:block" />
            Miss nothing.
          </h1>

          <!-- Subheadline -->
          <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
            Complete observability combining logs, metrics, and traces in one platform. Correlate data across your entire stack and debug issues faster with AI-powered insights.
          </p>

          <!-- CTA Buttons -->
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="/accounts/register" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-gray-900 px-8 py-3.5 text-sm font-medium text-white shadow-lg transition-all hover:bg-gray-800">
              Start Free Trial
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
              </svg>
            </a>
            <a href="/enterprise/demo" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
              </svg>
              Schedule Demo
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Logo Roll -->
    <%- include('../logo-roll') -%>

    <!-- Three Pillars Section -->
    <section class="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">
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            The three pillars of observability
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Unified data from logs, metrics, and traces in one place
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- Logs -->
          <div class="p-8 rounded-2xl bg-white border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gray-100 mb-6">
              <svg class="w-7 h-7 text-gray-700" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
              </svg>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">Logs</h3>
            <p class="text-gray-600 mb-6">Centralize logs from all your services. Search, filter, and analyze with blazing-fast queries.</p>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Full-text search
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Structured logging
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Log-to-trace correlation
              </li>
            </ul>
          </div>

          <!-- Metrics -->
          <div class="p-8 rounded-2xl bg-white border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-100 mb-6">
              <svg class="w-7 h-7 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
              </svg>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">Metrics</h3>
            <p class="text-gray-600 mb-6">Track system and application metrics at any scale. Custom dashboards and alerting built-in.</p>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                High cardinality support
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Custom dashboards
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Anomaly detection
              </li>
            </ul>
          </div>

          <!-- Traces -->
          <div class="p-8 rounded-2xl bg-white border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-cyan-100 mb-6">
              <svg class="w-7 h-7 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
              </svg>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">Traces</h3>
            <p class="text-gray-600 mb-6">Distributed tracing across services. Follow requests end-to-end and find bottlenecks.</p>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Distributed tracing
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Service maps
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Latency analysis
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Correlation Section -->
    <section class="bg-white 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">
          <span class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold tracking-wide text-gray-700 uppercase bg-gray-100 rounded-full mb-6 border border-gray-200">
            Correlation
          </span>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Connect the dots automatically
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Go from alert to root cause in seconds with correlated data
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Log-Trace Correlation -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-violet-100 mb-4">
              <svg class="w-6 h-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Log-Trace Correlation</h3>
            <p class="text-sm text-gray-600">Click from any log line to see the full trace and understand the request context.</p>
          </div>

          <!-- Metric-Log Correlation -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-blue-100 mb-4">
              <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Metric-Log Correlation</h3>
            <p class="text-sm text-gray-600">See metric spikes? Jump directly to the logs from that time window.</p>
          </div>

          <!-- Service Maps -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-emerald-100 mb-4">
              <svg class="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Service Maps</h3>
            <p class="text-sm text-gray-600">Visualize dependencies and understand how services interact.</p>
          </div>

          <!-- Error Tracking -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-rose-100 mb-4">
              <svg class="w-6 h-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Error Tracking</h3>
            <p class="text-sm text-gray-600">Group similar errors and track impact with stack traces and source maps.</p>
          </div>

          <!-- AI Insights -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-purple-100 mb-4">
              <svg class="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">AI Insights</h3>
            <p class="text-sm text-gray-600">Get AI-powered root cause analysis and anomaly detection.</p>
          </div>

          <!-- Custom Dashboards -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-amber-100 mb-4">
              <svg class="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Dashboards</h3>
            <p class="text-sm text-gray-600">Build dashboards that combine all your data sources in one view.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="relative py-24 sm:py-32 bg-gray-900 overflow-hidden">
      <div class="absolute inset-0 opacity-10">
        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="cta-grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M0 40V0h40" fill="none" stroke="currentColor" stroke-width="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#cta-grid)" />
        </svg>
      </div>

      <div class="relative mx-auto max-w-4xl px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-white mb-6">
          Ready for full observability?
        </h2>
        <p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto">
          Start sending data in minutes with OpenTelemetry. See your entire stack in one place.
        </p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
          <a href="/accounts/register" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-white text-gray-900 font-medium hover:bg-gray-100 transition-colors">
            Start Free Trial
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
            </svg>
          </a>
          <a href="/pricing" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full text-white font-medium hover:bg-white/10 transition-colors border border-white/20">
            View Pricing
          </a>
        </div>
      </div>
    </section>

  </main>
  <%- include('../footer') -%>

</body>

</html>
