From 3b78b153b6a21e3336636231c00270d0b406c4e3 Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 3 Oct 2023 15:32:44 -0500 Subject: [PATCH 1/8] Update pricing page --- website/assets/js/pages/pricing.page.js | 2 +- website/assets/styles/pages/pricing.less | 54 +++++++--- website/views/pages/pricing.ejs | 120 ++++------------------- 3 files changed, 64 insertions(+), 112 deletions(-) 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..95501189a26e 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: #F8F8F8; 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,7 +79,7 @@ padding: 40px; border-radius: 15px; margin-right: 6px; - width: 380px; + width: 50%; strong { color: #192147; font-size: 16px; @@ -78,7 +88,7 @@ } [purpose='premium-card'] { - width: 66%; + width: 50%; } [purpose='premium-tier-card'] { padding: 40px; @@ -147,7 +157,7 @@ } } [purpose='pricing-tier-title'] { - text-align: left; + text-align: center; h1 {// Price e.g., $0 font-weight: 700; font-size: 32px; @@ -166,7 +176,7 @@ font-size: 14px; line-height: 20px; color: #515774; - margin-bottom: 24px; + margin-bottom: 4px; } h4 { // "Starting at" font-weight: 400; @@ -255,7 +265,7 @@ } [purpose='features-table'] { - padding-top: 80px; + // padding-top: 80px; } [purpose='mobile-feature-table-section'] { margin-bottom: 16px; @@ -410,6 +420,28 @@ } } + @media (max-width: 768px) { + [purpose='pricing-switch'] { + width: 250px; + [purpose='pricing-tier-switch'] { + height: 56px; + } + [purpose='pricing-switch-option'] { + height: 56px; + } + .security-selected { + width: 250px; + transform: translateY(56px); + } + .it-selected { + width: 250px; + transform: translateY(113px); + } + .all-selected { + width: 250px; + } + } + } @media (max-width: 575px) { // >575px: // - The Premium Cloud card switches to a column layout diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index 9224b7c24fed..0d12a25c955f 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -3,70 +3,35 @@

- 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
@@ -75,62 +40,18 @@ 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

-
- -
+
+
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 %>
From ea1f5dae65a7e955326672948b36a37f4e65a543 Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 3 Oct 2023 18:31:44 -0500 Subject: [PATCH 2/8] update breakpoint --- website/assets/styles/pages/pricing.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 95501189a26e..b14ef77e7b45 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -420,7 +420,7 @@ } } - @media (max-width: 768px) { + @media (max-width: 767px) { [purpose='pricing-switch'] { width: 250px; [purpose='pricing-tier-switch'] { From 79fd7b87bcd808162af8187df4ae53fa185931b1 Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 3 Oct 2023 18:40:11 -0500 Subject: [PATCH 3/8] update background color and mobile width --- website/assets/styles/pages/pricing.less | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index b14ef77e7b45..54bdaf804329 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -37,7 +37,7 @@ cursor: pointer; border: 1px solid #E2E4EA; border-radius: 28px; - background: #F8F8F8; + background: @ui-off-white; position: relative; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset; margin-bottom: 40px; @@ -422,23 +422,24 @@ @media (max-width: 767px) { [purpose='pricing-switch'] { - width: 250px; + width: 100%; [purpose='pricing-tier-switch'] { height: 56px; + left: 0px; } [purpose='pricing-switch-option'] { height: 56px; } .security-selected { - width: 250px; + width: 100%; transform: translateY(56px); } .it-selected { - width: 250px; + width: 100%; transform: translateY(113px); } .all-selected { - width: 250px; + width: 100%; } } } From a3d5a1eb85caff9835b6fd1b0ae7dcf10660ac8f Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 3 Oct 2023 18:49:48 -0500 Subject: [PATCH 4/8] update layout --- website/assets/styles/pages/pricing.less | 2 ++ website/views/pages/pricing.ejs | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 54bdaf804329..9d2cc28642a6 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -457,9 +457,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 0d12a25c955f..ac35c897f471 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -23,7 +23,7 @@ Get started free
<%// Fleet Premium tier card %> -
+
From 1ea2c529d735c98b27bab14b6a4f64533032224e Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 4 Oct 2023 10:22:48 -0500 Subject: [PATCH 5/8] Update pricing.less --- website/assets/styles/pages/pricing.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 9d2cc28642a6..9f7ca583ebf6 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -202,7 +202,6 @@ [purpose='contact-sales-link'] { text-align: center; margin-top: 8px; - margin-bottom: 32px; font-weight: 400; font-size: 14px; line-height: 20px; @@ -411,6 +410,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%; From f0cf8ad519f6561dadbadaf84b52104950aefb36 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 4 Oct 2023 10:37:55 -0500 Subject: [PATCH 6/8] update styles to match wireframes --- website/assets/styles/pages/pricing.less | 19 ++++++++++++++++--- website/views/pages/pricing.ejs | 6 +++--- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 9f7ca583ebf6..457cbef19083 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -81,12 +81,17 @@ margin-right: 6px; 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: 50%; } @@ -192,7 +197,8 @@ font-weight: 700; font-size: 12px; line-height: 20px; - color: #192147; + color: @core-fleet-black-75; + font-weight: 400; } p { color: #ff5c83; @@ -202,6 +208,7 @@ [purpose='contact-sales-link'] { text-align: center; margin-top: 8px; + margin-bottom: 0px; font-weight: 400; font-size: 14px; line-height: 20px; @@ -239,7 +246,7 @@ font-size: 16px; padding: 15px; margin-top: 8px; - margin-bottom: 32px; + margin-bottom: 0px; color: #FFF; } [purpose='chat-button'], [purpose='card-button'] { @@ -397,6 +404,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: diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index ac35c897f471..9e3f90dc40b9 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -15,7 +15,7 @@

Community

Unlimited hosts

-

$0

/ host
/ month +

$0

/ host
/ month
@@ -31,14 +31,14 @@

Premium

Unlimited hosts

-

From

$7.00

/ host
/ month +

From

$7.00

/ host
/ month
Get started -

For organizations with large deployments, contact sales.

+

Have a large deployment? contact sales.

From 9c19ea5535a3247be870cd59fdacf31135234423 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 4 Oct 2023 12:09:29 -0500 Subject: [PATCH 7/8] Update pricing.less --- website/assets/styles/pages/pricing.less | 1 - 1 file changed, 1 deletion(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 457cbef19083..76e9d34fdbce 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -194,7 +194,6 @@ } strong { // "/host/month" padding-left: 4px; - font-weight: 700; font-size: 12px; line-height: 20px; color: @core-fleet-black-75; From 1fc29ad01f611a6b3d97c537b71bb65176722176 Mon Sep 17 00:00:00 2001 From: Eric Date: Fri, 6 Oct 2023 18:29:30 -0500 Subject: [PATCH 8/8] Update CODEOWNERS --- CODEOWNERS | 1 - 1 file changed, 1 deletion(-) 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 ##############################################################################################