Website: Update "Try it yourself" links (#36095)

Closes: https://github.com/fleetdm/fleet/issues/36007
Related to: https://github.com/fleetdm/fleet/issues/35263

Changes:
- Created a new component: `<signup-button>`. A button that opens the
signup modal for non-logged-in users, and takes logged-in users to the
/try page
- Replaced "Try it yourself" links on the /device-management,
/orchestration, /software-management, /testimonials, and the homepage
with the `<signup-button>` component.
- Updated the hover styles of the links on the support page.

website/assets/js/components/signup-button.component.js

@@ -0,0 +1,57 @@
+/**
+ * <signup-button>
+ * -----------------------------------------------------------------------------
+ * An animated arrow button that either opens the signup model or sends logged-in users to the Fleet Premium trial page.
+ *
+ * @type {Component}
+ *
+ * Example usage:
+ * <signup-button :is-logged-in="!! this.me"></signup-button>
+ *
+ * -----------------------------------------------------------------------------
+ */
+
+parasails.registerComponent('signupButton', {
+  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
+  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
+  //  ╩  ╩╚═╚═╝╩  ╚═╝
+  props: [
+    'isLoggedIn',
+  ],
+
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: function (){
+    return {};
+  },
+
+  //  ╦ ╦╔╦╗╔╦╗╦
+  //  ╠═╣ ║ ║║║║
+  //  ╩ ╩ ╩ ╩ ╩╩═╝
+  template: `
+    <div>
+      <animated-arrow-button href="/try" v-if="isLoggedIn">Try it yourself</animated-arrow-button>
+      <animated-arrow-button data-toggle="modal" data-target="#signupmodal" v-else>Try it yourself</animated-arrow-button>
+    </div>
+  `,
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function(){
+    //…
+  },
+  beforeDestroy: function() {
+    //…
+  },
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});

website/assets/styles/pages/support.less

@@ -74,6 +74,9 @@
     a {
       text-decoration: none;
       min-width: 0px;
+      &:hover {
+        color: @core-fleet-black-75;
+      }
     }
     [purpose='support-card'] {
       width: 100%;
@@ -87,6 +90,9 @@
     a {
       text-decoration: none;
       min-width: 0px;
+      &:hover {
+        color: @core-fleet-black-75;
+      }
     }
     flex-direction: column;
     [purpose='support-row'] {

website/views/layouts/layout.ejs

@@ -885,6 +885,7 @@
     <script src="/js/components/parallax-city.component.js"></script>
     <script src="/js/components/rituals.component.js"></script>
     <script src="/js/components/scrollable-tweets.component.js"></script>
+    <script src="/js/components/signup-button.component.js"></script>
     <script src="/js/components/signup-modal.component.js"></script>
     <script src="/js/components/stripe-card-element.component.js"></script>
     <script src="/js/utilities/open-stripe-checkout.js"></script>

website/views/pages/device-management.ejs

@@ -824,7 +824,7 @@
 
         <div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
-        <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+        <signup-button :is-logged-in="!! this.me"></signup-button>
         </div>
       </div>
       <%/* Shorten the feedback loop section */%>
@@ -914,7 +914,7 @@
         <h2>Your last MDM migration</h2>
         <div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
-          <animated-arrow-button  href="/register">Try it yourself</animated-arrow-button>
+          <signup-button :is-logged-in="!! this.me"></signup-button>
         </div>
       </div>
     </div>

website/views/pages/homepage.ejs

@@ -1452,7 +1452,7 @@
         </h1>
         <div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
-          <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+          <signup-button :signed-in="this.me"></signup-button>
         </div>
       </div>
     </div>

website/views/pages/observability.ejs

@@ -28,7 +28,7 @@
           <% }%>
           <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-start align-items-center">
             <a purpose="cta-button" href="/contact">Get a demo</a>
-            <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+            <signup-button :is-logged-in="!! this.me"></signup-button>
           </div>
         </div>
       </div>
@@ -272,7 +272,7 @@
         <h2><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
         <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
-          <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+          <signup-button :is-logged-in="!! this.me"></signup-button>
         </div>
       </div>
     </div>

website/views/pages/software-management.ejs

@@ -7,7 +7,7 @@
         <p purpose="hero-text">Pick from a curated software catalog or upload your own custom packages. Configure custom installation scripts if you need or let Fleet do it for you.</p>
         <div purpose="button-row" class="d-flex justify-content-start">
           <a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
-          <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+          <signup-button :is-logged-in="!! this.me"></signup-button>
         </div>
       </div>
       <div purpose="hero-slides">
@@ -220,7 +220,7 @@
       <h2>Manage software consistently</h2>
       <div purpose="button-row" class="d-flex justify-content-center align-items-center mx-auto">
         <a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
-        <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+        <signup-button :is-logged-in="!! this.me"></signup-button>
       </div>
     </div>
   </div>

website/views/pages/testimonials.ejs

@@ -164,7 +164,7 @@
         <h2 class="mx-auto" v-if="selectedContent === 'security'">Easily get security data</h2>
         <div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
-          <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
+          <signup-button :is-logged-in="!! this.me"></signup-button>
         </div>
       </div>
     </div>