mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
1bf4c52518
Multiple product pages had identical generic meta descriptions: 'OneUptime monitors websites, APIs, and servers...' This hurt CTR because Google showed the same text for different pages. Updated with unique, keyword-rich descriptions: - /product/status-page: Focus on free, unlimited subscribers, Statuspage alternative - /product/monitoring: Focus on global locations, alerts, Datadog alternative - /product/incident-management: Focus on features, integrations - /product/on-call: Focus on rotations, escalations, PagerDuty alternative - /about: Focus on open source, GitHub stars, mission Expected impact: Improved CTR from search results
680 lines
48 KiB
Plaintext
680 lines
48 KiB
Plaintext
<!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>
|