<!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">&rarr;</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>