From 20d60bf83dba76f076c06067d17488805f7d2719 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Mon, 23 Mar 2026 04:32:01 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20landing=20page=20copy=20=E2=80=94?=
 =?UTF-8?q?=20copilot-first=20messaging?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/pages/LandingPage.tsx | 114 ++++++++++++++---------------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index a8ad563b..8244d5f8 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -73,7 +73,7 @@ export default function LandingPage() {
     <>
       <PageMeta
         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">
@@ -133,11 +133,11 @@ export default function LandingPage() {
           <section className="landing-hero">
             <div className="landing-hero-badge">Now in Beta — Join early access</div>
             <h1>
-              Stop writing ticket notes.<br />
-              <span className="landing-gradient-text">Start generating them.</span>
+              Fix tickets faster.<br />
+              <span className="landing-gradient-text">Notes write themselves.</span>
             </h1>
             <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>
             <div className="landing-hero-actions">
               <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">
                     <span className="landing-lock-icon">&#128274;</span>
-                    app.resolutionflow.com/editor
+                    app.resolutionflow.com/pilot
                   </div>
                 </div>
                 <div className="landing-preview-window-controls">
@@ -195,40 +195,46 @@ export default function LandingPage() {
                 <div className="landing-preview-sidebar">
                   <div className="landing-preview-sidebar-item active">
                     <div className="dot" style={{ background: '#22d3ee' }} />
-                    Flow Editor
+                    FlowPilot
                   </div>
                   <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#3b82f6' }} />
-                    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' }} />
+                    <div className="dot" style={{ background: '#34d399' }} />
                     Session History
                   </div>
                   <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#8b5cf6' }} />
-                    Team Analytics
+                    <div className="dot" style={{ background: '#a78bfa' }} />
+                    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 className="landing-preview-canvas">
-                  <div className="landing-mini-tree">
-                    <div className="landing-tree-node root">Outlook Not Syncing</div>
-                    <div className="landing-tree-connector" />
-                    <div className="landing-tree-branch">
-                      <div className="landing-tree-branch-arm">
-                        <div className="landing-tree-label">Yes</div>
-                        <div className="landing-tree-connector" />
-                        <div className="landing-tree-node decision">Check profile config</div>
-                      </div>
-                      <div className="landing-tree-branch-arm">
-                        <div className="landing-tree-label">No</div>
-                        <div className="landing-tree-connector" />
-                        <div className="landing-tree-node decision">Verify credentials</div>
-                      </div>
+                  <div className="landing-mock-session">
+                    <div className="landing-mock-chat-line">
+                      <span className="label">You:</span>
+                      <span className="text">User can&apos;t access shared drive after password reset</span>
+                    </div>
+                    <div className="landing-mock-chat-line">
+                      <span className="label" style={{ color: '#22d3ee' }}>FlowPilot:</span>
+                      <span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
+                    </div>
+                    <div className="landing-mock-chat-line">
+                      <span className="label" style={{ color: '#22d3ee' }}>FlowPilot:</span>
+                      <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
+                    </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>
@@ -270,7 +276,7 @@ export default function LandingPage() {
               <span className="landing-eq-result">ResolutionFlow</span>
             </div>
             <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>
           </div>
 
@@ -282,28 +288,22 @@ export default function LandingPage() {
               <div className="landing-section-label">How It Works</div>
               <h2 className="landing-section-title">Three steps. Zero note-writing.</h2>
               <div className="landing-section-desc">
-                Build once, run forever. Every session generates documentation automatically.
+                Just describe the issue. FlowPilot handles the rest.
               </div>
               <div className="landing-steps-container">
                 <div className="landing-step-card">
-                  <h3>Build a Flow</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>
+                  <h3>Describe the Issue</h3>
+                  <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-mock-editor">
-                      <div className="landing-mock-node start">&#9654; Start</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 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>
                   </div>
                 </div>
 
                 <div className="landing-step-card">
-                  <h3>Run a Session</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>
+                  <h3>Troubleshoot Together</h3>
+                  <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-mock-session">
                       <div className="landing-mock-chat-line">
@@ -327,8 +327,8 @@ export default function LandingPage() {
                 </div>
 
                 <div className="landing-step-card">
-                  <h3>Export to Ticket</h3>
-                  <p>When the session ends, full documentation is generated — formatted for your PSA. Paste it directly into ConnectWise, Atera, or Syncro. Done.</p>
+                  <h3>Resolve &amp; Document</h3>
+                  <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-mock-ticket">
                       <div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div>
@@ -349,33 +349,33 @@ export default function LandingPage() {
           <section id="features" className="landing-reveal">
             <div className="landing-section-inner">
               <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">
                 <FeatureCard
                   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>}
                   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
                   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"
-                  description="Build branching decision trees with a drag-and-drop canvas. Add steps, conditions, commands, and notes — no code required."
+                  title="Guided Troubleshooting Flows"
+                  description="Build step-by-step troubleshooting paths your team can follow. Great for standard procedures, onboarding new engineers, or ensuring consistency."
                 />
                 <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>}
-                  title="Auto-Documentation"
-                  description="Every session generates timestamped, detailed notes — formatted for your PSA. Engineers never write another ticket note."
+                  title="Zero Empty Ticket Notes"
+                  description="Every troubleshooting session generates timestamped, detailed notes — formatted for your PSA. Your team will never close a ticket with empty notes again."
                 />
                 <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>}
-                  title="Team Knowledge Sharing"
-                  description="Share flows across your team. When one engineer solves a new problem, the whole team benefits from that path — instantly."
+                  title="Team Knowledge That Grows"
+                  description="Every resolved session makes your team smarter. Solutions are saved and surfaced automatically when the next engineer hits a similar issue."
                 />
                 <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>}
                   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
                   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 */}
           <section className="landing-cta-section landing-reveal">
-            <h2>Ready to stop writing ticket notes?</h2>
-            <p>Join the beta and see what happens when documentation becomes automatic.</p>
+            <h2>Ready to never write ticket notes again?</h2>
+            <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}>
               <input
                 type="email"