From a6aa2609922f9b79a7f70db5226f9a8518c42ab9 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 8 Mar 2024 10:47:03 -0600
Subject: [PATCH] Website: Add tooltips to features on the pricing page
 (#17362)

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

Changes:
 - Added tooltips to the features table on the pricing page.
---
 .../assets/images/icon-more-info-14x14@2x.png | Bin 0 -> 1045 bytes
 .../assets/js/components/modal.component.js   |   8 +-
 website/assets/js/pages/pricing.page.js       |  20 +-
 .../assets/styles/bootstrap-overrides.less    |  10 +-
 website/assets/styles/pages/pricing.less      |  58 ++-
 website/views/pages/pricing.ejs               | 368 ++++++++----------
 6 files changed, 244 insertions(+), 220 deletions(-)
 create mode 100644 website/assets/images/icon-more-info-14x14@2x.png

diff --git a/website/assets/images/icon-more-info-14x14@2x.png b/website/assets/images/icon-more-info-14x14@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff2caa6f0903dbafbcce62eddfb611a563dbe869
GIT binary patch
literal 1045
zcmV+w1nT>VP)<h;3K|Lk000e1NJLTq000~S0012b1^@s6xls%;00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1FA_xK~#7F%~nrO
z6HySK*=_{?9QqOJ!Nf?6<zhlSP;T7Vf}zz5aP$O(LcCEf#sCTB6Cf8;41wk3k#f<a
zCDFi*{RY&87!dZ2Gw*fj7P{>!#`sH`-M*do=Kt>vz&{4Y5qh34WE5FLM3e!f6fY&~
zpKAQ8B3M-m)y`&lxzg#ZwhEp6>^Kt4185~NfF2?&Y?YVZMM|_*^g4yg-)3*p^`#mi
ztn#x0aN)V-lBeaIViLMf(n#p=-=T(K=n*Cc-11wmqr#EVnK6Y}0v$HlNE2?1P#Hs;
zB2pu=CfpB;ZdfMKv|)74VH3*y+D(9~aCY~FyZPo2V&d@Yr|QE8PuJ1L+iYwGk@7t~
zecr*h&--xILmfuC_#&Qh_!ii!BHRE@zECvYN;>S`AiVaaX7YEnGWN_ZFBKyX;=Cnp
z{m7uDY8PO8t@0!ggR{9ANz0_J2Y_B#w~RHj<0kItaTtqH%0_atlh}1~q)=`91iKuO
zqv71#N|ZdE`9*yu7vHefQCC=Z9i*gPw^(bnd3dxiuYl^s1XWH(MIQ=kDoUyAmTFRT
zS}xEbO)b`nCEFWI_gigroT(&s*~fY#!az{9&db>}`eafOTEB{Hu5cX4SU!<cU*CZU
zh^6e&Isr_F4|U%!RoR4fdAA7CQTx&KFi5|0(clwfIl0gV+vVl))`ubYo4j1o-8CpC
z3~mPrX}{#qSay1^3cm@dSRxz?4vm(yJ@cd#a(qd9u(2GA$OW3r5z?e^GN|sT{09j1
z*zgDN3D>ynQc|M<Z^qp#A=Pb=&rhWwHVjEKS7ybtsOAqKRbGFsi9#)W3U&(OqavPN
zCFUsD-L|O{ger%W_V_K$nlsQg@eOdkV~0>+S`Vca_H9CRnQ11uw7CGF*lBZ}<T;0!
zBrB2a6ix$6?n>QymT6>^O-W|>OsB00buQtNQG=u6ca#tFwCK`YD%X)bnF-ePE#3zH
zPoJ9@UExv%iAq~#d{&sJ^)vX$eIj>Zng^oN*2dyA`~?i>3M<?=Q{g_ff{%PjW<f4X
zVSm0E;D(Shj54`^8-3cuE@md7HS@tLsk1wg*HsiGj8@l4piK8_xP6*t8a<Qr^zAbt
z53*<m?eqMj$IreW@Olhgn(`=d{*hk?jc4kWyRlpj%S4ZfdgN$~eNreg>|QX*2VM(1
z@tBcP3i`S5#3NI1gw?2)`9B8X>xv5*J?tVq0dvuYM}3cv*^{P@Gr#@<6otOrIMdMR
P00000NkvXXu0mjf4@T=n

literal 0
HcmV?d00001

diff --git a/website/assets/js/components/modal.component.js b/website/assets/js/components/modal.component.js
index 11e6d2fbbf..8d8e682d3c 100644
--- a/website/assets/js/components/modal.component.js
+++ b/website/assets/js/components/modal.component.js
@@ -44,11 +44,11 @@ parasails.registerComponent('modal', {
   //  ╩ ╩ ╩ ╩ ╩╩═╝
   template: `
   <transition name="modal" v-on:leave="leave" v-bind:css="false">
-    <div class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal fade" tabindex="-1" role="dialog" @click="$emit('close')">
       <div class="petticoat"></div>
-      <div class="modal-dialog custom-width position-relative" role="document" purpose="modal-dialog">
-        <div class="modal-content" purpose="modal-content">
-          <button type="button" class="position-absolute" data-dismiss="modal" aria-label="Close" purpose="modal-close-button" v-if="!hideCloseButton">&times;</button>
+      <div class="modal-dialog custom-width position-relative" role="document" purpose="modal-dialog" >
+        <div class="modal-content" purpose="modal-content" v-on:click.stop>
+          <button type="button" class="position-absolute" data-dismiss="modal" aria-label="Close" purpose="modal-close-button" v-if="!hideCloseButton" @click="$emit('close')">&times;</button>
           <slot></slot>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js
index dace9ce8f6..8ac6db17bc 100644
--- a/website/assets/js/pages/pricing.page.js
+++ b/website/assets/js/pages/pricing.page.js
@@ -4,6 +4,8 @@ parasails.registerPage('pricing', {
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
     pricingMode: 'all',
+    modal: '',
+    selectedFeature: undefined,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -13,13 +15,27 @@ parasails.registerPage('pricing', {
     //…
   },
   mounted: async function(){
-    //…
+    // Tooltips for desktop users are opened by a user hovering their cursor over them.
+    $('[data-toggle="tooltip"]').tooltip({
+      container: '#pricing',
+      trigger: 'hover focus',
+    });
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
-    //…
+    clickChangePricingMode: async function(pricingMode){
+      this.pricingMode = pricingMode;
+    },
+    clickOpenMobileTooltip: function(feature){
+      this.selectedFeature = feature;
+      this.modal = 'mobileTooltip';
+    },
+    closeModal: function() {
+      this.selectedFeature = undefined;
+      this.modal = '';
+    }
   }
 });
diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less
index c950c0c8e1..2cb92fbd3b 100644
--- a/website/assets/styles/bootstrap-overrides.less
+++ b/website/assets/styles/bootstrap-overrides.less
@@ -324,12 +324,14 @@ textarea.form-control {
 }
 
 .tooltip {
+  max-width: 326px;
   font-weight: 400;
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 12px;
   font-size: 12px;
   background-color: @core-fleet-black-75;
   opacity: 1.0;
+  margin-bottom: 4px;
   .arrow {
     display: none;
   }
@@ -337,11 +339,15 @@ textarea.form-control {
 .tooltip-inner {
   background: none;
   padding: 0;
+  text-align: left;
   p {
     margin-bottom: 0px;
-    text-align: left;
     line-height: 16px;
   }
+  a {
+    color: #FFF;
+    text-decoration: underline;
+  }
 }
 .tooltip.show {
   opacity: 1;
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index d1f1376033..7c6d4e37d3 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -269,8 +269,13 @@
     width: 110%;
   }
 
-  [purpose='features-table'] {
-    // padding-top: 80px;
+  [purpose='features-table'].hide {
+    div {
+      height: 0px;
+      opacity: 0;
+      position: relative;
+      z-index: -99;
+    }
   }
   [purpose='mobile-feature-table-section'] {
     margin-bottom: 16px;
@@ -318,6 +323,50 @@
     height: 16px;
     width: 16px;
   }
+
+  .tooltip-inner {
+    p {
+      font-size: 12px;
+      line-height: 150%;
+      color: #FFF;
+      margin-bottom: 8px;
+    }
+    a {
+      text-decoration: underline;
+      color: #FFF;
+    }
+  }
+  [purpose='mobile-tooltip'] {
+    [purpose='modal-content'] {
+      padding: 64px 24px;
+      background-color: @core-fleet-black-75;
+      border-radius: 16px;
+      border: none;
+      [purpose='modal-close-button'] {
+        color: #FFF;
+      }
+    }
+    p {
+      font-size: 14px;
+      line-height: 150%;
+      color: #FFF;
+      margin-bottom: 0px;
+    }
+    a {
+      font-size: 14px;
+      margin-top: 16px;
+      display: inline-block;
+      text-decoration: underline;
+      color: #FFF;
+    }
+  }
+  [purpose='tooltip-icon'] {
+    margin-left: 6px;
+    height: 14px;
+    cursor: pointer;
+    margin-bottom: 2px;
+  }
+
   [purpose='table-checkmark'] {
     width: 175px;
   }
@@ -517,6 +566,11 @@
         }
       }
     }
+    .modal-dialog {
+      margin: 0.5rem auto;
+      padding-left: 24px;
+      padding-right: 24px;
+    }
   }
   @media (max-width: 355px) {
     // At < 355 px width we add a linebreak to the Premium price per host.
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 262f7c97ea..59a2d62821 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -44,14 +44,14 @@
         </div>
       </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="pricingMode = 'all'">All features</div>
-        <div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="pricingMode = 'Security'">For security engineers</div>
-        <div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'IT' ? 'selected' : '']" @click="pricingMode = 'IT'">For IT admins</div>
+        <div purpose="pricing-switch-option" class="all" :class="[pricingMode === 'all' ? 'selected' : '']" @click="clickChangePricingMode('all')">All features</div>
+        <div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="clickChangePricingMode('Security')">For security engineers</div>
+        <div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'IT' ? 'selected' : '']" @click="clickChangePricingMode('IT')">For IT admins</div>
         <div purpose="pricing-tier-switch" :class="pricingMode+'-selected'"></div>
       </div>
     </div>
     <%// All features %>
-    <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="pricingMode === 'all'">
+    <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">
         <%// Desktop features tables %>
         <div class="d-none d-md-block">
@@ -79,7 +79,13 @@
               <tbody>
                 <% for( let feature of category.features){ %>
                   <tr>
-                    <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
+                    <%if(feature.description && feature.documentationUrl) {%>
+                    <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><a href="<%- feature.documentationUrl %>" target="_blank"><img class="d-inline has-link" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<p><%= feature.description +'</p>'+ [feature.documentationUrl ? '<u>Click to learn more</u>' : ''] %> "></a></td>
+                    <% } else if(feature.description) {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<%= feature.description %> "></td>
+                    <% } else {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
+                    <% } %>
                     <%if(feature.tier === 'Free') {%>
                       <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
                     <%} else {%>
@@ -94,235 +100,171 @@
           <p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
         </div>
         <%// Mobile features tables %>
-        <% for(let category of pricingTable) {%>
-          <div purpose="mobile-feature-table-section" class="d-block d-md-none">
-            <h4><%- category.categoryName %></h4>
-            <% for( let feature of category.features){ %>
-              <div purpose="mobile-features-table" class="d-flex flex-column">
-                <div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
-                  <strong><%- feature.name %><%- feature.comingSoon ? '*' : '' %></strong>
-                </div>
-                <div class="d-flex flex-row justify-content-between align-items-center">
-                  Free
-                <%if(feature.tier === 'Free') {%>
-                  <img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                <% } %>
-                </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-feature-table-section" class="d-block d-md-none" v-for="category in pricingTable">
+          <h4>{{category.categoryName}}</h4>
+            <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>
           </div>
-        <% }%>
           <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
       </div>
     </div>
     <%// Filtered features %>
-    <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else-if="pricingMode === 'Security'">
+    <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">
-        <%// Desktop filtered features tables %>
+        <%// Desktop features tables %>
         <div class="d-none d-md-block">
-          <table purpose="pricing-categories-table" class="table" v-for="(category, index) in pricingTableForSecurity">
-           <thead>
-              <tr>
-                <td><h4>{{category.categoryName}}</h4></td>
-                <td class="text-center" v-if="index === 0">
-                  <strong>Free</strong>
-                </td>
-                <td v-else></td>
-                <td class="text-center" v-if="index === 0">
-                  <strong>Premium</strong>
-                </td>
-                <td v-else></td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="feature in category.features">
-                <td purpose="feature-name">{{feature.name}}{{feature.comingSoon ? '*' : ''}}</td>
-                  <td purpose="table-checkmark" v-if="feature.tier === 'Free'"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
-                  <td purpose="table-checkmark" v-else></td>
-                <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
-              </tr>
-            </tbody>
-          </table>
+          <% for(let category of pricingTableForIt) {%>
+            <table purpose="pricing-categories-table" class="table">
+             <thead>
+                <tr>
+                  <td><h4><%- category.categoryName %></h4></td>
+                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <td class="text-center">
+                    <strong>Free</strong>
+                  </td>
+                  <%}else {%>
+                  <td ></td>
+                  <%}%>
+                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <td class="text-center">
+                    <strong>Premium</strong>
+                  </td>
+                  <%}else {%>
+                  <td ></td>
+                  <%}%>
+                </tr>
+              </thead>
+              <tbody>
+                <% for( let feature of category.features){ %>
+                  <tr>
+                    <%if(feature.description && feature.documentationUrl) {%>
+                    <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><a href="<%- feature.documentationUrl %>" target="_blank"><img class="d-inline has-link" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<p><%= feature.description +'</p>'+ [feature.documentationUrl ? '<u>Click to learn more</u>' : ''] %> "></a></td>
+                    <% } else if(feature.description) {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<%= feature.description %> "></td>
+                    <% } else {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
+                    <% } %>
+                    <%if(feature.tier === 'Free') {%>
+                      <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                    <%} else {%>
+                      <td purpose="table-checkmark"></td>
+                    <%}%>
+                    <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                  </tr>
+                <% }%>
+              </tbody>
+            </table>
+          <% }%>
           <p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
         </div>
-        <%// Mobile filtered features tables %>
-          <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForSecurity">
-            <h4>{{category.categoryName}}</h4>
-              <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>{{feature.name}}{{ feature.comingSoon ? '*' : ''}}</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>
+        <%// Mobile features tables %>
+        <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForIt">
+          <h4>{{category.categoryName}}</h4>
+            <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>
+                  {{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>
           </div>
           <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
       </div>
     </div>
-    <%// IT features %>
-    <div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else-if="pricingMode === 'IT'">
+    <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">
-        <%// Desktop filtered features tables %>
+        <%// Desktop features tables %>
         <div class="d-none d-md-block">
-          <table purpose="pricing-categories-table" class="table" v-for="(category, index) in pricingTableForIt">
-           <thead>
-              <tr>
-                <td><h4>{{category.categoryName}}</h4></td>
-                <td class="text-center" v-if="index === 0">
-                  <strong>Free</strong>
-                </td>
-                <td v-else></td>
-                <td class="text-center" v-if="index === 0">
-                  <strong>Premium</strong>
-                </td>
-                <td v-else></td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="feature in category.features">
-                <td purpose="feature-name">{{feature.name}}{{feature.comingSoon ? '*' : ''}}</td>
-                  <td purpose="table-checkmark" v-if="feature.tier === 'Free'"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
-                  <td purpose="table-checkmark" v-else></td>
-                <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
-              </tr>
-            </tbody>
-          </table>
+          <% for(let category of pricingTableForSecurity) {%>
+            <table purpose="pricing-categories-table" class="table">
+             <thead>
+                <tr>
+                  <td><h4><%- category.categoryName %></h4></td>
+                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <td class="text-center">
+                    <strong>Free</strong>
+                  </td>
+                  <%}else {%>
+                  <td ></td>
+                  <%}%>
+                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <td class="text-center">
+                    <strong>Premium</strong>
+                  </td>
+                  <%}else {%>
+                  <td ></td>
+                  <%}%>
+                </tr>
+              </thead>
+              <tbody>
+                <% for( let feature of category.features){ %>
+                  <tr>
+                    <%if(feature.description && feature.documentationUrl) {%>
+                    <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><a href="<%- feature.documentationUrl %>" target="_blank"><img class="d-inline has-link" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<p><%= feature.description +'</p>'+ [feature.documentationUrl ? '<u>Click to learn more</u>' : ''] %> "></a></td>
+                    <% } else if(feature.description) {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %><img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" data-html="true" title="<%= feature.description %> "></td>
+                    <% } else {%>
+                      <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
+                    <% } %>
+                    <%if(feature.tier === 'Free') {%>
+                      <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                    <%} else {%>
+                      <td purpose="table-checkmark"></td>
+                    <%}%>
+                    <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                  </tr>
+                <% }%>
+              </tbody>
+            </table>
+          <% }%>
           <p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
         </div>
-        <%// Mobile filtered features tables %>
-          <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForIt">
-            <h4>{{category.categoryName}}</h4>
-              <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>{{feature.name}}{{ feature.comingSoon ? '*' : ''}}</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>
+        <%// Mobile features tables %>
+        <div purpose="mobile-feature-table-section" class="d-block d-md-none" v-for="category in pricingTableForSecurity">
+          <h4>{{category.categoryName}}</h4>
+            <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>
           </div>
           <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
       </div>
     </div>
-    <!-- <%// FAQ %>
-    <div style="color: #192147;" class="d-flex flex-column justify-content-center pt-5 px-0 mx-auto">
-      <h2 class="text-center mb-4">FAQ</h2>
-      <div style="max-width: 800px;" class="px-0 d-flex flex-column justify-content-center mb-5 mx-auto">
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question1" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer1" aria-controls="faq__answer1">
-            Is Fleet MIT licensed?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer1" class="collapse" aria-labelledby="faq__question1">
-            We have different licenses for portions of our software which are noted in the LICENSE file in our docs. The majority of Fleet is MIT licensed. Paid features require a license key.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question2" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer2" aria-controls="faq__answer2">
-            What is your commitment to open source stewardship?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <ol id="faq__answer2" purpose="faq-list" class="collapse" aria-labelledby="faq__question2">
-            <li>When a feature is free and open source we won't move that feature to a paid tier. Features might be removed from the open source codebase in other cases, for example when combining features from multiple tiers into one new feature.</li>
-            <li>The majority of new capabilities added to Fleet will benefit all users, not just customers.</li>
-            <li>We won't introduce features into the open source codebase with a fixed delay; if a feature is planned to land in both it will be released simultaneously in both.</li>
-            <li>We will always release and open source all tests that we have for any open source feature.</li>
-            <li>The free version of Fleet is enterprise ready.</li>
-            <li>The open source codebase will not contain any artificial limits on the number of hosts, users, size, or performance.</li>
-            <li>The majority of new features contributed by Fleet Device Management Inc will be open source.</li>
-            <li>The product will be available for download without leaving an email address or logging in.</li>
-            <li>We will always allow you to benchmark the performance of Fleet.  (Fleet also <a href="https://fleetdm.com/handbook/engineering#rituals" target="_blank">load tests the platform before every release</a>, with increasingly ambitious targets.  The scale of realtime reporting supported by Fleet has increased 5,000% since 2019.  Today, Fleet deployments supports 500,000 devices, and counting. The company is committed to driving this number to 1M+, and beyond.)</li>
-          </ol>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question3" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer3" aria-controls="faq__answer3">
-            How do I contact Fleet for support?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer3" class="collapse" aria-labelledby="faq__question3">
-            Find out how to contact support in <a href="/handbook/customers#contacting-fleet">our handbook</a>.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question4" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer4" aria-controls="faq__answer3">
-            What if we choose not to renew?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer4" class="collapse" aria-labelledby="faq__question4">
-            If you opt not to renew Fleet Premium, you can continue using Fleet Free (same code base, just unconfigure the license key.)
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question5" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer5" aria-controls="faq__answer4">
-            Can we buy a licence to access premium features with reduced support for a reduced cost?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer5" class="collapse" aria-labelledby="faq__question5">
-            We aren’t able to sell licenses and support separately.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question6" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer6" aria-controls="faq__answer5">
-            Do you offer pricing for ephemeral hosts which may scale up or down?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer6" class="collapse" aria-labelledby="faq__question6">
-            For now, the number of hosts is the maximum cap of distinct agents enrolled at any given time.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question7" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer7" aria-controls="faq__answer8">
-            When run locally, what resources does the Fleet app typically consume on an individual instance, and when run in HA, at high volume? And how is latency on an individual instance vs clustered deployment?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer7" class="collapse" aria-labelledby="faq__question7">
-            Like any modern application, Fleet scales horizontally.  The biggest potential bottleneck for Fleet is the number of hosts being monitored, so that's where we've devoted the most attention when <a href="https://github.com/fleetdm/fleet/blob/19816cee1a261589c54f50e7b965c12e2186ae48/docs/infrastructure/faq.md#has-anyone-stress-tested-fleet-how-many-clients-can-the-fleet-server-handle">testing</a>. The largest number of hosts we've had a customer ask about was 350,000, for all of the production servers and employee laptops of a publicly traded company.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question8" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer8" aria-controls="faq__answer10">
-            Where's the data stored?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer8" class="collapse" aria-labelledby="faq__question8">
-            Since Fleet is self-managed, some metadata is stored wherever it is deployed (e.g. Amazon, Azure, Google, your own data center, hybrid cloud, anywhere).  That's done using a MySQL database, but the bulk of the data is not stored there — instead, it flows directly into a tool like Splunk or ElasticSearch. You can send that information to any of Fleet's supported log destinations.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question9" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer9" aria-controls="faq__answer11">
-            Can I fork Fleet's source code and build upon it myself to create my own features?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer9" class="collapse" aria-labelledby="faq__question9">
-            Anyone is free to fork the project. We are always interested to hear feedback, and we are happy to take pull requests and ideas upstream any time we can.
-          </p>
-        </div>
-        <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
-          <p id="faq__question10" style="cursor: pointer;" class="pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer10" aria-controls="faq__answer12">
-            Can I buy support or services separate from Fleet Premium?
-            <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
-          </p>
-          <p id="faq__answer10" class="collapse" aria-labelledby="faq__question10">
-            The only way we are able to partner as a business to provide support and build new open source and paid features is through customers purchasing Fleet Premium.
-          </p>
-        </div>
-      </div>
-    </div> -->
     <%// Bottom call to action %>
     <div purpose="bottom-cta" class="d-block mx-auto">
       <h2 class="text-center">Questions?</h2>
@@ -337,5 +279,11 @@
       </div>
     </div>
   </div>
+  <modal purpose="mobile-tooltip" v-if="modal === 'mobileTooltip'" @close="closeModal()">
+    <div>
+      <p class="mb-0">{{selectedFeature.description}}</p>
+      <a :href="selectedFeature.documentationUrl" target="_blank" v-if="selectedFeature.documentationUrl">Learn more</a>
+    </div>
+  </modal>
 </div>
 <%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>