Website: Update Fleet website homepage (#12040)

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

Changes:
- Updated the homepage to match the latest wireframes (Switched to a
single hero image, removed the hero background image, updated the text
in the hero and other headings on the page)

website/assets/styles/pages/homepage.less

@@ -35,48 +35,20 @@
   [purpose='hero-container'] {
     background: linear-gradient(115.34deg, #FBFDFF 24.56%, #E8F1F7 48.6%, #FFFFFF 88.68%);
     overflow: hidden;
-    height: ;
   }
   [purpose='homepage-hero'] {
-
     padding-top: 40px;
     padding-left: 40px;
     padding-right: 40px;
+    padding-bottom: 40px;
     max-width: 1200px;
     max-height: 550px;
   }
-  [purpose='homepage-hero-images'] {
-    filter: drop-shadow(0px -8.73361px 29.9438px rgba(58, 220, 255, 0.1));
-    position: relative;
-  }
-  [purpose='top-hero-image'], [purpose='bottom-hero-image'] {
-    width: 410px;
+  [purpose='homepage-hero-image'] {
     img {
-      width: 100%;
-      height: auto;
+      max-height: 300px;
     }
   }
-  [purpose='homepage-hero-images']::before {
-    content: ' ';
-    position: absolute;
-    height: 100%;
-    width: 167%;
-    right: -142px;
-    bottom: 40px;
-    z-index: -1;
-    background-image: url('/images/homepage-hero-background-750x647@2x.png');
-    opacity: 0.75;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    overflow: visible;
-  }
-  [purpose='middle-hero-image'] {
-    img {
-      width: 47px;
-    }
-    backdrop-filter: blur(2.96438px);
-  }
   [purpose='hero-ribbon'] {
     [purpose='ribbon-banner'] {
       display: none;
@@ -104,28 +76,6 @@
     [purpose='button-row'] {
       margin-bottom: 40px;
     }
-    [purpose='hero-quote'] {
-      margin-bottom: 40px;
-      text-align: left;
-      position: relative;
-      z-index: 10;
-      img {
-        height: 18px;
-        margin-right: 16px;
-      }
-      [purpose='quote'] {
-        max-width: 438px;
-        font-style: italic;
-        margin-bottom: 16px;
-        font-size: 14px;
-        line-height: 19.6px;
-      }
-      p {
-        font-size: 14px;
-        line-height: 20px;
-        margin-bottom: 0px;
-      }
-    }
   }
   [purpose='hero-logos'] {
     margin-bottom: 120px;
@@ -162,7 +112,7 @@
   }
   [purpose='homepage-text-block'] {
     margin-bottom: 100px;
-    max-width: 680px;
+    max-width: 758px;
   }
   [purpose='feature'] {
     margin-bottom: 100px;
@@ -348,7 +298,9 @@
     [purpose='homepage-hero'] {
       padding-left: 80px;
       padding-right: 80px;
-      padding-bottom: 10px;
+      padding-bottom: 80px;
+      padding-top: 80px;
+      max-width: 1300px;
     }
     [purpose='homepage-content'] {
       max-width: 1200px;
@@ -358,9 +310,6 @@
   }
 
   @media (max-width: 991px) {
-    [purpose='homepage-hero-images']::before {
-      background-image: none;
-    }
 
     [purpose='hero-text'] {
       h1 {
@@ -370,7 +319,7 @@
     [purpose='homepage-hero'] {
       padding-left: 60px;
       padding-right: 0px;
-      padding-bottom: 0px;
+      padding-bottom: 10px;
     }
     [purpose='hero-logos'] {
       img {
@@ -430,20 +379,19 @@
     [purpose='homepage-hero'] {
       padding-left: 40px;
       padding-right: 40px;
-      padding-bottom: 0px;
-      background-image: none;
       max-height: unset;
     }
-    [purpose='homepage-hero-images'] {
-      max-height: 480px;
+    [purpose='homepage-hero-image'] {
+      max-height: 280px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: start;
       width: 100%;
-      [purpose='top-hero-image'], [purpose='bottom-hero-image'] {
-        width: 100%;
-        max-width: 410px;
+      margin-bottom: -20px;
+      img {
+        max-width: 100%;
+        height: auto;
       }
     }
     [purpose='homepage-content'] {
@@ -581,7 +529,7 @@
 
   @media (max-width: 375px) {
 
-    [purpose='homepage-hero-images'] {
+    [purpose='homepage-hero-image'] {
       max-height: 360px;
     }
     [purpose='hero-text'] {

website/views/pages/homepage.ejs

@@ -4,33 +4,18 @@
     <div purpose="homepage-hero" class="container mx-auto">
       <div class="d-flex flex-column flex-md-row justify-content-between">
         <%/* Hero text */%>
-        <div purpose="hero-text"  class="d-flex flex-column">
+        <div purpose="hero-text"  class="d-flex flex-column justify-content-center">
           <h4>Open-source device management</h4>
-          <h1>Think for yourself</h1>
+          <h1>Lightweight MDM</h1>
           <p>Introducing the first GitOps-driven MDM with real-time visibility into every platform.</p>
           <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-self-start align-items-center">
             <a purpose="cta-button" href="/try-fleet/register?tryitnow">Try it out</a>
             <a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
           </div>
-          <div purpose="hero-quote" class="d-flex flex-row align-items-between justify-content-center justify-content-md-start">
-            <div><img alt="An opening quotation mark" src="/images/homepage-hero-quote-mark-22x17@2x.png"></div>
-            <div>
-              <p purpose="quote">We wanted an open-source way to take advantage of MDM that is easy to integrate with Puppet in our configuration-as-code environment. Fleet is the obvious, and really the only, choice.</p>
-              <p><span class="font-weight-bold">Platform Engineering Manager</span><br>A leading online games company</p>
-            </div>
-          </div>
         </div>
-        <%/* Hero images */%>
-        <div purpose="homepage-hero-images">
-          <div purpose="top-hero-image">
-            <img alt="Gitops hero image" src="/images/homepage-top-hero-image-410x226@2x.png">
-          </div>
-          <div purpose="middle-hero-image">
-            <img alt="A small infinity symbol" class="mx-auto my-3" src="/images/homepage-hero-small-union-48x25@2x.png">
-          </div>
-          <div  purpose="bottom-hero-image">
-            <img alt="The OS settings page in Fleet" src="/images/homepage-bottom-hero-image-410x300@2x.png">
-          </div>
+        <%/* Hero image */%>
+        <div purpose="homepage-hero-image">
+          <img alt="Gitops hero image" src="/images/homepage-hero-gitops-547x302@2x.png">
         </div>
       </div>
     </div>
@@ -104,7 +89,7 @@
     <div purpose="homepage-content" class="container">
       <div id="community" purpose="homepage-text-block" class="text-sm-center text-left mx-auto">
         <h4>4 years in the making</h4>
-        <h2>Trusted by teams that think</h2>
+        <h2>Trusted by teams with lots of computers</h2>
         <p>Fleet is built with <a href="/handbook/company/why-this-way#why-open-source">openness at its core</a>, incorporating projects like osquery, microMDM, and Nudge. We work to contribute back to these and other open-source communities.</p>
       </div>
     </div>
@@ -203,7 +188,7 @@
     <div purpose="homepage-content" class="container">
       <div class="text-center">
         <h4>Open-source device management</h4>
-        <h1>Think for yourself</h1>
+        <h1>Lighter than air</h1>
         <div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/try-fleet/register?tryitnow">Try it out</a>
           <a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>