From 80454f19c8c8d3e24a548b74a72a470e85df3934 Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Thu, 21 Oct 2021 23:46:44 -0500
Subject: [PATCH] Update pricing page styles (#2600)

* adjust pricing columns and padding

* Update pricing.ejs
---
 website/views/pages/pricing.ejs | 176 ++++++++++++++++----------------
 1 file changed, 88 insertions(+), 88 deletions(-)

diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 78402c7ebb..8f8df1d7cb 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -2,16 +2,16 @@
   <div class="pb-5">
     <div
       style="max-width: 1260px"
-      class="container-fluid pt-5 px-4 mx-auto"
+      class="container-fluid pt-5 px-2 px-sm-4 mx-auto"
     >
-      <section id="pricing-section" class="container-fluid d-flex flex-column justify-content-center pt-5 mx-auto">
+      <section id="pricing-section" class="container-fluid px-1 d-flex flex-column justify-content-center pt-5 mx-auto">
         <h1 class="text-center">Choose your plan</h1>
         <p class="text-center mb-5">
           Choose the right plan for where your organization is at today.
         </p>
         <div class="d-flex justify-content-center p-0">
           <div class="container-fluid d-flex flex-wrap justify-content-center p-0">
-            <div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
+            <div style="max-width: 384px;" class="w-100 mx-md-3 mx-0">
               <div style="border-radius: 15px" class="card mb-4">
                 <div class="card-body">
                   <div style="min-height: 125px" class="text-center mt-4">
@@ -71,7 +71,7 @@
                 </div>
               </div>
             </div>
-            <div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
+            <div style="max-width: 384px;" class="w-100 mx-0 mx-md-3">
               <div style="border-radius: 15px" class="card mb-4">
                 <div class="card-body">
                   <div style="min-height: 125px" class="text-center mt-4">
@@ -142,24 +142,24 @@
           <div class="container-fluid d-flex flex-column flex-sm-row flex-wrap justify-content-center p-0">
             <div style="max-width: 810px" class="w-100 px-1" >
               <div style="border-radius: 15px" class="card mb-4">
-                <div class="card-body py-md-5 pl-4 px-md-5">
+                <div class="card-body py-md-5 pl-3 pr-2 px-md-5">
                   <div class="row mb-4">
-                    <div class="col-8">
+                    <div class="col-7">
                       <p class="m-0" style="color: #8b8fa2">SUPPORT</p>
                     </div>
-                    <div class="col-2 m-0 px-0 px-sm-1 px-md-2">
+                    <div class="col-2 m-0 px-0 px-md-2">
                       <p class="text-center" style="font-weight: bold; font-size: 15px">
                         <span class="d-none d-md-inline">Fleet </span>Free
                       </p>
                     </div>
-                    <div class="col-2 m-0 px-0 px-sm-1 px-md-2 ">
+                    <div class="col-3 m-0 pr-2 px-0 px-md-2 ">
                       <p class="text-center" style="font-weight: bold; font-size: 15px">
                         <span class="d-none d-md-inline">Fleet </span>Premium
                       </p>
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -175,7 +175,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -185,7 +185,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -201,7 +201,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -211,7 +211,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -220,7 +220,7 @@
                       <p class="ml-2 my-0">Unlimited email support (confidential)</p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -230,7 +230,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -239,7 +239,7 @@
                       <p class="ml-2 my-0">Phone and video call support</p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -249,16 +249,16 @@
                     </div>
                   </div>
                   <div class="row mb-4 mt-5">
-                    <div class="col-8">
+                    <div class="col-10 col-sm-8">
                       <p class="m-0" style="color: #8b8fa2">
                         INVENTORY MANAGEMENT
                       </p>
                     </div>
-                    <div class="col-2"></div>
-                    <div class="col-2"></div>
+                    <div class="col-1 col-sm-2"></div>
+                    <div class="col-1 col-sm-2"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -274,7 +274,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -284,7 +284,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -300,7 +300,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -310,7 +310,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -326,7 +326,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -336,7 +336,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -352,7 +352,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -362,7 +362,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -380,7 +380,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -390,7 +390,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -401,7 +401,7 @@
                       </p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -411,7 +411,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -422,7 +422,7 @@
                       </p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -436,10 +436,10 @@
                       <p class="m-0" style="color: #8b8fa2">COLLABORATION</p>
                     </div>
                     <div class="col-1 col-sm-2"></div>
-                    <div class="col-1 col-sm-2"></div>
+                    <div class="col-1 col-sm-3"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -455,7 +455,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -465,7 +465,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -481,7 +481,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -491,7 +491,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -507,7 +507,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -517,7 +517,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -533,7 +533,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -543,7 +543,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -552,7 +552,7 @@
                       <p class="ml-2 my-0">Multiple teams</p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -562,7 +562,7 @@
                     </div>
                   </div>
                   <div class="row mb-4 mt-5">
-                    <div class="col-8 pr-0 pr-md-2">
+                    <div class="col-7 pr-0 pr-md-2">
                       <p class="m-0" style="color: #8b8fa2">
                         SECURITY AND COMPLIANCE
                       </p>
@@ -571,7 +571,7 @@
                     <div class="col-2"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -587,7 +587,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -597,7 +597,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -613,7 +613,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -623,7 +623,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -641,7 +641,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -651,7 +651,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -667,7 +667,7 @@
                           style="width: 16px; height: 16px"
                         />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -677,14 +677,14 @@
                     </div>
                   </div>
                   <div class="row mb-4 mt-5">
-                    <div class="col-8 pr-0 pr-md-2">
+                    <div class="col-7 pr-0 pr-md-2">
                       <p class="m-0" style="color: #8b8fa2">MONITORING</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -700,7 +700,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -710,7 +710,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -728,7 +728,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -738,7 +738,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -754,7 +754,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -764,7 +764,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -780,7 +780,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -790,7 +790,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -808,7 +808,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -818,7 +818,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -827,7 +827,7 @@
                       <p class="ml-2 my-0">Self-remediation*†</p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -837,14 +837,14 @@
                     </div>
                   </div>
                   <div class="row mb-4 mt-5">
-                    <div class="col-8">
+                    <div class="col-7">
                       <p class="m-0" style="color: #8b8fa2">DATA OUTPUTS</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -862,7 +862,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -872,7 +872,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -888,7 +888,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -898,7 +898,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -914,7 +914,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -924,14 +924,14 @@
                     </div>
                   </div>
                   <div class="row mb-4 mt-5">
-                    <div class="col-8">
+                    <div class="col-7">
                       <p class="m-0" style="color: #8b8fa2">DEPLOYMENT</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -947,7 +947,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -957,7 +957,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -975,7 +975,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -985,7 +985,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -1001,7 +1001,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -1011,7 +1011,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -1027,7 +1027,7 @@
                         style="width: 16px; height: 16px"
                       />
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -1037,7 +1037,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -1046,7 +1046,7 @@
                       <p class="ml-2 my-0">Self-hosted autoupdate registry†</p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -1056,7 +1056,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -1067,7 +1067,7 @@
                       </p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"
@@ -1077,7 +1077,7 @@
                     </div>
                   </div>
                   <div class="row mb-3">
-                    <div class="col-8 d-flex">
+                    <div class="col-7 d-flex">
                       <img
                         alt="a bullet point ellipse"
                         src="/images/ellipse-6x6@2x.png"
@@ -1088,7 +1088,7 @@
                       </p>
                     </div>
                     <div class="col-2"></div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <img
                         alt="a check mark"
                         class="mx-auto"