From 5524daea2cd5acc72cb366e878b513c2d473c46f Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 26 Nov 2024 14:03:34 -0600
Subject: [PATCH] Website: update /software-management page (#24176)

Closes: https://github.com/fleetdm/confidential/issues/8982

Changes:
- Added an IT quote to the /sfotware-management page
- Updated the CTAs on the /software-management page
---
 .../styles/pages/software-management.less     | 68 ++++++++++++-------
 website/views/pages/software-management.ejs   | 16 ++++-
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/website/assets/styles/pages/software-management.less b/website/assets/styles/pages/software-management.less
index 32b96544be..c8ae0e0f3f 100644
--- a/website/assets/styles/pages/software-management.less
+++ b/website/assets/styles/pages/software-management.less
@@ -57,6 +57,7 @@
     padding-bottom: 32px;
   }
   [purpose='button-row'] {
+    flex-direction: row;
     [purpose='contact-button'] {
       display: flex;
       height: 36px;
@@ -218,35 +219,43 @@
     padding-bottom: 64px;
     padding-top: 32px;
     text-align: center;
-    [purpose='testimonial-image'] {
-      height: 48px;
-      margin-bottom: 5px;
-    }
-    [purpose='testimonial-text'] {
+  }
+  [purpose='it-testimonial'] {
+    max-width: 524px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 32px;
+    padding-top: 32px;
+    text-align: center;
+  }
+  [purpose='testimonial-image'] {
+    height: 48px;
+    margin-bottom: 5px;
+  }
+  [purpose='testimonial-text'] {
+    color: @core-fleet-black-75;
+    text-align: center;
+    font-size: 18px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: @text-lineheight;
+    margin-bottom: 24px;
+  }
+  [purpose='testimonial-attribution'] {
+    [purpose='name'] {
       color: @core-fleet-black-75;
       text-align: center;
-      font-size: 18px;
-      font-style: italic;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: @text-lineheight; /* 150% */
+      margin-bottom: 0px;
+    }
+    [purpose='job-title'] {
+      color: @core-fleet-black-75;
+      margin-bottom: 0px;
+      font-size: 12px;
       font-weight: 400;
       line-height: @text-lineheight;
-      margin-bottom: 24px;
-    }
-    [purpose='testimonial-attribution'] {
-      [purpose='name'] {
-        color: @core-fleet-black-75;
-        text-align: center;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: @text-lineheight; /* 150% */
-        margin-bottom: 0px;
-      }
-      [purpose='job-title'] {
-        color: @core-fleet-black-75;
-        margin-bottom: 0px;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: @text-lineheight;
-      }
     }
   }
 
@@ -471,6 +480,15 @@
       padding-bottom: 32px;
       padding-top: 0px;
     }
+    [purpose='button-row'] {
+      flex-direction: column;
+      align-items: center;
+      [purpose='contact-button'] {
+        margin-bottom: 12px;
+        width: 100%;
+        margin-right: 0px;
+      }
+    }
     [purpose='section-heading'] {
       padding: 40px 0px;
     }
diff --git a/website/views/pages/software-management.ejs b/website/views/pages/software-management.ejs
index 8c8894cdd1..424077d3e3 100644
--- a/website/views/pages/software-management.ejs
+++ b/website/views/pages/software-management.ejs
@@ -5,7 +5,7 @@
         <h4>Software management</h4>
         <h1>Manage software consistently</h1>
         <p purpose="hero-text">Pick from a curated app library 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 flex-row justify-content-start">
+        <div purpose="button-row" class="d-flex justify-content-start">
           <a class="btn btn-primary" purpose="contact-button" href="/contact">Talk to an engineer</a>
           <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
         </div>
@@ -48,6 +48,16 @@
       <div purpose="logo-row">
         <logo-carousel></logo-carousel>
       </div>
+      <div purpose="it-testimonial" class="d-flex flex-column justify-content-center align-items-center">
+        <img alt="Eric Tan" purpose="testimonial-image" src="/images/testimonial-author-eric-tan-99x99@2x.png">
+        <p purpose="testimonial-text">
+          This is not just production osquery, but actually a way bigger opportunity than even something like Airwatch or Jamf.
+        </p>
+        <div purpose="testimonial-attribution">
+          <p purpose="name">Eric Tan</p>
+          <p purpose="job-title">CIO & Chief Security Officer at Flock Safety</p>
+        </div>
+      </div>
       <div purpose="feature-slides">
         <div purpose="feature-switch" class="d-flex flex-md-row flex-column justify-content-md-center justify-content-start">
           <div purpose="feature-option" :class="[visibleFeature === 'mitigate-cves-automatically' ? 'active' : '']"  @click="clickSwitchFeature('mitigate-cves-automatically')">
@@ -163,9 +173,9 @@
     <div purpose="section-heading" class="text-center">
       <h4>Software management</h4>
       <h2>Manage software consistently</h2>
-      <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-row justify-content-center align-items-center mx-auto">
+      <div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
         <a purpose="contact-button" href="/contact">Show me</a>
-        <animated-arrow-button href="/register">See real data</animated-arrow-button>
+        <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
       </div>
     </div>
   </div>