Website: Add Fleet Premium CTA to documentation pages (#9796)

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

Changes:
- Updated the documentation page script to set a `currentDocsSection`
variable
- Added Fleet Premium calls to action that link to the `/upgrade` page
to the left sidebar on documentation pages.


cc: @jarodreyes

website/assets/js/pages/docs/basic-documentation.page.js

@@ -10,7 +10,7 @@ parasails.registerPage('basic-documentation', {
     inputTimers: {},
     searchString: '',
     showDocsNav: false,
-
+    currentDocsSection: '',
     breadcrumbs: [],
     pages: [],
     pagesBySectionSlug: {},
@@ -81,6 +81,12 @@ parasails.registerPage('basic-documentation', {
   },
 
   mounted: async function() {
+
+    // Set a currentDocsSection value to display different Fleet premium CTAs based on what section is being viewed.
+    if(!this.isDocsLandingPage){
+      this.currentDocsSection = this.thisPage.url.split(/\//).slice(-2)[0];
+    }
+
     // Algolia DocSearch
     if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
       docsearch({

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

@@ -405,6 +405,58 @@
     }
     [purpose='right-sidebar-buttons'] {
       margin-top: 30px;
+      [purpose='premium-cta'] {
+        margin-top: 16px;
+        text-align: center;
+        padding: 16px;
+        color: #FFF;
+        border-radius: 6px;
+        p {
+          font-size: 15px;
+          line-height: 17px;
+          span {
+            font-weight: 800;
+          }
+        }
+        [purpose='docs-cta-image'] {
+          margin-bottom: 16px;
+          img {
+            width: 124px;
+          }
+        }
+
+        [purpose='premium-cta-btn'] {
+          text-align: center;
+          font-weight: 700;
+          padding: 4px 16px;
+          display: flex;
+          justify-content: center;
+          width: 100%;
+          position: relative;
+          background: #192147;
+          box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
+          border-radius: 4px;
+          color: #fff;
+          overflow: hidden;
+        }
+        [purpose='premium-cta-btn']::before {
+          background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+          opacity: 1;
+          content: ' ';
+          position: absolute;
+          top: 0;
+          left: -5px;
+          width: 55%;
+          height: 100%;
+          transform: skew(-10deg);
+          transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
+        }
+        [purpose='premium-cta-btn']:hover:before {
+          opacity: 0;
+          left: 160px;
+          width: 110%;
+        }
+      }
       [purpose='demo-cta'] {
         display: flex;
         border: 1px solid #E3E3E3;

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

@@ -177,6 +177,22 @@
                 </div>
               </a>
             </div>
+            <div>
+              <div purpose="premium-cta" style="background: #E59CC4;" v-if="currentDocsSection === 'using-fleet' || currentDocsSection === 'contributing'">
+                <div purpose="docs-cta-image" class="d-flex justify-content-center">
+                  <img alt="A computer next to a coffee cup" src="/images/docs-premium-cta-computer-125x134@2x.png">
+                </div>
+                <p>Even more control with <span>Fleet Premium</span></p>
+                <a purpose="premium-cta-btn" href="/upgrade">Learn more</a>
+              </div>
+              <div purpose="premium-cta" style="background: #A182DF;" v-else-if="currentDocsSection === 'deploying'">
+                <div purpose="docs-cta-image" class="d-flex justify-content-center">
+                  <img alt="A telephone in a glass display case" src="/images/docs-premium-cta-telephone-125x134@2x.png">
+                </div>
+                <p>Expertise on-demand with <span>Fleet Premium</span></p>
+                <a purpose="premium-cta-btn" href="/upgrade">Learn more</a>
+              </div>
+            </div>
           </div>
         </div>