From 17d0b7d56b8030a88a4f707a0669403455824815 Mon Sep 17 00:00:00 2001 From: Eric Date: Fri, 6 Oct 2023 18:29:55 -0500 Subject: [PATCH] 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> --- CODEOWNERS | 1 - website/assets/js/pages/pricing.page.js | 2 +- website/assets/styles/pages/pricing.less | 84 ++++++++++++--- website/views/pages/pricing.ejs | 124 ++++------------------- 4 files changed, 91 insertions(+), 120 deletions(-) diff --git a/CODEOWNERS b/CODEOWNERS index 4a7bc630f41f..b952d8777f0f 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -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 ############################################################################################## diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js index 442a96eb7b83..3b88afbbc95f 100644 --- a/website/assets/js/pages/pricing.page.js +++ b/website/assets/js/pages/pricing.page.js @@ -3,7 +3,7 @@ parasails.registerPage('pricing', { // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { - displaySecurityPricingMode: false,// For pricing mode switch + pricingMode: 'all', }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 941b9ba27824..76e9d34fdbce 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -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; diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index 9224b7c24fed..9e3f90dc40b9 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -3,134 +3,55 @@

- Select the plan based on your needs + Compare plans and pricing

-
-
IT
-
Security
-
-
- <%// Fleet Free tier card %>
-
-
-

Free

+
+
+

Community

Unlimited hosts

-
-
-

$0

+
+

$0

/ host
/ month +
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 tier card %> +
-
-
+
+

Premium

Unlimited hosts

-
-
-
-

Starting at

$7.00

/ host
/ month +
+

From

$7.00

/ host
/ month
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

-
-
-

24x7 support

-

Self-managed or private cloud hosted

-

Dedicated Slack channel

-

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

-

Integrate with Munki, Chef, and Puppet

-

Enterprise-ready MDM migration

-
-
- - <%// 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

-
-
-

24x7 support

-

Self-managed or private cloud hosted

-

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

-
- +

Have a large deployment? contact sales.

+
+
All features
+
For security engineers
+
For IT admins
+
+
<%// IT-focused features table %> -
-

Compare plans

+
<%// Desktop IT-focused features tables %>
@@ -199,8 +120,7 @@
<%// Security-focused features table %> -
-

Compare plans

+
<%// Desktop security-focused features tables %>