Skip to content

Commit

Permalink
Website: Update pricing page (#14273)
Browse files Browse the repository at this point in the history 
Closes: fleetdm/confidential#3521

Changes:
- Added an "all features" option to the pricing mode switch on
fleetdm.com/pricing
- updated the styles and layout of the pricing page to match the latest
wireframes.

---------

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
  • Loading branch information
@eashaw @mike-j-thomas
eashaw and mike-j-thomas authored Oct 6, 2023
1 parent 4caa05d commit 17d0b7d
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 120 deletions.
1 change: 0 additions & 1 deletion CODEOWNERS
View file
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ go.mod @fleetdm/go
#
# (see website/config/custom.js for DRIs of other paths not listed here)
##############################################################################################
/website/views/pages/pricing.ejs @mikermcneil # « CEO is DRI for pricing
/handbook/company/pricing-features-table.yml @mikermcneil # « CEO is current DRI for features table

##############################################################################################
Expand Down
2 changes: 1 addition & 1 deletion website/assets/js/pages/pricing.page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ parasails.registerPage('pricing', {
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
displaySecurityPricingMode: false,// For pricing mode switch
pricingMode: 'all',
},

// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
Expand Down
84 changes: 68 additions & 16 deletions website/assets/styles/pages/pricing.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@
max-width: 1120px;
}
[purpose='pricing-switch'] {
width: 280px;
width: 600px;
cursor: pointer;
border: 1px solid #E2E4EA;
border-radius: 28px;
background: #EBF2F5;
background: @ui-off-white;
position: relative;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
margin-bottom: 40px;
margin-top: 40px;
[purpose='pricing-tier-switch'] {
position: absolute;
top: 0px;
Expand All @@ -53,32 +55,45 @@
transition: 0.25s all;
}
[purpose='pricing-switch-option'] {
padding: 16px;
width: 140px;
padding: 16px 40px;
text-align: center;
cursor: pointer;
z-index: 3;
user-select: none;
white-space: nowrap;
}
.security-selected {
transform: translateX(140px);
width: 251px;
transform: translateX(167px);
}
.it-selected {
width: 183px;
transform: translateX(416px);
}
.all-selected {
width: 167px;
}
}

[purpose='free-tier-card'] {
padding: 40px;
border-radius: 15px;
margin-right: 6px;
width: 380px;
width: 50%;
strong {
color: #192147;
color: @core-fleet-black-75;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
}

[purpose='price-dollar-sign'] {
vertical-align: text-bottom;
font-size: 24px;
}
[purpose='premium-card'] {
width: 66%;
width: 50%;
}
[purpose='premium-tier-card'] {
padding: 40px;
Expand Down Expand Up @@ -147,7 +162,7 @@
}
}
[purpose='pricing-tier-title'] {
text-align: left;
text-align: center;
h1 {// Price e.g., $0
font-weight: 700;
font-size: 32px;
Expand All @@ -166,7 +181,7 @@
font-size: 14px;
line-height: 20px;
color: #515774;
margin-bottom: 24px;
margin-bottom: 4px;
}
h4 { // "Starting at"
font-weight: 400;
Expand All @@ -179,10 +194,10 @@
}
strong { // "/host/month"
padding-left: 4px;
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #192147;
color: @core-fleet-black-75;
font-weight: 400;
}
p {
color: #ff5c83;
Expand All @@ -192,7 +207,7 @@
[purpose='contact-sales-link'] {
text-align: center;
margin-top: 8px;
margin-bottom: 32px;
margin-bottom: 0px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
Expand Down Expand Up @@ -230,7 +245,7 @@
font-size: 16px;
padding: 15px;
margin-top: 8px;
margin-bottom: 32px;
margin-bottom: 0px;
color: #FFF;
}
[purpose='chat-button'], [purpose='card-button'] {
Expand All @@ -255,7 +270,7 @@
}

[purpose='features-table'] {
padding-top: 80px;
// padding-top: 80px;
}
[purpose='mobile-feature-table-section'] {
margin-bottom: 16px;
Expand Down Expand Up @@ -388,6 +403,12 @@
padding-left: 0px;
padding-right: 0px;
}
[purpose='premium-tier-card'] {
padding: 40px 140px;
}
[purpose='free-tier-card'] {
padding: 40px 140px;
}
}
@media (max-width: 991px) {
// >992 width:
Expand All @@ -401,6 +422,12 @@
width: 100%;
margin-right: 0px;
margin-bottom: 12px;
[purpose='card-button'] {
margin-bottom: 8px;
}
}
[purpose='contact-sales-link'] {
margin-bottom: 12px;
}
[purpose='premium-card'] {
width: 100%;
Expand All @@ -410,6 +437,29 @@
}
}

@media (max-width: 767px) {
[purpose='pricing-switch'] {
width: 100%;
[purpose='pricing-tier-switch'] {
height: 56px;
left: 0px;
}
[purpose='pricing-switch-option'] {
height: 56px;
}
.security-selected {
width: 100%;
transform: translateY(56px);
}
.it-selected {
width: 100%;
transform: translateY(113px);
}
.all-selected {
width: 100%;
}
}
}
@media (max-width: 575px) {
// >575px:
// - The Premium Cloud card switches to a column layout
Expand All @@ -424,9 +474,11 @@
}
[purpose='free-tier-card'] {
padding: 24px;
justify-content: center;
}
[purpose='premium-tier-card'] {
padding: 24px;
justify-content: center;
}
[purpose='pricing-categories-table'] {
margin-bottom: 40px;
Expand Down
124 changes: 22 additions & 102 deletions website/views/pages/pricing.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,134 +3,55 @@
<div class="px-0 d-flex flex-column justify-content-center pt-5 mx-auto">
<div purpose="hero-text">
<h2 class="text-center mb-5">
Select the plan based on your needs
Compare plans and pricing
</h2>
</div>
<div purpose="pricing-switch" class="d-flex flex-row justify-content-center mx-auto mb-5" @click="displaySecurityPricingMode = !displaySecurityPricingMode">
<div purpose="pricing-switch-option" :class="[!displaySecurityPricingMode ? 'selected' : '']">IT</div>
<div purpose="pricing-switch-option" :class="[displaySecurityPricingMode ? 'selected' : '']">Security</div>
<div purpose="pricing-tier-switch" :class="[displaySecurityPricingMode ? 'security-selected' : '']"></div>
</div>
<div purpose="pricing-tiers" class="d-flex flex-column flex-lg-row justify-content-center">

<%// Fleet Free tier card %>
<div purpose="free-tier-card" class="card d-flex flex-column">
<div purpose="pricing-tier-title">
<div class="d-flex flex-row justify-content-between">
<div class="d-flex flex-column justify-content-start">
<h2>Free</h2>
<div class="d-flex flex-row justify-content-center">
<div class="d-flex flex-column justify-content-center">
<h2>Community</h2>
<h3>Unlimited hosts</h3>
</div>
<div class="d-flex flex-column align-items-center">
<h1>$0</h1>
<div class="d-flex flex-row align-items-center">
<h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
</div>
</div>
</div>
</div>
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto" href="/try-fleet">Get started free</a>
<p class="mb-4 mt-4 pt-1"><strong>Includes:</strong></p>
<%// IT features (free) %>
<div purpose="features-list" v-if="!displaySecurityPricingMode">
<p>Opt-in macOS MDM</p>
<p>REST API and webhooks</p>
<p>YAML configuration</p>
<p>Enforce device configurations</p>
<p>Run MDM commands via CLI</p>
<p>End user transparency</p>
<p>Community support (MacAdmins Slack)</p>
<p>Self-hosted</p>
</div>
<%// Security features (free) %>
<div purpose="features-list" v-else>
<p>Manage osquery at enterprise scale</p>
<p>Monitor query performance</p>
<p>REST API and webhooks</p>
<p>YAML configuration</p>
<p>Detect vulnerabilities</p>
<p>Software inventory</p>
<p>Device health report</p>
<p>Ship logs to Splunk, Snowflake, and more</p>
<p>Self-hosted</p>
</div>
</div>
<div purpose="premium-card" class="d-flex flex-column">
<%// Fleet Premium tier card %>
<%// Fleet Premium tier card %>
<div purpose="premium-card" class="d-flex flex-column justify-content-center">
<div purpose="premium-tier-card" class="card d-flex h-100 flex-column">
<div purpose="pricing-tier-title">
<div class="d-flex flex-sm-row flex-column justify-content-between">
<div class="d-flex flex-column justify-content-start">
<div class="d-flex flex-column justify-content-between">
<div class="d-flex flex-column justify-content-center">
<h2>Premium</h2>
<h3>Unlimited hosts</h3>
</div>
<div class="d-flex flex-row align-items-center">
<div class="d-flex flex-row align-items-center ">
<h4>Starting at </h4><h1 class="mb-2">$7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
<div class="d-flex flex-row align-items-center justify-content-center">
<h4>From </h4><h1 class="mb-2"><span purpose="price-dollar-sign">$</span>7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
</div>
</div>
</div>
</div>
<div>
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/customers/register">Get started</a>
<p purpose="contact-sales-link">For organizations with large deployments, <a @click="clickOpenChatWidget()">contact sales</a>.</p>
</div>
<p class="mb-4"><strong>All of Free plus:</strong></p>
<%// IT features (Premium) %>
<div class="d-flex flex-sm-row flex-column align-items-around" v-if="!displaySecurityPricingMode">
<div class="w-sm-50 w-100 mr-3" purpose="features-list">
<p>Zero-touch MDM for macOS</p>
<p>Windows MDM with Autopilot*</p>
<p>Safely execute remote scripts*</p>
<p>Programmable remediations*</p>
<p>Disk encryption key escrow</p>
<p>macOS update via Nudge</p>
<p>Remote lock and wipe</p>
</div>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</p>
<p>Self-managed or private cloud hosted</p>
<p>Dedicated Slack channel</p>
<p>End user sign-in with Okta, AD, or any IDP</p>
<p>Integrate with Munki, Chef, and Puppet</p>
<p>Enterprise-ready MDM migration</p>
</div>
</div>
<%// Security features (Premium) %>
<div class="d-flex flex-sm-row flex-column align-items-around" v-else>
<div class="w-sm-50 w-100" purpose="features-list">
<p>GitOps-ready</p>
<p>CIS for macOS and Windows</p>
<p>Custom vulnerability reporting</p>
<p>Phased rollouts (canaries)</p>
<p>Single-Sign On (SSO)</p>
<p>Version history for queries and config</p>
<p>Granular role-based access</p>
<p>Target and configure specific device groups</p>
<p>Programable audit log</p>
<p>Vulnerability scores (EPSS and CVSS)</p>
<p>CISA known exploited vulnerabilities</p>
</div>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</p>
<p>Self-managed or private cloud hosted</p>
<p>Sync user roles from Okta, AD, or any IDP</p>
<p>Just-in-time (JIT) provisioning</p>
<p>Aggregate insights for groups of devices</p>
<p>Agent auto-updates</p>
<p>Manage osquery extensions remotely</p>
</div>
<p purpose="contact-sales-link">Have a large deployment? <a @click="clickOpenChatWidget()">contact sales</a>.</p>
</div>
</div>
</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-tier-switch" :class="pricingMode+'-selected'"></div>
</div>
</div>
<%// IT-focused features table %>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="!displaySecurityPricingMode">
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="pricingMode === 'all' || pricingMode === 'it'">
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop IT-focused features tables %>
<div class="d-none d-md-block">
Expand Down Expand Up @@ -199,8 +120,7 @@
</div>
</div>
<%// Security-focused features table %>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else>
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else-if="pricingMode === 'security'">
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop security-focused features tables %>
<div class="d-none d-md-block">
Expand Down

0 comments on commit 17d0b7d

Please sign in to comment.