Website update homepage 2024 01 22 (#16311)

Updated messaging on the homepage.

---------

Co-authored-by: Eric <eashaw@sailsjs.com>

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

@@ -4,7 +4,7 @@ parasails.registerPage('homepage', {
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
     modal: undefined,
-    selectedCategory: 'endpoint-ops'
+    selectedCategory: 'device-management'
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗

website/views/pages/homepage.ejs

@@ -6,12 +6,12 @@
         <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>For teams with lots of endpoints</h4>
-            <h1>Focus on data, not vendors</h1>
+            <h4>For teams with lots of different endpoints</h4>
+            <h1>Your last MDM migration</h1>
             <p>Replace the sprawl with open-source code that works the way you want.</p>
             <div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
               <a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
-              <a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
+              <a purpose="animated-arrow-button-red" href="/pricing">Try it out</a>
             </div>
           </div>
         </div>
@@ -62,126 +62,219 @@
   <%/* Homepage content */%>
   <div purpose="homepage-content" class="container">
     <%/* Testimonial videos */%>
-    <div purpose="testimonials" class="d-flex flex-md-row flex-column justify-content-center card-deck">
-      <div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal('nick-fohs')">
-        <div purpose="testimonial-text" class="card-body">
-          <img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
-          <p purpose="testimonial-quote">Context is king for device data, and Fleet provides a way to surface that information to our other teams and partners.</p>
-          <p class="mb-0"><strong>Nick Fohs</strong></p>
-          <p>Systems and IT infrastructure manager</p>
+    <div purpose="page-section">
+      <div purpose="testimonials" class="d-flex flex-lg-row flex-column justify-content-center card-deck">
+        <div purpose="testimonial" class="d-flex align-items-center card" @click="clickOpenVideoModal('nick-fohs')">
+          <div purpose="testimonial-video" class="card-title">
+          </div>
+          <div purpose="testimonial-text">
+            <p purpose="testimonial-quote">“Fleet lets us to be as lightweight as possible while surfacing data to other teams and partners.”</p>
+            <p class="mb-0"><strong>Nick Fohs</strong></p>
+            <p class="mb-0">Systems and IT infrastructure manager</p>
+          </div>
         </div>
-        <div purpose="testimonial-video" class="card-title">
+        <div purpose="testimonial" class="d-flex align-items-center card" @click="clickOpenVideoModal('austin-anderson')">
+          <div purpose="testimonial-video" class="card-title">
+          </div>
+          <div purpose="testimonial-text">
+            <p purpose="testimonial-quote">“We can build it exactly the way we want it. Which is just not possible on other platforms.”</p>
+            <p class="mb-0"><strong>Austin Anderson</strong></p>
+            <p class="mb-0">Cybersecurity team senior manager</p>
+          </div>
         </div>
       </div>
-      <div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal('austin-anderson')">
-        <div purpose="testimonial-text" class="card-body">
-          <img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
-          <p purpose="testimonial-quote">We can build it exactly the way we want it. Which is just not possible on other platforms.</p>
-          <p class="mb-0"><strong>Austin Anderson</strong></p>
-          <p>Cybersecurity team senior manager</p>
-        </div>
-        <div purpose="testimonial-video" class="card-title">
-        </div>
-      </div>
-    </div>
 
-    <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
-      <div purpose="category-switch-option" class="all" :class="[selectedCategory === 'endpoint-ops' ? 'selected' : '']" @click="selectedCategory = 'endpoint-ops'">Endpoint ops</div>
-      <div purpose="category-switch-option" class="security" :class="[selectedCategory === 'device-management' ? 'selected' : '']" @click="selectedCategory = 'device-management'">Device management</div>
-      <div purpose="category-switch-option" class="it" :class="[selectedCategory === 'vulnerability-management' ? 'selected' : '']" @click="selectedCategory = 'vulnerability-management'">Vuln<span class="d-inline d-md-none d-lg-inline">erability</span> management</div>
-      <div purpose="category-tier-switch" :class="selectedCategory+'-selected'"></div>
-    </div>
+      <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
+        <div purpose="category-switch-option" class="security" :class="[selectedCategory === 'device-management' ? 'selected' : '']" @click="selectedCategory = 'device-management'">Device management</div>
+        <div purpose="category-switch-option" class="all" :class="[selectedCategory === 'endpoint-ops' ? 'selected' : '']" @click="selectedCategory = 'endpoint-ops'">Endpoint ops</div>
+        <div purpose="category-switch-option" class="it" :class="[selectedCategory === 'vulnerability-management' ? 'selected' : '']" @click="selectedCategory = 'vulnerability-management'">Vuln<span class="d-inline d-md-none d-lg-inline">erability</span> management</div>
+        <div purpose="category-tier-switch" :class="selectedCategory+'-selected'"></div>
+      </div>
 
-    <%/* Endpoint ops block */%>
-    <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'endpoint-ops' ? ' show' : 'hidden']">
-      <div purpose="category-text-block" class="d-flex flex-column">
-        <h3>Focus on data, not vendors</h3>
-        <p>Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.</p>
-        <a purpose="animated-arrow-button-red" href="/endpoint-ops">More about endpoint ops</a>
+      <%/* Endpoint ops block */%>
+      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'endpoint-ops'">
+        <div purpose="category-text-block" class="d-flex flex-column">
+          <h3>Focus on data, not vendors</h3>
+          <p>Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.</p>
+          <div purpose="category-button">
+            <a class="btn btn-primary text-nowrap" href="/endpoint-ops">Start with endpoint ops</a>
+          </div>
+        </div>
+        <div purpose="category-image">
+          <img alt="Endpoint ops" src="images/endpoint-operations-hero-image-380x383@2x.png">
+        </div>
       </div>
-      <div purpose="category-image">
-        <img purpose="endpoint-ops-image" alt="Endpoint ops" src="/images/homepage-endpoint-ops-617x440@2x.png">
-      </div>
-    </div>
 
-    <%/* Device management block */%>
-    <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'device-management' ? 'show' : 'hidden']">
-      <div purpose="category-text-block" class="d-flex flex-column">
-        <h3>Manage devices like code</h3>
-        <p>Manage your IT infrastructure in any browser, or use git to make changes using your existing approval processes and audit trail.</p>
-        <a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">More about device management</a>
-      </div>
-      <div purpose="category-image">
-        <div purpose="device-management-image">
-          <div purpose="device-management-image-1"></div>
-          <div purpose="device-management-image-2"></div>
-          <div purpose="device-management-image-3"></div>
-          <img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
+      <%/* Device management block */%>
+      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'device-management'">
+        <div purpose="category-text-block" class="d-flex flex-column">
+          <h3>Manage everything in one place</h3>
+          <p>Clear the way for "zero trust" and modernize your device management practices with a single, open platform for Apple, Windows, and Linux.</p>
+          <div purpose="category-button">
+            <a class="btn btn-primary text-nowrap" href="/device-management">Start with MDM</a>
+          </div>
+        </div>
+        <div purpose="category-image">
+          <img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
         </div>
       </div>
-    </div>
 
-    <%/* Vulnerability management block */%>
-    <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'vulnerability-management' ? 'show' : 'hidden']">
-      <div purpose="category-text-block" class="d-flex flex-column">
-        <h3>Build the vulnerability program you actually want</h3>
-        <p>Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.</p>
-        <a purpose="lg-animated-arrow-button-red" href="/vulnerability-management">More about vulnerability<br> management</a>
-      </div>
-      <div purpose="category-image">
-        <div purpose="vulnerability-management-image">
-          <div purpose="vulnerability-management-image-1"></div>
-          <div purpose="vulnerability-management-image-2"></div>
-          <img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
+      <%/* Vulnerability management block */%>
+      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start"  v-if="selectedCategory === 'vulnerability-management'">
+        <div purpose="category-text-block" class="d-flex flex-column">
+          <h3>Build the vulnerability program you actually want</h3>
+          <p>Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.</p>
+          <div purpose="category-button">
+            <a class="btn btn-primary text-nowrap"  href="/vulnerability-management">Start with vuln<span purpose="truncated-vulnerability-management-text">erability</span>&nbsp;management</a>
+          </div>
+        </div>
+        <div purpose="category-image">
+          <img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
         </div>
       </div>
+      <%/* Integration cards */%>
+        <h2 class="text-center">Connect your favorite tools</h2>
+        <div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">
+          <div purpose="integration-card-column" class="d-flex flex-lg-row flex-column">
+            <a href="/integrations">
+              <div purpose="integration-card">
+                <img alt="Custom IT workflows" src="/images/integration-icon-custom-workflows-32x36@2x.png">
+                <strong>Custom IT workflows</strong>
+                <p>Use git, yaml, webhooks, and more for IT workflows.</p>
+              </div>
+            </a>
+            <a href="/integrations">
+              <div purpose="integration-card">
+                <img alt="IT ticketing" src="/images/integration-logo-jira-32x36@2x.png">
+                <strong>IT ticketing</strong>
+                <p>Automate ticketing with Jira, ServiceNow, or integrate your own system.</p>
+              </div>
+            </a>
+          </div>
+          <div purpose="integration-card-column" class="d-flex flex-lg-row flex-column">
+            <a href="/integrations">
+              <div purpose="integration-card">
+                <img alt="Event logs" src="/images/integration-logo-snowflake-32x36@2x.png">
+                <strong>Event logs</strong>
+                <p>Send data to any platform like Snowflake, AWS, or Splunk.</p>
+              </div>
+            </a>
+            <a href="/integrations">
+              <div purpose="integration-card">
+                <img alt="Scripting" src="/images/integration-logo-munki-36x36@2x.png">
+                <strong>Scripting</strong>
+                <p>Easily connect Munki, Chef, Ansible, and Puppet or deploy your own scripts.</p>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="d-flex flex-column align-items-center">
+          <a purpose="animated-arrow-button-red" href="/integrations">View all integrations</a>
+        </div>
     </div>
-
-    <%/* Supported platforms */%>
-    <div purpose="supported-platforms" class="d-flex flex-column">
-      <h2>An open API for every endpoint</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-greyscale-linux-41x48@2x.png">
-          <p>Linux <br><span>(all distros)</span></p>
+    <div purpose="page-section">
+      <div purpose="endpoints-banner">
+        <div purpose="endpoint-banner-text">
+          <h2>An open interface for every endpoint</h2>
+          <p>Normalize how you manage clouds and computers without losing low-level access to OS-specific features.</p>
+          <div class="d-flex flex-row align-items-center justify-content-md-start justify-content-center">
+            <a purpose="animated-arrow-button-red-no-transform" href="/docs/get-started/why-fleet">Read the docs</a>
+          </div>
         </div>
-        <div purpose="supported-platform">
-          <img alt="macOS" src="/images/homepage-platform-greyscale-macos-42x48@2x.png">
-          <p>macOS</p>
-        </div>
-        <div purpose="supported-platform">
-          <img alt="Windows" src="/images/homepage-platform-greyscale-windows-40x48@2x.png">
-          <p>Windows</p>
-        </div>
-        <div purpose="supported-platform">
-          <img alt="ChromeOS" src="/images/homepage-platform-greyscale-chromeos-48x48@2x.png">
-          <p>Chromebook</p>
-        </div>
-        <div purpose="supported-platform" class="">
-          <img alt="AWS" src="/images/homepage-platform-greyscale-aws-54x48@2x.png">
-          <p>AWS</p>
-        </div>
-        <div purpose="supported-platform" class="">
-          <img alt="Google Cloud" src="/images/homepage-platform-greyscale-google-cloud-48x48@2x.png">
-          <p>GCP</p>
-        </div>
-        <div purpose="supported-platform">
-          <img alt="Azure" src="/images/homepage-platform-greyscale-azure-24x24@2x.png">
-          <p>Azure <br><span>(Microsoft Cloud)</span></p>
-        </div>
-        <div purpose="supported-platform">
-          <img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
-          <p>Data centers</p>
-        </div>
-        <div purpose="supported-platform">
-          <img alt="Containers" src="/images/homepage-platform-greyscale-docker-48x48@2x.png">
-          <p>Containers</p>
-        </div>
-        <div purpose="supported-platform" class="">
-          <img alt="IOT" src="/images/homepage-platform-greyscale-iot-38x48@2x.png">
-          <p>IoT devices <br><span>(Linux-based)</span></p>
+        <div purpose="endpoints-images">
+          <div purpose="endpoint-images-row" class="d-md-flex d-none">
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+          </div>
+          <div purpose="endpoint-images-row">
+            <div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
+            <div purpose="endpoint-image-box">
+              <img alt="AWS" src="/images/logo-aws-36x36@2x.png">
+              <p>AWS</p>
+            </div>
+            <div purpose="endpoint-image-box">
+              <img alt="Google Cloud" src="/images/icon-gcp-36x36@2x.png">
+              <p>GCP</p>
+            </div>
+            <div purpose="endpoint-image-box">
+              <img alt="Azure" src="/images/logo-azure-37x36@2x.png">
+              <p>Azure</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex">
+              <img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
+              <p>Data centers</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex">
+              <img alt="IOT" src="/images/icon-iot-36x36@2x.png">
+              <p>IoT (Linux)</p>
+            </div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+          </div>
+          <div purpose="endpoint-images-row">
+            <div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
+            <div purpose="endpoint-image-box">
+              <img alt="macOS" src="/images/logo-apple-36x36@2x.png">
+              <p>macOS</p>
+            </div>
+            <div purpose="endpoint-image-box">
+              <img alt="Windows" src="/images/logo-windows-36x36@2x.png">
+              <p>Windows</p>
+            </div>
+            <div purpose="endpoint-image-box">
+              <img alt="Linux" src="/images/logo-linux-36x36@2x.png">
+              <p>Linux</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-flex d-none">
+              <img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
+              <p>Data centers</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex">
+              <img alt="ChromeOS" src="/images/logo-chrome-36x37@2x.png">
+              <p>Chromebook</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-none d-flex">
+              <img alt="Containers" src="/images/logo-docker-40x40@2x.png">
+              <p>Containers</p>
+            </div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+          </div>
+          <div purpose="endpoint-images-row">
+            <div purpose="endpoint-image-box" class="d-md-flex d-none"></div>
+            <div purpose="endpoint-image-box" class="d-md-flex d-none">
+              <img alt="ChromeOS" src="/images/logo-chrome-36x37@2x.png">
+              <p>Chromebook</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-flex d-none">
+              <img alt="Containers" src="/images/logo-docker-40x40@2x.png">
+              <p>Containers</p>
+            </div>
+            <div purpose="endpoint-image-box" class="d-md-flex d-none">
+              <img alt="IOT" src="/images/icon-iot-36x36@2x.png">
+              <p>IoT (Linux)</p>
+            </div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+          </div>
+          <div purpose="endpoint-images-row">
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+            <div purpose="endpoint-image-box"></div>
+          </div>
         </div>
       </div>
+
     </div>
 
     <div purpose="homepage-text-block" class="text-center mx-auto">
@@ -190,10 +283,10 @@
     </div>
 
     <div purpose="three-column-features" class="mx-auto">
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-start justify-content-center">
+      <div purpose="feature-row" class="d-flex flex-md-row flex-column align-items-start 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">
+          <img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-md-0">
           <h5>Scope transparency</h5>
           <p>Let end users see the source code for exactly <a href="/docs/using-fleet/fleet-desktop">how they are being monitored</a>, and set clear expectations about what is and isn’t acceptable use of work computers.</p>
         </div>
@@ -218,11 +311,11 @@
   <div purpose="bottom-gradient">
     <div purpose="homepage-content" class="container">
       <div class="text-center" purpose="bottom-cta">
-        <h4>For teams with lots of endpoints</h4>
-        <h1>Focus on data, not vendors</h1>
+        <h4>For teams with lots of different endpoints</h4>
+        <h1>Your last MDM migration</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" @click="clickOpenChatWidget()">Show me</a>
-          <a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
+          <a purpose="animated-arrow-button-red" href="/pricing">Try it out</a>
         </div>
       </div>
     </div>