<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>Q-Better | Temporarily Unavailable</title>
<style>
:root{
--bg:#b71c1c; /* background red (brand color) */
--card:#ffffff; /* white card background */
--text:#212121; /* main text dark */
--muted:#616161; /* secondary text */
--accent:#b71c1c; /* accent red */
--accent-strong:#d32f2f;/* strong accent red */
--border:#e0e0e0; /* subtle border */
--shadow: 0 10px 30px rgba(0,0,0,.2);
}
*{box-sizing:border-box}
html, body{height:100%}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: var(--bg);
color:var(--text);
display:grid; place-items:center;
}
.wrap{width:100%; max-width:860px; padding:24px}
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
box-shadow:var(--shadow);
padding:40px 28px;
text-align:center;
}
.logo{
width:160px;
margin:0 auto 18px;
}
.logo img{width:100%; height:auto; display:block}
h1{font-size:clamp(28px, 4vw, 40px); line-height:1.15; margin:8px 0 8px;}
.sub{color:var(--muted); margin:0 0 26px; font-size:clamp(14px, 2.2vw, 18px)}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
appearance:none; border:1px solid var(--border); background:var(--accent);
color:white; padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer;
transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
box-shadow: 0 8px 18px rgba(183,28,28,.35);
}
.btn:hover{ transform: translateY(-1px)}
.btn:active{ transform: translateY(0)}
.ghost{
background:transparent; color:var(--text); border-color:var(--border);
box-shadow:none;
}
.meta{margin-top:26px; color:var(--muted); font-size:14px}
.divider{height:1px; background:var(--border); margin:28px auto; width:min(560px, 90%)}
.grid{display:grid; grid-template-columns:1fr; gap:18px; max-width:860px; margin:0 auto}
@media (min-width:720px){ .grid{ grid-template-columns: 1.2fr .8fr } }
.panel{border:1px dashed var(--border); border-radius:16px; padding:16px; text-align:left}
code, .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
a{color:var(--accent-strong); text-decoration:none}
a:hover{text-decoration:underline}
.socials{display:flex; justify-content:center; gap:16px; margin-top:24px}
.socials a{display:inline-block; width:32px; height:32px}
.socials img{width:100%; height:auto; display:block}
</style>
</head>
<body>
<main class="wrap" role="main">
<section class="card" aria-labelledby="title">
<div class="logo" aria-hidden="true">
<img src="logo.svg" alt="Q-Better Logo">
</div>
<h1 id="title">We'll be right back.</h1>
<p class="sub">
Q-Better is temporarily performing maintenance to improve our services. Thank you for your patience while we make things better for you.
</p>
<div class="actions">
<a class="btn" href="mailto:support@q-better.com" aria-label="Contact Q-Better support via email">Contact us</a>
</div>
<div class="divider" role="separator" aria-hidden="true"></div>
<div class="grid" aria-label="Helpful information">
<div class="panel">
<strong>What happened?</strong>
<p class="sub" style="margin-top:6px">We have scheduled a short maintenance window to update and enhance our platform. Services will be restored shortly.</p>
<div class="meta mono"><span aria-label="Status code">Status</span>: 503 Service Unavailable</div>
</div>
<div class="panel">
<strong>About Q-Better</strong>
<p class="sub" style="margin-top:6px">Q-Better designs innovative solutions for customer experience management, helping organizations enhance interactions and optimize efficiency.</p>
</div>
</div>
<div class="socials">
<a href="https://www.linkedin.com/company/q-better" target="_blank" aria-label="Q-Better on LinkedIn"><img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg" alt="LinkedIn"></a>
<a href="https://www.facebook.com/qbetter" target="_blank" aria-label="Q-Better on Facebook"><img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg" alt="Facebook"></a>
<a href="https://www.instagram.com/qbetter" target="_blank" aria-label="Q-Better on Instagram"><img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg" alt="Instagram"></a>
<a href="https://www.youtube.com/@QBetter" target="_blank" aria-label="Q-Better on YouTube"><img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg" alt="YouTube"></a>
</div>
<p class="meta mono" id="ts" aria-live="polite"></p>
</section>
</main>
<script>
// Timestamp for context
(function(){
const el = document.getElementById('ts');
const d = new Date();
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'local time';
el.textContent = `Last checked ${d.toLocaleString()} (${tz})`;
})();
</script>
</body>
</html>