Website: Update hover state on articles sidebar CTA, fix alignment of newsletter banner (#23638)

Changes:
- Added a hover state to the swag request CTA on the device-management
page
- Made the entire sidebar cta on article pages clickable.
- Updated the alignment of the newsletter banner on the homepage.

website/assets/js/pages/articles/basic-article.page.js

@@ -75,6 +75,9 @@ parasails.registerPage('basic-article', {
         window.open('https://fleetdm.com/rss/'+articleCategory, '_blank');
       }
     },
+    clickGotoStart: function() {
+      this.goto('/register');
+    },
     handleScrollingInArticle: function () {
       let rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
       let scrollTop = window.pageYOffset;

website/assets/styles/pages/articles/basic-article.less

@@ -288,6 +288,7 @@
     background: #FFF;
     min-height: 290px;
     text-align: center;
+    cursor: pointer;
     margin-top: 24px;
     margin-bottom: 8px;
     max-width: 256px;

website/assets/styles/pages/device-management.less

@@ -136,6 +136,9 @@
     border-radius: 8px;
     border: 1px solid #E2E4EA;
     background: #F9FAFC;
+    &:hover {
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
+    }
     img {
       margin-right: 16px;
     }

website/assets/styles/pages/homepage.less

@@ -762,6 +762,11 @@
     [purpose='newsletter-form-input']::placeholder {
       font-size: 14px;
     }
+    [parasails-component='ajax-button'] {
+      .button-loader {
+        margin: 0;
+      }
+    }
   }
   [purpose='video-modal'] {
     [purpose='modal-dialog'] {

website/views/pages/articles/basic-article.ejs

@@ -65,7 +65,7 @@
             <div purpose="edit-link">
               <a purpose="sidebar-link" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Suggest an edit</a>
             </div>
-            <div purpose="sidebar-cta">
+            <div purpose="sidebar-cta" @click="clickGotoStart()">
               <a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
               <div purpose="cta-image"></div>
               <div purpose="cta-text">

website/views/pages/homepage.ejs

@@ -407,11 +407,16 @@
   <parallax-city></parallax-city>
   <div purpose="homepage-content" class="container py-4 my-0 my-md-2">
     <div purpose="newsletter-banner">
-       <div class="d-flex flex-md-row flex-column justify-content-between">
+       <div class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
          <div purpose="newletter-form-text" class="d-flex flex-row align-items-center">
-           <p v-if="formErrors.emailAddress || cloudError" class="text-danger" focus-first>Please enter a valid work email</p>
-           <p v-else-if="cloudSuccess">Thanks for subscribing!</p>
-           <p v-else><strong>Curious?</strong> Get product updates and news</p>
+            <p v-if="formErrors.emailAddress || cloudError" class="text-danger" focus-first>
+              Please enter a valid work email
+            </p>
+            <p v-else-if="cloudSuccess">
+              Thanks for subscribing!</p>
+            <p v-else>
+              <strong>Curious?</strong> Get product updates and news
+            </p>
          </div>
          <ajax-form class="d-flex flex-md-row flex-column" action="createOrUpdateOneNewsletterSubscription" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedNewsletterForm()">
            <div class="d-flex flex-column w-100">