From fdcf255d6caf59cc8a03fc2023a023ac73d565bf Mon Sep 17 00:00:00 2001 From: Eric Date: Sun, 10 Mar 2024 23:17:40 -0500 Subject: [PATCH] Website: update cards on pricing page (#17506) Closes: #17325 Changes: - Added a third card to the pricing page that directs users to the "talk to us" form on the contact page --- website/assets/styles/pages/pricing.less | 185 ++++++++++------------- website/views/pages/pricing.ejs | 43 ++++-- 2 files changed, 113 insertions(+), 115 deletions(-) diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 7c6d4e37d3..27c63c1bb6 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -44,12 +44,12 @@ margin-top: 40px; [purpose='pricing-tier-switch'] { position: absolute; - top: 0px; + top: -1px; left: -1px; background: #fff; border: 1px solid #E2E4EA; border-radius: 28px; - height: 100%; + height: 58px; min-width: 140px; z-index: 1; transition: 0.25s all; @@ -67,6 +67,7 @@ transform: translateX(167px); } .IT-selected { + left: 1px; width: 183px; transform: translateX(416px); } @@ -76,68 +77,62 @@ } [purpose='free-tier-card'] { + text-align: left; padding: 40px; border-radius: 15px; - margin-right: 6px; - width: 50%; - strong { - color: @core-fleet-black-75; - font-weight: 400; - font-size: 16px; - line-height: 20px; - } + width: 100%; + box-shadow: none; + background: #fff; } - - [purpose='price-dollar-sign'] { - vertical-align: text-bottom; - font-size: 24px; - } - [purpose='premium-card'] { - width: 50%; + [purpose='pricing-card'] { + width: 33%; } [purpose='premium-tier-card'] { padding: 40px; border-radius: 15px; - // margin-right: 12px; - margin-left: 6px; - strong { - color: #192147; - font-size: 16px; - line-height: 20px; + text-align: left; + box-shadow: none; + margin-left: 16px; + background: #fff; + } + [purpose='custom-tier-card'] { + padding: 40px; + border-radius: 15px; + text-align: left; + box-shadow: none; + margin-left: 16px; + background: #fff; + [purpose='pricing-tier-title'] { + h2 { + margin-bottom: 17px; + } + h3 { + margin-bottom: 17px; + } + } } - [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 { + [purpose='button-container'] { + height: 52px; + } + [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; @@ -148,54 +143,46 @@ -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 { + } + &: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: center; + text-align: left; + [purpose='tier-price'] { + margin-bottom: 12px; + } h1 {// Price e.g., $0 - font-weight: 700; font-size: 32px; - line-height: 45px; + font-weight: 800; + line-height: 120%; + margin-bottom: 0px; color: #192147; } h2 {// Tier name - font-weight: 700; - font-size: 20px; - line-height: 28px; + font-size: 24px; + font-weight: 800; + line-height: 120%; color: #192147; margin-bottom: 4px; } h3 {// for "Unlimited hosts" font-weight: 400; font-size: 14px; - line-height: 20px; + line-height: 150%; color: #515774; - margin-bottom: 4px; - } - h4 { // "Starting at" - font-weight: 400; - font-size: 16px; - line-height: 20px; - color: #192147; - vertical-align: baseline; - margin-bottom: 0px; - padding-right: 4px; + margin-bottom: 12px; } strong { // "/host/month" - padding-left: 4px; - font-size: 12px; - line-height: 20px; + padding-left: 8px; + font-size: 14px; + line-height: 150%; color: @core-fleet-black-75; font-weight: 400; } @@ -238,9 +225,6 @@ } } - - - [purpose='card-button'] { font-size: 16px; padding: 15px; @@ -270,12 +254,7 @@ } [purpose='features-table'].hide { - div { - height: 0px; - opacity: 0; - position: relative; - z-index: -99; - } + display: none !important; //lesshint-disable-line importantRule } [purpose='mobile-feature-table-section'] { margin-bottom: 16px; @@ -460,12 +439,6 @@ 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: @@ -476,21 +449,20 @@ padding-right: 24px; } [purpose='free-tier-card'] { - width: 100%; - margin-right: 0px; margin-bottom: 12px; - [purpose='card-button'] { - margin-bottom: 8px; - } + padding: 40px; } - [purpose='contact-sales-link'] { - margin-bottom: 12px; - } - [purpose='premium-card'] { + [purpose='pricing-card'] { width: 100%; } [purpose='premium-tier-card'] { margin-left: 0px; + margin-bottom: 12px; + padding: 40px; + } + [purpose='custom-tier-card'] { + margin-left: 0px; + padding: 40px; } } @@ -510,6 +482,7 @@ } .IT-selected { width: 100%; + top: 1px; transform: translateY(113px); } .all-selected { @@ -537,6 +510,10 @@ padding: 24px; justify-content: center; } + [purpose='custom-tier-card'] { + padding: 24px; + justify-content: center; + } [purpose='pricing-categories-table'] { margin-bottom: 40px; thead { diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index 59a2d62821..18c8b5c85b 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -8,37 +8,58 @@
<%// Fleet Free tier card %> -
+
+
-
-
+
+

Free

Unlimited hosts

-
+

$0

/ host
/ month
- View source code +
+ + Read the docs + +
+
<%// Fleet Premium tier card %> -
-
+
+
-
+

Premium

Unlimited baselines

-
-

From

$7.00

/ host
/ month +
+

$7.00

/ host
/ month
Get started -

Have a large deployment? Talk to us.

+
+
+
+ <%// Custom tier card %> +
+
+
+
+
+

Custom

+

For teams with extremely large deployments.

+
+
+
+