From 4d0a09a980d560f3bff91c8d195908f0150e0b6d Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 13 Sep 2024 18:14:56 -0500
Subject: [PATCH] Website: Update pricing page layout (#22096)

Closes: #21935

Changes:
- Updated the /pricing page:
- truncated the features table and added a button to show all features
   - Added a FAQ section with three questions
   - Added a logo carousel.
---
 .../icon-chevron-fleet-black-75-12x12@2x.png  | Bin 0 -> 470 bytes
 website/assets/js/pages/pricing.page.js       |   1 +
 website/assets/styles/pages/pricing.less      | 193 +++++++++++++++-
 website/views/pages/pricing.ejs               | 207 ++++++++++++------
 4 files changed, 337 insertions(+), 64 deletions(-)
 create mode 100644 website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png

diff --git a/website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png b/website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c64bba4ca8840a4cb7febaf35748afeb9ca2b2f7
GIT binary patch
literal 470
zcmV;{0V)28P)<h;3K|Lk000e1NJLTq000;O000>X1^@s6D=Y3@00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0c%M_K~#7F?UOxE
z!e9``@7h5V9T*)Mi8AO)9B^YSm;iB+)kzFs+^Cxg7~m7Q8CdlB2I9ghgGNU_LQNbr
zu|4mpY0`J8E)M-AO|Jjv-um1XASLDBgZtIip@leP(?Fon&7?nsKj6-%kfp1+{H|bq
zgP#mPrOmAZJU`9u;TKe@?Jn8LVO8d1yQlzA#_dE1dZl(cfP_?P?SYK-s(dS2z0*LV
zt3U+doD{Vz#utmY#G0mOaOLfm&7$wfAhb@<b~@;6qY3OpSziYWLUk{yh*m$#BAIug
zaVnI>b#IPIoIS~xY)WxtDaZph=iUIyqDc>Y$4y6(o5EVK8H6c)tnIkJ7$JmmttHp&
z*smjf4>34Q)&NIh(rX4{AOfx4);VDpmVgVMi*a8MJ5!^AULI%DT)yzi9h4v%xhY3t
zd>Q$3BK$z?Fhho)xPV<Guwn7*o49~eM1jwSC12jxheGHEq@+l`05RU8ci3!~UH||9
M07*qoM6N<$f`*XCmH+?%

literal 0
HcmV?d00001

diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js
index 69b6ba3e74..37a7118abc 100644
--- a/website/assets/js/pages/pricing.page.js
+++ b/website/assets/js/pages/pricing.page.js
@@ -6,6 +6,7 @@ parasails.registerPage('pricing', {
     pricingMode: 'all',
     modal: '',
     selectedFeature: undefined,
+    showExpandedTable: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index 05cdaeba84..8c25326dcd 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -21,7 +21,7 @@
     line-height: 24px;
   }
   a {
-    color: @core-vibrant-blue;
+    color: #515774;
   }
   .btn {
     color: #fff;
@@ -40,8 +40,8 @@
     background: @ui-off-white;
     position: relative;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
-    margin-bottom: 40px;
-    margin-top: 40px;
+    margin-bottom: 32px;
+    margin-top: 32px;
     [purpose='pricing-tier-switch'] {
       position: absolute;
       top: -1px;
@@ -168,6 +168,13 @@
     }
 
   }
+  [purpose='logos-container'] {
+    margin-top: 40px;
+    max-width: 100%;
+    [parasails-component='logo-carousel'] {
+      margin-bottom: 32px;
+    }
+  }
   [purpose='features-list'] {
 
     p {
@@ -331,6 +338,7 @@
       color: #515774;
       border-radius: 8px;
       outline: 1px solid #E2E4EA;
+      outline-offset: -1px;
       td {
         padding: 12px 24px;
         vertical-align: middle;
@@ -353,6 +361,120 @@
       }
     }
   }
+
+
+  [purpose='features-table'] {
+    .truncated {
+      max-height: 649px;
+      overflow-y: hidden;
+      justify-content: flex-start;
+      position: relative;
+      [purpose='truncated-features-fade'] {
+        position: absolute;
+        bottom: 0px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -2.2%, #FFF 87.37%);
+        width: 100%;
+        height: 101px;
+      }
+    }
+    [purpose='show-all-features-button'] {
+      cursor: pointer;
+      color: #515774;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 150%;
+      border-radius: 16px;
+      background: #FFF;
+      padding: 8px 16px;
+      margin-bottom: 64px;
+      span {
+        height: 12px;
+        width: 12px;
+        display: inline-block;
+        background: url('/images/icon-chevron-fleet-black-75-12x12@2x.png');
+        background-size: 12px 12px;
+        background-repeat: no-repeat;
+        margin-left: 8px;
+      }
+      &:hover {
+        color: #515774;
+        background-color: #F9FAFC;
+      }
+      &.expanded {
+        span {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  [purpose='faq'] {
+    padding-top: 80px;
+    border-top: 1px solid #E2E4EA;
+    margin-bottom: 80px;
+    [purpose='faq-header'] {
+      width: 392px;
+      margin-right: 16px;
+    }
+    [purpose='accordion'] {
+      width: 640px;
+      flex-grow: 1;
+      [purpose='accordion-body'] {
+        [purpose='accordion-header'] {
+          color: #192147;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 150%;
+          p {
+            margin-bottom: 0px;
+          }
+          span {
+            margin-left: 40px;
+            color: #8B8FA2;
+            font-weight: 900;
+            transform: rotate(0deg);
+            font-size: 19px;
+          }
+          &[aria-expanded] {
+            span {
+              transform: rotate(180deg);
+            }
+          }
+          &.collapsed {
+            span {
+              transform: rotate(0deg);
+            }
+          }
+        }
+        [purpose='accordion-item'] {
+          border-bottom: 1px solid #E2E4EA;
+          margin-top: 24px;
+          padding-bottom: 12px;
+        }
+        [purpose='faq-answer'] {
+          margin-right: 40px;
+          margin-bottom: 16px;
+          a {
+            text-decoration-line: underline;
+          }
+        }
+      }
+    }
+  }
+
+  [purpose='contact-note'] {
+    margin-top: 24px;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    a {
+      text-decoration-line: underline;
+    }
+  }
   [purpose='bottom-cta'] {
     padding-top: 80px;
     padding-bottom: 120px;
@@ -463,6 +585,71 @@
         width: 100%;
       }
     }
+    [purpose='features-table'] {
+      .truncated {
+        max-height: 1480px;
+        overflow-y: hidden;
+        justify-content: flex-start;
+        position: relative;
+        [purpose='truncated-features-fade'] {
+          position: absolute;
+          bottom: 0px;
+          background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -2.2%, #FFF 87.37%);
+          width: 100%;
+          height: 101px;
+        }
+      }
+    }
+    [purpose='faq'] {
+      padding-top: 80px;
+      border-top: 1px solid #E2E4EA;
+      margin-bottom: 80px;
+      [purpose='faq-header'] {
+        width: unset;
+        margin-right: 0px;
+        margin-bottom: 16px;
+      }
+      [purpose='accordion'] {
+        width: 100%;
+        [purpose='accordion-body'] {
+          [purpose='accordion-header'] {
+            color: #192147;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 150%;
+            p {
+              margin-bottom: 0px;
+            }
+            span {
+              margin-left: 40px;
+              color: #8B8FA2;
+              font-weight: 900;
+              transform: rotate(0deg);
+              font-size: 19px;
+            }
+            &[aria-expanded] {
+              span {
+                transform: rotate(180deg);
+              }
+            }
+            &.collapsed {
+              span {
+                transform: rotate(0deg);
+              }
+            }
+          }
+          [purpose='accordion-item'] {
+            border-bottom: 1px solid #E2E4EA;
+            margin-top: 16px;
+            margin-bottom: 16px;
+          }
+        }
+      }
+    }
   }
   @media (max-width: 575px) {
     // >575px:
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 6a421123e5..d533e9d729 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -64,6 +64,9 @@
           </div>
         </div>
       </div>
+      <div purpose="logos-container" class="flex-column flex-wrap align-items-center w-100">
+        <logo-carousel></logo-carousel>
+      </div>
       <div purpose="pricing-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
         <div purpose="pricing-switch-option" class="all" :class="[pricingMode === 'all' ? 'selected' : '']" @click="clickChangePricingMode('all')">All features</div>
         <div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'IT' ? 'selected' : '']" @click="clickChangePricingMode('IT')">For IT admins</div>
@@ -73,7 +76,7 @@
     </div>
     <%// All features %>
     <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0 " :class="[[pricingMode === 'all' ? 'show' : 'hide']]">
-      <div class="d-flex flex-column justify-content-center p-0">
+      <div class="d-flex flex-column p-0" :class="[showExpandedTable ? '' : 'truncated']">
         <%// Desktop features tables %>
         <div class="d-none d-md-block">
           <% for(let category of pricingTable) {%>
@@ -123,29 +126,32 @@
         <%// Mobile features tables %>
         <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTable">
           <h5>{{category.categoryName}}</h5>
-            <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                <strong class="d-block">
-                  {{feature.name}}{{feature.comingSoon ? '*' : ''}}
-                </strong>
-                <img class="d-block" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
-              </div>
-              <div class="d-flex flex-row justify-content-between align-items-center">
-                Free
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
-              </div>
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                Premium
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-              </div>
+          <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
+              <strong class="d-block">
+                {{feature.name}}{{feature.comingSoon ? '*' : ''}}
+              </strong>
+              <img class="d-block" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
+            </div>
+            <div class="d-flex flex-row justify-content-between align-items-center">
+              Free
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
+            </div>
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
+              Premium
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
             </div>
           </div>
-          <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        </div>
+        <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        <div purpose="truncated-features-fade">
+        </div>
       </div>
+      <div class="d-flex flex-row justify-content-center"><a :class="[showExpandedTable ? 'expanded' : '']" @click="showExpandedTable = !showExpandedTable" purpose="show-all-features-button">Show all features<span></span></a></div>
     </div>
     <%// Filtered features %>
     <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" :class="[[pricingMode === 'IT' ? 'show' : 'hide']]">
-      <div class="d-flex flex-column justify-content-center p-0">
+      <div class="d-flex flex-column p-0" :class="[showExpandedTable ? '' : 'truncated']">
         <%// Desktop features tables %>
         <div class="d-none d-md-block">
           <% for(let category of pricingTableForIt) {%>
@@ -195,28 +201,30 @@
         <%// Mobile features tables %>
         <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForIt">
           <h5>{{category.categoryName}}</h5>
-            <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                <strong class="d-block">
-                  {{feature.name}}{{feature.comingSoon ? '*' : ''}}
-                </strong>
-                <img class="d-block" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
-              </div>
-              <div class="d-flex flex-row justify-content-between align-items-center">
-                Free
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
-              </div>
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                Premium
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-              </div>
+          <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center" @click="">
+              <strong class="d-block">
+                {{feature.name}}{{feature.comingSoon ? '*' : ''}}
+                <img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
+              </strong>
+            </div>
+            <div class="d-flex flex-row justify-content-between align-items-center">
+              Free
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
+            </div>
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
+              Premium
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
             </div>
           </div>
-          <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        </div>
+        <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        <div purpose="truncated-features-fade"></div>
       </div>
+      <div class="d-flex flex-row justify-content-center"><a :class="[showExpandedTable ? 'expanded' : '']" @click="showExpandedTable = !showExpandedTable" purpose="show-all-features-button">Show all features<span></span></a></div>
     </div>
     <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" :class="[[pricingMode === 'Security' ? 'show' : 'hide']]">
-      <div class="d-flex flex-column justify-content-center p-0">
+      <div class="d-flex flex-column p-0" :class="[showExpandedTable ? '' : 'truncated']">
         <%// Desktop features tables %>
         <div class="d-none d-md-block">
           <% for(let category of pricingTableForSecurity) {%>
@@ -266,37 +274,114 @@
         <%// Mobile features tables %>
         <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForSecurity">
           <h5>{{category.categoryName}}</h5>
-            <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                <strong class="d-block">
-                  {{feature.name}}{{feature.comingSoon ? '*' : ''}}
-                </strong>
-                <img class="d-block" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
-              </div>
-              <div class="d-flex flex-row justify-content-between align-items-center">
-                Free
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
-              </div>
-              <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                Premium
-                <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-              </div>
+          <div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
+              <strong class="d-block">
+                {{feature.name}}{{feature.comingSoon ? '*' : ''}}
+              </strong>
+              <img class="d-block" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" @click="clickOpenMobileTooltip(feature)" v-if="feature.description">
+            </div>
+            <div class="d-flex flex-row justify-content-between align-items-center">
+              Free
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
+            </div>
+            <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
+              Premium
+              <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
             </div>
           </div>
-          <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        </div>
+        <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
+        <div purpose="truncated-features-fade"></div>
       </div>
+      <div class="d-flex flex-row justify-content-center"><a :class="[showExpandedTable ? 'expanded' : '']" @click="showExpandedTable = !showExpandedTable" purpose="show-all-features-button">Show all features<span></span></a></div>
     </div>
     <%// Bottom call to action %>
-    <div purpose="bottom-cta" class="d-block mx-auto">
-      <h2 class="text-center">Questions?</h2>
-      <p class="text-center">We have answers to the most <a href="https://fleetdm.com/docs/get-started/faq">commonly asked questions</a>.</p>
-      <div class="d-flex flex-column flex-sm-row flex-nowrap btn-toolbar justify-content-center align-items-center" style="text-align: center" >
-        <a purpose="chat-button" style="max-width: 160px" class="mx-auto justify-self-center btn btn-block btn-md btn-primary mx-sm-2" href="/contact">
-          Talk to us
-        </a>
-        <animated-arrow-button class="btn btn-sm" href="/docs">
-          Read the docs
-        </animated-arrow-button>
+    <div purpose="faq" class="d-flex flex-column flex-md-row justify-content-center">
+      <div purpose="faq-header">
+        <h2>Frequently <br>asked questions</h2>
+      </div>
+      <div purpose="accordion" class="d-flex flex-column justify-content-start">
+        <div purpose="accordion-body">
+          <div purpose="accordion-item" class="mt-md-0">
+            <p purpose="accordion-header" id="accordion__header1" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#accordion__body1" aria-controls="accordion__body1">
+              <%
+              //  ███████╗ █████╗  ██████╗      ██████╗  ██╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔═══██╗███║
+              //  █████╗  ███████║██║   ██║    ██║   ██║╚██║
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██║▄▄ ██║ ██║
+              //  ██║     ██║  ██║╚██████╔╝    ╚██████╔╝ ██║
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝      ╚══▀▀═╝  ╚═╝
+              %>
+              Parts of the UI are unfamiliar to us. Is this too far out of my team's comfort zone?
+              <span class="fa fa-angle-down"></span>
+            </p>
+            <p purpose="faq-answer" id="accordion__body1" class="collapse" aria-labelledby="accordion__header1">
+              <%
+              //  ███████╗ █████╗  ██████╗      █████╗  ██╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔══██╗███║
+              //  █████╗  ███████║██║   ██║    ███████║╚██║
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██╔══██║ ██║
+              //  ██║     ██║  ██║╚██████╔╝    ██║  ██║ ██║
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝     ╚═╝  ╚═╝ ╚═╝
+              %>
+              You already know how to manage the operating system. In Fleet, you can focus on managing Apple, Windows and Linux; not Intune, Omnissa, and your anxiety.
+            </p>
+          </div>
+          <div purpose="accordion-item">
+            <p purpose="accordion-header" id="accordion__header2" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#accordion__body2" aria-controls="accordion__body2">
+              <%
+              //  ███████╗ █████╗  ██████╗      ██████╗ ██████╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔═══██╗╚════██╗
+              //  █████╗  ███████║██║   ██║    ██║   ██║ █████╔╝
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██║▄▄ ██║██╔═══╝
+              //  ██║     ██║  ██║╚██████╔╝    ╚██████╔╝███████╗
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝      ╚══▀▀═╝ ╚══════╝
+              %>
+              Fleet is perfect, it's just missing this one feature...
+              <span class="fa fa-angle-down"></span>
+            </p>
+            <p purpose="faq-answer" id="accordion__body2" class="collapse" aria-labelledby="accordion__header2">
+              <%
+              //  ███████╗ █████╗  ██████╗      █████╗ ██████╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔══██╗╚════██╗
+              //  █████╗  ███████║██║   ██║    ███████║ █████╔╝
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██╔══██║██╔═══╝
+              //  ██║     ██║  ██║╚██████╔╝    ██║  ██║███████╗
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝     ╚═╝  ╚═╝╚══════╝
+              %>
+              We're moving pretty fast, and we have every incentive to listen. At Fleet, everyone can contribute. We also regularly deliver customer promises, and all the code is 100% source-available.
+            </p>
+          </div>
+          <div purpose="accordion-item">
+            <p purpose="accordion-header" id="accordion__header3" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#accordion__body3" aria-controls="accordion__body3">
+              <%
+              //  ███████╗ █████╗  ██████╗      ██████╗ ██████╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔═══██╗╚════██╗
+              //  █████╗  ███████║██║   ██║    ██║   ██║ █████╔╝
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██║▄▄ ██║ ╚═══██╗
+              //  ██║     ██║  ██║╚██████╔╝    ╚██████╔╝██████╔╝
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝      ╚══▀▀═╝ ╚═════╝
+              %>
+              What actually is Fleet? Was it purpose built for this kind of thing?
+              <span class="fa fa-angle-down"></span>
+            </p>
+            <p purpose="faq-answer" id="accordion__body3" class="collapse" aria-labelledby="accordion__header3">
+              <%
+              //  ███████╗ █████╗  ██████╗      █████╗ ██████╗
+              //  ██╔════╝██╔══██╗██╔═══██╗    ██╔══██╗╚════██╗
+              //  █████╗  ███████║██║   ██║    ███████║ █████╔╝
+              //  ██╔══╝  ██╔══██║██║▄▄ ██║    ██╔══██║ ╚═══██╗
+              //  ██║     ██║  ██║╚██████╔╝    ██║  ██║██████╔╝
+              //  ╚═╝     ╚═╝  ╚═╝ ╚══▀▀═╝     ╚═╝  ╚═╝╚═════╝
+              %>
+              Fleet <a href="https://fleetdm.com/handbook/company#history">started as an osquery management server</a>. After 10 years of production osquery use at scale in huge organizations, Fleet added "write" and "execute" device management capabitilies, with all the necessary integrations to be comparable with other device management platforms like Omnissa (fka WS1, fka Airwatch), Jamf, Intune, and more. Today, Fleet is actively used as the next-gen MDM in homelabs all over the world, and at larger fleets at Epic Games, Cisco, Stripe, Fastly, Lear, and more.
+            </p>
+          </div>
+        </div>
+        <div class="d-flex flex-row justify-content-start">
+          <p purpose="contact-note">Couldn’t find an answer? <a href="/contact">Message us</a>.</p>
+        </div>
       </div>
     </div>
   </div>