From 02bb987b22c5a96628eaaee4b16d46fc55110b1d Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 24 May 2023 22:40:19 -0500 Subject: [PATCH] Website: Update pricing page (#11910) 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 --- handbook/product/pricing-features-table.yml | 26 +- website/assets/js/pages/pricing.page.js | 25 -- website/assets/styles/pages/pricing.less | 440 +++++++++++--------- website/scripts/build-static-content.js | 2 +- website/views/pages/pricing.ejs | 290 ++++++------- 5 files changed, 391 insertions(+), 392 deletions(-) diff --git a/handbook/product/pricing-features-table.yml b/handbook/product/pricing-features-table.yml index f82e182724..9858361bac 100644 --- a/handbook/product/pricing-features-table.yml +++ b/handbook/product/pricing-features-table.yml @@ -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 \ No newline at end of file diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js index 95a5d8a80b..e46e227f45 100644 --- a/website/assets/js/pages/pricing.page.js +++ b/website/assets/js/pages/pricing.page.js @@ -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; - } - - }, } }); diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 20a3a93feb..7666cbad89 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -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; + } + } + } diff --git a/website/scripts/build-static-content.js b/website/scripts/build-static-content.js index 442f06e207..47166eaa1a 100644 --- a/website/scripts/build-static-content.js +++ b/website/scripts/build-static-content.js @@ -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 diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index c143ed8f04..a3ee53b953 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -11,188 +11,152 @@
Security
-

Always cross-platform, always secure. You will always have control over read/write privileges.

-

You will always have control over your machines regardless of platform.

-
-
- <%// Fleet Premium %> -
+
+ + <%// Fleet Free tier card %> +
+
+
+
+

Free

+

Unlimited hosts

+
+
+

$0

+
+
+
+ Get started free +

Includes:

+ + <%// IT features (free) %> +
+

Opt-in macOS MDM

+

REST API and webhooks

+

YAML configuration

+

Enforce device configurations

+

Run MDM commands via CLI

+

End user transparency

+

Community support (MacAdmins Slack)

+

Self-hosted

+
+ + <%// Security features (free) %> +
+

Manage osquery at enterprise scale

+

Monitor query performance

+

REST API and webhooks

+

YAML configuration

+

Detect vulnerabilities

+

Software inventory

+

Device health report

+

Ship logs to Splunk, Snowflake, and more

+

Self-hosted

+
+
+
+ + <%// Fleet Premium tier card %> +
-

Fleet Premium

-

For orgs with multiple compliance standards

-

Up to 500 hosts†

-

$3500/month

+
+
+

Premium

+

Unlimited hosts

+
+
+
+

Starting at

$7.00

/ host
/ month +
+
+
-

Includes

- <%// Premium security features%> -
-

Single-Sign On (SSO)

-

Audit log

-

24 hour support for PO

-

Unlimited device groups (teams)

-

Employee/device mapping

-

Organizational GitOps

-

Versionable queries and config

-

JIT provisioning

-

Vulnerability scores (CISA)

-

Query performance monitoring

-

Vulnerability automation destination

-
- <%// Premium IT features%> -
-

macOS MDM

-

Windows MDM*

-

Automatic enrollment (zero touch)

-

Safely execute remote scripts

+ Get started +

For organizations with large deployments, contact sales.

+
+

All of Free plus:

+ + <%// IT features (Premium) %> +
+
+

Zero-touch MDM for macOS

+

Windows MDM with Autopilot*

+

Safely execute remote scripts*

Programmable remediations*

Disk encryption key escrow

macOS update via Nudge

Remote lock and wipe

-
-
- Talk to sales -
-
- <%// Fleet Ultimate %> -
-
-

Fleet Ultimate

-

For orgs with large deployments

-

Over 500 hosts†

-

${{ estimatedUltimateCostPerHost.toFixed(2) }}/host/month

-
-
-

All of Premium plus

- <%// Ultimate security features %> -
-

Platinum support

-

Granular role-based access

-

Self-hosted or managed-cloud

-
- <%// Ultimate IT features %> -
-

24/7 support

+
+

24x7 support

Dedicated Slack channel

-

IDP integration

-

Managed software library

-

Migration Pro Plan

-

Daily use assistance

+

End user sign-in with Okta, AD, or any IDP

+

Integrate with Munki, Chef, and Puppet

+

Enterprise-ready MDM migration

-
-
-

Ultimate calculator

-
-

macOS devices

- -
-
-

Windows devices

- -
-
-

Linux devices

- -
-
-

Servers, containers (k8s), IoT devices

- -
-
-

Estimated cost:

-

${{estimatedCost ? estimatedCost.toFixed(2) : ' --- '}}/month

-
+ + <%// Security features (Premium) %> +
+
+

GitOps-ready

+

CIS for macOS and Windows

+

Custom vulnerability reporting

+

Phased rollouts (canaries)

+

Single-Sign On (SSO)

+

Version history for queries and config

+

Granular role-based access

+

Target and configure specific device groups

+

Programable audit log

+

Vulnerability scores (EPSS and CVSS)

+

CISA known exploited vulnerabilities

-
-
- Talk to sales +
+

24x7 support

+

Sync user roles from Okta, AD, or any IDP

+

Just-in-time (JIT) provisioning

+

Aggregate insights for groups of devices

+

Agent auto-updates

+

Manage osquery extensions remotely

+
+
-
-
- <%// Fleet Community edition %> -
-
-
-

Fleet Community Edition

-

For small teams

-

Unlimited devices

-

Free forever

-
-
-
-
-

Includes

- <%// Community edition security features %> -
-
-

Manage osquery

-

Detect vulnerabilities

-

Software inventory

-

Device health report

-

Scheduled queries

-
-
-

Community support (Slack)

-

Standard query library (SQL)

-

YAML config and GitOps included

-

Additional log destinations

-
-
- <%// Community edition IT features %> -
-
-

Manual enrollment

-

Support for BYOD

-

Enforce device configurations

-
-
-

Native OS updates

-

macOS commands via CLI

-

Audit transparency

-
-
-
-
-
- + + <%// Fleet Premium Cloud card %> +
+
+
+

Premium Cloud

+ <%// IT pricing mode text%> +

Focus on device management, and leave your Fleet server management to us.

+ <%// Security pricing mode text%> +

Focus on reducing your risk, and leave your Fleet server management to us.

+ Talk to sales
+
-

† Additional hosts beyond the contracted quantity will be invoiced at the agreed upon per-host rate as specified in a contract or order form.

-
+ + <%// Features table %> +

Compare plans

-
+
+ <%// Desktop features tables %>
- - - - @@ -202,13 +166,13 @@ - - - +

{{category.categoryName}}

 - Community - - Try it out - + + Free + Premium - - Talk to sales - - - Ultimate - - Talk to sales -
{{feature.name}}{{feature.comingSoon ? '*' : ''}} checkmark checkmarkcheckmarkcheckmark
+

* Coming soon

+ <%// Mobile features tables %>

{{category.categoryName}}

@@ -216,22 +180,19 @@ {{feature.name}}{{feature.comingSoon ? '*' : ''}}
- Community Edition + Free checkmark
Premium - checkmark -
-
- Ultimate checkmark
-

* Coming soon

+

* Coming soon

+ <%// FAQ %>

FAQ

@@ -335,13 +296,14 @@
+ <%// Bottom call to action %>

Still have questions?

Ask us anything - + Talk to an expert