diff --git a/website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png b/website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png new file mode 100644 index 0000000000..c64bba4ca8 Binary files /dev/null and b/website/assets/images/icon-chevron-fleet-black-75-12x12@2x.png differ diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js index 69b6ba3e74..37a7118abc 100644 --- a/website/assets/js/pages/pricing.page.js +++ b/website/assets/js/pages/pricing.page.js @@ -6,6 +6,7 @@ parasails.registerPage('pricing', { pricingMode: 'all', modal: '', selectedFeature: undefined, + showExpandedTable: false, }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 05cdaeba84..8c25326dcd 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -21,7 +21,7 @@ line-height: 24px; } a { - color: @core-vibrant-blue; + color: #515774; } .btn { color: #fff; @@ -40,8 +40,8 @@ background: @ui-off-white; position: relative; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset; - margin-bottom: 40px; - margin-top: 40px; + margin-bottom: 32px; + margin-top: 32px; [purpose='pricing-tier-switch'] { position: absolute; top: -1px; @@ -168,6 +168,13 @@ } } + [purpose='logos-container'] { + margin-top: 40px; + max-width: 100%; + [parasails-component='logo-carousel'] { + margin-bottom: 32px; + } + } [purpose='features-list'] { p { @@ -331,6 +338,7 @@ color: #515774; border-radius: 8px; outline: 1px solid #E2E4EA; + outline-offset: -1px; td { padding: 12px 24px; vertical-align: middle; @@ -353,6 +361,120 @@ } } } + + + [purpose='features-table'] { + .truncated { + max-height: 649px; + overflow-y: hidden; + justify-content: flex-start; + position: relative; + [purpose='truncated-features-fade'] { + position: absolute; + bottom: 0px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -2.2%, #FFF 87.37%); + width: 100%; + height: 101px; + } + } + [purpose='show-all-features-button'] { + cursor: pointer; + color: #515774; + font-size: 14px; + font-weight: 700; + line-height: 150%; + border-radius: 16px; + background: #FFF; + padding: 8px 16px; + margin-bottom: 64px; + span { + height: 12px; + width: 12px; + display: inline-block; + background: url('/images/icon-chevron-fleet-black-75-12x12@2x.png'); + background-size: 12px 12px; + background-repeat: no-repeat; + margin-left: 8px; + } + &:hover { + color: #515774; + background-color: #F9FAFC; + } + &.expanded { + span { + transform: rotate(180deg); + } + } + } + } + [purpose='faq'] { + padding-top: 80px; + border-top: 1px solid #E2E4EA; + margin-bottom: 80px; + [purpose='faq-header'] { + width: 392px; + margin-right: 16px; + } + [purpose='accordion'] { + width: 640px; + flex-grow: 1; + [purpose='accordion-body'] { + [purpose='accordion-header'] { + color: #192147; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-weight: 700; + font-size: 16px; + line-height: 150%; + p { + margin-bottom: 0px; + } + span { + margin-left: 40px; + color: #8B8FA2; + font-weight: 900; + transform: rotate(0deg); + font-size: 19px; + } + &[aria-expanded] { + span { + transform: rotate(180deg); + } + } + &.collapsed { + span { + transform: rotate(0deg); + } + } + } + [purpose='accordion-item'] { + border-bottom: 1px solid #E2E4EA; + margin-top: 24px; + padding-bottom: 12px; + } + [purpose='faq-answer'] { + margin-right: 40px; + margin-bottom: 16px; + a { + text-decoration-line: underline; + } + } + } + } + } + + [purpose='contact-note'] { + margin-top: 24px; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + a { + text-decoration-line: underline; + } + } [purpose='bottom-cta'] { padding-top: 80px; padding-bottom: 120px; @@ -463,6 +585,71 @@ width: 100%; } } + [purpose='features-table'] { + .truncated { + max-height: 1480px; + overflow-y: hidden; + justify-content: flex-start; + position: relative; + [purpose='truncated-features-fade'] { + position: absolute; + bottom: 0px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -2.2%, #FFF 87.37%); + width: 100%; + height: 101px; + } + } + } + [purpose='faq'] { + padding-top: 80px; + border-top: 1px solid #E2E4EA; + margin-bottom: 80px; + [purpose='faq-header'] { + width: unset; + margin-right: 0px; + margin-bottom: 16px; + } + [purpose='accordion'] { + width: 100%; + [purpose='accordion-body'] { + [purpose='accordion-header'] { + color: #192147; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-weight: 700; + font-size: 16px; + line-height: 150%; + p { + margin-bottom: 0px; + } + span { + margin-left: 40px; + color: #8B8FA2; + font-weight: 900; + transform: rotate(0deg); + font-size: 19px; + } + &[aria-expanded] { + span { + transform: rotate(180deg); + } + } + &.collapsed { + span { + transform: rotate(0deg); + } + } + } + [purpose='accordion-item'] { + border-bottom: 1px solid #E2E4EA; + margin-top: 16px; + margin-bottom: 16px; + } + } + } + } } @media (max-width: 575px) { // >575px: diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs index 6a421123e5..d533e9d729 100644 --- a/website/views/pages/pricing.ejs +++ b/website/views/pages/pricing.ejs @@ -64,6 +64,9 @@ +
+ +
All features
For IT admins
@@ -73,7 +76,7 @@
<%// All features %>
-
+
<%// Desktop features tables %>
<% for(let category of pricingTable) {%> @@ -123,29 +126,32 @@ <%// Mobile features tables %>
{{category.categoryName}}
-
-
- - {{feature.name}}{{feature.comingSoon ? '*' : ''}} - - More info -
-
- Free - checkmark -
-
- Premium - checkmark -
+
+
+ + {{feature.name}}{{feature.comingSoon ? '*' : ''}} + + More info +
+
+ Free + checkmark +
+
+ Premium + checkmark
-

* Coming soon

+
+

* Coming soon

+
+
+
Show all features
<%// Filtered features %>
-
+
<%// Desktop features tables %>
<% for(let category of pricingTableForIt) {%> @@ -195,28 +201,30 @@ <%// Mobile features tables %>
{{category.categoryName}}
-
-
- - {{feature.name}}{{feature.comingSoon ? '*' : ''}} - - More info -
-
- Free - checkmark -
-
- Premium - checkmark -
+
+
+ + {{feature.name}}{{feature.comingSoon ? '*' : ''}} + More info + +
+
+ Free + checkmark +
+
+ Premium + checkmark
-

* Coming soon

+
+

* Coming soon

+
+
Show all features
-
+
<%// Desktop features tables %>
<% for(let category of pricingTableForSecurity) {%> @@ -266,37 +274,114 @@ <%// Mobile features tables %>
{{category.categoryName}}
-
-
- - {{feature.name}}{{feature.comingSoon ? '*' : ''}} - - More info -
-
- Free - checkmark -
-
- Premium - checkmark -
+
+
+ + {{feature.name}}{{feature.comingSoon ? '*' : ''}} + + More info +
+
+ Free + checkmark +
+
+ Premium + checkmark
-

* Coming soon

+
+

* Coming soon

+
+
Show all features
<%// Bottom call to action %> -
-

Questions?

-

We have answers to the most commonly asked questions.

-
- - Talk to us - - - Read the docs - +
+
+

Frequently
asked questions

+
+
+
+
+

+ <% + // ███████╗ █████╗ ██████╗ ██████╗ ██╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔═══██╗███║ + // █████╗ ███████║██║ ██║ ██║ ██║╚██║ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██║▄▄ ██║ ██║ + // ██║ ██║ ██║╚██████╔╝ ╚██████╔╝ ██║ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚══▀▀═╝ ╚═╝ + %> + Parts of the UI are unfamiliar to us. Is this too far out of my team's comfort zone? + +

+

+ <% + // ███████╗ █████╗ ██████╗ █████╗ ██╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔══██╗███║ + // █████╗ ███████║██║ ██║ ███████║╚██║ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██╔══██║ ██║ + // ██║ ██║ ██║╚██████╔╝ ██║ ██║ ██║ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚═╝ ╚═╝ ╚═╝ + %> + You already know how to manage the operating system. In Fleet, you can focus on managing Apple, Windows and Linux; not Intune, Omnissa, and your anxiety. +

+
+
+

+ <% + // ███████╗ █████╗ ██████╗ ██████╗ ██████╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔═══██╗╚════██╗ + // █████╗ ███████║██║ ██║ ██║ ██║ █████╔╝ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██║▄▄ ██║██╔═══╝ + // ██║ ██║ ██║╚██████╔╝ ╚██████╔╝███████╗ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚══▀▀═╝ ╚══════╝ + %> + Fleet is perfect, it's just missing this one feature... + +

+

+ <% + // ███████╗ █████╗ ██████╗ █████╗ ██████╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔══██╗╚════██╗ + // █████╗ ███████║██║ ██║ ███████║ █████╔╝ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██╔══██║██╔═══╝ + // ██║ ██║ ██║╚██████╔╝ ██║ ██║███████╗ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚═╝ ╚═╝╚══════╝ + %> + We're moving pretty fast, and we have every incentive to listen. At Fleet, everyone can contribute. We also regularly deliver customer promises, and all the code is 100% source-available. +

+
+
+

+ <% + // ███████╗ █████╗ ██████╗ ██████╗ ██████╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔═══██╗╚════██╗ + // █████╗ ███████║██║ ██║ ██║ ██║ █████╔╝ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██║▄▄ ██║ ╚═══██╗ + // ██║ ██║ ██║╚██████╔╝ ╚██████╔╝██████╔╝ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚══▀▀═╝ ╚═════╝ + %> + What actually is Fleet? Was it purpose built for this kind of thing? + +

+

+ <% + // ███████╗ █████╗ ██████╗ █████╗ ██████╗ + // ██╔════╝██╔══██╗██╔═══██╗ ██╔══██╗╚════██╗ + // █████╗ ███████║██║ ██║ ███████║ █████╔╝ + // ██╔══╝ ██╔══██║██║▄▄ ██║ ██╔══██║ ╚═══██╗ + // ██║ ██║ ██║╚██████╔╝ ██║ ██║██████╔╝ + // ╚═╝ ╚═╝ ╚═╝ ╚══▀▀═╝ ╚═╝ ╚═╝╚═════╝ + %> + Fleet started as an osquery management server. After 10 years of production osquery use at scale in huge organizations, Fleet added "write" and "execute" device management capabitilies, with all the necessary integrations to be comparable with other device management platforms like Omnissa (fka WS1, fka Airwatch), Jamf, Intune, and more. Today, Fleet is actively used as the next-gen MDM in homelabs all over the world, and at larger fleets at Epic Games, Cisco, Stripe, Fastly, Lear, and more. +

+
+
+
+

Couldn’t find an answer? Message us.

+