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

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

<head>
    <title>About OneUptime | Open Source Observability Platform</title>
    <meta name="description" content="OneUptime is the open source observability platform replacing Datadog, PagerDuty, and Statuspage. Apache 2.0 licensed. Built by developers, for developers. Join 6,000+ GitHub stars.">

    <!-- Open Graph -->
    <meta property="og:title" content="About OneUptime | Open Source Observability Platform">
    <meta property="og:description" content="OneUptime is the open source observability platform replacing Datadog, PagerDuty, and Statuspage. Apache 2.0 licensed. Built by developers, for developers.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://oneuptime.com/about">
    <meta property="og:image" content="https://oneuptime.com/img/og-image.png">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="About OneUptime | Open Source Observability Platform">
    <meta name="twitter:description" content="Learn about OneUptime's mission to democratize observability. We're building an open-source platform that helps teams monitor, debug, and resolve issues faster.">
    <meta name="twitter:image" content="https://oneuptime.com/img/og-image.png">

    <%- include('head', {
        enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
    }) -%>

    <style>
        /* About Card Styles with Colorful Glow Effects */
        .about-card-wrapper {
            position: relative;
        }
        .about-card-wrapper::before {
            content: '';
            position: absolute;
            inset: -40px;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            z-index: 0;
        }
        .about-card-wrapper:hover::before {
            opacity: 1;
        }
        .about-card {
            position: relative;
            z-index: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .about-card:hover {
            transform: translateY(-2px);
        }

        /* Colorful Glow Effects */
        /* Blue - Mission */
        .about-glow-blue-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(59 130 246 / 0.08) 0%, rgb(59 130 246 / 0.03) 40%, transparent 70%);
        }
        .about-glow-blue:hover {
            box-shadow: 0 0 0 2px rgb(59 130 246 / 0.2), 0 8px 24px -8px rgb(59 130 246 / 0.2), 0 0 40px -12px rgb(59 130 246 / 0.15);
        }
        /* Purple - Vision */
        .about-glow-purple-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(168 85 247 / 0.08) 0%, rgb(168 85 247 / 0.03) 40%, transparent 70%);
        }
        .about-glow-purple:hover {
            box-shadow: 0 0 0 2px rgb(168 85 247 / 0.2), 0 8px 24px -8px rgb(168 85 247 / 0.2), 0 0 40px -12px rgb(168 85 247 / 0.15);
        }
        /* Emerald - Open Source */
        .about-glow-emerald-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(16 185 129 / 0.08) 0%, rgb(16 185 129 / 0.03) 40%, transparent 70%);
        }
        .about-glow-emerald:hover {
            box-shadow: 0 0 0 2px rgb(16 185 129 / 0.2), 0 8px 24px -8px rgb(16 185 129 / 0.2), 0 0 40px -12px rgb(16 185 129 / 0.15);
        }
        /* Rose - Developers */
        .about-glow-rose-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(244 63 94 / 0.08) 0%, rgb(244 63 94 / 0.03) 40%, transparent 70%);
        }
        .about-glow-rose:hover {
            box-shadow: 0 0 0 2px rgb(244 63 94 / 0.2), 0 8px 24px -8px rgb(244 63 94 / 0.2), 0 0 40px -12px rgb(244 63 94 / 0.15);
        }
        /* Amber - Meritocracy */
        .about-glow-amber-wrapper::before {
            background: radial-gradient(ellipse at center, rgb(245 158 11 / 0.08) 0%, rgb(245 158 11 / 0.03) 40%, transparent 70%);
        }
        .about-glow-amber:hover {
            box-shadow: 0 0 0 2px rgb(245 158 11 / 0.2), 0 8px 24px -8px rgb(245 158 11 / 0.2), 0 0 40px -12px rgb(245 158 11 / 0.15);
        }


    </style>
</head>

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

    <main id="main-content">
        <!-- Hero Section -->
        <section class="relative isolate overflow-hidden bg-white" id="about-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 - Blue like home page -->
            <div id="about-grid-glow-effect" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 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-24 sm:py-32 lg:py-40">
                <div class="mx-auto max-w-7xl px-6 lg:px-8">
                    <div class="mx-auto max-w-3xl text-center">
                        <!-- Open source badge -->
                        <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="group mb-8 inline-flex items-center gap-1.5 rounded-full bg-gray-50 px-4 py-1.5 text-sm text-gray-600 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100 hover:ring-gray-300">
                            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                            </svg>
                            <span>100% Open Source</span>
                            <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                            <span>Apache 2.0 License</span>
                            <svg class="h-3.5 w-3.5 text-gray-400 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg>
                        </a>

                        <!-- Main headline -->
                        <h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
                            Building the Future of<br class="hidden sm:block" />
                            <span class="text-gray-700">Observability</span>
                        </h1>

                        <!-- Subheadline -->
                        <p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
                            We're on a mission to democratize observability. Our open-source platform helps teams of all sizes monitor, debug, and resolve issues faster than ever before.
                        </p>

                        <!-- CTA buttons -->
                        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
                            <a href="/accounts/register" class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">
                                Get started free
                                <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                            </a>
                            <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
                                <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                                </svg>
                                Star on GitHub
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Mission & Vision 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 lg:max-w-none">
                    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
                        <!-- Mission -->
                        <div class="about-card-wrapper about-glow-blue-wrapper h-full">
                            <div class="about-card about-glow-blue bg-white rounded-2xl p-8 lg:p-10 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
                                <div class="flex items-center gap-3 mb-6">
                                    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
                                        <svg class="h-5 w-5 text-blue-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.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                                        </svg>
                                    </div>
                                    <h2 class="text-sm font-semibold uppercase tracking-wider text-blue-600">Our Mission</h2>
                                </div>
                                <p class="text-2xl font-semibold tracking-tight text-gray-900 mb-4">#DemocratiseOps</p>
                                <p class="text-gray-600 leading-relaxed">
                                    Our mission is to reduce downtime and increase the number of successful products in the world. We believe every team, regardless of size or budget, deserves access to world-class observability tools.
                                </p>
                                <p class="mt-4 text-gray-600 leading-relaxed">
                                    That's why we built OneUptime as a fully open-source platform that combines monitoring, incident management, status pages, and on-call scheduling into one unified solution.
                                </p>
                            </div>
                        </div>

                        <!-- Vision -->
                        <div class="about-card-wrapper about-glow-purple-wrapper h-full">
                            <div class="about-card about-glow-purple bg-white rounded-2xl p-8 lg:p-10 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
                                <div class="flex items-center gap-3 mb-6">
                                    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                                        <svg class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                                        </svg>
                                    </div>
                                    <h2 class="text-sm font-semibold uppercase tracking-wider text-purple-600">Our Vision</h2>
                                </div>
                                <p class="text-2xl font-semibold tracking-tight text-gray-900 mb-4">AI-Powered Reliability</p>
                                <p class="text-gray-600 leading-relaxed">
                                    We're building the next frontier in software observability. Imagine a platform that not only tells you what's wrong with your software, but automatically fixes those issues by writing code for you.
                                </p>
                                <p class="mt-4 text-gray-600 leading-relaxed">
                                    Our goal is to make software reliability effortless, allowing developers to focus on building great products instead of firefighting incidents.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Open Source Stats Section -->
        <%- include('./Partials/proudly-open-source') -%>

        <!-- Values 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">Our Values</h2>
                    <p class="mt-4 text-lg text-gray-600">The principles that guide everything we do.</p>
                </div>

                <div class="mx-auto max-w-5xl">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                        <!-- Value 1: Open Source Everything -->
                        <div class="about-card-wrapper about-glow-emerald-wrapper">
                            <div class="about-card about-glow-emerald p-8 bg-white rounded-2xl ring-1 ring-inset ring-gray-200 transition-all hover:ring-emerald-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200 mb-6">
                                    <svg class="h-5 w-5 text-emerald-600" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Open Source Everything</h3>
                                <p class="text-gray-600 leading-relaxed text-sm">
                                    We're fully open-source, not open-core. Every line of code is on GitHub. We believe open software wins, open protocols win. The only way to become a standard is to be open.
                                </p>
                            </div>
                        </div>

                        <!-- Value 2: Developers First -->
                        <div class="about-card-wrapper about-glow-rose-wrapper">
                            <div class="about-card about-glow-rose p-8 bg-white rounded-2xl ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200 mb-6">
                                    <svg class="h-5 w-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Developers First</h3>
                                <p class="text-gray-600 leading-relaxed text-sm">
                                    We prioritize our developer customers by continuously listening to their needs and working tirelessly to enhance OneUptime with features that serve them better every day.
                                </p>
                            </div>
                        </div>

                        <!-- Value 3: Meritocracy -->
                        <div class="about-card-wrapper about-glow-amber-wrapper">
                            <div class="about-card about-glow-amber p-8 bg-white rounded-2xl ring-1 ring-inset ring-gray-200 transition-all hover:ring-amber-300 h-full">
                                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
                                    <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Meritocracy</h3>
                                <p class="text-gray-600 leading-relaxed text-sm">
                                    We prioritize meritocracy, ensuring that talent, skills, and performance are the primary criteria for advancement and recognition within OneUptime.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contributors Section -->
        <section class="relative bg-gradient-to-b from-gray-50 to-white py-24 sm:py-32 overflow-hidden">
            <!-- Decorative background elements -->
            <div class="absolute inset-0 -z-10">
                <div class="absolute top-0 left-1/4 w-72 h-72 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
                <div class="absolute bottom-0 right-1/4 w-72 h-72 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
            </div>

            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <!-- Section Header -->
                <div class="mx-auto max-w-2xl text-center mb-16">
                    <div class="inline-flex items-center gap-2 rounded-full bg-white px-4 py-1.5 text-sm text-gray-600 ring-1 ring-inset ring-gray-200 shadow-sm mb-6">
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                        <span>Open Source Community</span>
                    </div>
                    <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Our Contributors</h2>
                    <p class="mt-4 text-lg text-gray-600">Built by a global community of passionate developers.</p>
                </div>

                <% if (typeof contributors !== 'undefined' && contributors && contributors.length > 0) { %>
                <!-- Contributors Grid -->
                <div class="mx-auto max-w-5xl">
                    <!-- Stats Row -->
                    <div class="flex flex-wrap items-center justify-center gap-8 mb-12">
                        <div class="text-center">
                            <p class="text-4xl font-bold text-gray-900"><%= contributors.length %>+</p>
                            <p class="text-sm text-gray-500 mt-1">Contributors</p>
                        </div>
                        <div class="h-12 w-px bg-gray-200 hidden sm:block"></div>
                        <div class="text-center">
                            <p class="text-4xl font-bold text-gray-900"><%= contributors.reduce((sum, c) => sum + (c.contributions || 0), 0).toLocaleString() %></p>
                            <p class="text-sm text-gray-500 mt-1">Total Commits</p>
                        </div>
                        <div class="h-12 w-px bg-gray-200 hidden sm:block"></div>
                        <div class="text-center">
                            <p class="text-4xl font-bold text-gray-900">24/7</p>
                            <p class="text-sm text-gray-500 mt-1">Global Coverage</p>
                        </div>
                    </div>

                    <!-- Top Contributors Cards -->
                    <%
                    // Subtle avatar colors - soft pastel tones
                    var avatarColors = [
                        { bg: 'bg-blue-50', text: 'text-blue-600' },
                        { bg: 'bg-emerald-50', text: 'text-emerald-600' },
                        { bg: 'bg-purple-50', text: 'text-purple-600' },
                        { bg: 'bg-rose-50', text: 'text-rose-600' },
                        { bg: 'bg-amber-50', text: 'text-amber-600' },
                        { bg: 'bg-indigo-50', text: 'text-indigo-600' },
                        { bg: 'bg-cyan-50', text: 'text-cyan-600' },
                        { bg: 'bg-pink-50', text: 'text-pink-600' },
                        { bg: 'bg-teal-50', text: 'text-teal-600' },
                        { bg: 'bg-orange-50', text: 'text-orange-600' }
                    ];
                    %>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <%
                        var displayedCount = 0;
                        for(var i=0; i<contributors.length && displayedCount < 10; i++) {
                            var contributor = contributors[i];
                            // Skip bots
                            if (!contributor || !contributor.login) continue;
                            var login = contributor.login.toLowerCase();
                            if (login.includes('bot') || login.includes('[bot]') || login === 'dependabot' || login === 'renovate' || login === 'greenkeeper' || login === 'snyk-bot' || login === 'imgbot' || login === 'codecov' || login === 'sonarcloud' || contributor.type === 'Bot') continue;
                            var initials = contributor.login.substring(0, 2).toUpperCase();
                            var colorSet = avatarColors[displayedCount % avatarColors.length];
                            displayedCount++;
                        %>
                        <a href="https://github.com/<%= contributor.login %>" target="_blank" class="group relative h-full bg-white rounded-2xl p-5 ring-1 ring-inset ring-gray-200 shadow-sm hover:shadow-md hover:ring-gray-300 transition-all duration-200">
                            <!-- Rank Badge -->
                            <div class="absolute -top-2 -right-2 flex items-center justify-center w-6 h-6 rounded-full bg-gray-900 text-xs font-bold text-white shadow-sm">
                                <%= displayedCount %>
                            </div>

                            <!-- Avatar -->
                            <div class="flex justify-center mb-3">
                                <div class="flex h-16 w-16 items-center justify-center rounded-full <%= colorSet.bg %> <%= colorSet.text %> text-lg font-medium ring-1 ring-gray-200 group-hover:scale-105 transition-transform duration-200">
                                    <%= initials %>
                                </div>
                            </div>

                            <!-- Info -->
                            <div class="text-center">
                                <p class="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors"><%= contributor.login %></p>
                                <p class="text-xs text-gray-500 mt-1"><%= contributor.contributions ? contributor.contributions.toLocaleString() : '0' %> commits</p>
                            </div>
                        </a>
                        <% } %>
                    </div>

                    <!-- Additional Contributors Avatars -->
                    <div class="mt-10 text-center">
                        <p class="text-sm text-gray-500 mb-4">And many more amazing contributors...</p>
                        <div class="flex flex-wrap justify-center -space-x-2">
                            <%
                            var extraCount = 0;
                            for(var j=displayedCount; j<contributors.length && extraCount < 20; j++) {
                                var extraContributor = contributors[j];
                                if (!extraContributor || !extraContributor.login) continue;
                                var extraLogin = extraContributor.login.toLowerCase();
                                if (extraLogin.includes('bot') || extraLogin.includes('[bot]') || extraLogin === 'dependabot' || extraLogin === 'renovate' || extraLogin === 'greenkeeper' || extraLogin === 'snyk-bot' || extraLogin === 'imgbot' || extraLogin === 'codecov' || extraLogin === 'sonarcloud' || extraContributor.type === 'Bot') continue;
                                var extraInitials = extraContributor.login.substring(0, 2).toUpperCase();
                                var extraColorSet = avatarColors[(displayedCount + extraCount) % avatarColors.length];
                                extraCount++;
                            %>
                            <div title="<%= extraContributor.login %>" class="flex items-center justify-center w-8 h-8 rounded-full <%= extraColorSet.bg %> <%= extraColorSet.text %> text-xs font-medium ring-1 ring-gray-200 hover:z-10 hover:scale-110 transition-transform duration-200 cursor-pointer">
                                <%= extraInitials %>
                            </div>
                            <% } %>
                            <% if (contributors.length > displayedCount + extraCount) { %>
                            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 ring-1 ring-gray-200 text-xs font-medium text-gray-500">
                                +<%= contributors.length - displayedCount - extraCount %>
                            </div>
                            <% } %>
                        </div>
                    </div>
                </div>
                <% } else { %>
                <!-- Fallback when contributors data is unavailable -->
                <div class="mx-auto max-w-md">
                    <div class="bg-white rounded-2xl ring-1 ring-inset ring-gray-200 overflow-hidden p-10 text-center shadow-sm">
                        <div class="flex justify-center mb-6">
                            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gray-900">
                                <svg class="h-8 w-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Join Our Community</h3>
                        <p class="text-gray-600 mb-6">We have an amazing community of contributors on GitHub. Check out our repository to see who's helping build OneUptime.</p>
                    </div>
                </div>
                <% } %>

                <!-- CTA -->
                <div class="mt-12 text-center">
                    <a href="https://github.com/oneuptime/oneuptime/graphs/contributors" target="_blank" class="inline-flex items-center gap-2 rounded-full bg-gray-900 px-6 py-3 text-sm font-medium text-white hover:bg-gray-700 transition-colors shadow-lg hover:shadow-xl">
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                        <span>View all contributors on GitHub</span>
                        <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>
                </div>
            </div>
        </section>

        <!-- To The Builders Section -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">

        <section class="relative bg-gradient-to-b from-gray-950 via-black to-gray-950 overflow-hidden" id="builders-section">
            <!-- Ambient glow effects -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="builder-glow absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-to-b from-slate-400/[0.06] via-zinc-500/[0.04] to-transparent rounded-full blur-[100px]"></div>
                <div class="builder-glow absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-gradient-to-t from-stone-400/[0.04] to-transparent rounded-full blur-[80px]" style="animation-delay: -3s;"></div>
            </div>

            <!-- Vertical line accent -->
            <div class="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-gray-800/50 to-transparent"></div>

            <div class="relative">
                <!-- Poetry-style centered layout -->
                <div class="py-20 sm:py-28 lg:py-32">
                    <div class="mx-auto max-w-3xl px-6 text-center">

                        <h2 class="builder-line text-2xl sm:text-3xl lg:text-4xl leading-snug mb-14 sm:mb-16" style="animation-delay: 0.1s;">
                            <span class="text-white not-italic font-medium tracking-wide" style="font-family: 'Playfair Display', serif;">To the builders, the dreamers,</span><br />
                            <span class="text-gray-400 italic" style="font-family: 'Cormorant Garamond', serif;">the ones who won't quit</span>
                        </h2>

                        <!-- We see you -->
                        <div class="builder-line mb-10 sm:mb-12" style="animation-delay: 0.2s;">
                            <p class="text-3xl sm:text-4xl lg:text-5xl text-white mb-3 italic" style="font-family: 'Cormorant Garamond', serif;">
                                We see you.
                            </p>
                            <p class="text-base sm:text-lg text-gray-500 leading-relaxed max-w-xl mx-auto" style="font-family: 'Playfair Display', serif;">
                                The late nights and early mornings.<br class="hidden sm:block" />
                                The countless iterations no one will ever see.<br class="hidden sm:block" />
                                The persistence when it would be easier to stop.
                            </p>
                        </div>

                        <!-- We believe in you -->
                        <div class="builder-line mb-10 sm:mb-12" style="animation-delay: 0.35s;">
                            <p class="text-3xl sm:text-4xl lg:text-5xl text-white/90 mb-3 italic" style="font-family: 'Cormorant Garamond', serif;">
                                We believe in you.
                            </p>
                            <p class="text-base sm:text-lg text-gray-500 leading-relaxed max-w-xl mx-auto" style="font-family: 'Playfair Display', serif;">
                                In your vision. In your craft.<br class="hidden sm:block" />
                                In the fire that made you start<br class="hidden sm:block" />
                                and the resolve that keeps you going.
                            </p>
                        </div>

                        <!-- We build alongside you -->
                        <div class="builder-line mb-14 sm:mb-16" style="animation-delay: 0.5s;">
                            <p class="text-3xl sm:text-4xl lg:text-5xl text-white/80 mb-3 italic" style="font-family: 'Cormorant Garamond', serif;">
                                We build alongside you.
                            </p>
                            <p class="text-base sm:text-lg text-gray-500 leading-relaxed max-w-xl mx-auto" style="font-family: 'Playfair Display', serif;">
                                Shoulder to shoulder. As builders ourselves,<br class="hidden sm:block" />
                                who understand what it takes<br class="hidden sm:block" />
                                to ship something that matters.
                            </p>
                        </div>

                        <!-- Closing -->
                        <div class="builder-line pt-10 sm:pt-12 border-t border-gray-800/30" style="animation-delay: 0.65s;">
                            <p class="text-4xl sm:text-5xl lg:text-6xl text-white/70 mb-3 italic" style="font-family: 'Cormorant Garamond', serif;">
                                Keep building.
                            </p>
                            <p class="text-lg sm:text-xl text-gray-500 font-light" style="font-family: 'Playfair Display', serif;">
                                The world runs on what you create.
                            </p>
                        </div>

                    </div>
                </div>
            </div>

            <style>
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(40px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                @keyframes pulse-glow {
                    0%, 100% {
                        opacity: 1;
                        transform: translateX(-50%) scale(1);
                    }
                    50% {
                        opacity: 0.7;
                        transform: translateX(-50%) scale(1.05);
                    }
                }
                .builder-line {
                    opacity: 0;
                    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
                    animation-play-state: paused;
                }
                .builder-glow {
                    animation: pulse-glow 8s ease-in-out infinite;
                }
                #builders-section.in-view .builder-line {
                    animation-play-state: running;
                }
            </style>

            <script>
                (function() {
                    const section = document.getElementById('builders-section');
                    if (!section) return;

                    const observer = new IntersectionObserver(
                        (entries) => {
                            entries.forEach(entry => {
                                if (entry.isIntersecting) {
                                    section.classList.add('in-view');
                                }
                            });
                        },
                        { threshold: 0.15 }
                    );

                    observer.observe(section);
                })();
            </script>
        </section>

        <!-- Hiring CTA Section -->
        <section class="relative py-32 sm:py-40 bg-white overflow-hidden" id="hiring-section">
            <!-- Subtle grid pattern -->
            <div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#f5f5f5_1px,transparent_1px),linear-gradient(to_bottom,#f5f5f5_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_60%_at_50%_50%,#000_40%,transparent_100%)]"></div>

            <!-- Grid glow effect that follows cursor - Blue like home page -->
            <div id="hiring-grid-glow-effect" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 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="mx-auto max-w-7xl px-6 lg:px-8 relative">
                <div class="text-center max-w-3xl mx-auto">
                    <!-- Heading -->
                    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight leading-[1.1]">
                        <span class="text-gray-600 block">Join us in building the</span>
                        <span class="text-gray-900 block mt-2">future of observability.</span>
                    </h2>

                    <!-- Subtext -->
                    <p class="mt-8 text-lg text-gray-500 leading-relaxed max-w-2xl mx-auto">
                        We give first priority to open-source contributors. Our interview process involves contributing to open-source, so you can show us what you can do.
                    </p>

                    <!-- Buttons -->
                    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                        <a href="https://github.com/OneUptime/interview" target="_blank"
                           class="group inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gray-900 text-white font-medium text-sm shadow-sm hover:bg-gray-800 transition-all duration-200">
                            <span>View open positions</span>
                            <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform duration-200" 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="https://github.com/oneuptime/oneuptime" target="_blank"
                           class="group inline-flex items-center gap-2 px-6 py-3 rounded-lg text-gray-600 font-medium text-sm hover:text-gray-900 transition-colors duration-200">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                            </svg>
                            <span>Start contributing</span>
                        </a>
                    </div>

                    <!-- Perks -->
                    <div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-500">
                        <div class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <span>Remote-first</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <span>Open source focused</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <span>Competitive compensation</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

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

    <script>
    // Subtle cursor-following grid glow effect
    (function() {
        const sections = [
            { section: 'about-hero-section', glow: 'about-grid-glow-effect' },
            { section: 'hiring-section', glow: 'hiring-grid-glow-effect' }
        ];

        sections.forEach(function(config) {
            const section = document.getElementById(config.section);
            const glowEffect = document.getElementById(config.glow);

            if (!section || !glowEffect) return;

            let isHovering = false;
            let animationFrame = null;
            let currentX = 0;
            let currentY = 0;
            let targetX = 0;
            let targetY = 0;

            function lerp(start, end, factor) {
                return start + (end - start) * factor;
            }

            function animate() {
                if (!isHovering) return;

                currentX = lerp(currentX, targetX, 0.1);
                currentY = lerp(currentY, targetY, 0.1);

                glowEffect.style.setProperty('--mouse-x', currentX + 'px');
                glowEffect.style.setProperty('--mouse-y', currentY + 'px');

                animationFrame = requestAnimationFrame(animate);
            }

            section.addEventListener('mouseenter', function() {
                isHovering = true;
                glowEffect.style.opacity = '1';
                animate();
            });

            section.addEventListener('mousemove', function(e) {
                const rect = section.getBoundingClientRect();
                targetX = e.clientX - rect.left;
                targetY = e.clientY - rect.top;

                if (!isHovering) {
                    currentX = targetX;
                    currentY = targetY;
                }
            });

            section.addEventListener('mouseleave', function() {
                isHovering = false;
                glowEffect.style.opacity = '0';
                if (animationFrame) {
                    cancelAnimationFrame(animationFrame);
                    animationFrame = null;
                }
            });
        });
    })();
    </script>
</body>
</html>
