chore: clean up root directory — archive completed docs, add marketing assets
Move 9 completed/historical docs from root to docs/archive/: - ARCHITECTURE.md, BACKLOG.md, CLAUDE-SETUP.md, MICHAEL-NOTES.md - IMPLEMENTATION-SUMMARY-ISSUE-34.md, PHASE-2.5-PERSONAL-BRANCHING.md - REBRAND-IMPLEMENTATION-GUIDE.md, TS-EXAMPLES.md, WORKSPACE-REMOVAL-PLAN.md Move QUICK-START.md to docs/ Add previously untracked files: - DEV-ENV.md (devserver01 setup guide) - docs/marketing/ (one-pager HTML + PDF) - docs/ResolutionFlow_Pivot_Architecture.docx Update CLAUDE.md rebrand guide reference path. Deleted temp files: .temp_fixed.py, .temp_fixed2.py, ai_provider_*.py, ai_provider.patch, test_write.txt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
393
docs/marketing/resolutionflow-one-pager-print.html
Normal file
393
docs/marketing/resolutionflow-one-pager-print.html
Normal file
@@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ResolutionFlow — Flyer</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
@page { size: letter; margin: 0; }
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
|
||||
color: #1a1d23;
|
||||
background: #ffffff;
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
margin: 0 auto;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 0.5in 0.6in 0.45in;
|
||||
height: 11in;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── Top Banner ── */
|
||||
.top-banner {
|
||||
background: #0e7490;
|
||||
color: #ffffff;
|
||||
margin: -0.5in -0.6in 0;
|
||||
padding: 0.45in 0.6in 0.4in;
|
||||
text-align: center;
|
||||
}
|
||||
.logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.logo-icon { width: 34px; height: 34px; }
|
||||
.brand-name {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: #ffffff;
|
||||
}
|
||||
.top-banner h1 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.top-banner .subtitle {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
max-width: 5.4in;
|
||||
margin: 0 auto;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.built-for {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
/* ── Main Content ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0.3in;
|
||||
}
|
||||
|
||||
/* Problem strip */
|
||||
.problem-strip {
|
||||
text-align: center;
|
||||
margin-bottom: 0.28in;
|
||||
padding-bottom: 0.22in;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.problem-strip h2 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a1d23;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.problem-strip p {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
max-width: 5.8in;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Benefits */
|
||||
.benefits {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.22in 0.3in;
|
||||
margin-bottom: 0.3in;
|
||||
}
|
||||
.benefit {
|
||||
width: calc(50% - 0.15in);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.benefit-marker {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: #ecfeff;
|
||||
border: 1.5px solid #a5f3fc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #0891b2;
|
||||
}
|
||||
.benefit-text h3 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1a1d23;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.benefit-text p {
|
||||
font-size: 9.5px;
|
||||
color: #6b7280;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* How it works */
|
||||
.how-section {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 14px;
|
||||
padding: 16px 22px;
|
||||
margin-bottom: 0.28in;
|
||||
}
|
||||
.how-section h2 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1a1d23;
|
||||
text-align: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.how-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
.how-step {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.how-step-num {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #0891b2;
|
||||
color: #ffffff;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.how-step h4 {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #1a1d23;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.how-step p {
|
||||
font-size: 8.5px;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.how-arrow {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 4px;
|
||||
color: #d1d5db;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Integrations row */
|
||||
.integrations-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 0.22in;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.integrations-label {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.int-dot {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: #d1d5db;
|
||||
}
|
||||
.int-name {
|
||||
font-size: 9.5px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
.int-name.highlight {
|
||||
color: #0891b2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding-top: 0.18in;
|
||||
border-top: 1.5px solid #e5e7eb;
|
||||
}
|
||||
.footer-url {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #0891b2;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.footer-tagline {
|
||||
font-size: 10px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<!-- Top Banner -->
|
||||
<div class="top-banner">
|
||||
<div class="logo-row">
|
||||
<svg class="logo-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="8" r="3" fill="#ffffff"/>
|
||||
<circle cx="10" cy="20" r="2.5" fill="#ffffff" opacity="0.85"/>
|
||||
<circle cx="26" cy="20" r="2.5" fill="#ffffff" opacity="0.85"/>
|
||||
<circle cx="6" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||
<circle cx="14" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||
<circle cx="22" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||
<circle cx="30" cy="30" r="2" fill="#ffffff" opacity="0.65"/>
|
||||
<line x1="18" y1="11" x2="10" y2="17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
|
||||
<line x1="18" y1="11" x2="26" y2="17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
|
||||
<line x1="10" y1="22.5" x2="6" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="10" y1="22.5" x2="14" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="26" y1="22.5" x2="22" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="26" y1="22.5" x2="30" y2="28" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<div class="brand-name">ResolutionFlow</div>
|
||||
</div>
|
||||
<h1>Stop Reinventing Fixes.<br>Build a Knowledge Engine.</h1>
|
||||
<p class="subtitle">Guided troubleshooting flows, AI-assisted resolution, and auto-generated ticket documentation for MSP teams.</p>
|
||||
<div class="built-for">Built for Managed Service Providers</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
|
||||
<!-- Problem -->
|
||||
<div class="problem-strip">
|
||||
<h2>Your best engineers' knowledge shouldn't live only in their heads.</h2>
|
||||
<p>Every time a senior tech leaves, tribal knowledge goes with them. Junior engineers waste hours reinventing solutions that already exist. Ticket notes are inconsistent. Resolution times are unpredictable.</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefits -->
|
||||
<div class="benefits">
|
||||
<div class="benefit">
|
||||
<div class="benefit-marker">//</div>
|
||||
<div class="benefit-text">
|
||||
<h3>Guided Troubleshooting Flows</h3>
|
||||
<p>Turn your best engineers' proven processes into reusable decision trees that anyone on the team can follow.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="benefit-marker">AI</div>
|
||||
<div class="benefit-text">
|
||||
<h3>AI Copilot (FlowPilot)</h3>
|
||||
<p>An AI assistant rides alongside every session, suggesting next steps and adapting to the situation in real time.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="benefit-marker"></></div>
|
||||
<div class="benefit-text">
|
||||
<h3>Automatic Documentation</h3>
|
||||
<p>Every session generates professional ticket notes and pushes them directly to your PSA. No more writing notes by hand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="benefit-marker">>></div>
|
||||
<div class="benefit-text">
|
||||
<h3>Knowledge That Compounds</h3>
|
||||
<p>AI analyzes completed sessions and proposes new Flows automatically. Your knowledge base grows with every ticket resolved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works -->
|
||||
<div class="how-section">
|
||||
<h2>How It Works</h2>
|
||||
<div class="how-steps">
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">1</div>
|
||||
<h4>Build a Flow</h4>
|
||||
<p>Capture your team's troubleshooting processes as decision trees</p>
|
||||
</div>
|
||||
<div class="how-arrow">→</div>
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">2</div>
|
||||
<h4>Run a Session</h4>
|
||||
<p>Engineers follow the Flow with AI copilot guidance</p>
|
||||
</div>
|
||||
<div class="how-arrow">→</div>
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">3</div>
|
||||
<h4>Auto-Document</h4>
|
||||
<p>Session notes are generated and pushed to your PSA</p>
|
||||
</div>
|
||||
<div class="how-arrow">→</div>
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">4</div>
|
||||
<h4>Learn & Improve</h4>
|
||||
<p>AI proposes new Flows from sessions automatically</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integrations -->
|
||||
<div class="integrations-row">
|
||||
<span class="integrations-label">Works with:</span>
|
||||
<span class="int-name highlight">ConnectWise PSA</span>
|
||||
<span class="int-dot"></span>
|
||||
<span class="int-name">Autotask</span>
|
||||
<span class="int-dot"></span>
|
||||
<span class="int-name">Halo PSA</span>
|
||||
<span class="int-dot"></span>
|
||||
<span class="int-name">Slack</span>
|
||||
<span class="int-dot"></span>
|
||||
<span class="int-name">Teams</span>
|
||||
<span class="int-dot"></span>
|
||||
<span class="int-name">Email</span>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<div class="footer-url">resolutionflow.com</div>
|
||||
<div class="footer-tagline">Free trial available — no credit card required</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/marketing/resolutionflow-one-pager-print.pdf
Normal file
BIN
docs/marketing/resolutionflow-one-pager-print.pdf
Normal file
Binary file not shown.
487
docs/marketing/resolutionflow-one-pager.html
Normal file
487
docs/marketing/resolutionflow-one-pager.html
Normal file
@@ -0,0 +1,487 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ResolutionFlow — One Pager</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
@page {
|
||||
size: letter;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
|
||||
color: #f8fafc;
|
||||
background: #101114;
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/* Background atmosphere */
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: -60px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0.4in 0.55in 0.35in;
|
||||
height: 11in;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.2in;
|
||||
padding-bottom: 0.12in;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.brand-name {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.brand-name span:first-child { color: #f8fafc; }
|
||||
.brand-name span:last-child { color: #22d3ee; }
|
||||
.header-url {
|
||||
font-size: 10px;
|
||||
color: #8891a0;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 0.2in;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.hero h1 em {
|
||||
font-style: normal;
|
||||
color: #22d3ee;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 11.5px;
|
||||
color: #8891a0;
|
||||
max-width: 5.6in;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Problem / Solution ── */
|
||||
.two-col {
|
||||
display: flex;
|
||||
gap: 0.18in;
|
||||
margin-bottom: 0.18in;
|
||||
}
|
||||
.two-col > * { flex: 1; }
|
||||
.card {
|
||||
background: rgba(24, 26, 31, 0.6);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.card h3 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card.problem h3 { color: #f87171; }
|
||||
.card.solution h3 { color: #22d3ee; }
|
||||
.card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.card li {
|
||||
font-size: 10px;
|
||||
color: #c4c9d4;
|
||||
line-height: 1.45;
|
||||
padding: 2px 0 2px 14px;
|
||||
position: relative;
|
||||
}
|
||||
.card.problem li::before {
|
||||
content: 'x';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #f87171;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
top: 3px;
|
||||
}
|
||||
.card.solution li::before {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
color: #22d3ee;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* ── Features Grid ── */
|
||||
.section-label {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.12in;
|
||||
margin-bottom: 0.18in;
|
||||
}
|
||||
.feature {
|
||||
width: calc(33.333% - 0.08in);
|
||||
background: rgba(24, 26, 31, 0.45);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px 8px;
|
||||
}
|
||||
.feature-icon {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
background: rgba(6,182,212,0.12);
|
||||
border: 1px solid rgba(6,182,212,0.2);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #22d3ee;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.feature h4 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.feature p {
|
||||
font-size: 9px;
|
||||
color: #8891a0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* ── How It Works ── */
|
||||
.how-it-works {
|
||||
margin-bottom: 0.18in;
|
||||
}
|
||||
.steps-row {
|
||||
display: flex;
|
||||
gap: 0.1in;
|
||||
}
|
||||
.steps-row > * { flex: 1; }
|
||||
.step {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.step-num {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #06b6d4, #22d3ee);
|
||||
color: #101114;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.step h5 {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.step p {
|
||||
font-size: 8.5px;
|
||||
color: #8891a0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Bottom Row: Integrations + CTA ── */
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
gap: 0.18in;
|
||||
margin-top: auto;
|
||||
}
|
||||
.bottom-row > * { flex: 1; }
|
||||
.integrations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.integrations h3 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #8891a0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.integration-badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.badge {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: #c4c9d4;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.badge.primary {
|
||||
border-color: rgba(6,182,212,0.25);
|
||||
color: #22d3ee;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
background: rgba(6,182,212,0.06);
|
||||
border: 1px solid rgba(6,182,212,0.15);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.cta-card h3 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cta-card p {
|
||||
font-size: 9.5px;
|
||||
color: #8891a0;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #06b6d4, #22d3ee);
|
||||
color: #101114;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
padding: 7px 22px;
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.cta-subtext {
|
||||
font-size: 8px;
|
||||
color: #5a6170;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Print tweaks */
|
||||
@media print {
|
||||
body { background: #101114; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="logo-area">
|
||||
<svg class="logo-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="36" height="36" rx="8" fill="#06b6d4" fill-opacity="0.15"/>
|
||||
<circle cx="18" cy="8" r="3" fill="#22d3ee"/>
|
||||
<circle cx="10" cy="20" r="2.5" fill="#22d3ee" opacity="0.8"/>
|
||||
<circle cx="26" cy="20" r="2.5" fill="#22d3ee" opacity="0.8"/>
|
||||
<circle cx="6" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||
<circle cx="14" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||
<circle cx="22" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||
<circle cx="30" cy="30" r="2" fill="#22d3ee" opacity="0.6"/>
|
||||
<line x1="18" y1="11" x2="10" y2="17.5" stroke="#22d3ee" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="11" x2="26" y2="17.5" stroke="#22d3ee" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="10" y1="22.5" x2="6" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="10" y1="22.5" x2="14" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="26" y1="22.5" x2="22" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="26" y1="22.5" x2="30" y2="28" stroke="#22d3ee" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
|
||||
</svg>
|
||||
<div class="brand-name"><span>Resolution</span><span>Flow</span></div>
|
||||
</div>
|
||||
<div class="header-url">resolutionflow.com</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero -->
|
||||
<div class="hero">
|
||||
<h1>Stop Reinventing Fixes.<br><em>Build a Knowledge Engine.</em></h1>
|
||||
<p>ResolutionFlow gives MSP engineers guided troubleshooting flows, AI-assisted resolution, and auto-generated ticket documentation — so your team resolves faster and never loses tribal knowledge.</p>
|
||||
</div>
|
||||
|
||||
<!-- Problem / Solution -->
|
||||
<div class="two-col">
|
||||
<div class="card problem">
|
||||
<h3>The Problem</h3>
|
||||
<ul>
|
||||
<li>Senior techs solve the same issues from memory — juniors start from scratch every time</li>
|
||||
<li>Ticket notes are inconsistent, incomplete, or missing entirely</li>
|
||||
<li>Tribal knowledge walks out the door when people leave</li>
|
||||
<li>No standard process means unpredictable resolution times</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card solution">
|
||||
<h3>The ResolutionFlow Solution</h3>
|
||||
<ul>
|
||||
<li>Decision-tree Flows capture your best engineers' proven troubleshooting paths</li>
|
||||
<li>AI copilot guides techs step-by-step and suggests next actions in real time</li>
|
||||
<li>Session documentation is auto-generated and pushed straight to your PSA</li>
|
||||
<li>Knowledge Flywheel turns every session into a potential new Flow</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Features -->
|
||||
<div class="section-label">Key Capabilities</div>
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">//</div>
|
||||
<h4>Guided Flows</h4>
|
||||
<p>Build troubleshooting, project, and maintenance flows. Engineers follow proven paths instead of guessing.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">AI</div>
|
||||
<h4>FlowPilot AI</h4>
|
||||
<p>AI copilot rides alongside the engineer — suggests options, explains context, and adapts to the situation.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon"></></div>
|
||||
<h4>Auto Documentation</h4>
|
||||
<p>Every session generates professional ticket notes. Export as Markdown, HTML, PDF, or push directly to your PSA.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">>></div>
|
||||
<h4>Knowledge Flywheel</h4>
|
||||
<p>AI analyzes completed sessions and proposes new Flows automatically. Your knowledge base grows with every ticket.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon"><></div>
|
||||
<h4>PSA Integration</h4>
|
||||
<p>Link sessions to tickets, pull client context, push notes — all without leaving ResolutionFlow.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">*</div>
|
||||
<h4>Team & RBAC</h4>
|
||||
<p>Multi-tenant teams with role-based access. Admins, engineers, and viewers — each sees what they need.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works -->
|
||||
<div class="how-it-works">
|
||||
<div class="section-label">How It Works</div>
|
||||
<div class="steps-row">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<h5>Build a Flow</h5>
|
||||
<p>Create decision trees from your team's best troubleshooting processes</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<h5>Run a Session</h5>
|
||||
<p>Engineer follows the Flow with AI copilot guidance on every step</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<h5>Auto-Document</h5>
|
||||
<p>Session notes generated and pushed to your PSA ticket automatically</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<h5>Learn & Improve</h5>
|
||||
<p>AI proposes new Flows from sessions — your knowledge compounds</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom: Integrations + CTA -->
|
||||
<div class="bottom-row">
|
||||
<div class="integrations">
|
||||
<h3>Integrations & Compatibility</h3>
|
||||
<div class="integration-badges">
|
||||
<span class="badge primary">ConnectWise PSA</span>
|
||||
<span class="badge">Autotask (Coming Soon)</span>
|
||||
<span class="badge">Halo PSA (Coming Soon)</span>
|
||||
<span class="badge">Slack</span>
|
||||
<span class="badge">Teams</span>
|
||||
<span class="badge">Email</span>
|
||||
<span class="badge">PDF / Markdown Export</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-card">
|
||||
<h3>See It In Action</h3>
|
||||
<p>Book a 15-minute demo and see how ResolutionFlow transforms your team's troubleshooting.</p>
|
||||
<div><a href="https://resolutionflow.com" class="cta-button">Visit resolutionflow.com</a></div>
|
||||
<div class="cta-subtext">Free trial available - No credit card required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/marketing/resolutionflow-one-pager.pdf
Normal file
BIN
docs/marketing/resolutionflow-one-pager.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user