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.
This commit is contained in:
Mike Thomas 2022-09-16 00:22:41 +09:00 committed by GitHub
parent c743b6ae08
commit 0d16974fd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>