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`.
This commit is contained in:
Eric 2024-05-17 18:24:29 -05:00 committed by GitHub
parent 5261faaa11
commit c10f2dbfcf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 1 deletions

View file

@ -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'] {

View file

@ -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>Lets get you set up!</p>
<a purpose="continue-button" class="btn btn-primary" href="/start">Continue</a>
<%}%>
</div>
</div>