error maintenance downtime corporate progress notification corporate
Error Maintenance
Corporate maintenance page with progress bar, task checklist, estimated downtime, and email notification signup.
corporate Responsive
Live Preview
Sections
navbarmaintenance-iconprogress-bartask-listnotification-signupsocial-linksfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Under Maintenance — We'll Be Back Soon</title>
<meta name="description" content="We're performing scheduled maintenance. We'll be back shortly." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — calm, neutral maintenance identity */
:root {
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--color-primary-soft: #eef2ff;
--color-primary-text: #ffffff;
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.gear-spin { animation: spin-slow 8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.gear-spin { animation: none; }
}
</style>
</head>
<body class="min-h-screen bg-white antialiased">
<!-- Navbar -->
<nav class="ws-navbar border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<div class="flex items-center gap-3">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="#1E293B" />
<path d="M10 11h12M10 16h8M10 21h10" stroke="white" stroke-width="2" stroke-linecap="round" />
</svg>
<span class="text-lg font-bold text-slate-900">Acme</span>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Status Page</a>
<a href="#" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Help Center</a>
</div>
</div>
</nav>
<main class="ws-error max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24 text-center">
<!-- Gear Icon -->
<div class="mx-auto w-24 h-24 rounded-full bg-slate-100 flex items-center justify-center mb-8 relative">
<svg class="w-12 h-12 text-slate-500 gear-spin" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<!-- Maintenance Badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-50 border border-amber-200 text-sm font-medium text-amber-700 mb-6">
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
Scheduled Maintenance
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">We're improving things</h1>
<p class="text-lg text-slate-500 leading-relaxed max-w-lg mx-auto mb-10">
We're performing scheduled maintenance to improve our services and infrastructure. Everything will be back to normal shortly.
</p>
<!-- Estimated Time Card -->
<div class="bg-slate-50 rounded-2xl border border-slate-200 p-6 sm:p-8 mb-8 max-w-md mx-auto">
<div class="flex items-center justify-between mb-2">
<p class="text-sm font-medium text-slate-500">Estimated downtime</p>
<div class="flex items-center gap-1.5">
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="text-xs text-slate-400">Started 1h 18min ago</span>
</div>
</div>
<p class="text-3xl font-bold text-slate-900 mb-5">Back in ~2 hours</p>
<!-- Progress Bar -->
<div class="space-y-2">
<div class="w-full bg-slate-200 rounded-full h-3 overflow-hidden">
<div class="h-3 rounded-full transition-all" style="width: 65%; background: linear-gradient(to right, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #818cf8));"></div>
</div>
<div class="flex items-center justify-between text-xs text-slate-400">
<span>65% complete</span>
<span>~42 min remaining</span>
</div>
</div>
</div>
<!-- Task Checklist -->
<div class="ws-steps bg-white rounded-2xl border border-slate-200 p-6 sm:p-8 mb-8 text-left max-w-md mx-auto">
<h2 class="text-sm font-semibold text-slate-900 mb-4">Maintenance progress</h2>
<ul class="space-y-3">
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="flex-1">
<span class="text-sm text-slate-700 font-medium">Database migration</span>
<span class="text-xs text-emerald-600 ml-2">Completed</span>
</div>
<span class="text-xs text-slate-400">14:02</span>
</li>
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="flex-1">
<span class="text-sm text-slate-700 font-medium">Security patches</span>
<span class="text-xs text-emerald-600 ml-2">Completed</span>
</div>
<span class="text-xs text-slate-400">14:28</span>
</li>
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="flex-1">
<span class="text-sm text-slate-700 font-medium">Infrastructure scaling</span>
<span class="text-xs text-emerald-600 ml-2">Completed</span>
</div>
<span class="text-xs text-slate-400">14:55</span>
</li>
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center shrink-0" style="background-color: var(--color-primary-soft);">
<div class="w-3 h-3 rounded-full border-2 border-t-transparent animate-spin" style="border-color: var(--color-primary); border-top-color: transparent;"></div>
</div>
<div class="flex-1">
<span class="text-sm font-medium" style="color: var(--color-primary);">Performance optimization</span>
<span class="text-xs ml-2" style="color: color-mix(in srgb, var(--color-primary) 70%, #94a3b8);">In progress</span>
</div>
<span class="text-xs text-slate-400">15:10</span>
</li>
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 border-slate-300"></div>
</div>
<div class="flex-1">
<span class="text-sm text-slate-400 font-medium">Final testing & verification</span>
<span class="text-xs text-slate-400 ml-2">Pending</span>
</div>
<span class="text-xs text-slate-300">--:--</span>
</li>
<li class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 border-slate-300"></div>
</div>
<div class="flex-1">
<span class="text-sm text-slate-400 font-medium">Service restoration</span>
<span class="text-xs text-slate-400 ml-2">Pending</span>
</div>
<span class="text-xs text-slate-300">--:--</span>
</li>
</ul>
</div>
<!-- Notification Signup -->
<div class="ws-newsletter rounded-2xl border p-6 sm:p-8 mb-8 max-w-md mx-auto" style="background-color: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);">
<div class="flex items-center justify-center gap-2 mb-3">
<svg class="w-5 h-5" style="color: var(--color-primary);" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
<h2 class="text-base font-semibold" style="color: color-mix(in srgb, var(--color-primary) 80%, #1e1b4b);">Get notified when we're back</h2>
</div>
<p class="text-sm mb-4" style="color: color-mix(in srgb, var(--color-primary) 60%, #334155);">We'll send you a single email once maintenance is complete. No spam, ever.</p>
<form class="flex gap-2" action="#" method="POST">
<div class="relative flex-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<input type="email" name="email" required placeholder="you@example.com"
class="w-full pl-9 pr-4 py-2.5 rounded-xl border bg-white text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:border-transparent transition"
style="border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); --tw-ring-color: var(--color-primary);" />
</div>
<button type="submit"
class="px-5 py-2.5 rounded-xl text-white text-sm font-semibold transition shadow-sm shrink-0"
style="background-color: var(--color-primary);"
onmouseover="this.style.backgroundColor='var(--color-primary-hover)'" onmouseout="this.style.backgroundColor='var(--color-primary)'">
Notify me
</button>
</form>
</div>
<!-- Social & Contact Links -->
<div class="max-w-md mx-auto">
<p class="text-sm text-slate-500 mb-4">Stay updated through our channels</p>
<div class="flex items-center justify-center gap-4 mb-8">
<a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:border-slate-300 transition" aria-label="Follow us on Twitter">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
Twitter
</a>
<a href="#" class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:border-slate-300 transition" aria-label="Check our status page">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
</svg>
Status
</a>
<a href="mailto:support@acme.com" class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:border-slate-300 transition" aria-label="Email support">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
Email
</a>
</div>
</div>
</main>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-100 py-6">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-slate-400">© 2026 Acme Inc. All rights reserved.</p>
<div class="flex items-center gap-4 text-sm text-slate-400">
<a href="#" class="hover:text-slate-600 transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-slate-600 transition-colors">Terms of Service</a>
<a href="#" class="hover:text-slate-600 transition-colors">Cookie Settings</a>
</div>
</div>
</footer>
</body>
</html>
Professional maintenance page with a corporate feel. Features a progress bar with estimated time, a checklist of maintenance tasks with completion states, an email notification signup form, and social links for status updates.