mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
5e04a8c13c
- Reduced the size of SVG icons from h-7 w-7 to h-5 w-5 in on-call.ejs, status-page.ejs, traces.ejs, workflows.ejs. - Adjusted the container sizes for icons from h-14 w-14 to h-10 w-10 and changed rounded styles from rounded-2xl to rounded-xl for a more uniform appearance. - Ensured that all relevant icons and their containers maintain a consistent design language throughout the application.
1329 lines
83 KiB
Plaintext
1329 lines
83 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Integrate with any software or service with workflows. </title>
|
|
<meta name="description"
|
|
content="OneUptime monitors websites, APIs, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="workflows-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 - sky color -->
|
|
<div id="workflows-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(14, 165, 233, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 165, 233, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-sky-600 mb-4">5000+ integrations available</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Integrate with any stack
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Create custom workflows and automate tasks. Streamline processes, increase efficiency, and save valuable time.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>No-code builder</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Custom code support</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Secure secrets</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Detailed logs</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="relative rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/workflow-builder.png" alt="OneUptime workflow automation builder" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
<%- include('./Partials/watch-demo.ejs', {videoId: "z-b7_KQcUDY" }) -%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works Section -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-sky-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Create workflows in minutes
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Build powerful automations with our visual workflow builder in just four simple steps.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-sky-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-sky-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-sky-600 ring-2 ring-sky-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Choose Trigger</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Select what starts your workflow - incident, schedule, or webhook.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-sky-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-sky-600 ring-2 ring-sky-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Actions</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Drag and drop actions to send messages, call APIs, or run code.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-sky-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-sky-600 ring-2 ring-sky-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Logic</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Use conditions, loops, and branches for complex logic.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-sky-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-sky-600 ring-2 ring-sky-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Activate</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Test and enable your workflow to start automating.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Why OneUptime Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section header -->
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 ring-1 ring-inset ring-sky-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-sky-700">Why workflows with OneUptime</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Automate any process without writing code
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Simply visualize, drag, and drop components to streamline your workflows and boost productivity.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature blocks -->
|
|
<div class="space-y-24">
|
|
|
|
<!-- Feature 1: Unlimited Workflows -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200">
|
|
<svg class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-sky-600 uppercase tracking-wide">Automation</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Build unlimited workflows and automate any process</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Empower your operations and boost productivity. With flexible customization options and robust integration capabilities, create efficient workflows tailored to your unique business needs.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Drag-and-drop builder
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Unlimited workflows
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
5000+ integrations
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Workflow Builder Diagram -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-xs">Workflow Builder</span>
|
|
</div>
|
|
|
|
<!-- Workflow Canvas -->
|
|
<div class="p-6 bg-gray-50/50">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<!-- Trigger Node -->
|
|
<div class="relative">
|
|
<div class="bg-sky-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
|
|
<div class="w-8 h-8 rounded-lg bg-sky-500 flex items-center justify-center">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold">Trigger</div>
|
|
<div class="text-[10px] text-sky-200">On Incident Created</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connector Line -->
|
|
<div class="w-0.5 h-6 bg-gray-300"></div>
|
|
|
|
<!-- Condition Node -->
|
|
<div class="relative">
|
|
<div class="bg-white border-2 border-amber-400 px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold text-gray-800">Condition</div>
|
|
<div class="text-[10px] text-gray-500">If severity = Critical</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connector Lines (Split) -->
|
|
<div class="flex items-start justify-center gap-12">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-0.5 h-4 bg-gray-300"></div>
|
|
<div class="text-[9px] text-emerald-600 font-medium mb-1">Yes</div>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-0.5 h-4 bg-gray-300"></div>
|
|
<div class="text-[9px] text-gray-400 font-medium mb-1">No</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Nodes -->
|
|
<div class="flex items-start justify-center gap-4">
|
|
<!-- Slack Action -->
|
|
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-[#4A154B] flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-medium text-gray-800">Send Slack</div>
|
|
<div class="text-[9px] text-gray-400">#incidents</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Action -->
|
|
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 opacity-50">
|
|
<div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-medium text-gray-500">Log Event</div>
|
|
<div class="text-[9px] text-gray-400">Info level</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Final Connector -->
|
|
<div class="w-0.5 h-4 bg-gray-300 -mt-1 ml-[-60px]"></div>
|
|
|
|
<!-- Email Action -->
|
|
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 -mt-1 ml-[-60px]">
|
|
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-medium text-gray-800">Send Email</div>
|
|
<div class="text-[9px] text-gray-400">On-call team</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="px-4 py-2.5 bg-white border-t border-gray-100 flex items-center justify-between">
|
|
<span class="text-gray-400 text-xs">Incident Response Workflow</span>
|
|
<span class="flex items-center gap-1 px-2 py-0.5 bg-emerald-50 rounded text-[10px] text-emerald-600 border border-emerald-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2: Debug with Logs -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Workflow Logs Panel -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-xs">Workflow Logs</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">Today</span>
|
|
</div>
|
|
|
|
<!-- Logs List -->
|
|
<div class="p-4 space-y-2">
|
|
<!-- Success Log -->
|
|
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">Deploy Notification</span>
|
|
<span class="text-xs text-gray-400">2m ago</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">Completed in 1.2s - 4 steps executed</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Log -->
|
|
<div class="flex items-start gap-3 p-3 bg-rose-50 rounded-lg border border-rose-100">
|
|
<div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg class="w-3.5 h-3.5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-rose-800">Backup Database</span>
|
|
<span class="text-xs text-rose-400">15m ago</span>
|
|
</div>
|
|
<div class="text-xs text-rose-600 mt-0.5">Failed at step 3 - Connection timeout</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Log -->
|
|
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">Incident Alert</span>
|
|
<span class="text-xs text-gray-400">32m ago</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">Completed in 0.8s - 6 steps executed</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Running Log -->
|
|
<div class="flex items-start gap-3 p-3 bg-sky-50 rounded-lg border border-sky-100">
|
|
<div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg class="w-3.5 h-3.5 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-sky-800">Sync User Data</span>
|
|
<span class="text-xs text-sky-400">Running...</span>
|
|
</div>
|
|
<div class="text-xs text-violet-600 mt-0.5">Step 2 of 5 - Processing records</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Log -->
|
|
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">Daily Report</span>
|
|
<span class="text-xs text-gray-400">1h ago</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">Completed in 3.4s - 8 steps executed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
|
<span class="text-gray-400 text-xs">Showing 5 of 127 executions</span>
|
|
<span class="text-violet-600 text-xs font-medium">View all</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200">
|
|
<svg class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-sky-600 uppercase tracking-wide">Debugging</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Debug any issues with comprehensive logs</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Easily debug any issues with detailed logs that provide insights into your workflow behavior, helping you quickly identify and resolve errors.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Detailed execution logs
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Error tracking
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Step-by-step visibility
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3: Secure Secrets -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200">
|
|
<svg class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-sky-600 uppercase tracking-wide">Secure Secrets</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Store API keys and secrets securely</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Safeguard your API keys and secrets with state-of-the-art encryption, providing peace of mind and protecting sensitive data from unauthorized access.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Encrypted at rest
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Encrypted in transit
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Hidden in logs
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Variables Panel -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-xs">Workflow Variables</span>
|
|
</div>
|
|
<button class="text-violet-600 text-xs font-medium flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Variables List -->
|
|
<div class="p-4 space-y-3">
|
|
<!-- Variable 1 - Secret -->
|
|
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-800">SLACK_WEBHOOK_URL</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-sky-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
|
<span class="text-gray-400 text-xs font-mono tracking-wider">************************</span>
|
|
<svg class="w-3.5 h-3.5 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variable 2 - API Key -->
|
|
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-amber-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-800">API_KEY</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-[10px] font-medium rounded">Secret</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
|
<span class="text-gray-400 text-xs font-mono tracking-wider">sk-*****************</span>
|
|
<svg class="w-3.5 h-3.5 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variable 3 - Environment -->
|
|
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-emerald-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-800">ENVIRONMENT</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] font-medium rounded">Variable</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
|
<span class="text-gray-700 text-xs font-mono">production</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variable 4 - Team Email -->
|
|
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-800">TEAM_EMAIL</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-sky-100 text-sky-700 text-[10px] font-medium rounded">Variable</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
|
<span class="text-gray-700 text-xs font-mono">oncall@company.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span class="text-gray-500 text-xs">Encrypted at rest & in transit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4: Custom Code -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Code Editor Mockup -->
|
|
<div class="relative bg-gray-900 rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-700">
|
|
<!-- Editor Header -->
|
|
<div class="bg-gray-800 px-4 py-2.5 flex items-center justify-between border-b border-gray-700">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">custom-action.js</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 bg-sky-600/20 text-sky-400 text-[10px] font-medium rounded">JavaScript</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Content -->
|
|
<div class="p-4 font-mono text-xs leading-relaxed overflow-x-auto">
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">1</div>
|
|
<div><span class="text-sky-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">2</div>
|
|
<div><span class="text-gray-500"> // Get incident data from trigger</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">3</div>
|
|
<div><span class="text-gray-300"> </span><span class="text-sky-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">4</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">5</div>
|
|
<div><span class="text-gray-500"> // Send notification to Slack</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">6</div>
|
|
<div><span class="text-gray-300"> </span><span class="text-sky-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">7</div>
|
|
<div><span class="text-gray-300"> method: </span><span class="text-emerald-400">'POST'</span><span class="text-gray-300">,</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">8</div>
|
|
<div><span class="text-gray-300"> body: </span><span class="text-sky-400">JSON</span><span class="text-gray-300">.</span><span class="text-yellow-300">stringify</span><span class="text-gray-300">({</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">9</div>
|
|
<div><span class="text-gray-300"> text: </span><span class="text-emerald-400">`Alert: </span><span class="text-orange-300">${incident.title}</span><span class="text-emerald-400">`</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">10</div>
|
|
<div><span class="text-gray-300"> })</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">11</div>
|
|
<div><span class="text-gray-300"> });</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">12</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">13</div>
|
|
<div><span class="text-gray-300"> </span><span class="text-sky-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">14</div>
|
|
<div><span class="text-gray-300">}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Editor Footer -->
|
|
<div class="bg-gray-800 px-4 py-2 border-t border-gray-700 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-gray-500 text-[10px]">Ln 9, Col 24</span>
|
|
<span class="text-gray-600">|</span>
|
|
<span class="text-gray-500 text-[10px]">UTF-8</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex items-center gap-1 px-2 py-0.5 bg-emerald-600/20 rounded text-[10px] text-emerald-400">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Valid
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200">
|
|
<svg class="h-5 w-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-sky-600 uppercase tracking-wide">Custom Code</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Write custom code, if you have to</h3>
|
|
<p class="mt-4 text-lg text-gray-600">When the need arises, write custom code tailored to your specific requirements, addressing unique challenges and unlocking advanced functionality.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
JavaScript support
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Open protocols
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-sky-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Connect to any system
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- More Features Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section header -->
|
|
<div class="mx-auto max-w-2xl text-center">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 ring-1 ring-inset ring-sky-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-sky-700">Advanced capabilities</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Advanced features, built for you
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Build custom workflows, integrate with anything you have, or more - you never run out of features. Batteries included.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature cards grid -->
|
|
<div class="mx-auto mt-16 max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<!-- Card 1: Reliability Guaranteed -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-sky-50 ring-1 ring-sky-200">
|
|
<svg class="h-6 w-6 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Reliability Guaranteed</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Hosted on a distributed high availability infrastructure across multiple clouds and continents so your workflows always run.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Integrations -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">5000+ Integrations</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Connect to any service you use. From Slack and Teams to Jira and GitHub. Build custom integrations with webhooks and APIs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Conditional Logic -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Conditional Logic</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Add if/else branches, loops, and complex conditions. Build workflows that adapt based on data and context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Scheduled Triggers -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Scheduled Triggers</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Run workflows on schedule - hourly, daily, weekly, or custom cron. Perfect for reports, maintenance, and recurring tasks.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Compliance -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">SOC 2/3 & ISO Compliant</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">We're SOC 2/3, ISO, GDPR, HIPAA, CCPA compliant (and more). Your automation runs in a secure environment.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6: Version Control -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-gray-300 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
|
|
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Version History</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Track changes with full version history. Roll back to previous versions and audit who changed what and when.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/security') -%>
|
|
|
|
<!-- Team Notifications Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<!-- Content -->
|
|
<div class="relative">
|
|
<p class="text-sm font-medium text-sky-600 uppercase tracking-wide mb-3">Team Notifications</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Workflow alerts where your team already works
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
|
|
Get instant notifications in Slack and Microsoft Teams when workflows complete, fail, or need attention. No context switching required.
|
|
</p>
|
|
|
|
<!-- Integration cards -->
|
|
<div class="mt-10 space-y-3">
|
|
<!-- Slack -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
|
|
<path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
|
|
<path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
|
|
<path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Slack</h3>
|
|
<p class="text-sm text-gray-500">Instant alerts with interactive actions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microsoft Teams -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
|
|
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
|
|
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
|
|
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
|
|
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
|
|
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features list -->
|
|
<div class="mt-8 grid grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Success notifications
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Failure alerts
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Error details
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Action buttons
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Illustration - Interactive Slack Notification -->
|
|
<div class="mt-16 lg:mt-0">
|
|
<div class="relative" id="workflows-slack-demo">
|
|
<!-- Decorative background elements -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Slack Window -->
|
|
<div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
|
|
<!-- Slack window header -->
|
|
<div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
<span class="text-white text-sm font-semibold">workflows</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-sky-400 to-sky-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
|
|
<span class="text-white text-xs font-bold">D</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="workflows-slack-messages">
|
|
<!-- Original workflow message -->
|
|
<div class="group relative">
|
|
<div class="flex items-start gap-3">
|
|
<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
|
|
<span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
|
|
<span class="text-gray-500 text-xs">3:45 PM</span>
|
|
</div>
|
|
|
|
<!-- Workflow card -->
|
|
<div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
|
|
<div class="h-1 bg-gradient-to-r from-rose-500 to-orange-500"></div>
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-rose-500/20 text-rose-400 text-xs font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-rose-400 animate-pulse"></span>
|
|
Failed
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2">Database Backup failed at step 3</h4>
|
|
<p class="text-gray-400 text-sm mt-1">Connection timeout after 30 seconds</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
Daily Backup Workflow
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Failed 2m ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="workflows-slack-buttons">
|
|
<button onclick="workflowsRetry()" id="workflows-btn-retry" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
Retry Workflow
|
|
</button>
|
|
<button onclick="workflowsViewLogs()" id="workflows-btn-logs" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
View Logs
|
|
</button>
|
|
<button onclick="workflowsDisable()" id="workflows-btn-disable" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Disable
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reactions -->
|
|
<div class="mt-3 flex items-center gap-2" id="workflows-slack-reactions">
|
|
<div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
|
|
<span>👀</span>
|
|
<span class="text-gray-300">2</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="workflows-slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="workflows-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
|
|
<div class="flex -space-x-1" id="workflows-thread-avatars"></div>
|
|
<span id="workflows-thread-count"></span>
|
|
<span class="text-gray-500">Last reply 1m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message input -->
|
|
<div class="bg-[#1a1d21] px-4 pb-4">
|
|
<div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
<span class="text-gray-500 text-sm">Message #workflows</span>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let workflowsRetryClicked = false;
|
|
let workflowsLogsClicked = false;
|
|
let workflowsDisableClicked = false;
|
|
let workflowsReplyCount = 0;
|
|
const workflowsAvatars = [];
|
|
|
|
function updateWorkflowsThreadIndicator() {
|
|
const indicator = document.getElementById('workflows-thread-indicator');
|
|
const countEl = document.getElementById('workflows-thread-count');
|
|
const avatarsEl = document.getElementById('workflows-thread-avatars');
|
|
|
|
if (workflowsReplyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = workflowsReplyCount + (workflowsReplyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = workflowsAvatars.slice(-3).map(a =>
|
|
a.isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
|
|
: `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
|
|
<span class="text-white text-[8px] font-bold">${a.initial}</span>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function addWorkflowsReaction(emoji) {
|
|
const reactions = document.getElementById('workflows-slack-reactions');
|
|
const newReaction = document.createElement('div');
|
|
newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors';
|
|
newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
|
|
newReaction.style.animation = 'bounceIn 0.3s ease-out';
|
|
reactions.appendChild(newReaction);
|
|
}
|
|
|
|
function addWorkflowsThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('workflows-slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
workflowsAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
workflowsAvatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
workflowsReplyCount++;
|
|
updateWorkflowsThreadIndicator();
|
|
|
|
const avatarHtml = isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
|
|
: `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;
|
|
|
|
reply.innerHTML = `
|
|
${avatarHtml}
|
|
<div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold text-white text-sm">${name}</span>
|
|
${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
|
|
<span class="text-gray-500 text-[11px]">${time}</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
|
|
</div>
|
|
`;
|
|
thread.appendChild(reply);
|
|
}
|
|
|
|
window.workflowsRetry = function() {
|
|
if (workflowsRetryClicked) return;
|
|
workflowsRetryClicked = true;
|
|
|
|
const btn = document.getElementById('workflows-btn-retry');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Retrying...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Triggered</span>';
|
|
btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addWorkflowsReaction('🔄');
|
|
addWorkflowsThreadReply('from-sky-400 to-sky-600', 'DevOps Bot', '3:46 PM', 'Workflow retry initiated. Re-running from step 3...', false);
|
|
|
|
setTimeout(() => {
|
|
addWorkflowsThreadReply('from-green-400 to-green-600', 'OneUptime', '3:48 PM', '✅ Workflow completed successfully!<br/><span class="text-gray-400">Database Backup • 5 steps • 1m 23s</span>', true);
|
|
addWorkflowsReaction('🎉');
|
|
}, 1500);
|
|
}, 800);
|
|
};
|
|
|
|
window.workflowsViewLogs = function() {
|
|
if (workflowsLogsClicked) return;
|
|
workflowsLogsClicked = true;
|
|
|
|
const btn = document.getElementById('workflows-btn-logs');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Loading...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Logs Shared</span>';
|
|
btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');
|
|
|
|
addWorkflowsReaction('📋');
|
|
addWorkflowsThreadReply('from-green-400 to-green-600', 'OneUptime', '3:47 PM', '📜 <strong class="text-white">Workflow Logs</strong><br/><span class="text-gray-400">Step 1: Connect to DB ✓<br/>Step 2: Create snapshot ✓<br/>Step 3: Upload to S3 ✗ (timeout)</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.workflowsDisable = function() {
|
|
if (workflowsDisableClicked) return;
|
|
workflowsDisableClicked = true;
|
|
|
|
const btn = document.getElementById('workflows-btn-disable');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Disabling...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Disabled</span>';
|
|
btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
|
|
btn.classList.add('bg-amber-600/20', 'border', 'border-amber-500/50', 'text-amber-400');
|
|
|
|
addWorkflowsReaction('⏸️');
|
|
addWorkflowsThreadReply('from-amber-400 to-amber-600', 'System', '3:47 PM', '⚠️ Workflow <strong class="text-white">Daily Backup</strong> has been disabled. Re-enable from the dashboard when ready.', false);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes bounceIn {
|
|
0% { opacity: 0; transform: scale(0.8); }
|
|
50% { transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeInSlack {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-fadeInSlack {
|
|
opacity: 0;
|
|
animation: fadeInSlack 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for workflows hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('workflows-hero-section');
|
|
const gridGlow = document.getElementById('workflows-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
|
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |