Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Website: Update pricing page (#11910)

Browse Source 
Changes:
- Updated the pricing page to match the latest wireframes.
- Updated the features in `pricing-features-table.yml`
- Updated `build-static-content.js` to remove support for the Ultimate
tier in `pricing-features-table.yml`

---------

Co-authored-by: Mike Thomas <mthomas@fleetdm.com>
This commit is contained in:
Eric
2023-05-25 12:40:19 +09:00
committed by GitHub
co-authored by Mike Thomas
parent 012a633866
commit 02bb987b22
5 changed files with 391 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files
handbook/product/pricing-features-table.yml
+13 -13
View File
@@ -18,6 +18,9 @@
- name: Zero-touch setup for macOS computers
tier: Premium
comingSoon: false
- name: Safely execute remote scripts
tier: Premium
comingSoon: true
- name: End-user macOS update reminders (via Nudge)
tier: Premium
comingSoon: false
@@ -50,9 +53,6 @@
- name: Phone and video call support
tier: Premium
comingSoon: false
- name: Platinum support
tier: Ultimate
comingSoon: false
- categoryName: Inventory management
features:
- name: Secure REST API
@@ -90,9 +90,6 @@
- name: Scope transparency
tier: Free
comingSoon: false
- name: Multiple teams
tier: Premium
comingSoon: false
- categoryName: Security and compliance
features:
- name: Single sign on (SSO, SAML)
@@ -107,9 +104,12 @@
- name: Role-based access control
tier: Free
comingSoon: false
- name: Audit log
tier: Premium
- name: Ship logs to Splunk, Snowflake, and more
tier: Free
comingSoon: false
- name: Programable audit log
tier: Premium
comingSoon: true
- name: Just-in-time (JIT) provisioning
tier: Premium
comingSoon: false
@@ -164,7 +164,7 @@
comingSoon: false
- categoryName: Deployment
features:
- name: Self-managed
- name: Self-hosted
tier: Free
comingSoon: false
- name: Deployment tools (Helm, Terraform)
@@ -173,15 +173,15 @@
- name: Configure osquery startup flags remotely
tier: Free
comingSoon: false
- name: Autoupdate osquery agents
- name: Auto-update osquery agents
tier: Free
comingSoon: false
- name: Self-managed autoupdate registry
- name: Self-managed auto-update registry
tier: Premium
comingSoon: false
- name: Manage osquery extensions remotely
tier: Premium
comingSoon: false
- name: Managed Cloud
tier: Ultimate
comingSoon: false
tier: Premium
comingSoon: false
website/assets/js/pages/pricing.page.js
Vendored
-25
View File
@@ -3,11 +3,7 @@ parasails.registerPage('pricing', {
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
formData: {},
estimatedCost: '', // For pricing calculator
estimatedUltimateCostPerHost: 7,
displaySecurityPricingMode: false, // For pricing mode switch
estimatedUltimateCostPerHostHasBeenUpdated: false,
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@@ -29,26 +25,5 @@ parasails.registerPage('pricing', {
window.HubSpotConversations.widget.open();
}
},
updateEstimatedTotal: function() {
let total =
(7 * (this.formData.macos ? this.formData.macos : 0)) +
(7 * (this.formData.windows ? this.formData.windows : 0)) +
(2 * (this.formData.linux ? this.formData.linux : 0)) +
(2 * (this.formData.other ? this.formData.other : 0));
let totalNumberOfDevices =
(1 * (this.formData.macos ? this.formData.macos : 0)) +
(1 * (this.formData.windows ? this.formData.windows : 0)) +
(1 * (this.formData.linux ? this.formData.linux : 0)) +
(1 * (this.formData.other ? this.formData.other : 0));
this.estimatedCost = Number(total);
if(totalNumberOfDevices < 1){
this.estimatedUltimateCostPerHost = 7;
this.estimatedUltimateCostPerHostHasBeenUpdated = false;
} else {
this.estimatedUltimateCostPerHost = this.estimatedCost / totalNumberOfDevices;
this.estimatedUltimateCostPerHostHasBeenUpdated = true;
}
},
}
});
website/assets/styles/pages/pricing.less
Vendored
+251 -189
View File
@@ -1,12 +1,5 @@
#pricing {
[purpose='page-content'] {
padding-left: 0px;
padding-right: 0px;
color: #192147;
max-width: 1024px;
}
background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 5.79%);
h1, p {
color: #192147;
}
@@ -15,15 +8,6 @@
font-size: 32px;
line-height: 38px;
}
h3 {
}
[purpose='subtitle'] {
color: #8B8FA2;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
h4 {
color: #515774;
font-weight: 500;
@@ -31,6 +15,7 @@
line-height: 24px;
}
p {
color: #515774;
font-weight: 400;
font-size: 16px;
line-height: 24px;
@@ -41,13 +26,20 @@
.btn {
color: #fff;
}
[purpose='page-content'] {
padding-left: 40px;
padding-right: 40px;
color: #192147;
max-width: 1120px;
}
[purpose='pricing-switch'] {
width: 280px;
cursor: pointer;
border: 1px solid #E2E4EA;
border-radius: 28px;
background: #F9FAFC;
background: #EBF2F5;
position: relative;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
[purpose='pricing-tier-switch'] {
position: absolute;
top: 0px;
@@ -71,73 +63,194 @@
.security-selected {
transform: translateX(140px);
}
}
[purpose='features'] {
padding-top: 80px;
}
[purpose='pricing-tier-card'] {
[purpose='free-tier-card'] {
padding: 40px;
border-radius: 15px;
margin-right: 12px;
margin-left: 12px;
[purpose='pricing-tier-title'] {
text-align: center;
margin-bottom: 40px;
h2 {
font-weight: 700;
font-size: 24px;
line-height: 20px;
color: #192147;
margin-bottom: 12px;
}
h3 {
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #8B8FA2;
margin-bottom: 24px;
}
p {
color: #ff5c83;
margin-bottom: 8px;
}
a {
text-decoration: none;
font-size: 12px;
vertical-align: super;
color: #ff5c83;
}
.show-estimated-price {
color: @core-vibrant-blue;
}
}
margin-right: 6px;
width: 380px;
strong {
color: #192147;
font-size: 16px;
line-height: 20px;
}
}
[purpose='premium-and-cloud-cards'] {
width: 66%;
}
[purpose='premium-tier-card'] {
padding: 40px;
border-radius: 15px;
// margin-right: 12px;
margin-left: 6px;
strong {
color: #192147;
font-size: 16px;
line-height: 20px;
}
}
[purpose='premium-cloud-card'] {
border-radius: 15px;
margin-top: 12px;
margin-left: 6px;
[purpose='cloud-banner-image'] {
width: 100%;
height: 217px;
background: url('/images/homepage-fleet-cloud-banner-600x340@2x.png');
background-size: cover;
background-repeat: no-repeat;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
}
[purpose='premium-cloud-text'] {
padding: 40px;
border-left: 1px solid #E2E4EA;
h3 {
font-weight: 700;
font-size: 20px;
line-height: 28px;
margin-bottom: 14px;
}
p {
margin-bottom: 14px;
font-size: 14px;
line-height: 20px;
}
[purpose='animated-arrow-button-red'] {
display: inline;
line-height: 24px;
padding-right: 40px;
cursor: pointer;
position: relative;
width: fit-content;
min-width: 125px;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
color: @core-fleet-black;
text-decoration: none;
&:after {
content: url('/images/arrow-right-red-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: -6px;
left: 75%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
}
&:hover:after {
left: 82%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
}
}
}
[purpose='pricing-tier-title'] {
text-align: left;
h1 {// Price e.g., $0
font-weight: 700;
font-size: 32px;
line-height: 45px;
color: #192147;
}
h2 {// Tier name
font-weight: 700;
font-size: 20px;
line-height: 28px;
color: #192147;
margin-bottom: 4px;
}
h3 {// for "Unlimited hosts"
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #515774;
margin-bottom: 24px;
}
h4 { // "Starting at"
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #192147;
vertical-align: baseline;
margin-bottom: 0px;
padding-right: 4px;
}
strong { // "/host/month"
padding-left: 4px;
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #192147;
}
p {
color: #ff5c83;
margin-bottom: 8px;
}
}
[purpose='contact-sales-link'] {
text-align: center;
margin-top: 8px;
margin-bottom: 32px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
a {
text-decoration: underline;
color: #ff5c83;
cursor: pointer;
}
}
[purpose='fleet-community-card'] {
max-width: 570px;
margin-left: auto;
margin-right: auto;
[purpose='features-list'] {
p {
font-size: 14px;
margin-bottom: 12px;
text-indent: -24px;
padding-left: 24px;
color: #515774;
}
p::before {
content: '';
display: inline-block;
background: url('/images/icon-checkmark-green-16x16@2x.png');
background-size: cover;
margin-right: 8px;
height: 14px;
width: 14px;
}
}
[purpose='card-button'] {
font-size: 16px;
padding: 15px;
margin-top: 8px;
max-width: 540px;
margin-bottom: 32px;
color: #FFF;
}
[purpose='chat-button'], [purpose='card-button'], [purpose='table-button'] {
[purpose='chat-button'], [purpose='card-button'] {
position: relative;
}
[purpose='card-button']::before, [purpose='chat-button']::before, [purpose='table-button']::before {
[purpose='card-button']::before, [purpose='chat-button']::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
content: ' ';
@@ -154,68 +267,16 @@
left: 160px;
width: 110%;
}
input[type='number'] {
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: textfield;
line-height: 1;
}
[purpose='enterprise-calculator'] {
background: #F9FAFC;
border: 1px solid #E2E4EA;
border-radius: 8px;
margin: 24px 0 32px;
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
[purpose='features-table'] {
padding-top: 80px;
}
[purpose='enterprise-calculator-row'] {
p {
font-size: 14px;
margin-bottom: 0px;
line-height: 20px;
}
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
[purpose='enterprise-calculator-input'] {
padding: 8px;
width: 80px;
border-radius: 4px;
height: 36px;
text-align: end;
margin-bottom: 8px;
border: 1px solid #E2E4EA;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
[purpose='exterprise-calculator-result'] {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #E2E4EA;
h3 {
font-weight: 700;
font-size: 18px;
line-height: 20px;
}
p {
margin-bottom: 0px;
}
}
[purpose='mobile-feature-table-section'] {
margin-bottom: 16px;
h4 {
font-weight: 700;
font-size: 16px;
line-height: 24px;
font-size: 20px;
line-height: 28px;
color: #192147;
margin-bottom: 20px;
}
@@ -243,17 +304,9 @@
}
}
[purpose='table-button'] {
padding: 4px 26px;
font-size: 14px;
font-weight: 700;
border-radius: 4px;
background-color: @core-vibrant-red;
border: none;
margin-bottom: 8px;
margin-top: 4px;
[purpose='premium-price-linebreak'] {
display: none;
}
[purpose='checkmark'] {
height: 16px;
width: 16px;
@@ -309,86 +362,88 @@
}
}
[purpose='features-list'] {
min-height: ;
p {
margin-bottom: 16px;
text-indent: -24px;
padding-left: 24px;
color: #515774;
}
p::before {
content: '';
display: inline-block;
background: url('/images/icon-checkmark-green-16x16@2x.png');
background-size: cover;
margin-right: 8px;
height: 14px;
width: 14px;
}
}
[purpose='faq-list'] {
padding-left: 20px;
li {
margin-bottom: 16px;
padding-left: 8px;
}
}
[purpose='cta-button'] {
color: #192147;
.btn-animated-arrow-red();
&::before {
left: 84%;
}
&:hover::before {
left: 87%;
}
}
[purpose='pricing-table-category']:not(:first-of-type) {
margin-top: 48px;
}
@media (max-width: 1200px) {
@media (min-width: 1400px) {
// > 1400px width: the page has no left or right padding
[purpose='page-content'] {
padding-left: 40px;
padding-right: 40px;
max-width: 1160px;
padding-left: 0px;
padding-right: 0px;
}
}
@media (max-width: 991px) {
[purpose='fleet-community-card'] {
max-width: 100%;
margin-left: unset;
margin-right: unset;
}
}
@media (max-width: 767px) {
[purpose='table-button'] {
padding: 4px 8px;
}
[purpose='pricing-tier-card'] {
padding: 32px;
margin-left: 0;
margin-right: 0;
}
}
[purpose='animated-arrow-button'] {
color: #192147;
.btn-animated-arrow-red();
}
@media (max-width: 575px) {
// >992 width:
// - The pages padding is reduced to 24px
// - Tier cards shift to a column view and have 100% width;
[purpose='page-content'] {
padding-left: 20px;
padding-right: 20px;
padding-left: 24px;
padding-right: 24px;
}
.contact-msg {
max-width: 300px;
margin-left: auto;
margin-right: auto;
[purpose='free-tier-card'] {
width: 100%;
margin-right: 0px;
margin-bottom: 12px;
}
[purpose='premium-tier-card'] {
margin-left: 0px;
}
[purpose='premium-cloud-card'] {
margin-left: 0px;
}
[purpose='premium-and-cloud-cards'] {
width: 100%;
}
}
@media (max-width: 575px) {
// >575px:
// - The Premium Cloud card switches to a column layout
// - The picing tier cards have their padding reduced to 24px
[purpose='hero-text'] {
padding-right: -5px;
padding-left: -5px;
}
[purpose='pricing-tier-card'] {
padding: 32px;
[purpose='page-content'] {
padding-left: 24px;
padding-right: 24px;
}
[purpose='enterprise-calculator-input'] {
width: 60px;
[purpose='free-tier-card'] {
padding: 24px;
}
[purpose='premium-tier-card'] {
padding: 24px;
}
[purpose='premium-cloud-card'] {
height: unset;
[purpose='cloud-banner-image'] {
border-top-right-radius: 15px;
border-bottom-left-radius: 0px;
}
}
[purpose='premium-cloud-text'] {
border-left: none;
padding: 24px;
}
[purpose='pricing-categories-table'] {
margin-bottom: 40px;
@@ -397,7 +452,7 @@
color: #192147;
font-weight: 700;
font-size: 14px;
line-height: 20px;
line-height: 21px;
margin-bottom: 0px;
}
tr {
@@ -420,5 +475,12 @@
}
}
}
@media (max-width: 355px) {
// At < 355 px width we add a linebreak to the Premium price per host.
[purpose='premium-price-linebreak'] {
display: block;
}
}
}
website/scripts/build-static-content.js
Vendored
+1 -1
View File
@@ -683,7 +683,7 @@ module.exports = {
}
if(!feature.tier) { // Throw an error if a feature is missing a `tier`.
throw new Error('Could not build pricing table config from pricing-features-table.yml. The "'+feature.name+'" feature is missing a "tier". To resolve, add a "tier" (either "Free" or "Premium") to this feature.');
} else if(!_.contains(['Free', 'Premium', 'Ultimate'], feature.tier)){ // Throw an error if a feature's `tier` is not "Free", "Premium", or "Ultimate".
} else if(!_.contains(['Free', 'Premium'], feature.tier)){ // Throw an error if a feature's `tier` is not "Free" or "Premium".
throw new Error('Could not build pricing table config from pricing-features-table.yml. The "'+feature.name+'" feature has an invalid "tier". to resolve, change the value of this features "tier" (currently set to '+feature.tier+') to be either "Free" or "Premium".');
}
if(feature.comingSoon === undefined) { // Throw an error if a feature is missing a `comingSoon` value
website/views/pages/pricing.ejs
Vendored
+126 -164
View File
@@ -11,188 +11,152 @@
<div purpose="pricing-switch-option" :class="[displaySecurityPricingMode ? 'selected' : '']">Security</div>
<div purpose="pricing-tier-switch" :class="[displaySecurityPricingMode ? 'security-selected' : '']"></div>
</div>
<h4 class="pb-4 mb-4 text-center" v-if="displaySecurityPricingMode">Always cross-platform, always secure. You will always have control over read/write privileges.</h4>
<h4 class="pb-4 mb-4 text-center" v-else>You will always have control over your machines regardless of platform.</h4>
<div purpose="pricing-tiers" class="d-flex flex-column justify-content-center">
<div class="d-flex flex-md-row flex-column card-deck justify-content-center align-items-center align-items-md-stretch p-0 w-100 mx-auto">
<%// Fleet Premium %>
<div purpose="pricing-tier-card" class="card ml-md-0 mb-4 w-100 w-md-auto">
<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>
<h3>Unlimited hosts</h3>
</div>
<div class="d-flex flex-column align-items-center">
<h1>$0</h1>
</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-and-cloud-cards" class="d-flex flex-column">
<%// Fleet Premium tier card %>
<div purpose="premium-tier-card" class="card d-flex flex-column">
<div purpose="pricing-tier-title">
<h2>Fleet Premium</h2>
<h3>For orgs with multiple compliance standards</h3>
<p>Up to 500 hosts<a href="#additional-hosts">†</a></p>
<h2>$3500/month</h2>
<div class="d-flex flex-sm-row flex-column justify-content-between">
<div class="d-flex flex-column justify-content-start">
<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>
</div>
</div>
</div>
<div>
<p><strong>Includes</strong></p>
<%// Premium security features%>
<div purpose="features-list" v-if="displaySecurityPricingMode">
<p>Single-Sign On (SSO)</p>
<p>Audit log</p>
<p>24 hour support for PO</p>
<p>Unlimited device groups (teams)</p>
<p>Employee/device mapping</p>
<p>Organizational GitOps</p>
<p>Versionable queries and config</p>
<p>JIT provisioning</p>
<p>Vulnerability scores (CISA)</p>
<p>Query performance monitoring</p>
<p>Vulnerability automation destination</p>
</div>
<%// Premium IT features%>
<div purpose="features-list" v-else>
<p>macOS MDM</p>
<p>Windows MDM*</p>
<p>Automatic enrollment (zero touch)</p>
<p>Safely execute remote scripts</p>
<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>
<div class="justify-self-end mt-auto">
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto" @click="clickOpenChatWidget()">Talk to sales</a>
</div>
</div>
<%// Fleet Ultimate %>
<div purpose="pricing-tier-card" class="card mr-md-0 mb-4 w-100 w-md-auto">
<div purpose="pricing-tier-title">
<h2>Fleet Ultimate</h2>
<h3>For orgs with large deployments</h3>
<p>Over 500 hosts<a href="#additional-hosts">†</a></p>
<h2>$<span :class="[estimatedUltimateCostPerHostHasBeenUpdated ? 'show-estimated-price' : '']">{{ estimatedUltimateCostPerHost.toFixed(2) }}</span>/host/month</h2>
</div>
<div>
<p><strong>All of Premium plus</strong></p>
<%// Ultimate security features %>
<div purpose="features-list" v-if="displaySecurityPricingMode">
<p>Platinum support</p>
<p>Granular role-based access</p>
<p>Self-hosted or managed-cloud</p>
</div>
<%// Ultimate IT features %>
<div purpose="features-list" v-else>
<p>24/7 support</p>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</p>
<p>Dedicated Slack channel</p>
<p>IDP integration</p>
<p>Managed software library</p>
<p>Migration Pro Plan</p>
<p>Daily use assistance</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>
<div purpose="enterprise-calculator">
<div class="d-flex flex-column px-4 py-3">
<p><strong>Ultimate calculator</strong></p>
<div purpose="enterprise-calculator-row">
<p>macOS devices</p>
<input purpose="enterprise-calculator-input" class="form-control" min="0" type="number" placeholder="0" v-model.trim="formData.macos" @input="updateEstimatedTotal()">
</div>
<div purpose="enterprise-calculator-row">
<p>Windows devices</p>
<input purpose="enterprise-calculator-input" class="form-control" min="0" type="number" placeholder="0" v-model.trim="formData.windows" @input="updateEstimatedTotal()">
</div>
<div purpose="enterprise-calculator-row">
<p>Linux devices</p>
<input purpose="enterprise-calculator-input" class="form-control" min="0" type="number" placeholder="0" v-model.trim="formData.linux" @input="updateEstimatedTotal()">
</div>
<div purpose="enterprise-calculator-row">
<p>Servers, containers (k8s), IoT devices</p>
<input purpose="enterprise-calculator-input" class="form-control" min="0" type="number" placeholder="0" v-model.trim="formData.other" @input="updateEstimatedTotal()">
</div>
<div purpose="exterprise-calculator-result" class="d-flex flex-end flex-md-row flex-column align-items-md-center align-items-end justify-content-between">
<p class="mb-2">Estimated cost:</p>
<h3>${{estimatedCost ? estimatedCost.toFixed(2) : ' --- '}}/month</h3>
</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>
<div class="justify-self-end">
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto" @click="clickOpenChatWidget()">Talk to sales</a>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</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>
</div>
</div>
</div>
<div>
<%// Fleet Community edition %>
<div purpose="pricing-tier-card" class="card mx-md-auto">
<div purpose="fleet-community-card" class="d-flex flex-column justify-content-between">
<div purpose="pricing-tier-title">
<h2>Fleet Community Edition</h2>
<h3>For small teams</h3>
<p>Unlimited devices</p>
<h2>Free forever</h2>
</div>
<div>
<div class="mx-md-auto d-flex flex-row justify-content-md-center justify-content-start">
<div purpose="bottom-card-features" class="d-flex flex-column justify-content-center align-items-start">
<p class="text-left align-self-start"><strong>Includes</strong></p>
<%// Community edition security features %>
<div purpose="features-list" class="d-flex flex-md-row flex-column justify-content-between" v-if="displaySecurityPricingMode">
<div class="pr-0 pr-md-5">
<p>Manage osquery</p>
<p>Detect vulnerabilities</p>
<p>Software inventory</p>
<p>Device health report</p>
<p>Scheduled queries</p>
</div>
<div>
<p>Community support (Slack)</p>
<p>Standard query library (SQL)</p>
<p>YAML config and GitOps included</p>
<p>Additional log destinations</p>
</div>
</div>
<%// Community edition IT features %>
<div purpose="features-list" class="d-flex flex-md-row flex-column justify-content-between" v-else>
<div class="pr-0 pr-md-4">
<p>Manual enrollment</p>
<p>Support for BYOD</p>
<p>Enforce device configurations</p>
</div>
<div>
<p>Native OS updates</p>
<p>macOS commands via CLI</p>
<p>Audit transparency</p>
</div>
</div>
</div>
</div>
</div>
<div>
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto" href="/try-fleet/register">Try it out</a>
</div>
<%// Fleet Premium Cloud card %>
<div purpose="premium-cloud-card" class="card d-flex flex-sm-row flex-column">
<div class="w-sm-50 w-100" purpose="cloud-banner-image"></div>
<div purpose="premium-cloud-text" class="w-sm-50 w-100 d-flex flex-column justify-content-between">
<h3>Premium Cloud</h3>
<%// IT pricing mode text%>
<p v-if="!displaySecurityPricingMode">Focus on device management, and leave your Fleet server management to us.</p>
<%// Security pricing mode text%>
<p v-else>Focus on reducing your risk, and leave your Fleet server management to us.</p>
<a purpose="animated-arrow-button-red" @click="clickOpenChatWidget()">Talk to sales</a>
</div>
</div>
</div>
<p style="color: #515774; font-size: 14px; scroll-margin-top: 200px;" class="mt-4" id="additional-hosts"><span style="vertical-align: super;">†</span> Additional hosts beyond the contracted quantity will be invoiced at the agreed upon per-host rate as specified in a contract or order form.</p>
</div>
</div>
<div purpose="features" class="d-flex flex-column justify-content-center mx-auto px-0">
<%// Features table %>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0">
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-center p-0">
<div class="d-flex flex-column flex-wrap justify-content-center p-0">
<%// Desktop features tables %>
<div class="d-none d-sm-block">
<table purpose="pricing-categories-table" class="table" v-for="(category, index) in pricingTable">
<thead>
<tr>
<td><h4>{{category.categoryName}}</h4></td>
<td v-if="index === 0">
<strong>Community</strong>
<a purpose="table-button" class="btn btn-info d-none d-sm-inline-block" href="/try-fleet/register">
Try it out
</a>
<td class="text-center" v-if="index === 0">
<strong>Free</strong>
</td>
<td v-else></td>
<td v-if="index === 0">
<td class="text-center" v-if="index === 0">
<strong>Premium</strong>
<a purpose="table-button" class="btn btn-info d-none d-sm-inline-block" @click="clickOpenChatWidget()">
Talk to sales
</a>
</td>
<td v-else></td>
<td v-if="index === 0">
<strong>Ultimate</strong>
<a purpose="table-button" class="btn btn-info d-none d-sm-inline-block" @click="clickOpenChatWidget()">
Talk to sales
</a>
</td>
<td v-else></td>
</tr>
@@ -202,13 +166,13 @@
<td purpose="feature-name" class="w-50">{{feature.name}}{{feature.comingSoon ? '*' : ''}}</td>
<td v-if="feature.tier === 'Free'"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td v-else></td>
<td v-if="feature.tier !== 'Ultimate'"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td v-else></td>
<td><img class="mx-auto" purpose="checkmark" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
</tr>
</tbody>
</table>
<p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
</div>
<%// Mobile features tables %>
<div purpose="mobile-feature-table-section" class="d-block d-sm-none" v-for="(category, index) in pricingTable">
<h4>{{category.categoryName}}</h4>
<div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
@@ -216,22 +180,19 @@
<strong>{{feature.name}}{{feature.comingSoon ? '*' : ''}}</strong>
</div>
<div class="d-flex flex-row justify-content-between align-items-center">
Community Edition
Free
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
</div>
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
Premium
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier !== 'Ultimate'">
</div>
<div class="d-flex flex-row justify-content-between align-items-center">
Ultimate
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
<p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
</div>
</div>
<%// FAQ %>
<div style="color: #192147;" class="d-flex flex-column justify-content-center pt-5 px-0 mx-auto">
<h2 class="text-center mb-4">FAQ</h2>
<div style="max-width: 800px;" class="px-0 d-flex flex-column justify-content-center mb-5 mx-auto">
@@ -335,13 +296,14 @@
</div>
</div>
</div>
<%// Bottom call to action %>
<div purpose="bottom-cta" class="d-block mx-auto">
<h2 class="text-center">Still have questions?</h2>
<div class="d-flex flex-column flex-sm-row flex-nowrap btn-toolbar justify-content-center" style="text-align: center" >
<a purpose="chat-button" style="max-width: 250px" class="mx-auto justify-self-center btn btn-block btn-md btn-primary my-3 mx-sm-2" href="https://fleetdm.com/company/contact">
Ask us anything
</a>
<a style="max-width: 250px" class="btn btn-block btn-lg btn-white my-3 mx-sm-2 mx-auto" purpose="animated-arrow-button" @click="clickOpenChatWidget()">
<a style="max-width: 250px" class="btn btn-block btn-lg btn-white my-3 mx-sm-2 mx-auto" purpose="cta-button" @click="clickOpenChatWidget()">
Talk to an expert
</a>
</div>