From c10f2dbfcf6447b2d496053a9d009aea58143c5c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 17 May 2024 18:24:29 -0500
Subject: [PATCH] Website: Update documentation CTA to change depending on the
 user's progress through the /start questionnaire. (#19097)

Closes: #19063

Changes:
- Updated the CTA in the docs to change depending on a user's
`psychologicalStage`.
---
 .../styles/pages/docs/basic-documentation.less   |  6 ++++++
 website/views/pages/docs/basic-documentation.ejs | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index d3c51e6bf2..cab0fb1e92 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -797,6 +797,10 @@
           background-position-y: center;
         }
         [purpose='docs-start-cta-content'] {
+          flex-direction: column;
+          align-items: center;
+          padding: 20px 24px;
+          flex-grow: 1;
           h2 {
             padding: 0;
             margin-bottom: 4px;
@@ -808,8 +812,10 @@
         [purpose='continue-button'] {
           font-size: 14px;
           padding: 6px 12px;
+          width: 131px;
         }
       }
+
       [purpose='checklist-item'] {
         display: flex;
         input[type='checkbox'] {
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 1f965802fc..8e6853c7b7 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -205,10 +205,24 @@
 
           <div purpose="docs-start-cta" class="d-flex flex-column flex-sm-row justify-content-between">
             <div purpose="docs-start-cta-image" class="col-sm-6 col-md-5 col-lg-6"></div>
-            <div purpose="docs-start-cta-content" class="d-flex flex-column justify-content-center my-4 mx-auto text-center">
+            <div purpose="docs-start-cta-content" class="d-flex flex-column justify-content-center text-center">
+              <% if(!me){ %>
               <h2>Try it out</h2>
               <p>See what Fleet can do</p>
               <a purpose="continue-button" class="btn btn-primary" href="/register">Start now</a>
+              <% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%>
+              <h2>Tried Fleet yet?</h2>
+              <p>Continue getting started with Fleet</p>
+              <a purpose="continue-button" class="btn btn-primary" href="/start">Continue</a>
+              <% } else if (['4 - Has use case', '5 - Personally confident'].includes(me.psychologicalStage)) {%>
+              <h2>Feeling confident?</h2>
+              <p>Get set up with Fleet</p>
+              <a purpose="continue-button" class="btn btn-primary" href="/start">Continue</a>
+              <% } else if (me.psychologicalStage === '6 - Has team buy-in') {%>
+                <h2>Talk to the team</h2>
+                <p>Let’s get you set up!</p>
+                <a purpose="continue-button" class="btn btn-primary" href="/start">Continue</a>
+              <%}%>
             </div>
           </div>