From 0d16974fd633beaf7b13223387cb210e92fc9a66 Mon Sep 17 00:00:00 2001
From: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
Date: Fri, 16 Sep 2022 00:22:41 +0900
Subject: [PATCH] Update pricing.ejs (#7777)

* Update pricing.ejs

Chris and I worked on changes to pricing.ejs. Changes include:

- Changed plan descriptions to provide more context for users to identify which plan is the best for their organization.
- Fixed up styles to match Figma.

Theory being that if we present features to users for which they have little context, it's more difficult to make an informed decision. Therefore a brief summary provides more context than a few bullets.

* Update pricing.ejs

* Update pricing.ejs

* Update pricing.ejs

fixed up a line height.

* Update pricing.ejs

repositioned summary text.
---
 website/views/pages/pricing.ejs | 149 +++++++++-----------------------
 1 file changed, 39 insertions(+), 110 deletions(-)

diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 3e8cf27044..2bf481f633 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -2,136 +2,65 @@
   <div class="pb-5">
     <div
       style="max-width: 1260px"
-      class="container-fluid pt-5 px-2 px-sm-4 mx-auto"
+      class="container-fluid pt-3 px-2 px-sm-4 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>
+        <h1 style="font-size: 28px; line-height: 38px; margin-bottom: 0;" class="text-center">Choose your plan</h1>
         <p class="text-center mb-5">
-          Choose the right plan for where your organization is at today.
+          Telemetry that scales with your organization.
         </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;" 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">
+                  <div class="text-center mt-4">
                     <p class="font-weight-bold mb-0">
                       Free
                     </p>
-                    <h2 style="color: #6b6cfa">$0</h2>
-                    <p style="padding-bottom: 28px" class="mb-0">/host/month</p>
+                    <h2 style="color: #6b6cfa; line-height: 32px;">$0</h2>
+                    <p class="mb-0" style="line-height: 24px;">/host/month</p>
+                    <p style="color: #8f8ea1; font-size: 12px; line-height:20px;" class="mb-0">
+                      (Really, it's free.)
+                    </p>
+                  </div>
+                  <div style="max-width: 242px;" class="mx-auto mb-4">
+                    <p style="font-size:14px; line-height:20px;" class="text-center my-3">
+                      A flexible solution to get accurate, actionable data from your servers and workstations.
+                    </p>
                   </div>
                   <a
-                    style="max-width: 242px"
-                    class="btn btn-block btn-lg btn-info my-3 mx-auto"
+                    style="max-width: 242px; font-size:16px;"
+                    class="btn btn-block btn-lg btn-info mt-3 mb-4 mx-auto"
                     href="/try-fleet/register"
-                    >Get started</a
-                  >
-                  <div
-                    style="max-width: 242px; min-height: 150px"
-                    class="mx-auto mb-4"
-                  >
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Open source
-                    </p>
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Community supported
-                    </p>
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Bring your own production environment
-                    </p>
-                  </div>
+                    >Sign up for Sandbox</a>
                 </div>
               </div>
             </div>
             <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">
+                  <div class="text-center mt-4">
                     <p class="font-weight-bold mb-0">
                       Premium
                     </p>
-                    <h2 style="color: #6b6cfa">$2</h2>
-                    <p class="mb-0">/host/month</p>
-                    <p style="color: #8f8ea1; font-size: 13px" class="mb-0">
+                    <h2 style="color: #6b6cfa; line-height: 32px;">$2</h2>
+                    <p class="mb-0" style="line-height: 24px;">/host/month</p>
+                    <p style="color: #8f8ea1; font-size: 12px; line-height:20px;" class="mb-0">
                       (USD, billed annually at $24)
                     </p>
                   </div>
-                  <a
-                    style="max-width: 242px"
-                    class="btn btn-block btn-lg btn-info my-3 mx-auto"
-                    href="/customers/register"
-                  >
-                    Start now
-                  </a>
-                  <div
-                    style="max-width: 242px; min-height: 150px"
-                    class="position-relative mx-auto mb-4"
-                  >
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Multiple teams (RBAC)
-                    </p>
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Enterprise support
-                    </p>
-                    <p
-                      style="padding-left: 32px"
-                      class="position-relative my-3"
-                    >
-                      <img
-                        alt="a circle with a checkmark"
-                        src="/images/check-circle-16x16@2x.png"
-                        style="width: 16px; height: 16px; left: 0; top: 4px"
-                        class="position-absolute"
-                      />
-                      Self-managed agent autoupdates
+                  <div style="max-width: 242px;" class="mx-auto mb-4">
+                    <p style="font-size:14px; line-height:20px;" class="text-center my-3">
+                      An enterprise plan that delivers rich endpoint data with dedicated support to organizations at scale.
                     </p>
                   </div>
+                  <a
+                    style="max-width: 242px; font-size:16px;"
+                    class="btn btn-block btn-lg btn-info mt-3 mb-4 mx-auto"
+                    href="/customers/register">
+                    Get your license key
+                  </a>
                 </div>
               </div>
             </div>
@@ -146,7 +75,7 @@
                 <div class="card-body py-md-5 pl-3 pr-2 px-md-5">
                   <div class="row mb-4">
                     <div class="col-7">
-                      <p class="m-0" style="color: #8b8fa2">SUPPORT</p>
+                      <p class="m-0" style="font-weight: bold;">Support</p>
                     </div>
                     <div class="col-2 m-0 px-0 px-md-2">
                       <p class="text-center" style="font-weight: bold; font-size: 15px">
@@ -251,8 +180,8 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-10 col-sm-8">
-                      <p class="m-0" style="color: #8b8fa2">
-                        INVENTORY MANAGEMENT
+                      <p class="m-0" style="font-weight: bold;">
+                        Inventory management
                       </p>
                     </div>
                     <div class="col-1 col-sm-2"></div>
@@ -434,7 +363,7 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-10 col-sm-8">
-                      <p class="m-0" style="color: #8b8fa2">COLLABORATION</p>
+                      <p class="m-0" style="font-weight: bold;">Collaboration</p>
                     </div>
                     <div class="col-1 col-sm-2"></div>
                     <div class="col-1 col-sm-3"></div>
@@ -564,8 +493,8 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-7 pr-0 pr-md-2">
-                      <p class="m-0" style="color: #8b8fa2">
-                        SECURITY AND COMPLIANCE
+                      <p class="m-0" style="font-weight: bold;">
+                        Security and compliance
                       </p>
                     </div>
                     <div class="col-2"></div>
@@ -698,7 +627,7 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-7 pr-0 pr-md-2">
-                      <p class="m-0" style="color: #8b8fa2">MONITORING</p>
+                      <p class="m-0" style="font-weight: bold;">Monitoring</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>
@@ -926,7 +855,7 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-7">
-                      <p class="m-0" style="color: #8b8fa2">DATA OUTPUTS</p>
+                      <p class="m-0" style="font-weight: bold;">Data outputs</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>
@@ -989,7 +918,7 @@
                   </div>
                   <div class="row mb-4 mt-5">
                     <div class="col-7">
-                      <p class="m-0" style="color: #8b8fa2">DEPLOYMENT</p>
+                      <p class="m-0" style="font-weight: bold;">Deployment</p>
                     </div>
                     <div class="col-2"></div>
                     <div class="col-2"></div>