first commit
This commit is contained in:
593
html/index.html
Normal file
593
html/index.html
Normal file
@@ -0,0 +1,593 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>BurnAware — Organizational Health Intelligence</title>
|
||||||
|
<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=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root {
|
||||||
|
--ink: #0f0f0e;
|
||||||
|
--ink-secondary: #5a5955;
|
||||||
|
--ink-tertiary: #9a9793;
|
||||||
|
--surface: #faf9f7;
|
||||||
|
--surface-alt: #f2f0ec;
|
||||||
|
--surface-card: #ffffff;
|
||||||
|
--border: rgba(15,15,14,0.1);
|
||||||
|
--border-strong: rgba(15,15,14,0.18);
|
||||||
|
--accent: #1a4a3a;
|
||||||
|
--accent-light: #e8f2ee;
|
||||||
|
--accent-mid: #2d6b52;
|
||||||
|
--warm: #c4531a;
|
||||||
|
--warm-light: #fdf0e8;
|
||||||
|
--serif: 'Instrument Serif', Georgia, serif;
|
||||||
|
--sans: 'DM Sans', system-ui, sans-serif;
|
||||||
|
--max: 1080px;
|
||||||
|
--radius: 8px;
|
||||||
|
--radius-lg: 16px;
|
||||||
|
}
|
||||||
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
|
||||||
|
body { font-family: var(--sans); background: var(--surface); color: var(--ink); line-height: 1.6; }
|
||||||
|
|
||||||
|
/* NAV */
|
||||||
|
nav {
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
background: rgba(250,249,247,0.92); backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--border); padding: 0 2rem;
|
||||||
|
}
|
||||||
|
.nav-inner {
|
||||||
|
max-width: var(--max); margin: 0 auto;
|
||||||
|
display: flex; align-items: center; justify-content: space-between; height: 60px;
|
||||||
|
}
|
||||||
|
.logo { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
|
||||||
|
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mid); display: inline-block; }
|
||||||
|
nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; }
|
||||||
|
nav ul a { font-size: 0.875rem; color: var(--ink-secondary); text-decoration: none; transition: color 0.2s; }
|
||||||
|
nav ul a:hover { color: var(--ink); }
|
||||||
|
.nav-cta {
|
||||||
|
font-size: 0.875rem; font-weight: 500; padding: 8px 20px;
|
||||||
|
background: var(--ink); color: var(--surface); border: none;
|
||||||
|
border-radius: var(--radius); cursor: pointer; text-decoration: none;
|
||||||
|
transition: background 0.2s, transform 0.1s;
|
||||||
|
}
|
||||||
|
.nav-cta:hover { background: #2a2a28; transform: translateY(-1px); }
|
||||||
|
|
||||||
|
/* HERO */
|
||||||
|
.hero {
|
||||||
|
max-width: var(--max); margin: 0 auto;
|
||||||
|
padding: 100px 2rem 80px;
|
||||||
|
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
|
||||||
|
}
|
||||||
|
.hero-label {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
|
||||||
|
color: var(--accent-mid); margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.hero-label::before { content: ''; display: block; width: 16px; height: 1px; background: var(--accent-mid); }
|
||||||
|
h1 {
|
||||||
|
font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.2rem);
|
||||||
|
line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
|
||||||
|
margin-bottom: 1.5rem; font-weight: 400;
|
||||||
|
}
|
||||||
|
h1 em { font-style: italic; color: var(--accent-mid); }
|
||||||
|
.hero-sub {
|
||||||
|
font-size: 1.05rem; color: var(--ink-secondary); line-height: 1.7;
|
||||||
|
margin-bottom: 2.5rem; max-width: 420px; font-weight: 300;
|
||||||
|
}
|
||||||
|
.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
|
||||||
|
.btn-primary {
|
||||||
|
font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
|
||||||
|
padding: 13px 28px; background: var(--accent); color: #fff;
|
||||||
|
border: none; border-radius: var(--radius); cursor: pointer;
|
||||||
|
text-decoration: none; transition: background 0.2s, transform 0.15s;
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--accent-mid); transform: translateY(-1px); }
|
||||||
|
.btn-secondary {
|
||||||
|
font-family: var(--sans); font-size: 0.9rem; color: var(--ink-secondary);
|
||||||
|
text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover { color: var(--ink); }
|
||||||
|
.btn-arrow { transition: transform 0.2s; }
|
||||||
|
.btn-secondary:hover .btn-arrow { transform: translateX(3px); }
|
||||||
|
|
||||||
|
/* HERO VISUAL */
|
||||||
|
.dashboard-card {
|
||||||
|
background: var(--surface-card); border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg); overflow: hidden;
|
||||||
|
box-shadow: 0 2px 24px rgba(15,15,14,0.07), 0 0 0 1px var(--border);
|
||||||
|
}
|
||||||
|
.dash-header {
|
||||||
|
padding: 16px 20px; border-bottom: 1px solid var(--border);
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
}
|
||||||
|
.dash-title { font-size: 0.8rem; font-weight: 500; color: var(--ink); }
|
||||||
|
.dash-subtitle { font-size: 0.72rem; color: var(--ink-tertiary); margin-top: 2px; }
|
||||||
|
.dash-badge {
|
||||||
|
font-size: 0.7rem; font-weight: 500; padding: 4px 10px;
|
||||||
|
border-radius: 20px; background: var(--warm-light); color: var(--warm);
|
||||||
|
border: 1px solid rgba(196,83,26,0.15);
|
||||||
|
}
|
||||||
|
.dash-body { padding: 16px 20px; }
|
||||||
|
.dash-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
|
||||||
|
.metric-item { background: var(--surface-alt); border-radius: var(--radius); padding: 12px 14px; }
|
||||||
|
.metric-label { font-size: 0.68rem; color: var(--ink-tertiary); margin-bottom: 4px; }
|
||||||
|
.metric-value { font-size: 1.4rem; font-weight: 500; color: var(--ink); line-height: 1; }
|
||||||
|
.metric-value.warn { color: var(--warm); }
|
||||||
|
.metric-value.ok { color: var(--accent-mid); }
|
||||||
|
.metric-sub { font-size: 0.65rem; color: var(--ink-tertiary); margin-top: 3px; }
|
||||||
|
.signal-list { margin-top: 12px; }
|
||||||
|
.signal-item {
|
||||||
|
display: flex; align-items: flex-start; gap: 10px;
|
||||||
|
padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
|
||||||
|
.signal-dot.red { background: #e24b4b; }
|
||||||
|
.signal-dot.amber { background: #d4881a; }
|
||||||
|
.signal-dot.green { background: #2d6b52; }
|
||||||
|
.signal-text { color: var(--ink-secondary); line-height: 1.45; }
|
||||||
|
.signal-action { font-size: 0.72rem; color: var(--accent-mid); margin-top: 3px; }
|
||||||
|
|
||||||
|
/* PROOF BAR */
|
||||||
|
.proof-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-alt); padding: 16px 2rem; }
|
||||||
|
.proof-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
|
||||||
|
.proof-label { font-size: 0.75rem; color: var(--ink-tertiary); white-space: nowrap; }
|
||||||
|
.proof-orgs { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
|
||||||
|
.proof-org { font-size: 0.8rem; font-weight: 500; color: var(--ink-secondary); opacity: 0.6; }
|
||||||
|
|
||||||
|
/* SECTIONS */
|
||||||
|
section { max-width: var(--max); margin: 0 auto; padding: 80px 2rem; }
|
||||||
|
.section-label {
|
||||||
|
font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
|
||||||
|
color: var(--accent-mid); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
|
||||||
|
}
|
||||||
|
.section-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--accent-mid); }
|
||||||
|
h2 {
|
||||||
|
font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem);
|
||||||
|
line-height: 1.15; letter-spacing: -0.02em; font-weight: 400;
|
||||||
|
color: var(--ink); margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
h2 em { font-style: italic; color: var(--accent-mid); }
|
||||||
|
.section-body { font-size: 1.0rem; color: var(--ink-secondary); line-height: 1.75; max-width: 560px; font-weight: 300; }
|
||||||
|
|
||||||
|
/* PROBLEM */
|
||||||
|
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-top: 3rem; }
|
||||||
|
.problem-quote {
|
||||||
|
font-family: var(--serif); font-size: 1.35rem; line-height: 1.5;
|
||||||
|
color: var(--ink); font-style: italic; padding-left: 1.5rem; border-left: 2px solid var(--accent-mid);
|
||||||
|
}
|
||||||
|
.problem-list { list-style: none; }
|
||||||
|
.problem-list li {
|
||||||
|
padding: 14px 0; border-bottom: 1px solid var(--border);
|
||||||
|
font-size: 0.9rem; color: var(--ink-secondary); line-height: 1.6;
|
||||||
|
display: flex; gap: 12px; align-items: flex-start;
|
||||||
|
}
|
||||||
|
.problem-list li::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--warm); flex-shrink: 0; margin-top: 7px; }
|
||||||
|
|
||||||
|
/* HOW */
|
||||||
|
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 3rem; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
|
||||||
|
.step { background: var(--surface-card); padding: 32px 28px; }
|
||||||
|
.step-num { font-family: var(--serif); font-size: 3rem; color: rgba(15,15,14,0.06); line-height: 1; margin-bottom: 1rem; font-style: italic; }
|
||||||
|
.step-title { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-bottom: 0.5rem; }
|
||||||
|
.step-desc { font-size: 0.85rem; color: var(--ink-secondary); line-height: 1.65; font-weight: 300; }
|
||||||
|
|
||||||
|
/* FEATURES */
|
||||||
|
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
|
||||||
|
.feature-card {
|
||||||
|
background: var(--surface-card); border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg); padding: 28px 24px;
|
||||||
|
transition: border-color 0.2s, transform 0.2s;
|
||||||
|
}
|
||||||
|
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
|
||||||
|
.feature-icon { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-light); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
|
||||||
|
.feature-icon svg { width: 18px; height: 18px; stroke: var(--accent-mid); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
||||||
|
.feature-title { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-bottom: 0.5rem; }
|
||||||
|
.feature-desc { font-size: 0.85rem; color: var(--ink-secondary); line-height: 1.65; font-weight: 300; }
|
||||||
|
|
||||||
|
/* DIFF DARK */
|
||||||
|
.diff-wrap { background: var(--ink); padding: 1px 0; }
|
||||||
|
.diff-wrap section { padding: 80px 2rem; }
|
||||||
|
.diff-wrap .section-label { color: rgba(255,255,255,0.4); }
|
||||||
|
.diff-wrap .section-label::before { background: rgba(255,255,255,0.3); }
|
||||||
|
.diff-wrap h2 { color: #f5f3ef; }
|
||||||
|
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; align-items: start; }
|
||||||
|
.diff-item { padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.1); }
|
||||||
|
.diff-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||||||
|
.diff-tag { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
|
||||||
|
.diff-title { font-size: 0.95rem; font-weight: 500; color: #f5f3ef; margin-bottom: 8px; }
|
||||||
|
.diff-desc { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.65; font-weight: 300; }
|
||||||
|
.diff-vs { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 28px; }
|
||||||
|
.diff-vs-title { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.4); margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||||
|
.diff-compare-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.82rem; }
|
||||||
|
.diff-compare-row:last-child { border-bottom: none; }
|
||||||
|
.diff-compare-name { color: rgba(255,255,255,0.6); }
|
||||||
|
.diff-compare-them { color: rgba(255,255,255,0.25); font-style: italic; font-size: 0.75rem; }
|
||||||
|
.diff-compare-us { color: #6fb899; font-size: 0.75rem; font-weight: 500; }
|
||||||
|
|
||||||
|
/* AUDIENCE */
|
||||||
|
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
|
||||||
|
.audience-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; background: var(--surface-card); }
|
||||||
|
.audience-role { font-size: 0.75rem; font-weight: 500; color: var(--accent-mid); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||||
|
.audience-title { font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; line-height: 1.35; }
|
||||||
|
.audience-desc { font-size: 0.82rem; color: var(--ink-secondary); line-height: 1.65; font-weight: 300; }
|
||||||
|
|
||||||
|
/* TEAM */
|
||||||
|
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
|
||||||
|
.team-person { display: flex; gap: 1.5rem; align-items: flex-start; }
|
||||||
|
.team-avatar {
|
||||||
|
width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
|
||||||
|
flex-shrink: 0; background: var(--surface-alt); border: 1px solid var(--border);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-family: var(--serif); font-size: 1.4rem; color: var(--ink-secondary); font-style: italic;
|
||||||
|
}
|
||||||
|
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
|
.team-name { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
|
||||||
|
.team-role { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-mid); margin-bottom: 10px; }
|
||||||
|
.team-bio { font-size: 0.85rem; color: var(--ink-secondary); line-height: 1.7; font-weight: 300; }
|
||||||
|
|
||||||
|
/* QUOTE */
|
||||||
|
.quote-section { background: var(--accent-light); padding: 1px 0; }
|
||||||
|
.quote-section section { padding: 64px 2rem; text-align: center; }
|
||||||
|
.quote-text {
|
||||||
|
font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.75rem);
|
||||||
|
font-style: italic; color: var(--ink); line-height: 1.5;
|
||||||
|
max-width: 700px; margin: 0 auto 1.5rem; font-weight: 400;
|
||||||
|
}
|
||||||
|
.quote-source { font-size: 0.82rem; color: var(--ink-secondary); }
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.cta-wrap { background: var(--surface); border-top: 1px solid var(--border); padding: 1px 0; }
|
||||||
|
.cta-section { text-align: center; padding: 100px 2rem; }
|
||||||
|
.cta-section h2 { max-width: 600px; margin: 0 auto 1rem; }
|
||||||
|
.cta-section p { font-size: 1rem; color: var(--ink-secondary); max-width: 440px; margin: 0 auto 2.5rem; font-weight: 300; }
|
||||||
|
.cta-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
|
||||||
|
.cta-input {
|
||||||
|
font-family: var(--sans); font-size: 0.9rem;
|
||||||
|
padding: 12px 18px; border: 1px solid var(--border-strong);
|
||||||
|
border-radius: var(--radius); background: var(--surface-card); color: var(--ink);
|
||||||
|
width: 280px; outline: none; transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.cta-input:focus { border-color: var(--accent-mid); }
|
||||||
|
.cta-note { font-size: 0.75rem; color: var(--ink-tertiary); margin-top: 1rem; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { border-top: 1px solid var(--border); padding: 32px 2rem; }
|
||||||
|
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
|
||||||
|
.footer-logo { font-family: var(--serif); font-size: 1rem; color: var(--ink-secondary); }
|
||||||
|
.footer-links { display: flex; gap: 2rem; }
|
||||||
|
.footer-links a { font-size: 0.8rem; color: var(--ink-tertiary); text-decoration: none; transition: color 0.2s; }
|
||||||
|
.footer-links a:hover { color: var(--ink); }
|
||||||
|
.footer-copy { font-size: 0.75rem; color: var(--ink-tertiary); }
|
||||||
|
|
||||||
|
/* ANIMATION */
|
||||||
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
.hero-content > * { animation: fadeUp 0.6s ease both; }
|
||||||
|
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
|
||||||
|
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
|
||||||
|
.hero-content > *:nth-child(3) { animation-delay: 0.25s; }
|
||||||
|
.hero-content > *:nth-child(4) { animation-delay: 0.35s; }
|
||||||
|
.hero-visual { animation: fadeUp 0.7s 0.4s ease both; }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 60px 1.25rem 48px; }
|
||||||
|
.hero-visual { order: -1; }
|
||||||
|
.problem-grid, .diff-grid, .team-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.steps, .features-grid, .audience-grid { grid-template-columns: 1fr; }
|
||||||
|
nav ul { display: none; }
|
||||||
|
section { padding: 56px 1.25rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- NAV -->
|
||||||
|
<nav>
|
||||||
|
<div class="nav-inner">
|
||||||
|
<a href="#" class="logo"><span class="logo-dot"></span>BurnAware</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#how">How it works</a></li>
|
||||||
|
<li><a href="#team">Team</a></li>
|
||||||
|
<li><a href="#for">Who it's for</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#cta" class="nav-cta">Request a conversation</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<div style="overflow:hidden;">
|
||||||
|
<div class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-label">Organizational health intelligence</div>
|
||||||
|
<h1>See what's building<br>beneath the <em>surface</em></h1>
|
||||||
|
<p class="hero-sub">BurnAware gives HR leaders and organizational teams an early-warning system for chronic overload, team pressure, and the conditions that quietly erode long-term performance.</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#cta" class="btn-primary">Request a conversation</a>
|
||||||
|
<a href="#how" class="btn-secondary">See how it works <span class="btn-arrow">→</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual">
|
||||||
|
<div class="dashboard-card">
|
||||||
|
<div class="dash-header">
|
||||||
|
<div>
|
||||||
|
<div class="dash-title">Product Development — Team report</div>
|
||||||
|
<div class="dash-subtitle">Diagnostic: May 2025 · 11 people</div>
|
||||||
|
</div>
|
||||||
|
<span class="dash-badge">⚠ Needs attention</span>
|
||||||
|
</div>
|
||||||
|
<div class="dash-body">
|
||||||
|
<div class="dash-metrics">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-label">Sustainability index</div>
|
||||||
|
<div class="metric-value warn">41<span style="font-size:.9rem;font-weight:400"> /100</span></div>
|
||||||
|
<div class="metric-sub">↓ 9 points since March</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-label">Overload risk</div>
|
||||||
|
<div class="metric-value warn">4 <span style="font-size:.9rem;font-weight:400">of 11</span></div>
|
||||||
|
<div class="metric-sub">Early-stage signals detected</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-label">Clarity score</div>
|
||||||
|
<div class="metric-value">52<span style="font-size:.9rem;font-weight:400"> /100</span></div>
|
||||||
|
<div class="metric-sub">Role clarity is the main driver</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-label">Psychological safety</div>
|
||||||
|
<div class="metric-value ok">67<span style="font-size:.9rem;font-weight:400"> /100</span></div>
|
||||||
|
<div class="metric-sub">Strong — above benchmark</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="signal-list">
|
||||||
|
<div class="signal-item">
|
||||||
|
<span class="signal-dot red"></span>
|
||||||
|
<div>
|
||||||
|
<div class="signal-text">3 people show sustained high demand with insufficient recovery time</div>
|
||||||
|
<div class="signal-action">→ View recommended actions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="signal-item">
|
||||||
|
<span class="signal-dot amber"></span>
|
||||||
|
<div>
|
||||||
|
<div class="signal-text">Role ambiguity is rising — linked to recent structure change</div>
|
||||||
|
<div class="signal-action">→ Suggested leader conversation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="signal-item">
|
||||||
|
<span class="signal-dot green"></span>
|
||||||
|
<div>
|
||||||
|
<div class="signal-text">Team cohesion remains stable despite the increased workload</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PROOF BAR -->
|
||||||
|
<div class="proof-bar">
|
||||||
|
<div class="proof-inner">
|
||||||
|
<span class="proof-label">Currently in use at</span>
|
||||||
|
<div class="proof-orgs">
|
||||||
|
<span class="proof-org">Technology scale-ups</span>
|
||||||
|
<span class="proof-org">Professional services firms</span>
|
||||||
|
<span class="proof-org">Organizations in transformation</span>
|
||||||
|
<span class="proof-org">High-growth teams</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PROBLEM -->
|
||||||
|
<section>
|
||||||
|
<div class="section-label">The problem</div>
|
||||||
|
<h2>By the time it's visible,<br>the cost is already <em>real</em></h2>
|
||||||
|
<div class="problem-grid">
|
||||||
|
<div>
|
||||||
|
<p class="section-body">Most organizations don't have a burnout problem — they have a visibility problem. The early signals are there: people carrying more than they should, clarity eroding during change, pressure accumulating in pockets that don't show up in engagement surveys or performance reviews.</p>
|
||||||
|
<br>
|
||||||
|
<p class="section-body">Standard tools measure sentiment. BurnAware measures the structural and contextual conditions that create risk — before it surfaces in turnover, underperformance, or a conversation that comes too late.</p>
|
||||||
|
</div>
|
||||||
|
<ul class="problem-list">
|
||||||
|
<li>Annual engagement surveys miss what's happening between cycles. By the time results are in, the situation has already shifted.</li>
|
||||||
|
<li>Pulse surveys tell you how people feel today. They rarely tell you why, or what's likely to happen next.</li>
|
||||||
|
<li>High performers are often the least visible risk. They absorb pressure quietly — until they don't.</li>
|
||||||
|
<li>Leaders managing transformation face a specific challenge: change itself creates risk conditions that can look like engagement, not dysfunction.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW IT WORKS -->
|
||||||
|
<div style="background:var(--surface-alt); padding:1px 0;" id="how">
|
||||||
|
<section>
|
||||||
|
<div class="section-label">How it works</div>
|
||||||
|
<h2>Simple to run.<br><em>Meaningful</em> by design.</h2>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">01</div>
|
||||||
|
<div class="step-title">Assess</div>
|
||||||
|
<div class="step-desc">A structured diagnostic — 12–15 minutes per person. Built on occupational psychology research, calibrated across cultural backgrounds and team contexts. Not a survey. Not a self-report questionnaire.</div>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">02</div>
|
||||||
|
<div class="step-title">Detect</div>
|
||||||
|
<div class="step-desc">BurnAware maps results across six dimensions: internal state, work context, recovery capacity, clarity, cultural dynamics, and coping patterns. It surfaces the combinations that create real risk — not just averages.</div>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">03</div>
|
||||||
|
<div class="step-title">Act</div>
|
||||||
|
<div class="step-desc">Each leader gets a prioritized action plan for their specific team — not a PDF of generic recommendations. Written for this situation, updated as new diagnostics come in, and designed to be usable, not just readable.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FEATURES -->
|
||||||
|
<section>
|
||||||
|
<div class="section-label">What you get</div>
|
||||||
|
<h2>Built for leaders who need<br>to act, not just <em>understand</em></h2>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||||
|
<div class="feature-title">Early overload detection</div>
|
||||||
|
<div class="feature-desc">Identify sustained high-demand patterns before they compound. See which individuals and sub-teams are carrying structural overload — weeks before it becomes a retention or performance issue.</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||||
|
<div class="feature-title">Organizational pressure mapping</div>
|
||||||
|
<div class="feature-desc">During change and transformation, pressure concentrates in predictable places — but most tools don't see it. BurnAware maps where pressure is building, why, and what the likely trajectory looks like.</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
|
||||||
|
<div class="feature-title">Clarity and sustainability scoring</div>
|
||||||
|
<div class="feature-desc">Lack of role clarity and unsustainable workload are two of the strongest predictors of disengagement. BurnAware tracks both — and connects them to specific conditions in the team's context.</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||||
|
<div class="feature-title">Individual-level insight</div>
|
||||||
|
<div class="feature-desc">Team averages hide the people who matter most. BurnAware surfaces individual patterns — calibrated to cultural context and coping style — so support reaches the right person, not the median.</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></div>
|
||||||
|
<div class="feature-title">Prioritized action plans</div>
|
||||||
|
<div class="feature-desc">Every diagnostic generates a ranked action map for that specific team — written for this situation, not adapted from a template. Concrete, leader-facing, and updated as new signals come in.</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon"><svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
|
||||||
|
<div class="feature-title">Longitudinal tracking</div>
|
||||||
|
<div class="feature-desc">A single diagnostic is a snapshot. BurnAware tracks team health over time — showing whether interventions are working, whether risk is growing, and where to focus attention next quarter.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- DIFFERENTIATORS -->
|
||||||
|
<div class="diff-wrap">
|
||||||
|
<section>
|
||||||
|
<div class="section-label">Why BurnAware</div>
|
||||||
|
<h2 style="color:#f5f3ef">Not another <em style="color:#6fb899">engagement tool</em></h2>
|
||||||
|
<div class="diff-grid">
|
||||||
|
<div>
|
||||||
|
<div class="diff-item">
|
||||||
|
<div class="diff-tag">Structural, not sentiment</div>
|
||||||
|
<div class="diff-title">We measure conditions, not feelings</div>
|
||||||
|
<div class="diff-desc">Sentiment tools ask how people feel. BurnAware maps the structural and contextual factors that create risk — workload distribution, clarity, recovery capacity, cultural context. These predict outcomes that sentiment scores don't catch.</div>
|
||||||
|
</div>
|
||||||
|
<div class="diff-item">
|
||||||
|
<div class="diff-tag">Predictive, not retrospective</div>
|
||||||
|
<div class="diff-title">See what's coming, not what already happened</div>
|
||||||
|
<div class="diff-desc">Most HR tools are designed for reporting. BurnAware is designed for foresight — identifying risk trajectories weeks and months before they become visible in turnover, sick leave, or underperformance data.</div>
|
||||||
|
</div>
|
||||||
|
<div class="diff-item">
|
||||||
|
<div class="diff-tag">Culturally calibrated</div>
|
||||||
|
<div class="diff-title">Built for diverse, international teams</div>
|
||||||
|
<div class="diff-desc">Stress and overload don't look the same across cultural contexts. BurnAware's model accounts for how different backgrounds affect the way people perceive, express, and absorb pressure — so assessments are accurate across your whole organization.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="diff-vs">
|
||||||
|
<div class="diff-vs-title">How BurnAware compares</div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">Annual engagement survey</span><span class="diff-compare-them">Retrospective, annual</span><span class="diff-compare-us">Continuous</span></div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">Pulse survey tools</span><span class="diff-compare-them">Sentiment only</span><span class="diff-compare-us">Structural + contextual</span></div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">EAP / wellbeing platforms</span><span class="diff-compare-them">Individual, reactive</span><span class="diff-compare-us">Team-level, preventive</span></div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">Manager check-ins</span><span class="diff-compare-them">Visibility gap</span><span class="diff-compare-us">Data-backed clarity</span></div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">Burnout assessments</span><span class="diff-compare-them">Point-in-time score</span><span class="diff-compare-us">Longitudinal + predictive</span></div>
|
||||||
|
<div class="diff-compare-row"><span class="diff-compare-name">External consultants</span><span class="diff-compare-them">High cost, low frequency</span><span class="diff-compare-us">Scalable, ongoing</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WHO IT'S FOR -->
|
||||||
|
<section id="for">
|
||||||
|
<div class="section-label">Who it's for</div>
|
||||||
|
<h2>Designed for the people<br>responsible for <em>healthy organizations</em></h2>
|
||||||
|
<div class="audience-grid">
|
||||||
|
<div class="audience-card">
|
||||||
|
<div class="audience-role">HR leadership</div>
|
||||||
|
<div class="audience-title">Move from reactive support to proactive organizational health</div>
|
||||||
|
<div class="audience-desc">BurnAware gives HR leaders a continuous view of risk across the organization — so interventions can happen earlier, and at the right level, rather than after the damage is done.</div>
|
||||||
|
</div>
|
||||||
|
<div class="audience-card">
|
||||||
|
<div class="audience-role">Organizational development</div>
|
||||||
|
<div class="audience-title">Data to back the work you're already doing</div>
|
||||||
|
<div class="audience-desc">For OD professionals working on culture, change, or performance — BurnAware provides the longitudinal data to show what's shifting, what's working, and where to focus next.</div>
|
||||||
|
</div>
|
||||||
|
<div class="audience-card">
|
||||||
|
<div class="audience-role">Leaders managing change</div>
|
||||||
|
<div class="audience-title">Understand what transformation is actually doing to your teams</div>
|
||||||
|
<div class="audience-desc">Restructuring, scaling, and strategic pivots all create specific risk patterns. BurnAware helps leaders see those patterns early — and act before they compound into attrition or failure to execute.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- TEAM -->
|
||||||
|
<div style="background:var(--surface-alt); padding:1px 0;" id="team">
|
||||||
|
<section>
|
||||||
|
<div class="section-label">The team</div>
|
||||||
|
<h2>The people behind <em>BurnAware</em></h2>
|
||||||
|
<div class="team-grid">
|
||||||
|
|
||||||
|
<div class="team-person">
|
||||||
|
<div class="team-avatar">KB</div>
|
||||||
|
<div>
|
||||||
|
<div class="team-name">Katerina Bashtavenko</div>
|
||||||
|
<div class="team-role">Co-founder & CEO</div>
|
||||||
|
<p class="team-bio">Over 15 years in organizational psychology and leadership development across international companies. Katerina has worked with teams in Europe, Asia, and the Americas — and built BurnAware around the insight that cultural context fundamentally shapes how people experience and express pressure at work.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team-person">
|
||||||
|
<div class="team-avatar">IK</div>
|
||||||
|
<div>
|
||||||
|
<div class="team-name">Irina Koksharova</div>
|
||||||
|
<div class="team-role">Co-founder & Research Director</div>
|
||||||
|
<p class="team-bio">Researcher and practitioner in clinical and organizational psychology, with a focus on resilience science, burnout prevention, and how cultural identity shapes responses to stress. Irina leads the research methodology and model development behind BurnAware.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- QUOTE -->
|
||||||
|
<div class="quote-section">
|
||||||
|
<section>
|
||||||
|
<p class="quote-text">"We thought we had a good picture of our teams. BurnAware showed us the gaps — and helped us act on them before they became something harder to fix."</p>
|
||||||
|
<p class="quote-source">Head of People Operations, technology company · Early access participant</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="cta-wrap">
|
||||||
|
<section class="cta-section" id="cta">
|
||||||
|
<div class="section-label" style="justify-content:center">Early access</div>
|
||||||
|
<h2>Let's talk about what<br>you're trying to <em>solve</em></h2>
|
||||||
|
<p>We're working with a small number of HR leaders and OD teams. If you're navigating transformation, growth, or high-pressure environments — we'd like to learn about your situation.</p>
|
||||||
|
<div class="cta-form">
|
||||||
|
<input type="email" class="cta-input" placeholder="Your work email">
|
||||||
|
<a href="#" class="btn-primary">Request a conversation →</a>
|
||||||
|
</div>
|
||||||
|
<p class="cta-note">No sales process. A 30-minute conversation about what you're working on — no commitment required.</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer>
|
||||||
|
<div class="footer-inner">
|
||||||
|
<span class="footer-logo">BurnAware</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#">Privacy</a>
|
||||||
|
<a href="#">Research basis</a>
|
||||||
|
<a href="#">Contact</a>
|
||||||
|
</div>
|
||||||
|
<span class="footer-copy">© 2025 BurnAware</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user