mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
Website: Update pricing page (#14273)
Closes: https://github.com/fleetdm/confidential/issues/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>
This commit is contained in:
Eric
GitHub
parent
4caa05d131
commit
17d0b7d56b
4 changed files with 91 additions and 120 deletions
|
|
@ -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
|
||||
|
||||
##############################################################################################
|
||||
|
|
|
|||
2
website/assets/js/pages/pricing.page.js
vendored
2
website/assets/js/pages/pricing.page.js
vendored
|
|
@ -3,7 +3,7 @@ parasails.registerPage('pricing', {
|
|||
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
||||
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
||||
data: {
|
||||
displaySecurityPricingMode: false,// For pricing mode switch
|
||||
pricingMode: 'all',
|
||||
},
|
||||
|
||||
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
||||
|
|
|
|||
84
website/assets/styles/pages/pricing.less
vendored
84
website/assets/styles/pages/pricing.less
vendored
|
|
@ -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;
|
||||
|
|
@ -53,15 +55,23 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,16 +79,21 @@
|
|||
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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -166,7 +181,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #515774;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
h4 { // "Starting at"
|
||||
font-weight: 400;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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'] {
|
||||
|
|
@ -255,7 +270,7 @@
|
|||
}
|
||||
|
||||
[purpose='features-table'] {
|
||||
padding-top: 80px;
|
||||
// padding-top: 80px;
|
||||
}
|
||||
[purpose='mobile-feature-table-section'] {
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -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:
|
||||
|
|
@ -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%;
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
124
website/views/pages/pricing.ejs
vendored
124
website/views/pages/pricing.ejs
vendored
|
|
@ -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">
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue