Website: Update homepage and /device-management landing page (#12124)

Changes:
- Updated the layout and content of the homepage to match the latest
wireframes
- Removed unused images
- Updated the content on /device-management to match the latest
wireframes
- Changed the "Think for yourself" heading on landing pages to "Lighter
than air"
- Added a link to the /device-management page to the "Platform" dropdown
in the website nav

website/assets/images/homepage-hero-ribbon.svg

@@ -1,3 +0,0 @@
-<svg width="1600" height="80" viewBox="0 0 1600 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1600 80C1489 80 1241.83 80 800 80C358.172 80 110 80 0 80C199 30.5 515.5 1.05839e-07 800 1.05839e-07C1133.5 1.05839e-07 1400 28 1600 80Z" fill="white"/>
-</svg>

website/assets/images/homepage-report-cta-background.svg

@@ -1,19 +0,0 @@
-<svg width="1080" height="200" viewBox="0 0 1080 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1080.36 -127.037C855.48 -218.67 700.872 -227.715 616.54 -154.171C490.054 -43.8547 565.927 18.1131 470.715 160.4C375.504 302.687 192.084 193.949 74.6736 281.275C-3.60016 339.493 -17.3769 640.446 33.3435 744.711L1080.36 746.302V-127.037Z" fill="url(#paint0_linear_4280_12200)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1234.37 90.6261C1009.48 -1.00724 854.874 -10.0518 770.542 63.4923C644.055 173.808 719.928 235.779 624.717 378.063C529.505 520.348 346.086 411.612 228.675 498.928C150.401 557.153 136.625 638.398 187.345 742.663L1234.37 710.199V90.6261Z" fill="url(#paint1_linear_4280_12200)" fill-opacity="0.5"/>
-<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M1621.28 75.4972C1396.39 -16.1361 1241.78 -25.1807 1157.45 48.3633C1030.97 158.679 1106.84 220.647 1011.63 362.934C916.416 505.221 732.997 396.483 615.586 483.799C537.313 542.024 523.536 623.269 574.256 727.534L1621.28 724.877V75.4972Z" fill="url(#paint2_linear_4280_12200)"/>
-<defs>
-<linearGradient id="paint0_linear_4280_12200" x1="1035.43" y1="330.804" x2="589.921" y2="-328.522" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3F2B6F" stop-opacity="0"/>
-<stop offset="1" stop-color="#3F2B6F"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4280_12200" x1="1187.71" y1="739.417" x2="741.531" y2="79.937" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3F2B6F" stop-opacity="0"/>
-<stop offset="1" stop-color="#3F2B6F"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4280_12200" x1="1082.81" y1="-0.75415" x2="1082.81" y2="727.534" gradientUnits="userSpaceOnUse">
-<stop stop-color="#AE6DDF"/>
-<stop offset="1" stop-color="#6A67FE"/>
-</linearGradient>
-</defs>
-</svg>

website/assets/js/pages/fleet-mdm.page.js

@@ -3,26 +3,7 @@ parasails.registerPage('device-management', {
   //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
-    formData: { /* … */ },
 
-    // For tracking client-side validation errors in our form.
-    // > Has property set to `true` for each invalid property in `formData`.
-    formErrors: { /* … */ },
-
-    // Form rules
-    formRules: {
-      fullName: {required: true },
-      emailAddress: {required: true, isEmail: true},
-      jobTitle: {required: true },
-      numberOfHosts: {required: true },
-    },
-    cloudError: '',
-    // Syncing / loading state
-    syncing: false,
-    showSignupFormSuccess: false,
-    // Modal
-
-    modal: '',
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -39,28 +20,10 @@ parasails.registerPage('device-management', {
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
-
-    clickOpenSignupModal: function() {
-      this.modal = 'beta-signup';
-    },
-    closeModal: async function () {
-      this.modal = '';
-      await this._resetForms();
-    },
-    typeClearOneFormError: async function(field) {
-      if(this.formErrors[field]){
-        this.formErrors = _.omit(this.formErrors, field);
+    clickOpenChatWidget: function() {
+      if(window.HubSpotConversations && window.HubSpotConversations.widget){
+        window.HubSpotConversations.widget.open();
       }
     },
-    submittedForm: function() {
-      this.showSignupFormSuccess = true;
-    },
-    _resetForms: async function() {
-      this.cloudError = '';
-      this.formData = {};
-      this.formRules = {};
-      this.formErrors = {};
-      await this.forceRender();
-    },
   }
 });

website/assets/js/pages/homepage.page.js

@@ -17,10 +17,7 @@ parasails.registerPage('homepage', {
     //…
   },
   mounted: async function(){
-    await this.updateNumberOfTweetPages(); // Update the number of pages for the tweet page indicator.
-    const tweetsDiv = document.querySelector('div[purpose="tweets"]');
-    tweetsDiv.addEventListener('scroll', this.updatePageIndicator, {passive: true}); // Add a scroll event listener to update the tweet page indicator when a user scrolls the div.
-    window.addEventListener('resize', this.updateNumberOfTweetPages); // Add an event listener to update the number of tweet pages based on how many tweet cards can fit on the screen.
+
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
@@ -28,54 +25,6 @@ parasails.registerPage('homepage', {
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
 
-    updateNumberOfTweetPages: async function() {
-      // Get the width of the first tweet card.
-      let firstTweetCardDiv = document.querySelector('div[purpose="tweet-card"]');
-      this.tweetCardWidth = firstTweetCardDiv.clientWidth + 16;
-      // Find out how may entire cards can fit on the screen.
-      this.numberOfTweetsPerPage = Math.floor(window.innerWidth / this.tweetCardWidth);
-      // Find out how many pages of tweet cards there will be.
-      this.numberOfTweetPages = Math.ceil(this.numberOfTweetCards / this.numberOfTweetsPerPage);
-      if(this.numberOfTweetPages < 1){
-        this.numberOfTweetPages = 1;
-      } else if (this.numberOfTweetPages > this.numberOfTweetCards) {
-        this.numberOfTweetPages = this.numberOfTweetCards;
-      }
-      // Update the current page indicator.
-      this.updatePageIndicator();
-      await this.forceRender();
-    },
-
-    updatePageIndicator: function() {
-      // Get the tweets div.
-      let tweetsDiv = document.querySelector('div[purpose="tweets"]');
-      // Find out the width of a page of tweet cards
-      let tweetPageWidth;
-      if(this.numberOfTweetPages === 2 && this.numberOfTweetsPerPage > 3){
-        tweetPageWidth = this.tweetCardWidth;
-      } else {
-        tweetPageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage;
-      }
-      // Set the maximum number of pages as the maximum value
-      let currentPage = Math.min(Math.round(tweetsDiv.scrollLeft / tweetPageWidth), (this.numberOfTweetPages - 1));
-      // Update the page indicator
-      this.currentTweetPage = currentPage;
-    },
-
-    scrollTweetsDivToPage: function(page) {
-      // Get the tweets div.
-      let tweetsDiv = document.querySelector('div[purpose="tweets"]');
-      // Find out the width of a page of tweet cards
-      let pageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage;
-      // Figure out how much distance we're expecting to scroll.
-      let baseAmountToScroll = (page - this.currentTweetPage) * pageWidth;
-      // Find out the actual distance the div has been scrolled
-      let amountCurrentPageHasBeenScrolled = tweetsDiv.scrollLeft - (this.currentTweetPage * pageWidth);
-      // subtract the amount the current page has been scrolled from the baseAmountToScroll
-      let amountToScroll = baseAmountToScroll - amountCurrentPageHasBeenScrolled;
-      // Scroll the div to the specified 'page'
-      tweetsDiv.scrollBy(amountToScroll, 0);
-    },
 
     clickOpenChatWidget: function() {
       if(window.HubSpotConversations && window.HubSpotConversations.widget){

website/assets/styles/pages/fleet-mdm.less

@@ -3,7 +3,7 @@
   h1 {
     font-weight: 800;
     font-size: 64px;
-    line-height: 54px;
+    line-height: 76px;
   }
   h2 {
     font-weight: 800;
@@ -17,18 +17,13 @@
     line-height: 32px;
   }
   h4 {
-    color: @core-fleet-black-75;
-    font-weight: 500;
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
     font-size: 18px;
     line-height: 24px;
-    /* Text gradient */
-    background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
-    display: inline-block;
-    /* End text gradient */
+    color: @core-fleet-black-75;
+    margin-bottom: 4px;
   }
   p {
     font-size: 16px;
@@ -38,34 +33,33 @@
   [purpose='hero-background'] {
     background: linear-gradient(180deg, #E8F1F7 3.37%, #FFFFFF 60%);
     padding-top: 120px;
-    padding-bottom: 60px;
+    padding-bottom: 40px;
   }
   [purpose='hero-container'] {
     max-width: 1200px;
   }
   [purpose='hero-text'] {
     text-align: center;
-    max-width: 560px;
-    margin-bottom: 80px;
+    max-width: 940px;
+    padding: 0 40px;
     h1 {
       margin-bottom: 32px;
     }
     p {
       font-size: 18px;
       line-height: 27px;
-      margin-bottom: 32px;
+      max-width: 640px;
+      margin: 0 auto 32px;
     }
   }
-  [purpose='hero-image'] {
-    max-width: 1000px;
-  }
-  [purpose='button-row'] {
+
+ [purpose='button-row'] {
     a {
       font-weight: 700;
       font-size: 16px;
       line-height: 24px;
     }
-    [purpose='mdm-beta-button'] {
+    [purpose='cta-button'] {
       cursor: pointer;
       margin-right: 32px;
       background: @core-vibrant-red;
@@ -78,8 +72,9 @@
       align-items: center;
       color: #FFF;
       position: relative;
+      text-decoration: none;
     }
-    [purpose='mdm-beta-button']::before {
+    [purpose='cta-button']::before {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
       opacity: 1;
       content: ' ';
@@ -91,7 +86,7 @@
       transform: skew(-10deg);
       transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
     }
-    [purpose='mdm-beta-button']:hover:before {
+    [purpose='cta-button']:hover:before {
       opacity: 0;
       left: 160px;
       width: 110%;
@@ -137,19 +132,15 @@
       }
     }
   }
+
   [purpose='page-container'] {
     padding-left: 40px;
     padding-right: 40px;
+    padding-bottom: 120px;
   }
-  [purpose='section'] {
-    margin-top: 120px;
-    margin-bottom: 120px;
-  }
-  [purpose='section']:first-of-type {
-    margin-top: 60px;
-  }
+
   [purpose='feature'] {
-    margin-top: 60px;
+    margin-top: 120px;
     max-width: 960px;
     h3 {
       margin-bottom: 24px;
@@ -160,25 +151,28 @@
   }
 
   [purpose='feature-image'] {
-    height: 100%;
     img {
       max-height: 300px;
     }
   }
+  [purpose='large-feature-image'] {
+    img {
+      max-height: 250px;
+    }
+  }
 
   [purpose='checklists'] {
     margin-top: 40px;
     margin-bottom: 80px;
   }
-
   [purpose='checklist'] {
     p {
-      padding-left: 24px;
-      text-indent: -24px;
+      padding-left: 28px;
+      text-indent: -28px;
     }
     p::before {
       content: ' ';
-      background-image: url('/images/icon-checkmark-purple-circle-12x12@2x.png');
+      background-image: url('/images/icon-checkmark-circle.svg');
       background-size: 16px 16px;
       display: inline-block;
       position: relative;
@@ -192,75 +186,18 @@
   [purpose='tweets-container'] {
     padding-top: 120px;
     padding-bottom: 120px;
-    background-color: @ui-off-white;
   }
 
-  [purpose='logos'] {
-    height: 80px;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+  [purpose='bottom-gradient'] {
+    background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
+  }
+  [purpose='bottom-cloud-city-banner'] {
+    background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 100%);
     img {
-      margin-top: 23.5px;
-      margin-bottom: 23.5px;
-      padding-left: 35px;
-      padding-right: 35px;
-    }
-    [purpose='snowflake-logo'] {
-      height: 30px;
-    }
-    [purpose='wayfair-logo'] {
-      height: 33px;
-    }
-    [purpose='uber-logo'] {
-      height: 29px;
-    }
-    [purpose='atlassian-logo'] {
-      height: 22px;
-    }
-    [purpose='segment-logo'] {
-      height: 32px;
+      width: 100%;
     }
   }
 
-  [purpose='modal-form'] {
-    input {
-      border-radius: 6px;
-      height: 48px;
-    }
-    // Disable default buttons on type="number" inputs
-    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input[type='number'] {
-      -moz-appearance: textfield;
-    }
-    label {
-      font-weight: 700;
-    }
-    width: 100%;
-    max-width: 450px;
-  }
-
-  [purpose='submit-button'] {
-    border-radius: 8px;
-  }
-
-  [purpose='modal-dialog'] {
-    max-width: 800px;
-  }
-
-  [purpose='modal-content'] {
-    padding-top: 80px;
-    padding-left: 80px;
-    padding-right: 80px;
-    padding-bottom: 120px;
-    max-width: 100%;
-  }
-
-
-
   @media (min-width: 1200px) {
     [purpose='page-container'] {
       padding-left: 120px;
@@ -298,34 +235,19 @@
   }
 
   @media (max-width: 991px) {
-    [purpose='hero-text'] {
-      text-align: center;
-      max-width: 680px;
-    }
 
     [purpose='button-row'] {
       margin-right: auto;
       margin-left: auto;
     }
 
-    [purpose='modal-content'] {
-      padding-top: 60px;
-      padding-left: 60px;
-      padding-right: 60px;
-      padding-bottom: 120px;
-    }
-
     [purpose='hero-background'] {
       padding-top: 120px;
-      padding-bottom: 120px;
+      padding-bottom: 80px;
       padding-left: 0px;
       padding-right: 0px;
     }
 
-    [purpose='hero-image'] {
-      max-width: 100%;
-    }
-
     [purpose='logos'] {
       height: 58px;
       margin-left: 20px;
@@ -355,7 +277,11 @@
       margin-bottom: 40px;
     }
 
-    [purpose='feature-image'] {
+    [purpose='feature'] {
+      margin-top: 80px;
+    }
+
+    [purpose='feature-image'], [purpose='large-feature-image'] {
       margin-bottom: 40px;
       img {
         max-height: 100%;
@@ -363,15 +289,6 @@
       }
     }
 
-    [purpose='hero-image'] {
-      width: 100%;
-    }
-
-    [purpose='section'] {
-      margin-top: 80px;
-      margin-bottom: 80px;
-    }
-
     [purpose='hero-background'] {
       padding-top: 60px;
       padding-bottom: 60px;
@@ -379,18 +296,16 @@
       padding-right: 20px;
     }
 
-    [purpose='modal-content'] {
-      padding-top: 60px;
-      padding-left: 40px;
-      padding-right: 40px;
-      padding-bottom: 80px;
+    [purpose='hero-text'] {
+      text-align: center;
+      max-width: 480px;
     }
 
     [purpose='tweets-container'] {
       padding-top: 80px;
       padding-bottom: 80px;
-      padding-left: 20px;
-      padding-right: 20px;
+      padding-left: 40px;
+      padding-right: 40px;
     }
 
     [purpose='logos'] {
@@ -402,30 +317,31 @@
 
     [purpose='button-row'] {
       max-width: 100%;
-      [purpose='mdm-beta-button'] {
+      [purpose='cta-button'] {
         margin-right: 0px;
         width: 100%;
         margin-bottom: 24px;
       }
     }
 
+    [purpose='feature'] {
+      margin-top: 60px;
+    }
+
     [purpose='page-container'] {
       padding-left: 20px;
       padding-right: 20px;
     }
 
-    [purpose='hero-background'] {
-      padding-top: 120px;
+    [purpose='tweets-container'] {
+      padding-left: 20px;
+      padding-right: 20px;
     }
 
-    [purpose='section']:first-of-type {
-    margin-top: 0;
-    }
-
-    [purpose='modal-content'] {
+    [parasails-component='scrollable-tweets'] [purpose='tweets'] {
       margin-top: 40px;
-      padding: 40px 20px 80px 20px;
     }
 
   }
+
 }

website/assets/styles/pages/homepage.less

@@ -32,41 +32,34 @@
   a {
     color: @core-vibrant-blue;
   }
+
   [purpose='hero-container'] {
-    background: linear-gradient(115.34deg, #FBFDFF 24.56%, #E8F1F7 48.6%, #FFFFFF 88.68%);
+    background: #E4F4F4;
     overflow: hidden;
   }
+
+  [purpose='hero-background-image'] {
+    background: url('/images/homepage-hero-background-1921x555@2x.png');
+    background-size: 1921px auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
   [purpose='homepage-hero'] {
     padding-top: 40px;
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 40px;
     max-width: 1200px;
-    max-height: 550px;
-  }
-  [purpose='homepage-hero-image'] {
-    img {
-      max-height: 300px;
-    }
-  }
-  [purpose='hero-ribbon'] {
-    [purpose='ribbon-banner'] {
-      display: none;
-    }
-    height: 80px;
-    z-index: 2;
-    position: relative;
-    background: url('/images/homepage-hero-ribbon.svg');
-    background-size: cover;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    filter: drop-shadow(0px -8.73361px 29.9438px rgba(58, 220, 255, 0.25));
+    height: 850px;
   }
+
   [purpose='hero-text'] {
-    padding-top: 24px;
+    padding-top: 20px;
     min-width: 540px;
+    text-align: center;
     h1 {
-      margin-bottom: 40px;
+      margin-bottom: 16px;
     }
     p {
       margin-bottom: 40px;
@@ -77,9 +70,10 @@
       margin-bottom: 40px;
     }
   }
+
   [purpose='hero-logos'] {
+    margin-top: 32px;
     margin-bottom: 120px;
-    opacity: 0.75;
     [purpose='snowflake-logo'] {
       height: 30px;
     }
@@ -99,36 +93,71 @@
       display: none;
     }
   }
+
   [purpose='logo-column'] {
     img {
       margin-right: 35px;
       margin-left: 35px;
     }
   }
+
   [purpose='homepage-content'] {
     max-width: 1200px;
-    padding-right: 60px;
-    padding-left: 60px;
   }
+
   [purpose='homepage-text-block'] {
-    margin-bottom: 100px;
-    max-width: 758px;
-  }
-  [purpose='feature'] {
-    margin-bottom: 100px;
-    p {
-      margin-bottom: 0px;
+    margin-top: 160px;
+    margin-bottom: 160px;
+    max-width: 872px;
+    h2 {
+      font-weight: 800;
+      font-size: 32px;
+      line-height: 48px;
+      margin-bottom: 24px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
     }
-    max-width: 960px;
   }
-  [purpose='feature-left-text-block'] {
+
+  [purpose='platform-block'] {
+    margin-bottom: 100px;
+    h3 {
+      font-weight: 800;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    p {
+      margin-bottom: 24px;
+      color: #515774;
+      font-size: 16px;
+      line-height: 24px;
+    }
+    max-width: 1080px;
+  }
+  [purpose='platform-left-text-block'] {
     max-width: 480px;
+    margin-right: 80px;
   }
-  [purpose='feature-right-text-block'] {
+  [purpose='platform-right-text-block'] {
     max-width: 480px;
+    margin-left: 80px;
   }
-  [purpose='feature-image'] {
-    width: 360px;
+  [purpose='platform-small-text-block'] {
+    max-width: 320px;
+    margin-right: 80px;
+  }
+  [purpose='platform-image'] {
+    width: 520px;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+  [purpose='platform-large-image'] {
+    width: 620px;
     img {
       width: 100%;
       height: auto;
@@ -144,184 +173,238 @@
     }
   }
   [purpose='button-row'] {
-     a {
-       font-weight: 700;
-       font-size: 16px;
-       line-height: 24px;
-       text-decoration: none;
-     }
-     [purpose='cta-button'] {
-       cursor: pointer;
-       margin-right: 32px;
-       background: @core-vibrant-red;
-       border-radius: 8px;
-       padding-left: 32px;
-       padding-right: 32px;
-       height: 48px;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-       color: #FFF;
-       position: relative;
-     }
-     [purpose='cta-button']::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: 50%;
-       height: 100%;
-       transform: skew(-10deg);
-       transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
-     }
-     [purpose='cta-button']:hover:before {
-       left: 160px;
-       width: 110%;
-     }
-   }
-   [purpose='animated-arrow-button-red'] {
-     display: inline;
-     padding-right: 40px;
-     cursor: pointer;
-     position: relative;
-     width: fit-content;
-     min-width: 125px;
-     font-weight: bold;
-     user-select: none;
-     transition: 0.2s ease-in-out;
-     -o-transition: 0.2s ease-in-out;
-     -ms-transition: 0.2s ease-in-out;
-     -moz-transition: 0.2s ease-in-out;
-     -webkit-transition: 0.2s ease-in-out;
-     color: @core-fleet-black;
-     text-decoration: none;
-     &:after {
-     content: url('/images/arrow-right-red-16x16@2x.png');
-     transform: scale(0.5);
-     position: absolute;
-     top: -5px;
-     left: 80%; // <--- here
-     transition: 0.2s ease-in-out;
-     -o-transition: 0.2s ease-in-out;
-     -ms-transition: 0.2s ease-in-out;
-     -moz-transition: 0.2s ease-in-out;
-     -webkit-transition: 0.2s ease-in-out;
-     /*   opacity: 0; */
-     }
-     &:hover:after {
-     left: 82%; // <--- here
-     transition: 0.2s ease-in-out;
-     -o-transition: 0.2s ease-in-out;
-     -ms-transition: 0.2s ease-in-out;
-     -moz-transition: 0.2s ease-in-out;
-     -webkit-transition: 0.2s ease-in-out;
-     /*   opacity:1; */
-     }
-   }
-  [purpose='scrollable-tweets'] {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 79px;
-    margin-bottom: 80px;
-
-    [purpose='tweets']::-webkit-scrollbar {
-      display: none;
+    a {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 24px;
+      text-decoration: none;
     }
-
-    [purpose='tweets'] {
-      overflow-x: scroll;
-      scroll-behavior: smooth;
-      padding-left: 120px;
-      padding-right: 120px;
-      padding-bottom: 16px;
-      padding-top: 1px; //« makes the top of the card border visible
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-
-    [purpose='tweet-card'] {
-      max-width: 367px;
-      min-width: 367px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 8px;
-      margin-right: 8px;
-      margin-bottom: 8px;
-      text-align: left;
-      padding: 40px;
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
-      border: none;
-      box-shadow: 0px 0px 1px 1px #E2E4EA, inset 0px 0px 0px 2px #FFFFFF;
-      border-radius: 16px;
-    }
-    [purpose='tweets-page-indicator'] {
-      margin-bottom: 40px;
+    [purpose='cta-button'] {
       cursor: pointer;
-      li {
-        padding: 2px;
-        height: 16px;
-        width: 16px;
-        border-radius: 100%;
-        margin-right: 8px;
-        [purpose='page-item-dot'] {
-          display: inline-block;
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
-          background-color: @core-vibrant-blue-15;
-        }
+      margin-right: 32px;
+      background: @core-vibrant-red;
+      border-radius: 8px;
+      padding-left: 32px;
+      padding-right: 32px;
+      height: 48px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #FFF;
+      position: relative;
+    }
+    [purpose='cta-button']::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: 50%;
+      height: 100%;
+      transform: skew(-10deg);
+      transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
+    }
+    [purpose='cta-button']:hover:before {
+      left: 160px;
+      width: 110%;
+    }
+  }
+  [purpose='animated-arrow-button-red'] {
+    display: inline;
+    padding-right: 34px;
+    cursor: pointer;
+    position: relative;
+    width: fit-content;
+    min-width: auto;
+    font-weight: bold;
+    user-select: none;
+    transition: 0.2s ease-in-out;
+    -o-transition: 0.2s ease-in-out;
+    -ms-transition: 0.2s ease-in-out;
+    -moz-transition: 0.2s ease-in-out;
+    -webkit-transition: 0.2s ease-in-out;
+    color: @core-fleet-black;
+    text-decoration: none;
+    &:after {
+      content: url('/images/arrow-right-red-16x16@2x.png');
+      transform: scale(0.5);
+      position: absolute;
+      top: -5px;
+      right: -5px; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity: 0; */
+    }
+    &:hover:after {
+      right: -10px; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity:1; */
+    }
+  }
+
+  [purpose='supported-platforms'] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 824px;
+    margin-bottom: 160px;
+    h2 {
+      font-size: 32px;
+      line-height: 48px;
+      text-align: center;
+      margin-bottom: 40px;
+    }
+    [purpose='supported-platform-row'] {
+      justify-content: center;
+      padding-bottom: 24px;
+    }
+    [purpose='supported-platform'] {
+      width: 120px;
+      margin: 12px;
+      img {
+        margin-left: auto;
+        margin-right: auto;
+        height: 48px;
+        width: auto;
       }
-      li.selected {
-        [purpose='page-item-dot'] {
-          background-color: @core-fleet-black-50;
+      p {
+        line-height: 21px;
+        font-size: 14px;
+        margin-bottom: 0px;
+        text-align: center;
+        span {
+          font-size: 11px;
+          line-height: 16.5px;
         }
       }
     }
   }
-  @media (min-width: 1600px) {
-    [purpose='hero-ribbon'] {
-      background-image: none;
-      height: auto;
-      [purpose='ribbon-banner'] {
-        display: block;
-        height: auto;
-        width: 100%;
+  [purpose='two-column-features'] {
+    max-width: 1080px;
+    margin-bottom: 160px;
+    [purpose='feature-row'] {
+      margin-bottom: 80px;
+      [purpose='feature'] {
+        max-width: 510px;
+        p {
+          font-size: 16px;
+          line-height: 24px;
+        }
       }
     }
   }
+  [purpose='three-column-features'] {
+    margin-bottom: 160px;
+    max-width: 1080px;
+    [purpose='feature-row'] {
+      [purpose='feature'] {
+        max-width: 320px;
+        p {
+          font-size: 14px;
+          line-height: 21px;
+        }
+      }
+    }
+    h2 {
+      font-size: 32px;
+      line-height: 48px;
+      margin-bottom: 40px;
+    }
+  }
+
+  [purpose='feature'] {
+    margin-left: 30px;
+    margin-right: 30px;
+
+    img {
+      height: 64px;
+      width: auto;
+      margin-bottom: 16px;
+    }
+    h5 {
+      font-weight: 800;
+      font-size: 18px;
+      line-height: 27px;
+      margin-bottom: 16px;
+    }
+  }
 
 
-  @media (min-width: 1200px) {
-    [purpose='homepage-hero'] {
-      padding-left: 80px;
-      padding-right: 80px;
-      padding-bottom: 80px;
-      padding-top: 80px;
-      max-width: 1300px;
+  [purpose='homepage-cards'] {
+    margin-top: 160px;
+    margin-bottom: 120px;
+    [purpose='homepage-card'] {
+      background: #FFFFFF;
+      box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      padding: 40px;
+      width: 390px;
+      margin-left: 30px;
+      margin-right: 30px;
+      border: none;
+    }
+  }
+
+
+
+  @media (min-width: 1400px) {
+    [purpose='hero-background-image'] {
+      background-size: 100% auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
     }
     [purpose='homepage-content'] {
       max-width: 1200px;
-      padding-right: 0px;
-      padding-left: 0px;
+      padding-right: 60px;
+      padding-left: 60px;
+    }
+    [purpose='homepage-hero'] {
+      max-width: 1080px;
+      height: 900px;
+    }
+  }
+
+
+  @media (max-width: 1200px) {
+
+    [purpose='hero-background-image'] {
+      background-size: 1600px auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
+    }
+
+    [purpose='homepage-hero'] {
+      max-width: 1080px;
+      height: 726px;
+    }
+
+    [purpose='homepage-content'] {
+      max-width: 1200px;
+      padding-right: 60px;
+      padding-left: 60px;
     }
   }
 
   @media (max-width: 991px) {
 
-    [purpose='hero-text'] {
-      h1 {
-        font-size: 48px;
-      }
+    [purpose='hero-background-image'] {
+      background-size: 1400px auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
     }
     [purpose='homepage-hero'] {
-      padding-left: 60px;
-      padding-right: 0px;
-      padding-bottom: 10px;
+      max-width: 100%;
+      height: 720px;
     }
     [purpose='hero-logos'] {
+      margin-top: 24px;
       img {
         display: inline;
       }
@@ -351,49 +434,49 @@
         margin-left: 20px;
       }
     }
-    [purpose='feature-left-text-block'] {
-      max-width: 440px;
-      padding-right: 40px;
+
+    [purpose='platform-left-text-block'] {
+      max-width: 357px;
+      margin-right: 80px;
     }
-    [purpose='feature-right-text-block'] {
-      max-width: 440px;
-      padding-left: 40px;
+    [purpose='platform-right-text-block'] {
+      max-width: 357px;
+      margin-left: 80px;
     }
+    [purpose='platform-small-text-block'] {
+      max-width: 357px;
+      margin-right: 80px;
+    }
+
+    [purpose='platform-large-image'] {
+      width: 453px;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+
+
     [purpose='bottom-cloud-city-banner'] {
       max-height: 375px;
       height: auto;
       width: 100%;
     }
-    [purpose='scrollable-tweets'] {
-      margin-top: 60px;
-      margin-bottom: 60px;
-      [purpose='tweets'] {
-        padding-left: 80px;
-        padding-right: 80px;
-      }
-    }
   }
 
   @media (max-width: 767px) {
 
+    [purpose='hero-background-image'] {
+      background-size: 1200px auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
+    }
+
     [purpose='homepage-hero'] {
-      padding-left: 40px;
-      padding-right: 40px;
-      max-height: unset;
-    }
-    [purpose='homepage-hero-image'] {
-      max-height: 280px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: start;
-      width: 100%;
-      margin-bottom: -20px;
-      img {
-        max-width: 100%;
-        height: auto;
-      }
+      height: 650px;
     }
+
     [purpose='homepage-content'] {
       padding-right: 40px;
       padding-left: 40px;
@@ -411,7 +494,184 @@
       }
     }
     [purpose='hero-logos'] {
+      margin-top: 32px;
       margin-bottom: 80px;
+      [purpose='snowflake-logo'] {
+        height: 30px;
+      }
+      [purpose='wayfair-logo'] {
+        height: 33px;
+      }
+      [purpose='uber-logo'] {
+        height: 30px;
+      }
+      [purpose='atlassian-logo'] {
+        height: 21px;
+      }
+      [purpose='segment-logo'] {
+        height: 32px;
+      }
+      [purpose='bottom-row-uber-logo'] {
+        display: none;
+      }
+    }
+    [purpose='homepage-text-block'] {
+      margin-bottom: 80px;
+      p {
+        max-width: 527px;
+        margin: 0 auto;
+      }
+    }
+
+    [purpose='platform-left-text-block'] {
+      max-width: 100%;
+      margin-right: 0px;
+      margin-bottom: 80px;
+    }
+    [purpose='platform-right-text-block'] {
+      max-width: 100%;
+      margin-left: 0px;
+      margin-bottom: 80px;
+    }
+    [purpose='platform-small-text-block'] {
+      max-width: 100%;
+      margin-right: 0px;
+      margin-bottom: 80px;
+    }
+    [purpose='platform-image'] {
+      width: 100%;
+    }
+    [purpose='platform-large-image'] {
+      width: 100%;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    [purpose='supported-platforms'] {
+      margin-bottom: 100px;
+    }
+
+    [purpose='platform'] {
+      margin-bottom: 80px;
+    }
+    [purpose='homepage-cards'] {
+      margin-bottom: 100px;
+      [purpose='homepage-card'] {
+        background: #FFFFFF;
+        box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1);
+        border-radius: 16px;
+        padding: 40px;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        border: none;
+        &:first-of-type {
+          margin-bottom: 60px;
+        }
+      }
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 120px;
+    }
+  }
+
+  @media (max-width: 575px) {
+
+    [purpose='hero-background-image'] {
+      background-size: 960px auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
+    }
+
+    [purpose='homepage-hero'] {
+      height: 625px;
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+    h1 {
+      font-weight: 800;
+      font-size: 40px;
+      line-height: 60px;
+    }
+    [purpose='hero-text'] {
+      padding-bottom: 260px;
+      h1 {
+        font-size: 40px;
+        line-height: 60px;
+      }
+      h4 {
+        font-size: 14px;
+      }
+      p {
+        font-size: 16px;
+      }
+    }
+
+    [purpose='homepage-content'] {
+      padding-right: 24px;
+      padding-left: 24px;
+    }
+
+    [purpose='platform-left-text-block'], [purpose='platform-right-text-block'] {
+      text-align: left;
+    }
+    [purpose='button-row'] {
+       [purpose='cta-button'] {
+         cursor: pointer;
+         margin-right: 0px;
+         width: 100%;
+         margin-bottom: 24px;
+       }
+    }
+    [purpose='platform-image'] {
+      width: 100%;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    [purpose='supported-platform'] {
+      margin-bottom: 24px;
+    }
+
+    [purpose='two-column-features'] {
+      margin-bottom: 100px;
+      [purpose='feature-row'] {
+        margin-bottom: 60px;
+        [purpose='feature'] {
+          margin-left: 0px;
+          margin-right: 0px;
+          max-width: 100%;
+          margin-bottom: 60px;
+          text-align: center;
+          img {
+            margin-right: auto;
+            margin-left: auto;
+          }
+        }
+      }
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 100px;
+      h2 {
+        text-align: center;
+      }
+      [purpose='feature-row'] {
+        [purpose='feature'] {
+          max-width: 100%;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-bottom: 60px;
+          text-align: center;
+          img {
+            margin-right: auto;
+            margin-left: auto;
+          }
+        }
+      }
+    }
+    [purpose='hero-logos'] {
       img {
         display: inline;
       }
@@ -435,107 +695,23 @@
         height: 24px;
       }
     }
-    [purpose='homepage-text-block'] {
-      margin-bottom: 80px;
-      p {
-        max-width: 527px;
-        margin: 0 auto;
-      }
-    }
-    [purpose='feature'] {
-      margin-bottom: 80px;
-    }
-    [purpose='feature-left-text-block'], [purpose='feature-right-text-block'] {
-      max-width: 527px;
-      padding-right: 0px;
-      padding-left: 0px;
-      text-align: center;
-    }
-    [purpose='feature-image'] {
-      max-width: 327px;
-      width: 100%;
-      margin-bottom: 40px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='scrollable-tweets'] {
-      margin-top: 60px;
-      margin-bottom: 60px;
-      [purpose='tweets'] {
-        padding-left: 40px;
-        padding-right: 40px;
-      }
-    }
-  }
 
-  @media (max-width: 575px) {
-
-    h1 {
-      font-size: 36px;
-      line-height: 54px;
-    }
-    [purpose='scrollable-tweets'] {
-      [purpose='tweets'] {
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-      [purpose='tweet-card'] {
-        min-width: 280px;
-        padding: 20px;
-        border-radius: 16px;
-      }
-      [purpose='tweets-page-indicator'] {
-        li {
-          width: 24px;
-          height: 24px;
-          padding: 6px;
-          margin-right: 0;
-        }
-      }
-    }
-    [purpose='homepage-hero'] {
-      padding-left: 24px;
-      padding-right: 24px;
-    }
-    [purpose='homepage-content'] {
-      padding-right: 24px;
-      padding-left: 24px;
-    }
-    [purpose='hero-text'] {
-      text-align: center;
-      h1 {
-        font-size: 36px;
-        line-height: 48px;
-        margin-bottom: 20px;
-      }
-      p {
-        margin-bottom: 30px;
-      }
-    }
-    [purpose='feature-left-text-block'], [purpose='feature-right-text-block'] {
-      text-align: left;
-    }
-    [purpose='button-row'] {
-       [purpose='cta-button'] {
-         cursor: pointer;
-         margin-right: 0px;
-         width: 100%;
-         margin-bottom: 24px;
-       }
-     }
   }
 
   @media (max-width: 375px) {
 
-    [purpose='homepage-hero-image'] {
-      max-height: 360px;
+
+    [purpose='hero-background-image'] {
+      background-size: 800px auto;
+      background-position: center bottom;
+      background-repeat: no-repeat;
     }
+
     [purpose='hero-text'] {
+      padding-bottom: 260px;
       h1 {
-        font-size: 30px;
-        line-height: 46px;
+        font-size: 35px;
+        line-height: 60px;
       }
       h4 {
         font-size: 14px;
@@ -544,6 +720,16 @@
         font-size: 16px;
       }
     }
+
+    [purpose='homepage-hero'] {
+      height: 647px;
+    }
+
+    [purpose='homepage-content'] {
+      padding-right: 20px;
+      padding-left: 20px;
+    }
+
     [purpose='hero-logos'] {
       img {
         display: inline;

website/views/layouts/layout-sandbox.ejs

@@ -158,6 +158,7 @@
               <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleUseCases" aria-haspopup="true" aria-expanded="false">Platform</a>
               <div class="d-block">
                 <div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
+                  <a href="/device-management">Device management</a>
                   <a href="/osquery-management">Osquery management</a>
                   <a href="/compliance">Security compliance</a>
                   <a href="/vulnerability-management">Vulnerability management</a>
@@ -211,6 +212,7 @@
             <div purpose="dropdown-button" class="btn-group">
               <a purpose="header-nav-btn" button-text="Platform" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Platform</a>
               <div purpose="header-dropdown" class="dropdown-menu">
+                <a class="dropdown-item mb-1" href="/device-management">Device management</a>
                 <a class="dropdown-item mb-1" href="/osquery-management">Osquery management</a>
                 <a class="dropdown-item mb-1" href="/compliance">Security compliance</a>
                 <a class="dropdown-item mb-1" href="/vulnerability-management">Vulnerability management</a>

website/views/layouts/layout.ejs

@@ -159,6 +159,7 @@
               <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleUseCases" aria-haspopup="true" aria-expanded="false">Platform</a>
               <div class="d-block">
                 <div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
+                  <a href="/device-management">Device management</a>
                   <a href="/osquery-management">Osquery management</a>
                   <a href="/compliance">Security compliance</a>
                   <a href="/vulnerability-management">Vulnerability management</a>
@@ -212,6 +213,7 @@
             <div purpose="dropdown-button" class="btn-group">
               <a purpose="header-nav-btn" style="" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Platform</a>
               <div purpose="header-dropdown" class="dropdown-menu">
+                <a class="dropdown-item mb-1" href="/device-management">Device management</a>
                 <a class="dropdown-item mb-1" href="/osquery-management">Osquery management</a>
                 <a class="dropdown-item mb-1" href="/compliance">Security compliance</a>
                 <a class="dropdown-item mb-1" href="/vulnerability-management">Vulnerability management</a>

website/views/pages/compliance.ejs

@@ -84,7 +84,7 @@
 
       <div purpose="bottom-cta" 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>

website/views/pages/fleet-mdm.ejs

@@ -1,167 +1,86 @@
 <div id="device-management" v-cloak>
+
   <div purpose="hero-background" class="container-lg d-flex justify-content-center">
+
     <div purpose="hero-container" class="d-flex flex-column align-items-center">
       <div purpose="hero-text">
-        <h4>Limited beta</h4>
-        <h1>A better MDM</h1>
-        <p>Legacy MDMs have left you in the dark for way too long. Fleet’s cross-platform MDM gives IT teams more visibility out of the box.</p>
+        <h4 class="mb-2">Device management built for IT, security approved</h4>
+        <h1>Fleet brings GitOps to MDM</h1>
+        <p>We prefer a more collaborative approach to device management. Fleet uses a GitOps workflow, ensuring checks and balances for your configuration deployments.</p>
         <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
-          <a purpose="mdm-beta-button" @click="clickOpenSignupModal()">Request access</a>
-          <a href="https://calendly.com/fleetdm/demo?utm_source=mdm+demo" target="_blank" purpose="animated-arrow-button-red">Talk to an expert</a>
+          <a purpose="cta-button" href="/try-fleet/register?tryitnow">Try Fleet today</a>
+          <a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
         </div>
       </div>
-      <img alt="The MDM page hero image" purpose="hero-image" class="d-none d-sm-block" src="/images/fleet-mdm-hero-1006x595@2x.png">
     </div>
+
   </div>
-  <!-- <div purpose="page-container" class="container-lg">
 
-    <div purpose="section" class="mx-auto mb-0">
-      <div class="d-flex flex-column text-left text-md-center">
-        <h4>Device management with telemetry</h4>
-        <h2 class="mb-0">Fleet delivers real-time answers to every team and tool</h2>
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse  justify-content-between mx-auto align-items-center">
-      <div class="d-flex flex-column">
-        <h3>All platforms welcome</h3>
-        <p>Give your teams access to any machine regardless of OS or manufacturer. Fleet MDM supports Mac, Windows, and Linux devices. So, you can make the most of your resources (and make everybody’s lives easier).</p>
-      </div>
-      <div purpose="feature-image">
-        <img alt="MDM feature image" src="images/mdm-feature-image-1-344x288@2x.png">
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image">
-        <img alt="MDM feature image" src="images/mdm-feature-image-2-325x300@2x.png">
-      </div>
-      <div class="d-flex flex-column">
-        <h3>Real-time visibility</h3>
-        <p>Don't worry about your workstation configuration being out of date. Fleet makes it easy to see which settings have been applied to your devices. Real-time results reveal the status of your entire fleet at any given moment. Launch custom workflows around those results with scheduled queries.</p>
-      </div>
-    </div>
+  <div purpose="page-container" class="container-lg">
 
     <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
-      <div class="d-flex flex-column">
-        <h3>Built for customization</h3>
-        <p>Instead of forcing you to use a static MDM, we went for a more collaborative approach. Deliver data where it benefits your engineering and IT teams the most with GitOps compatibility and a ton of integrations. Our API and CLI provide the flexibility to program Fleet as you see fit.</p>
+      <div purpose="feature-left-text-block" class="d-flex flex-column">
+          <h3>Made for customization</h3>
+          <p>Integrations with leading configuration management platforms, including Chef, Munki, and Puppet, allow for efficiency in your management workflows. Our API and CLI provide the flexibility to program Fleet as you see fit.</p>
+        </div>
+        <div purpose="feature-image">
+          <img alt="A bento box featuring all the tools Fleet can bring together" src="/images/device-management-bento-logos-320x295@2x.png">
+      </div>
+    </div>
+    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+      <div purpose="feature-image">
+        <img alt="A Fleet orb scanning a Laptop" src="/images/device-management-realtime-visibility-320x294@2x.png">
+      </div>
+      <div purpose="feature-right-text-block" class="d-flex flex-column">
+        <h3>Real-time visibility</h3>
+        <p>Don't worry about your workstation configuration being out of date. Fleet makes it easy to see which settings have been applied to your devices. Real-time results allow you to see the status of your entire fleet at any given moment.</p>
+      </div>
+    </div>
+    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
+      <div purpose="feature-left-text-block" class="d-flex flex-column">
+        <h3>All platforms welcome</h3>
+        <p>Give your teams access to any machine regardless of OS or manufacturer. Fleet supports Mac, Linux, Chromebooks, and Windows devices. So, you can make the most of your resources (and make everybody’s lives easier).</p>
       </div>
       <div purpose="feature-image">
-        <img alt="MDM feature image" src="images/mdm-feature-image-3-360x300@2x.png">
+        <img alt="All platforms welcome" src="/images/device-management-all-platforms-welcome-320-249@2x.png">
       </div>
     </div>
 
     <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="mdm-beta-button" @click="clickOpenSignupModal()">Request access</a>
-      <a href="https://calendly.com/fleetdm/demo?utm_source=mdm+demo" target="_blank" purpose="animated-arrow-button-red">Talk to an expert</a>
+      <a purpose="cta-button" href="/try-fleet/register?tryitnow">Try Fleet today</a>
+      <a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
     </div>
 
-    <div purpose="section" class="d-flex flex-column justify-content-center mx-auto">
-      <div class="text-left text-md-center">
-        <h4>Fleet MDM roadmap</h4>
-        <h2>The path to a better MDM starts here</h2>
-      </div>
-      <div purpose="checklists" class="d-flex flex-lg-row flex-column justify-content-center align-items-center">
-        <div purpose="checklist" class="d-flex flex-column pr-lg-4">
-          <p>Report on disk encryption status</p>
-          <p>User-initiated device enrollment</p>
-          <p>Remotely enforce OS settings</p>
-          <p>Zero-touch device setup</p>
-          <p>Remotely update OS version</p>
-          <p>Low-level MDM commands</p>
-          <div purpose="checklist" class="mb-0 d-block d-lg-none">
-            <p>Keep OS up to date through reminders</p>
-            <p>Encrypt computer hard disks</p>
-            <p>Manage queued MDM commands</p>
-            <p>Remotely lock and wipe computers</p>
-            <p>Trigger a workflow based on a failing policy</p>
-            <p>Update apps on computers</p>
-          </div>
-        </div>
-        <div purpose="checklist" class="flex-column d-none d-lg-flex">
-          <p>Keep OS up to date through reminders</p>
-          <p>Encrypt computer hard disks</p>
-          <p>Manage queued MDM commands</p>
-          <p>Remotely lock and wipe computers</p>
-          <p>Trigger a workflow based on a failing policy</p>
-          <p>Update apps on computers</p>
-        </div>
-      </div>
-      <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center w-100 w-sm-auto mx-auto">
-        <a purpose="mdm-beta-button" @click="clickOpenSignupModal()">Request access</a>
-        <a href="https://calendly.com/fleetdm/demo?utm_source=mdm+demo" target="_blank" purpose="animated-arrow-button-red">Talk to an expert</a>
-      </div>
-
-    </div>
   </div>
-  <div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
-    <div purpose="section-heading" style="max-width: 720px" class="mx-auto text-left text-md-center">
-      <h4>Don’t know osquery?</h4>
-      <h2>Dedicated support from osquery experts</h2>
-
-      <p>Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.</p>
+  <%/* End of page gradient */%>
+  <div purpose="bottom-gradient">
+    <div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
+      <div purpose="section-heading" style="max-width: 720px" class="mx-auto text-center">
+        <h4>Don’t know osquery?</h4>
+        <h2>Dedicated support from osquery experts</h2>
+        <p>Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.</p>
+      </div>
     </div>
-  </div>
-  <div style="background-color: #F9FAFC;">
+
     <scrollable-tweets></scrollable-tweets>
-  </div>
-  <div purpose="tweets-container" class="container-fluid px-md-0 d-flex pt-0 flex-column justify-content-center">
-    <div purpose="logos" class="d-flex flex-wrap justify-content-center align-items-center">
-      <img alt="The Snowflake logo" purpose="snowflake-logo" src="/images/logo-snowflake-muted-151x30@2x.png">
-      <img alt="The Wayfair logo" purpose="wayfair-logo" src="/images/logo-wayfair-muted-150x33@2x.png">
-      <img alt="The Uber logo" purpose="uber-logo" src="/images/logo-uber-muted-84x29@2x.png">
-      <img alt="The Atlassian logo" purpose="atlassian-logo" src="/images/logo-atlassian-muted-172x22@2x.png">
-      <img alt="The Twilio Segment logo" purpose="segment-logo" src="/images/logo-segment-muted-150x34@2x.png">
-    </div>
-  </div> -->
+    <div purpose="page-container" class="pb-0 container">
 
-  <modal v-if="modal === 'beta-signup'" @close="closeModal()" data-backdrop="false" v-cloak purpose="modal">
-    <div class="container d-flex flex-column justify-content-center align-items-center" purpose="modal-container">
-      <div class="modal-header">
-        <h4>See the future of device management</h4>
-        <h2 class="text-center">Better MDM starts here</h2>
-      </div>
-      <div purpose="modal-form" v-if="!showSignupFormSuccess">
-      <ajax-form action="deliverMdmBetaSignup" class="mdm-register" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
-          <div class="form-group">
-            <label for="fullName">Name</label>
-            <input class="form-control" id="fullName" :class="[formErrors.fullName ? 'is-invalid' : '']" v-model.trim="formData.fullName" @input="typeClearOneFormError('fullName')">
-            <div class="invalid-feedback" v-if="formErrors.fullName">Please enter your name.</div>
-          </div>
-          <div class="form-group">
-            <label for="emailAddress">Email</label>
-            <input class="form-control" id="emailAddress" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
-            <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
-          </div>
-          <div class="form-group">
-            <div class="d-flex flex-sm-row flex-column">
-              <div class="pr-0 pr-sm-3 pb-4 pb-sm-0">
-                <label for="jobTitle">Job title</label>
-                <input class="form-control" id="jobTitle" :class="[formErrors.jobTitle ? 'is-invalid' : '']" v-model.trim="formData.jobTitle" @input="typeClearOneFormError('jobTitle')">
-                <div class="invalid-feedback" v-if="formErrors.jobTitle">Please enter your job title.
-                </div>
-              </div>
-              <div>
-                <label for="numberOfHosts">Number of devices</label>
-                <input class="form-control" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : '']" v-model.trim="formData.numberOfHosts" @input="typeClearOneFormError('numberOfHosts')">
-                <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of devices.</div>
-              </div>
-            </div>
-          </div>
-          <cloud-error v-if="cloudError"></cloud-error>
-        <div class="border-0 justify-content-center">
-          <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">Request access</ajax-button>
+      <div purpose="bottom-cta" class="text-center">
+        <h4>Open-source device management</h4>
+        <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>
         </div>
-      </ajax-form>
-      </div>
-      <div purpose="modal-form" class="text-center" v-else>
-        <h3>You're all set!</h3>
-        <p>A Fleet team member will reach out via email with more information if selected.</p>
       </div>
     </div>
-  </modal>
+    <%/* Cloud city banner */%>
+  </div>
+  <div class="d-flex flex-column" purpose="bottom-cloud-city-banner">
+    <img alt="A glass city floating on top of fluffy white clouds" class="d-none d-lg-flex" src="/images/homepage-cloud-city-banner-lg-1600x375@2x.png">
+    <img alt="A glass city floating on top of fluffy white clouds" class="d-none d-md-flex d-lg-none" src="/images/homepage-cloud-city-banner-md-990x375@2x.png">
+    <img alt="A glass city floating on top of fluffy white clouds" class="d-flex d-md-none" src="/images/homepage-cloud-city-banner-sm-375x168@2x.png">
+  </div>
 </div>
 
-
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>

website/views/pages/homepage.ejs

@@ -1,189 +1,253 @@
 <div id="homepage" v-cloak>
   <%/* Hero container */%>
   <div purpose="hero-container">
-    <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 justify-content-center">
-          <h4>Open-source device management</h4>
-          <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 purpose="hero-background-image">
+      <div purpose="homepage-hero" class="container mx-auto">
+        <div class="d-flex flex-row justify-content-center align-items-start">
+          <%/* Hero text */%>
+          <div purpose="hero-text"  class="d-flex flex-column justify-content-center">
+            <h4>Open-source device management</h4>
+            <h1>Lighter than air</h1>
+            <p>Lightweight management for laptops and servers.<br class="d-sm-block d-none"> Designed for APIs, GitOps, webhooks, YAML, and humans.</p>
+            <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center 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>
         </div>
-        <%/* Hero image */%>
-        <div purpose="homepage-hero-image">
-          <img alt="Gitops hero image" src="/images/homepage-hero-gitops-547x302@2x.png">
-        </div>
       </div>
     </div>
-    <div purpose="hero-ribbon">
-      <img alt="A small white curve" purpose="ribbon-banner" src="/images/homepage-hero-ribbon.svg">
-    </div>
   </div>
   <%/* Row of logos */%>
-  <div purpose="hero-logos" style="max-width: 960px;" class="mx-auto d-flex flex-md-row flex-column align-items-center justify-content-center">
+  <div purpose="hero-logos" style="max-width: 1080px;" class="mx-auto d-flex flex-md-row flex-column align-items-center justify-content-center">
     <div purpose="logo-column" class="flex-row d-flex justify-content-between align-items-center mb-4 mb-md-0">
-      <a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" class="ml-md-auto" alt="Snowflake logo" src="/images/logo-snowflake-dark-140x28@2x.png"></a>
-      <a href="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-dark-151x33@2x.png"></a>
-      <a class="d-none d-sm-flex" href="#community"><img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-dark-64x30@2x.png"></a>
+      <a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" class="ml-md-auto" alt="Snowflake logo" src="/images/logo-snowflake-167x40@2x.png"></a>
+      <a href="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-color-147x32@2x.png"></a>
+      <a class="d-block" href="#community"><img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-dark-84x30@2x.png"></a>
     </div>
     <div purpose="logo-column" class="d-flex flex-row justify-content-between align-items-start align-items-md-center">
-      <a class="d-inline-flex d-sm-none" href="#community"><img purpose="uber-logo" alt="Uber logo" src="/images/logo-uber-dark-64x30@2x.png"></a>
-      <a href="#community"><img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-dark-172x22@2x.png"></a>
-      <a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-md-auto" src="/images/logo-segment-dark-149x32@2x.png"></a>
+      <a href="#community"><img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-194x24@2x.png"></a>
+      <a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-md-auto" src="/images/logo-segment-139x30@2x.png"></a>
     </div>
     <div purpose="logo-column" class="d-flex flex-row justify-content-between align-items-center">
-      <a purpose="bottom-row-uber-logo" href="#community" target="_blank"><img style="height: 20px; width: auto" alt="Uber logo" src="/images/logo-uber-dark-64x30@2x.png"></a>
+      <a purpose="bottom-row-uber-logo" href="#community" target="_blank"><img style="height: 20px; width: auto" alt="Uber logo" src="/images/logo-uber-dark-84x30@2x.png"></a>
     </div>
   </div>
   <%/* Homepage content */%>
   <div purpose="homepage-content" class="container">
 
-    <div purpose="homepage-text-block" class="text-sm-center text-left mx-auto">
-      <h4>Device management built for IT, security approved</h4>
-      <h2>Fleet brings GitOps to MDM</h2>
-      <p>We prefer a more collaborative approach to device management. Fleet uses a GitOps workflow, ensuring checks and balances for your configuration deployments.</p>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
-      <div purpose="feature-left-text-block" class="d-flex flex-column">
-        <h3>Made for customization</h3>
-        <p>Integrations with leading configuration management platforms, including Chef, Munki, and Puppet, allow for efficiency in your management workflows. Our API and CLI provide the flexibility to program Fleet as you see fit.</p>
+    <%/* Device management block */%>
+    <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+      <div purpose="platform-left-text-block" class="d-flex flex-column">
+        <h3>GitOps-driven MDM</h3>
+        <p>Automate the management of your fleet of devices with increased visibility and control, improved stability, all while automating configuration deployments using GitOps.</p>
+        <a purpose="animated-arrow-button-red" href="/device-management">More about device management</a>
       </div>
-      <div purpose="feature-image">
-        <img alt="A bento box featuring all the tools Fleet can bring together" src="/images/homepage-bento-logos-320x295@2x.png">
+      <div purpose="platform-image">
+        <img alt="GitOps-driven MDM" src="/images/homepage-fleet-ui-536x389@2x.png">
       </div>
     </div>
 
-    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image">
-        <img alt="A Fleet orb scanning a Laptop" src="/images/homepage-realtime-visibility-320x294@2x.png">
+    <%/* Vulnerability management block */%>
+    <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
+      <div purpose="platform-image">
+        <img alt="Vulnerability management" src="/images/homepage-vulnerability-management-530x458@2x.png">
       </div>
-      <div purpose="feature-right-text-block" class="d-flex flex-column">
-        <h3>Real-time visibility</h3>
-        <p>Don't worry about your workstation configuration being out of date. Fleet makes it easy to see which settings have been applied to your devices. Real-time results allow you to see the status of your entire fleet at any given moment.</p>
+      <div purpose="platform-right-text-block" class="d-flex flex-column">
+        <h3>Know what’s going on with your computers</h3>
+        <p>Monitor vulnerabilities in software packages, operating systems, and browser plugins. Show how quickly CVEs are resolved, and which teams need extra help.</p>
+        <a purpose="animated-arrow-button-red" href="/vulnerability-management">More about vulnerability management</a>
       </div>
     </div>
 
-    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
-      <div purpose="feature-left-text-block" class="d-flex flex-column">
-        <h3>All platforms welcome</h3>
-        <p>Give your teams access to any machine regardless of OS or manufacturer. Fleet supports Mac, Linux, Chromebooks, and Windows devices. So, you can make the most of your resources (and make everybody’s lives easier).</p>
+    <%/* Security compliance block */%>
+    <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+      <div purpose="platform-left-text-block" class="d-flex flex-column">
+        <h3>Simplify security compliance</h3>
+        <p>Policies make it easy to keep your devices compliant with your organization’s custom rules and common benchmarks like CIS. Quickly report your posture and vulnerabilities to auditors, showing remediation status and timing.</p>
+        <a purpose="animated-arrow-button-red" href="/compliance">More about security compliance</a>
       </div>
-      <div purpose="feature-image">
-        <img alt="All platforms welcome" src="/images/homepage-all-platforms-welcome-320-249@2x.png">
+      <div purpose="platform-image">
+        <img alt="Security compliance" src="/images/homepage-security-compliance-520x337@2x.png">
       </div>
     </div>
-    <%/* Call to action */%>
-    <div purpose="button-row" style="margin-top: 60px; margin-bottom: 100px" 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>
+
+    <%/* Osquery management block */%>
+    <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-center">
+      <div purpose="platform-image">
+        <img alt="Osquery management" src="/images/homepage-osquery-management-543x371@2x.png">
+      </div>
+      <div purpose="platform-right-text-block" class="d-flex flex-column">
+        <h3>Deploy osquery at scale</h3>
+        <p>Fleet provides a centralized management interface for osquery to deploy, update, and manage osquery agents across a thousand or one hundred thousand devices.</p>
+        <a purpose="animated-arrow-button-red" href="/osquery-management">More about osquery management</a>
+      </div>
+    </div>
+
+    <%/* Supported platforms */%>
+    <div purpose="supported-platforms" class="d-flex flex-column">
+      <h2>Supported platforms</h2>
+      <div class="card-deck d-flex flex-row flex-wrap justify-content-center mx-auto">
+          <div purpose="supported-platform" class="">
+            <img alt="Linux" src="/images/homepage-platform-linux-41x48@2x.png">
+            <p>Linux <br><span>(all distros)</span></p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="macOS" src="/images/homepage-platform-macos-42x48@2x.png">
+            <p>macOS</p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="Windows" src="/images/homepage-platform-windows-40x48@2x.png">
+            <p>Windows</p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="ChromeOS" src="/images/homepage-platform-chromeos-48x48@2x.png">
+            <p>Chromebook</p>
+          </div>
+          <div purpose="supported-platform" class="">
+            <img alt="AWS" src="/images/homepage-platform-aws-54x48@2x.png">
+            <p>AWS</p>
+          </div>
+          <div purpose="supported-platform" class="">
+            <img alt="Google Cloud" src="/images/homepage-platform-google-cloud-48x48@2x.png">
+            <p>GCP</p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="Azure" src="/images/homepage-platform-azure-24x24@2x.png">
+            <p>Azure <br><span>(Microsoft Cloud)</span></p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="Datacenters" src="/images/homepage-platform-datacenters-48x48@2x.png">
+            <p>Data centers</p>
+          </div>
+          <div purpose="supported-platform">
+            <img alt="Containers" src="/images/homepage-platform-docker-48x48@2x.png">
+            <p>Containers</p>
+          </div>
+          <div purpose="supported-platform" class="">
+            <img alt="IOT" src="/images/homepage-platform-iot-38x48@2x.png">
+            <p>IoT devices <br><span>(Linux-based)</span></p>
+          </div>
+      </div>
+    </div>
+
+    <div purpose="two-column-features" class="mx-auto">
+
+      <div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center">
+        <div purpose="feature" class="ml-sm-0">
+        <img alt="Modular" src="/images/homepage-icon-modular-64x64@2x.png">
+          <h5>As much or as little as you need</h5>
+          <p>Fleet is lightweight and modular. Use it for security without MDM, and vice versa. You can turn off features you are not using.</p>
+        </div>
+
+        <div purpose="feature" class="mr-sm-0 mb-0">
+        <img alt="Good neighbors" src="/images/homepage-icon-good-neighbors-64x64@2x.png">
+          <h5>Good neighbors</h5>
+          <p>Ready-to-use, enterprise-friendly integrations exist for Snowflake, Splunk, GitHub Actions, Vanta, Elastic, Jira, Zendesk, and more.</p>
+        </div>
+      </div>
+
+      <div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center mb-0">
+        <div purpose="feature" class="ml-sm-0">
+        <img alt="Plays well with others" src="/images/homepage-icon-play-well-64x64@2x.png">
+          <h5>Plays well with others</h5>
+          <p>Fleet plays nicely with Munki, Chef, Puppet, and Ansible, as well as with security tools like Crowdstrike and SentinelOne.</p>
+        </div>
+
+        <div purpose="feature" class="mr-sm-0 mb-0">
+        <img alt="One agent to rule them all" src="/images/homepage-icon-one-agent-64x64@2x.png">
+          <h5>One agent to rule them all...</h5>
+          <p>...but it’s ok if you have others. Fleet coexists peacefully with Rapid7 and other agent-based vulnerability scanners.</p>
+        </div>
+      </div>
+    </div>
+
+    <%/* ClickOps or DevOps block */%>
+    <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+      <div purpose="platform-small-text-block" class="d-flex flex-column">
+        <h3>ClickOps or DevOps</h3>
+        <p>Manage your IT infrastructure <a href="/docs/using-fleet/fleet-ui">in any browser</a> or use <a href="/guides/using-github-actions-to-apply-configuration-profiles-with-fleet">git</a> to make infrastructure changes as code. You can use the <a href="/docs/using-fleet/fleetctl-cli">CLI</a> or <a href="/docs/using-fleet/rest-api">API</a> to automate the deployment, configuration, and monitoring of your devices.</p>
+        <a purpose="animated-arrow-button-red" href="/docs">Explore the docs</a>
+      </div>
+      <div purpose="platform-large-image">
+        <img alt="ClickOps or GitOps" src="/images/homepage-fleet-ui-536x389@2x.png">
+      </div>
+    </div>
+
+    <div purpose="homepage-text-block" class="text-center mx-auto">
+      <h2>Open through and through</h2>
+      <p>Fleet is dedicated to flexibility, accessibility, and clarity. We think everyone can contribute and that tools should be as easy as possible for everyone to understand.</p>
+    </div>
+
+    <div purpose="three-column-features" class="mx-auto">
+
+      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-center justify-content-center">
+        <div purpose="feature" class="ml-sm-0">
+          <img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-sm-0">
+          <h5>Transparency: user-first</h5>
+          <p>Fleet champions a user-first transparency model with its open-source software, allowing users to see what's being monitored and how. Read more on Fleet’s <a href="/transparency">transparency</a> page. </p>
+        </div>
+
+        <div purpose="feature">
+          <img alt="Free as in free" src="/images/homepage-icon-free-48x64@2x.png">
+          <h5>Free as in free</h5>
+          <p>The <a href="/pricing">free version of Fleet</a> will always be free. Fleet is independently backed and actively maintained with the help of many amazing <a href="https://github.com/fleetdm/fleet/graphs/contributors">contributors</a>.</p>
+        </div>
+
+        <div purpose="feature" class="mr-sm-0 mb-0">
+          <img alt="An open book" src="/images/homepage-icon-openness-80x64@2x.png">
+          <h5>We value openness</h5>
+          <p>Fleet Device Management's company <a href="/handbook">handbook</a> is public and open source. You can read about the <a href="/handbook/company#history">history of Fleet and osquery</a> and our commitment to improving the product.</p>
+        </div>
+      </div>
+
+    </div>
+
+
+    <div purpose="homepage-cards" class="d-flex flex-md-row flex-column justify-content-center">
+
+      <div purpose="homepage-card" class="card ml-md-0">
+        <h3>Chat</h3>
+        <p>Please join us in <a href="https://www.macadmins.org/">MacAdmins Slack</a> or in <a href="/slack">osquery Slack</a>.</p>
+        <p>The Fleet community is full of <a href="https://fleetdm.com/handbook/company#empathy">kind and helpful people</a>. Whether or not you are a paying customer, if you need help, just ask.</p>
+      </div>
+
+      <div purpose="homepage-card" class="card mr-md-0">
+        <h3>Contribution</h3>
+        <p>Contributions are welcome, whether you answer questions on <a href="https://github.com/fleetdm/fleet#chat">Slack</a> / <a href="https://github.com/fleetdm/fleet/issues">GitHub</a> / <a href="https://stackoverflow.com/search?q=osquery">StackOverflow</a> / <a href="https://www.linkedin.com/company/fleetdm/">LinkedIn</a> / <a href="https://twitter.com/fleetctl">Twitter</a>, improve the documentation or <a href="https://github.com/fleetdm/fleet/tree/main/website">website</a>, write a tutorial, give a talk at a conference or local meetup, give an <a href="/podcasts">interview on a podcast</a>, troubleshoot reported issues, or <a href="/docs/contributing">submit a patch</a>.</p>
+      </div>
+
     </div>
 
   </div>
   <%/* Bottom gradient */%>
   <div purpose="bottom-gradient">
     <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 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 purpose="three-column-features" class="mx-auto">
+        <h2>Ready to get started?</h2>
+        <div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center">
+          <div purpose="feature" class="ml-sm-0">
+            <img alt="Explore data" src="/images/homepage-icon-explore-data-64x64@2x.png">
+            <h5>Explore data</h5>
+            <p>Check out the <a href="/tables">table reference</a> documentation to see what kind of data you can use Fleet to gather.</p>
+          </div>
+
+          <div purpose="feature">
+            <img alt="Easy to deploy" src="/images/homepage-icon-deploy-64x64@2x.png">
+            <h5>Production deployment</h5>
+            <p>Fleet is easy to <a href="/docs/using-fleet/learn-how-to-use-fleet">spin up for yourself</a>. Or you can have us <a href="/pricing">host it for you</a>. Premium features are available either way.</p>
+          </div>
+
+          <div purpose="feature" class="mr-sm-0 mb-0">
+            <img alt="Documentation" src="/images/homepage-icon-documentation-64x64@2x.png">
+            <h5>Documentation</h5>
+            <p>Explore guides and examples over in the <a href="/docs">docs</a>, along with complete <a href="/docs/using-fleet/rest-api">API reference</a>.</p>
+          </div>
+        </div>
+
       </div>
     </div>
 
-    <div  purpose="scrollable-tweets" class="d-flex flex-column">
-      <div purpose="tweets" class="d-flex flex-row flex-nowrap">
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
-          </div>
-          <p class="pb-2 mb-1">Exciting. This is a team that listens to feedback.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Erik Gomez</p>
-              <p class="m-0">Staff Software Engineer <a href="https://twitter.com/Uber">@Uber</a></p>
-            </div>
-          </div>
-        </div>
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
-          </div>
-          <p class="pb-2 mb-1">Mad props to how easy making a deploy pkg of Orbit was. I wish everyone made stuff that easy.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Wesley Whetstone</p>
-              <p class="m-0">CPE <a href="https://twitter.com/Square">@Square</a></p>
-            </div>
-          </div>
-        </div>
-
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
-          </div>
-          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/fleet">#Fleet</a>’s come a long way - to now being the top open-source <a href="https://twitter.com/hashtag/fleet">#osquery</a> manager. Just in the past 6 months.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Brendan Shaklovitz</p>
-              <p class="m-0">Senior SRE <a href="https://twitter.com/atlassian">@Atlassian</a></p>
-            </div>
-          </div>
-        </div>
-
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
-          </div>
-          <p class="pb-2 mb-1">It’s great to see the new release of Fleet containing some really cool new features that make <a href="https://twitter.com/osquery">@osquery</a> much more usable in practical environments. I’m really impressed with the work that <a href="https://twitter.com/thezachw">@thezachw</a> and crew are doing at <a href="https://twitter.com/fleetctl">@fleetctl</a>.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Mike Arpaia</p>
-              <p class="m-0">Creator of <a href="https://twitter.com/osquery">@osquery</a></p>
-            </div>
-          </div>
-        </div>
-
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
-          </div>
-          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/osquery">#osquery</a> is one of the best tools out there and <a href="https://twitter.com/hashtag/fleetdm">#fleetdm</a> makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.</p>
-          <p>I have used it on 15k servers and it’s really scalable.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Ahmed Elshaer</p>
-              <p class="m-0">DFIR, Blue Teaming, SecOps <a href="https://twitter.com/Wayfair">@wayfair</a></p>
-            </div>
-          </div>
-        </div>
-
-        <div purpose="tweet-card" class="card">
-          <div class="mb-4">
-            <a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
-          </div>
-          <p class="pb-2 mb-1">With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.</p>
-          <div class="row px-3 pt-2">
-            <div>
-              <p class="font-weight-bold m-0">Abubakar Yousafzai</p>
-              <p class="m-0">Security Software Development & Engineering <a href="https://twitter.com/comcast">@Comcast</a></p>
-            </div>
-          </div>
-        </div>
-        <div purpose="tweet-card" style="max-width: 40px; min-width: 40px;" class="invisible">
-        </div>
-      </div>
-      <div purpose="" class="mx-auto d-flex flex-row justify-content-center">
-        <nav aria-label="..." >
-          <ul purpose="tweets-page-indicator" class="pagination pagination-sm" v-if="numberOfTweetPages > 1">
-            <li class="page-item" :class="[currentTweetPage === index ? 'selected' : '']" v-for="(pageNumber, index) in numberOfTweetPages" @click="scrollTweetsDivToPage(index)"><span purpose="page-item-dot"></span></li>
-          </ul>
-        </nav>
-      </div>
-    </div>
 
     <div purpose="homepage-content" class="container">
       <div class="text-center">
@@ -195,6 +259,7 @@
         </div>
       </div>
     </div>
+
   </div>
   <%/* Cloud city banner */%>
   <div class="d-flex flex-column" purpose="bottom-cloud-city-banner">

website/views/pages/osquery-management.ejs

@@ -82,7 +82,7 @@
 
         <div purpose="bottom-cta" 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>

website/views/pages/vulnerability-management.ejs

@@ -81,7 +81,7 @@
 
         <div purpose="bottom-cta" 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>