From fb1c536533c293889dd388ddf88553d51f5e0acb Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 27 Jun 2024 18:30:50 -0500 Subject: [PATCH] Website: Update product categories on homepage (#20037) Closes: https://github.com/fleetdm/confidential/issues/7113 Changes: - Updated the homepage to default to MDM personalization. - Updated the layout and content of the homepage to match the latest wireframes. - Replaced the calendar section on the homepage with the calendar banner partial - Added a product category switch for the buying situation agnostic version of the page --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> --- website/assets/js/pages/homepage.page.js | 3 +- website/assets/styles/pages/homepage.less | 68 +++- website/views/pages/homepage.ejs | 340 ++++++++---------- .../partials/calendar-banner.partial.ejs | 7 +- .../partials/primary-tagline.partial.ejs | 2 +- 5 files changed, 213 insertions(+), 207 deletions(-) diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index a7f2d51f0c..5a5100cebc 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -4,6 +4,7 @@ parasails.registerPage('homepage', { // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { modal: undefined, + selectedCategory: 'mdm' }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -12,7 +13,7 @@ parasails.registerPage('homepage', { beforeMount: function() { //… }, - mounted: async function(){ + mounted: async function() { //… }, diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 5ea90a8bfc..db0f006022 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -91,6 +91,9 @@ margin-bottom: 120px; /*increased while testimonial videos are temporarily hidden.*/ h3 { margin-bottom: 24px; + font-weight: 800; + font-size: 32px; + line-height: 120%; } [purpose='calendar-feature-text'] { max-width: 480px; @@ -289,13 +292,55 @@ } } [purpose='platform-block'] { - margin-bottom: 120px; + margin-bottom: 64px; max-width: 1080px; } [purpose='platform-block'].visible { animation: fadeIn 0.3s forwards; } - + [purpose='category-switch'] { + width: 831px; + cursor: pointer; + border: 1px solid #E2E4EA; + border-radius: 28px; + background: @ui-off-white; + position: relative; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset; + margin-bottom: 64px; + margin-top: 64px; + color: @core-fleet-black; + [purpose='category-tier-switch'] { + position: absolute; + top: 0px; + left: -1px; + background: #fff; + border: 1px solid #E2E4EA; + border-radius: 28px; + height: 100%; + min-width: 140px; + z-index: 1; + transition: 0.3s all; + width: 277px; + } + [purpose='category-switch-option'] { + padding: 16px 40px; + text-align: center; + cursor: pointer; + z-index: 3; + user-select: none; + white-space: nowrap; + width: 277px; + } + .selected { + font-weight: 700; + } + .eo-selected { + transform: translateX(100%); + } + .vm-selected { + transform: translateX(200%); + } + } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } @@ -303,12 +348,17 @@ [purpose='category-text-block'] { max-width: 468px; - h3 { - font-size: 32px; - margin-bottom: 32px; + strong { + font-family: Inter; + font-size: 16px; + font-weight: 800; + line-height: 1.2; + margin-bottom: 8px; } p { - margin-bottom: 32px; + margin-bottom: 40px; + font-size: 14px; + line-height: 1.5; } [purpose='category-button'] { width: min-content; @@ -979,15 +1029,15 @@ height: 56px; width: 100%; } - .endpoint-ops-selected { + .eo-selected { width: 100%; transform: translateY(56px); } - .vulnerability-management-selected { + .vm-selected { width: 100%; transform: translateY(113px); } - .device-management-selected { + .mdm-selected { width: 100%; } } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index d3c10cf998..2536914575 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -7,7 +7,7 @@ <%/* Hero text */%>

<%- partial('../partials/primary-tagline.partial.ejs') %>

-

Replace the sprawl with <%= primaryBuyingSituation === 'mdm'? 'secure, open-source device management that works the way you want' : primaryBuyingSituation === 'vm'? 'secure, open-source reporting that works the way you want' : primaryBuyingSituation === 'eo-security'? 'universal, open-source endpoint visibility' : 'simple, open-source software for managing computers' %>.

+

Replace the sprawl with <%= primaryBuyingSituation === 'vm'? 'secure, open-source reporting that works the way you want' : primaryBuyingSituation === 'eo-security'? 'universal, open-source endpoint visibility' : 'secure, open-source device management that works the way you want' %>.

Start now Talk to us @@ -25,209 +25,167 @@
<%/* Testimonial videos */%>
- -
-
-
NEW
- <% if(!primaryBuyingSituation) {%> -

Timing is everything

-

Install updates and force restarts when your users’ computers are actually free.

- <%} else if(['mdm'].includes(primaryBuyingSituation)) {%> -

Timing is everything

-

Install updates and force restarts when your users’ computers are actually free.

- <%} else if(['eo-it'].includes(primaryBuyingSituation)) {%> -

Patch your C-suite with confidence

-

Install updates and force restarts when your users’ computers are actually free.

- <%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%> -

Tell employees why

-

Automatically explain why your security policies matter, and install required updates en masse without locking people out of meetings.

- <%} %> - <% if (primaryBuyingSituation && !['eo-security'].includes(primaryBuyingSituation)) { %>
-

Say goodbye to annoying IT notifications and restarts.

-

Automatically explain why your security policies matter.

-

Stop making exceptions for executives when OS updates lock them out of important meetings.

-
<% } %> -
- play buttonWatch the video -
-
-
- -
-
- - - -
- <% if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%> -
-
- Play video -
-
-

“Fleet lets us be as lightweight as possible while surfacing data to other teams and partners.”

-

Nick Fohs

-

Systems and IT infrastructure manager

-
-
- <%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%> -
-
- Play video -
-
-

“We can build it exactly the way we want it. Which is just not possible on other platforms.”

-

Austin Anderson

-

Cybersecurity team senior manager

-
-
- <%}%> - <% %> -
+ <%- partial('../partials/calendar-banner.partial.ejs') %>
- <% if(!primaryBuyingSituation){ %> - <%/* Device management block */%> -
-
-

Device management

-

Manage everything in one place

-

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux.

- -
-
- Operating systems entering a glass device management dome + <% if(!primaryBuyingSituation){ %> +
+
Device management
+
Endpoint ops
+
Vulnerability management
+
+
+ <%/* Device management block */%> +
+
+ Operating systems entering a glass device management dome +
+
+ Your last MDM migration +

Even if you've never done an MDM migration, you've probably heard it's hard. Fleet makes it easy to get your data in and get it out.

+ Tidy up your tools +

Deploy a modern Mac-first MDM purpose-built for IT engineers and cross-training. Use principles from DevOps to manage Apple, Windows, and Linux computers declaratively.

+ “Zero” trust, fewer tickets +

You can use Fleet’s API to customize every aspect of conditional access – even the stuff your CISO hasn’t thought of yet.

+
+
- <%/* Endpoint ops block */%> -
-
- Endpoint ops -
-
-

Endpoint ops

-

<%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Understand your computers'%>

-

A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.

- + <%/* Endpoint ops block */%> +
+
+ Endpoint ops +
+
+ Pulse check anything +

Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.

+ Ship data to any platform +

Ship logs to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.

+ Osquery on easy mode +

Use "read-only" mode or enable remote scripting to automate anything on every operating system, including Linux.

+
+
- <%/* Vulnerability management block */%> -
-
-

Vulnerability management

-

Build the vulnerability program you actually want

-

Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.

- -
-
- An orb being scanned for vulnerabilities + <%/* Vulnerability management block */%> +
+
+ An orb being scanned for vulnerabilities +
+
+ Report what matters +

Let's face it, most built-in graphs leave you wanting more. Report MTTR and any other custom metrics exactly the way you want to using fresh data from real computers.

+ Deep context from the environment +

Fleet gives you data down to the chip level on every endpoint to help you make sense of which vulnerabilities to prioritize.

+ Untangle your security stack +

Use open data and APIs to connect your vulnerability solution with osquery, the agent you might already have deployed.

+
- <% } else if(['eo-it', 'eo-security'].includes(primaryBuyingSituation)) {%> - <%/* Endpoint ops block */%> -
-
-

Endpoint ops

-

<%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Understand your computers'%>

-

A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.

- -
-
- Endpoint ops -
-
- <%if(primaryBuyingSituation === 'eo-it'){ %> - <%/* Device management block */%> -
-
- Operating systems entering a glass device management dome -
-
-

Device management

-

Manage everything in one place

-

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux.

- -
-
- <% } else {%> - <%/* Vulnerability management block */%> -
-
- An orb being scanned for vulnerabilities -
-
-

Vulnerability management

-

Build the vulnerability program you actually want

-

Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.

- -
-
- <% } %> +
+ <% } else if(['eo-it', 'eo-security'].includes(primaryBuyingSituation)) {%> + <%/* Endpoint ops block */%> + <%if(primaryBuyingSituation === 'eo-it'){ %> + <%/* Device management block */%> +
+
+ Operating systems entering a glass device management dome +
+
+

Device management

+

Manage everything in one place

+

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux.

+ +
+
+ <% } %> +
+
+

Endpoint ops

+

<%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Understand your computers'%>

+

A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.

+ +
+
+ Endpoint ops +
+
+ <% if(primaryBuyingSituation === 'eo-security') {%> + <%/* Vulnerability management block */%> +
+
+ An orb being scanned for vulnerabilities +
+
+

Vulnerability management

+

Build the vulnerability program you actually want

+

Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.

+ +
+
+ <% } %> - <% } else if(['vm', 'mdm'].includes(primaryBuyingSituation)) {%> + <% } else if(['vm', 'mdm'].includes(primaryBuyingSituation)) {%> - <%if(primaryBuyingSituation === 'mdm'){ %> - <%/* Device management block */%> -
-
- Operating systems entering a glass device management dome -
-
-

Device management

-

Manage everything in one place

-

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux.

- -
-
- <% } else {%> - <%/* Vulnerability management block */%> -
-
- An orb being scanned for vulnerabilities -
-
-

Vulnerability management

-

Build the vulnerability program you actually want

-

Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.

- -
-
- <% } %> + <%if(primaryBuyingSituation === 'mdm'){ %> + <%/* Device management block */%> +
+
+

Device management

+

Manage everything in one place

+

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux.

+ +
+
+ Operating systems entering a glass device management dome +
+
+ <% } else {%> + <%/* Vulnerability management block */%> +
+
+

Vulnerability management

+

Build the vulnerability program you actually want

+

Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.

+ +
+
+ An orb being scanned for vulnerabilities +
+
+ <% } %> -
-
-

Endpoint ops

-

<%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Understand your computers'%>

-

A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.

- -
-
- Endpoint ops -
-
- <% } %> +
+
+ Endpoint ops +
+
+

Endpoint ops

+

<%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Understand your computers'%>

+

A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.

+ +
+
+ <% } %> <%/* Integration cards */%>

Connect your favorite tools

@@ -284,7 +242,7 @@
-

An open interface for every endpoint

+

An open interface for every OS

Normalize how you manage clouds and computers without losing low-level access to OS-specific features.

Read the docs @@ -420,7 +378,7 @@
-

For teams with lots of different endpoints

+

For teams with lots of computing devices

<%- partial('../partials/primary-tagline.partial.ejs') %>

Start now diff --git a/website/views/partials/calendar-banner.partial.ejs b/website/views/partials/calendar-banner.partial.ejs index 2e8653df4d..7da1b7e7e8 100644 --- a/website/views/partials/calendar-banner.partial.ejs +++ b/website/views/partials/calendar-banner.partial.ejs @@ -4,14 +4,11 @@ <% if(!primaryBuyingSituation) {%>

"This is a terrible time to mess with my computer."

Install updates and force restarts when your users’ computers are actually free.

- <%} else if(['mdm'].includes(primaryBuyingSituation)) {%> -

Timing is everything

-

Install updates and force restarts when your users’ computers are actually free.

- <%} else if(['eo-it'].includes(primaryBuyingSituation)) {%> + <%} else if(['eo-it', 'mdm'].includes(primaryBuyingSituation)) {%>

Patch your C-suite with confidence

Install updates and force restarts when your users’ computers are actually free.

<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%> -

Tell employees why

+

Tell me when and why

Automatically explain why your security policies matter, and install required updates en masse without locking people out of meetings.

<%} %> <% if (primaryBuyingSituation && !['eo-security'].includes(primaryBuyingSituation)) { %>
diff --git a/website/views/partials/primary-tagline.partial.ejs b/website/views/partials/primary-tagline.partial.ejs index 856bbfd216..9b6e498e29 100644 --- a/website/views/partials/primary-tagline.partial.ejs +++ b/website/views/partials/primary-tagline.partial.ejs @@ -1 +1 @@ -<%= typeof primaryBuyingSituation !== 'undefined' ? (primaryBuyingSituation === 'mdm' ? 'Your last MDM migration' : primaryBuyingSituation === 'vm' ? 'Focus on vulnerabilities, not vendors' : primaryBuyingSituation === 'eo-security' ? 'Light in every corner' : primaryBuyingSituation === 'eo-it' ? 'Untangle your endpoints' : 'Let people work') : 'Let people work' %> +<%= typeof primaryBuyingSituation !== 'undefined' ? (primaryBuyingSituation === 'vm' ? 'Focus on vulnerabilities, not vendors' : primaryBuyingSituation === 'eo-security' ? 'Light in every corner' : primaryBuyingSituation === 'eo-it' ? 'Untangle your endpoints' : 'Your last MDM migration') : 'Your last MDM migration' %>