chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: landing page copy — copilot-first messaging

Browse Source 
Rewrite landing page to lead with speed + auto-documentation:
- Hero: "Fix tickets faster. Notes write themselves."
- App preview: shows FlowPilot chat conversation, not decision tree editor
- How It Works: Describe → Troubleshoot Together → Resolve & Document
- Features: FlowPilot copilot first, "Zero Empty Ticket Notes", team knowledge
- CTA: "Never write ticket notes again"
- Sidebar preview updated to match new nav (FlowPilot, History, Flows, Scripts)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-23 04:32:01 +00:00
parent ceb1423b6a
commit 20d60bf83d
1 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/pages/LandingPage.tsx
View File

@@ -73,7 +73,7 @@ export default function LandingPage() {
<> <>
<PageMeta <PageMeta
title="ResolutionFlow — From Issue to Resolution, Documented" title="ResolutionFlow — From Issue to Resolution, Documented"
description="AI-guided decision trees that walk your engineers through troubleshooting and automatically document every step." description="Your AI troubleshooting copilot. Describe the issue, get help fixing it, and get clean ticket notes — automatically."
/> />
<div className="landing-page"> <div className="landing-page">
@@ -133,11 +133,11 @@ export default function LandingPage() {
<section className="landing-hero"> <section className="landing-hero">
<div className="landing-hero-badge">Now in Beta — Join early access</div> <div className="landing-hero-badge">Now in Beta — Join early access</div>
<h1> <h1>
Stop writing ticket notes.<br /> Fix tickets faster.<br />
<span className="landing-gradient-text">Start generating them.</span> <span className="landing-gradient-text">Notes write themselves.</span>
</h1> </h1>
<p className="landing-hero-sub"> <p className="landing-hero-sub">
AI-guided decision trees that walk your engineers through troubleshooting — and automatically document every step, ready for your PSA ticket. ResolutionFlow is your AI troubleshooting copilot. Describe the issue, get expert guidance fixing it, and get clean ticket documentation — without writing a single note.
</p> </p>
<div className="landing-hero-actions"> <div className="landing-hero-actions">
<Link to="/register" className="landing-btn-hero-primary">Start Free</Link> <Link to="/register" className="landing-btn-hero-primary">Start Free</Link>
@@ -176,7 +176,7 @@ export default function LandingPage() {
<div className="landing-preview-url-bar"> <div className="landing-preview-url-bar">
<div className="landing-preview-url"> <div className="landing-preview-url">
<span className="landing-lock-icon">&#128274;</span> <span className="landing-lock-icon">&#128274;</span>
app.resolutionflow.com/editor app.resolutionflow.com/pilot
</div> </div>
</div> </div>
<div className="landing-preview-window-controls"> <div className="landing-preview-window-controls">
@@ -195,40 +195,46 @@ export default function LandingPage() {
<div className="landing-preview-sidebar"> <div className="landing-preview-sidebar">
<div className="landing-preview-sidebar-item active"> <div className="landing-preview-sidebar-item active">
<div className="dot" style={{ background: '#22d3ee' }} /> <div className="dot" style={{ background: '#22d3ee' }} />
Flow Editor FlowPilot
</div> </div>
<div className="landing-preview-sidebar-item"> <div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#3b82f6' }} /> <div className="dot" style={{ background: '#34d399' }} />
Session Runner
</div>
<div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#22c55e' }} />
Flow Library
</div>
<div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#f59e0b' }} />
Session History Session History
</div> </div>
<div className="landing-preview-sidebar-item"> <div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#8b5cf6' }} /> <div className="dot" style={{ background: '#a78bfa' }} />
Team Analytics Guided Flows
</div>
<div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#2dd4bf' }} />
Scripts
</div>
<div className="landing-preview-sidebar-item">
<div className="dot" style={{ background: '#38bdf8' }} />
Analytics
</div> </div>
</div> </div>
<div className="landing-preview-canvas"> <div className="landing-preview-canvas">
<div className="landing-mini-tree"> <div className="landing-mock-session">
<div className="landing-tree-node root">Outlook Not Syncing</div> <div className="landing-mock-chat-line">
<div className="landing-tree-connector" /> <span className="label">You:</span>
<div className="landing-tree-branch"> <span className="text">User can&apos;t access shared drive after password reset</span>
<div className="landing-tree-branch-arm"> </div>
<div className="landing-tree-label">Yes</div> <div className="landing-mock-chat-line">
<div className="landing-tree-connector" /> <span className="label" style={{ color: '#22d3ee' }}>FlowPilot:</span>
<div className="landing-tree-node decision">Check profile config</div> <span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
</div> </div>
<div className="landing-tree-branch-arm"> <div className="landing-mock-chat-line">
<div className="landing-tree-label">No</div> <span className="label" style={{ color: '#22d3ee' }}>FlowPilot:</span>
<div className="landing-tree-connector" /> <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
<div className="landing-tree-node decision">Verify credentials</div> </div>
</div> <div className="landing-mock-chat-line">
<span className="label" style={{ color: '#22d3ee' }}>FlowPilot:</span>
<span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
</div>
<div className="landing-mock-chat-line doc">
<span className="label">Auto-doc:</span>
<span className="text">3 steps captured &#10003;</span>
</div> </div>
</div> </div>
</div> </div>
@@ -270,7 +276,7 @@ export default function LandingPage() {
<span className="landing-eq-result">ResolutionFlow</span> <span className="landing-eq-result">ResolutionFlow</span>
</div> </div>
<p className="landing-equation-desc"> <p className="landing-equation-desc">
What if documentation was a <em>byproduct</em> of solving the issue — not a separate task? What if your engineers never had to write another ticket note? What if documentation was a <em>byproduct</em> of solving the issue — not a separate task? What if every ticket your team touched had clean, detailed notes — without anyone writing them?
</p> </p>
</div> </div>
@@ -282,28 +288,22 @@ export default function LandingPage() {
<div className="landing-section-label">How It Works</div> <div className="landing-section-label">How It Works</div>
<h2 className="landing-section-title">Three steps. Zero note-writing.</h2> <h2 className="landing-section-title">Three steps. Zero note-writing.</h2>
<div className="landing-section-desc"> <div className="landing-section-desc">
Build once, run forever. Every session generates documentation automatically. Just describe the issue. FlowPilot handles the rest.
</div> </div>
<div className="landing-steps-container"> <div className="landing-steps-container">
<div className="landing-step-card"> <div className="landing-step-card">
<h3>Build a Flow</h3> <h3>Describe the Issue</h3>
<p>Use the visual Flow Editor to create branching decision trees for any troubleshooting scenario. Drag, connect, and enrich steps with commands, notes, and AI suggestions.</p> <p>Type what&apos;s happening, paste an error message, or drop a screenshot. FlowPilot understands MSP environments — AD, Exchange, networking, VPN, you name it.</p>
<div className="landing-step-visual"> <div className="landing-step-visual">
<div className="landing-mock-editor"> <div className="landing-mock-editor">
<div className="landing-mock-node start">&#9654; Start</div> <div className="landing-mock-node step" style={{ fontSize: '0.7rem', padding: '8px 12px' }}>&#128172; &ldquo;User can&apos;t access shared drive after password reset, getting Access Denied in Event Viewer&rdquo;</div>
<div className="landing-mock-connector">&rarr;</div>
<div className="landing-mock-node step">Check DNS</div>
<div className="landing-mock-connector">&rarr;</div>
<div className="landing-mock-node step">Yes / No?</div>
<div className="landing-mock-connector">&rarr;</div>
<div className="landing-mock-node start">&#10003; Resolved</div>
</div> </div>
</div> </div>
</div> </div>
<div className="landing-step-card"> <div className="landing-step-card">
<h3>Run a Session</h3> <h3>Troubleshoot Together</h3>
<p>An engineer launches the flow on a live ticket. FlowPilot — your AI copilot — acts as a virtual senior engineer, guiding decisions and capturing every action in real time.</p> <p>FlowPilot acts like a senior engineer on the call with you. It suggests next steps, provides commands to run, and captures every action — documentation builds itself as you work.</p>
<div className="landing-step-visual"> <div className="landing-step-visual">
<div className="landing-mock-session"> <div className="landing-mock-session">
<div className="landing-mock-chat-line"> <div className="landing-mock-chat-line">
@@ -327,8 +327,8 @@ export default function LandingPage() {
</div> </div>
<div className="landing-step-card"> <div className="landing-step-card">
<h3>Export to Ticket</h3> <h3>Resolve &amp; Document</h3>
<p>When the session ends, full documentation is generated — formatted for your PSA. Paste it directly into ConnectWise, Atera, or Syncro. Done.</p> <p>Hit resolve and get clean, timestamped ticket notes — ready to paste into ConnectWise, Atera, or Syncro. Every step you took, every command you ran, documented automatically.</p>
<div className="landing-step-visual"> <div className="landing-step-visual">
<div className="landing-mock-ticket"> <div className="landing-mock-ticket">
<div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div> <div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div>
@@ -349,33 +349,33 @@ export default function LandingPage() {
<section id="features" className="landing-reveal"> <section id="features" className="landing-reveal">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-section-label">Features</div> <div className="landing-section-label">Features</div>
<h2 className="landing-section-title">Everything your team needs to<br />resolve faster and document better.</h2> <h2 className="landing-section-title">Troubleshoot faster.<br />Document everything. Automatically.</h2>
<div className="landing-features-grid"> <div className="landing-features-grid">
<FeatureCard <FeatureCard
highlight highlight
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>}
title="FlowPilot — Your AI Copilot" title="FlowPilot — Your AI Copilot"
description="Like having a senior engineer on every call. FlowPilot suggests next steps, provides context-aware guidance, and automatically captures documentation as a byproduct of the troubleshooting session." description="Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself — as a byproduct of solving the problem."
/> />
<FeatureCard <FeatureCard
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>}
title="Visual Flow Editor" title="Guided Troubleshooting Flows"
description="Build branching decision trees with a drag-and-drop canvas. Add steps, conditions, commands, and notes — no code required." description="Build step-by-step troubleshooting paths your team can follow. Great for standard procedures, onboarding new engineers, or ensuring consistency."
/> />
<FeatureCard <FeatureCard
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>}
title="Auto-Documentation" title="Zero Empty Ticket Notes"
description="Every session generates timestamped, detailed notes — formatted for your PSA. Engineers never write another ticket note." description="Every troubleshooting session generates timestamped, detailed notes — formatted for your PSA. Your team will never close a ticket with empty notes again."
/> />
<FeatureCard <FeatureCard
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>}
title="Team Knowledge Sharing" title="Team Knowledge That Grows"
description="Share flows across your team. When one engineer solves a new problem, the whole team benefits from that path — instantly." description="Every resolved session makes your team smarter. Solutions are saved and surfaced automatically when the next engineer hits a similar issue."
/> />
<FeatureCard <FeatureCard
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>}
title="Session History & Analytics" title="Session History & Analytics"
description="Track which flows are used most, identify bottlenecks, and see how your team resolves issues over time." description="See every troubleshooting session your team has run. Track resolution times, identify common issues, and measure team performance."
/> />
<FeatureCard <FeatureCard
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>} icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>}
@@ -449,8 +449,8 @@ export default function LandingPage() {
{/* CTA */} {/* CTA */}
<section className="landing-cta-section landing-reveal"> <section className="landing-cta-section landing-reveal">
<h2>Ready to stop writing ticket notes?</h2> <h2>Ready to never write ticket notes again?</h2>
<p>Join the beta and see what happens when documentation becomes automatic.</p> <p>Join the beta. Troubleshoot your next ticket with FlowPilot and see the documentation write itself.</p>
<form className="landing-cta-email-form" onSubmit={handleBetaSubmit}> <form className="landing-cta-email-form" onSubmit={handleBetaSubmit}>
<input <input
type="email" type="email"