mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
462 lines
31 KiB
Plaintext
Executable File
462 lines
31 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<html lang="en" id="support">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Help and Support</title>
|
|
<meta name="description"
|
|
content="Get help with OneUptime. Contact our support team, browse documentation, or schedule a call with our engineers.">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="OneUptime | Help and Support">
|
|
<meta property="og:description" content="Get help with OneUptime. Contact our support team, browse documentation, or schedule a call with our engineers.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://oneuptime.com/support">
|
|
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
|
|
<style>
|
|
/* Support Card Styles with Colorful Glow Effects */
|
|
.support-card-wrapper {
|
|
position: relative;
|
|
}
|
|
.support-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;
|
|
}
|
|
.support-card-wrapper:hover::before {
|
|
opacity: 1;
|
|
}
|
|
.support-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.support-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Blue - Support Email */
|
|
.support-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%);
|
|
}
|
|
.support-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 - Slack */
|
|
.support-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%);
|
|
}
|
|
.support-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 - Documentation */
|
|
.support-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%);
|
|
}
|
|
.support-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);
|
|
}
|
|
|
|
/* Amber - Sales & Media */
|
|
.support-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%);
|
|
}
|
|
.support-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);
|
|
}
|
|
|
|
/* FAQ Accordion Styles */
|
|
.faq-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.faq-item:hover {
|
|
background-color: rgb(249 250 251);
|
|
}
|
|
.faq-item summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.faq-item summary::marker {
|
|
display: none;
|
|
}
|
|
.faq-chevron {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.faq-item[open] .faq-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-white antialiased text-gray-900">
|
|
<%- include('nav') -%>
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<section class="relative isolate overflow-hidden bg-white" id="support-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="support-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">
|
|
<div class="mx-auto max-w-7xl px-6 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-blue-50 px-4 py-2 text-sm text-blue-700 ring-1 ring-inset ring-blue-200">
|
|
<svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
|
</svg>
|
|
<span>Always humans, never bots</span>
|
|
</div>
|
|
|
|
<!-- Main headline -->
|
|
<h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
|
|
Help & Support
|
|
</h1>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
|
|
Friendly folks, standing by. We respond to most requests in under one business day. Get the help you need to keep your systems running.
|
|
</p>
|
|
|
|
<!-- CTA buttons -->
|
|
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 relative z-10">
|
|
<a href="mailto:support@oneuptime.com" 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">
|
|
Email support
|
|
<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="/docs" 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-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
Browse docs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Options 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">Get in Touch</h2>
|
|
<p class="mt-4 text-lg text-gray-600">Choose the channel that works best for you.</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<!-- Support Email - Blue -->
|
|
<div class="support-card-wrapper support-glow-blue-wrapper">
|
|
<div class="support-card support-glow-blue bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
|
|
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
|
|
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25H4.5a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15A2.25 2.25 0 002.25 6.75m19.5 0v.243a2.25 2.25 0 01-1.03 1.905l-7.5 4.615a2.25 2.25 0 01-2.34 0l-7.5-4.615a2.25 2.25 0 01-1.03-1.905V6.75"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Support Email</h3>
|
|
<p class="text-gray-600 leading-relaxed text-sm mb-6">
|
|
Questions or issues? Send us an email and we'll get back within one business day. Perfect for non-urgent inquiries.
|
|
</p>
|
|
<a href="mailto:support@oneuptime.com" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors">
|
|
support@oneuptime.com
|
|
<svg class="ml-2 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>
|
|
|
|
<!-- Slack - Purple -->
|
|
<div class="support-card-wrapper support-glow-purple-wrapper">
|
|
<div class="support-card support-glow-purple bg-white rounded-2xl p-8 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
|
|
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-5 w-5 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Technical Support (Slack)</h3>
|
|
<p class="text-gray-600 leading-relaxed text-sm mb-6">
|
|
Chat with our engineers for help with the dashboard, APIs, and features. Enterprise plans get a dedicated channel.
|
|
</p>
|
|
<a href="https://join.slack.com/t/oneuptimesupport/shared_invite/zt-2pz5p1uhe-Fpmc7bv5ZE5xRMe7qJnwmA" target="_blank" rel="noopener" class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 transition-colors">
|
|
Chat on Slack
|
|
<svg class="ml-2 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>
|
|
|
|
<!-- Documentation - Emerald -->
|
|
<div class="support-card-wrapper support-glow-emerald-wrapper">
|
|
<div class="support-card support-glow-emerald bg-white rounded-2xl p-8 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" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Documentation</h3>
|
|
<p class="text-gray-600 leading-relaxed text-sm mb-6">
|
|
Guides, API references, and best practices to help you ship faster and resolve issues quickly. Self-serve support 24/7.
|
|
</p>
|
|
<a href="/docs" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors">
|
|
Open docs
|
|
<svg class="ml-2 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>
|
|
|
|
<!-- Sales & Media - Amber -->
|
|
<div class="support-card-wrapper support-glow-amber-wrapper">
|
|
<div class="support-card support-glow-amber bg-white rounded-2xl p-8 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" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Sales & Media</h3>
|
|
<p class="text-gray-600 leading-relaxed text-sm mb-6">
|
|
Looking for a demo, quotes, or press info? Our team can help with enterprise plans and media requests.
|
|
</p>
|
|
<div class="flex items-center gap-6">
|
|
<a href="mailto:sales@oneuptime.com" class="inline-flex items-center text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors">
|
|
Contact sales
|
|
<svg class="ml-2 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="mailto:press@oneuptime.com" class="inline-flex items-center text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors">
|
|
Press
|
|
<svg class="ml-2 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ 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">
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Frequently Asked Questions</h2>
|
|
<p class="mt-4 text-lg text-gray-600">Quick answers to common questions.</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-3xl">
|
|
<div class="bg-white rounded-2xl ring-1 ring-inset ring-gray-200 overflow-hidden shadow-sm">
|
|
<div class="divide-y divide-gray-100">
|
|
<details class="faq-item group">
|
|
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
|
|
<span class="text-base font-medium text-gray-900">What are your support hours?</span>
|
|
<span class="ml-6 flex-shrink-0">
|
|
<svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="px-6 pb-5">
|
|
<p class="text-sm leading-relaxed text-gray-600">We provide global coverage Monday through Friday and monitor critical channels 24/7 for enterprise SLAs. Most requests receive a response within one business day.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item group">
|
|
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
|
|
<span class="text-base font-medium text-gray-900">How do I get enterprise support?</span>
|
|
<span class="ml-6 flex-shrink-0">
|
|
<svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="px-6 pb-5">
|
|
<p class="text-sm leading-relaxed text-gray-600">Enterprise plans include a dedicated Slack channel, priority response times, and direct access to our engineering team. <a href="/enterprise/demo" class="font-medium text-blue-600 hover:text-blue-700 underline decoration-blue-300 underline-offset-2">Request a demo</a> to learn more about enterprise features.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item group">
|
|
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
|
|
<span class="text-base font-medium text-gray-900">Where can I find product guides and API docs?</span>
|
|
<span class="ml-6 flex-shrink-0">
|
|
<svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="px-6 pb-5">
|
|
<p class="text-sm leading-relaxed text-gray-600">Head to our <a href="/docs" class="font-medium text-emerald-600 hover:text-emerald-700 underline decoration-emerald-300 underline-offset-2">documentation</a> for quick starts, tutorials, API references, and integration guides. Everything you need to get up and running.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item group">
|
|
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
|
|
<span class="text-base font-medium text-gray-900">Can I self-host OneUptime?</span>
|
|
<span class="ml-6 flex-shrink-0">
|
|
<svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="px-6 pb-5">
|
|
<p class="text-sm leading-relaxed text-gray-600">OneUptime is 100% open source and can be self-hosted on your own infrastructure. Check out our <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="font-medium text-purple-600 hover:text-purple-700 underline decoration-purple-300 underline-offset-2">GitHub repository</a> for deployment instructions and Docker/Kubernetes configurations.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item group">
|
|
<summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-left">
|
|
<span class="text-base font-medium text-gray-900">What's included in the free plan?</span>
|
|
<span class="ml-6 flex-shrink-0">
|
|
<svg class="faq-chevron h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="px-6 pb-5">
|
|
<p class="text-sm leading-relaxed text-gray-600">Our free plan includes monitoring, status pages, incident management, and on-call scheduling. Visit our <a href="/pricing" class="font-medium text-amber-600 hover:text-amber-700 underline decoration-amber-300 underline-offset-2">pricing page</a> to see what's included in each plan and find the right fit for your team.</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Schedule a Call Section -->
|
|
<section class="bg-gray-50 py-24 sm:py-32" id="schedule-call-section">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-12">
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Schedule a Call</h2>
|
|
<p class="mt-4 text-lg text-gray-600">Need personalized help? Book time with our team.</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="bg-white rounded-2xl ring-1 ring-inset ring-gray-200 overflow-hidden shadow-sm">
|
|
<div class="p-4 sm:p-6">
|
|
<!-- Cal inline embed code begins -->
|
|
<div style="width:100%;height:600px;overflow:auto" id="my-cal-inline-support"></div>
|
|
<script type="text/javascript">
|
|
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
|
|
Cal("init", { origin: "https://cal.com" });
|
|
|
|
Cal("inline", {
|
|
elementOrSelector: "#my-cal-inline-support",
|
|
calLink: "oneuptimehq/demo",
|
|
layout: "month_view"
|
|
});
|
|
|
|
Cal("ui", { "styles": { "branding": { "brandColor": "#3b82f6" } }, "hideEventTypeDetails": false, "layout": "month_view" });
|
|
|
|
Cal("on", {
|
|
action: "bookingSuccessful",
|
|
callback: (e) => {
|
|
const { data, type, namespace } = e.detail;
|
|
|
|
if (typeof posthog !== 'undefined' && posthog) {
|
|
posthog.capture('home/support-call-booked', {
|
|
'page': {
|
|
'path': window.location.pathname,
|
|
'referrer': document.referrer,
|
|
'search': window.location.search,
|
|
'url': window.location.href,
|
|
'title': document.title,
|
|
},
|
|
'data': data,
|
|
'type': type,
|
|
'namespace': namespace
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<!-- Cal inline embed code ends -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
|
|
<script>
|
|
// Subtle cursor-following grid glow effect - Blue like home page
|
|
(function() {
|
|
const section = document.getElementById('support-hero-section');
|
|
const glowEffect = document.getElementById('support-grid-glow-effect');
|
|
|
|
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.12);
|
|
currentY = lerp(currentY, targetY, 0.12);
|
|
|
|
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>
|