Website - Add new docs CTA (#19062)

Closes https://github.com/fleetdm/fleet/issues/19061

- added new docs CTA
- removed old Slack CTA
- removed old improve docs CTA

# Checklist for submitter

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Eric <eashaw@sailsjs.com>

website/assets/styles/mixins-and-variables/colors.less

@@ -7,6 +7,7 @@
 @core-fleet-black-50: #8b8fa2;
 @core-fleet-black-33: #B3B6C1;
 @core-fleet-black-25: #C5C7D1;
+@core-fleet-black-10: #E2E4EA;
 
 @core-vibrant-red: #FF5C83;
 

website/assets/styles/pages/docs/basic-documentation.less

@@ -787,22 +787,30 @@
           margin: 0px;
         }
       }
-      [purpose='slack-cta'] {
-        padding-top: 40px;
-        padding-bottom: 40px;
-        margin-bottom: 40px;
-        border-top: 1px solid @core-fleet-black-25;
-        border-bottom: 1px solid @core-fleet-black-25;
-        h3 {
-          margin-top: 0;
-          margin-bottom: 24px;
-          padding-bottom: 0;
-          border-bottom: 0;
+
+      [purpose='docs-start-cta'] {
+        margin-top: 40px;
+        border: 1px solid @core-fleet-black-10;
+        border-radius: 16px;
+        overflow: hidden;
+        [purpose='docs-start-cta-image'] {
+          height: 180px;
+          background-image: url('/images/docs-cta-stage-1-314x180@2x.png');
+          background-size: cover;
+          background-position-y: center;
         }
-      }
-      [purpose='improve-docs'] {
-        h3 {
-          border-bottom: 0;
+        [purpose='docs-start-cta-content'] {
+          h2 {
+            padding: 0;
+            margin-bottom: 4px;
+          }
+          p {
+            margin-bottom: 12px;
+          }
+        }
+        [purpose='continue-button'] {
+          font-size: 14px;
+          padding: 6px 12px;
         }
       }
       [purpose='checklist-item'] {

website/views/pages/docs/basic-documentation.ejs

@@ -203,21 +203,14 @@
             )
           ) %>
 
-          <div class="d-block" purpose="slack-cta">
-            <h3 class="pt-0" style="font-size: 24px; line-height: 28px;">Need more help?</h3>
-            <div class="d-sm-flex">
-              <a href="/support" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
-                <img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
-                Ask the community on Slack
-              </a>
+          <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">
+              <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>
             </div>
           </div>
-          <div class="d-block" purpose="improve-docs">
-            <h3 class="pt-0 pb-4 m-0" style="font-size: 24px; line-height: 28px;">Did we miss anything?</h3>
-            <p>
-              If you notice something we've missed or could be improved on, please follow <a :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank">this link</a> and submit a pull request to the Fleet repo.
-            </p>
-          </div>
 
         </div>