From 864b8dd44c340272019084e7f345ba6b30859719 Mon Sep 17 00:00:00 2001 From: Andrew Baker <89049099+DrewBakerfdm@users.noreply.github.com> Date: Tue, 1 Aug 2023 18:03:10 -0400 Subject: [PATCH] Create jamf alternative landing page (#13066) # Checklist for submitter If some of the following don't apply, delete the relevant line. - [ ] Changes file added for user-visible changes in `changes/` or `orbit/changes/`. See [Changes files](https://fleetdm.com/docs/contributing/committing-changes#changes-files) for more information. - [ ] Documented any API changes (docs/Using-Fleet/REST-API.md or docs/Contributing/API-for-contributors.md) - [ ] Documented any permissions changes - [ ] Input data is properly validated, `SELECT *` is avoided, SQL injection is prevented (using placeholders for values in statements) - [ ] Added support on fleet's osquery simulator `cmd/osquery-perf` for new osquery data ingestion features. - [ ] Added/updated tests - [ ] Manual QA for all new/changed functionality - For Orbit and Fleet Desktop changes: - [ ] Manual QA must be performed in the three main OSs, macOS, Windows and Linux. - [ ] Auto-update manual QA, from released version of component to new version (see [tools/tuf/test](../tools/tuf/test/README.md)). --------- Co-authored-by: Eric --- .../imagine/view-jamf-alternative.js | 27 ++ .../js/pages/imagine/jamf-alternative.page.js | 29 ++ website/assets/styles/importer.less | 1 + .../pages/imagine/jamf-alternative.less | 347 ++++++++++++++++++ website/config/routes.js | 7 + website/views/layouts/layout-customer.ejs | 1 + website/views/layouts/layout-landing.ejs | 1 + website/views/layouts/layout-sandbox.ejs | 1 + website/views/layouts/layout.ejs | 1 + .../views/pages/imagine/jamf-alternative.ejs | 74 ++++ 10 files changed, 489 insertions(+) create mode 100644 website/api/controllers/imagine/view-jamf-alternative.js create mode 100644 website/assets/js/pages/imagine/jamf-alternative.page.js create mode 100644 website/assets/styles/pages/imagine/jamf-alternative.less create mode 100644 website/views/pages/imagine/jamf-alternative.ejs diff --git a/website/api/controllers/imagine/view-jamf-alternative.js b/website/api/controllers/imagine/view-jamf-alternative.js new file mode 100644 index 0000000000..93b859d022 --- /dev/null +++ b/website/api/controllers/imagine/view-jamf-alternative.js @@ -0,0 +1,27 @@ +module.exports = { + + + friendlyName: 'View jamf alternative', + + + description: 'Display "Jamf alternative" page.', + + + exits: { + + success: { + viewTemplatePath: 'pages/imagine/jamf-alternative' + } + + }, + + + fn: async function () { + + // Respond with view. + return {}; + + } + + +}; diff --git a/website/assets/js/pages/imagine/jamf-alternative.page.js b/website/assets/js/pages/imagine/jamf-alternative.page.js new file mode 100644 index 0000000000..9cd872a820 --- /dev/null +++ b/website/assets/js/pages/imagine/jamf-alternative.page.js @@ -0,0 +1,29 @@ +parasails.registerPage('jamf-alternative', { + // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ + // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ + // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ + data: { + //… + }, + + // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ + // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ + // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ + beforeMount: function() { + //… + }, + mounted: async function() { + //… + }, + + // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ + // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ + // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ + methods: { + clickOpenChatWidget: function() { + if(window.HubSpotConversations && window.HubSpotConversations.widget){ + window.HubSpotConversations.widget.open(); + } + }, + } +}); diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less index 722da32f0b..2a1de3126b 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -84,3 +84,4 @@ @import 'pages/imagine/higher-education.less'; @import 'pages/imagine/rapid-7-alternative.less'; @import 'pages/imagine/defcon-31.less'; +@import 'pages/imagine/jamf-alternative.less'; diff --git a/website/assets/styles/pages/imagine/jamf-alternative.less b/website/assets/styles/pages/imagine/jamf-alternative.less new file mode 100644 index 0000000000..62fa8e1c14 --- /dev/null +++ b/website/assets/styles/pages/imagine/jamf-alternative.less @@ -0,0 +1,347 @@ +#jamf-alternative { + + h1 { + font-weight: 800; + font-size: 64px; + line-height: 76px; + } + h2 { + font-weight: 800; + font-size: 32px; + line-height: 38px; + margin-bottom: 40px; + } + h3 { + font-weight: 800; + font-size: 24px; + line-height: 32px; + } + h4 { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 24px; + color: @core-fleet-black-75; + margin-bottom: 4px; + } + p { + font-size: 16px; + line-height: 24px; + } + + [purpose='hero-background'] { + background: linear-gradient(180deg, #E8F1F7 3.37%, #FFFFFF 60%); + padding-top: 120px; + padding-bottom: 40px; + } + [purpose='hero-container'] { + max-width: 1200px; + } + [purpose='hero-text'] { + text-align: center; + max-width: 940px; + padding: 0 40px; + h1 { + margin-bottom: 32px; + } + p { + font-size: 18px; + line-height: 27px; + max-width: 640px; + margin: 0 auto 32px; + } + } + + [purpose='button-row'] { + a { + font-weight: 700; + font-size: 16px; + line-height: 24px; + } + [purpose='cta-button'] { + cursor: pointer; + margin-right: 32px; + background: @core-vibrant-red; + border-radius: 8px; + padding-left: 32px; + padding-right: 32px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + color: #FFF; + position: relative; + text-decoration: none; + } + [purpose='cta-button']::before { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + opacity: 1; + content: ' '; + position: absolute; + top: 0; + left: -5px; + width: 50%; + height: 100%; + transform: skew(-10deg); + transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in; + } + [purpose='cta-button']:hover:before { + opacity: 0; + left: 160px; + width: 110%; + } + + [purpose='animated-arrow-button-red'] { + display: inline; + 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; + top: -5px; + left: 80%; // <--- 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: 0; */ + } + &: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='page-container'] { + padding-left: 40px; + padding-right: 40px; + padding-bottom: 120px; + } + + [purpose='feature'] { + margin-top: 120px; + max-width: 960px; + h3 { + margin-bottom: 24px; + } + div { + max-width: 480px; + } + } + + [purpose='feature-image'] { + img { + max-height: 300px; + } + } + [purpose='large-feature-image'] { + img { + max-height: 250px; + } + } + + [purpose='checklists'] { + margin-top: 40px; + margin-bottom: 80px; + } + [purpose='checklist'] { + p { + padding-left: 28px; + text-indent: -28px; + } + p::before { + content: ' '; + background-image: url('/images/icon-checkmark-circle.svg'); + background-size: 16px 16px; + display: inline-block; + position: relative; + top: 2px; + margin-right: 12px; + width: 16px; + height: 16px; + } + } + + [purpose='tweets-container'] { + padding-top: 120px; + padding-bottom: 120px; + } + + [purpose='bottom-gradient'] { + background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%); + } + [purpose='bottom-cloud-city-banner'] { + background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 100%); + img { + width: 100%; + } + } + + @media (min-width: 1200px) { + [purpose='page-container'] { + padding-left: 120px; + padding-right: 120px; + } + } + + @media (max-width: 1200px) { + [purpose='logos'] { + height: 58px; + margin-left: auto; + margin-right: auto; + img { + margin-top: 23.5px; + margin-bottom: 23.5px; + padding-left: 25px; + padding-right: 25px; + } + [purpose='snowflake-logo'] { + height: 21px; + } + [purpose='wayfair-logo'] { + height: 23px; + } + [purpose='uber-logo'] { + height: 20px; + } + [purpose='atlassian-logo'] { + height: 16px; + } + [purpose='segment-logo'] { + height: 22px; + } + } + } + + @media (max-width: 991px) { + + [purpose='button-row'] { + margin-right: auto; + margin-left: auto; + } + + [purpose='hero-background'] { + padding-top: 120px; + padding-bottom: 80px; + padding-left: 0px; + padding-right: 0px; + } + + [purpose='logos'] { + height: 58px; + margin-left: 20px; + margin-right: 20px; + img { + margin-top: 17.5px; + margin-bottom: 17.5px; + padding-left: 10px; + padding-right: 10px; + } + } + } + + @media (max-width: 768px) { + + h1 { + font-size: 48px; + line-height: 54px; + } + + [purpose='page-container'] { + padding-left: 40px; + padding-right: 40px; + } + + [purpose='checklists'] { + margin-bottom: 40px; + } + + [purpose='feature'] { + margin-top: 80px; + } + + [purpose='feature-image'], [purpose='large-feature-image'] { + margin-bottom: 40px; + img { + max-height: 100%; + max-width: 100%; + } + } + + [purpose='hero-background'] { + padding-top: 60px; + padding-bottom: 60px; + padding-left: 20px; + padding-right: 20px; + } + + [purpose='hero-text'] { + text-align: center; + max-width: 480px; + } + + [purpose='tweets-container'] { + padding-top: 80px; + padding-bottom: 80px; + padding-left: 40px; + padding-right: 40px; + } + + [purpose='logos'] { + height: auto; + } + } + + @media (max-width: 575px) { + + [purpose='button-row'] { + max-width: 100%; + [purpose='cta-button'] { + margin-right: 0px; + width: 100%; + margin-bottom: 24px; + } + } + + [purpose='feature'] { + margin-top: 60px; + } + + [purpose='page-container'] { + padding-left: 20px; + padding-right: 20px; + } + + [purpose='tweets-container'] { + padding-left: 20px; + padding-right: 20px; + } + + [parasails-component='scrollable-tweets'] [purpose='tweets'] { + margin-top: 40px; + } + + } + +} diff --git a/website/config/routes.js b/website/config/routes.js index b2c79af9ac..357db4a15a 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -328,6 +328,13 @@ module.exports.routes = { pageDescriptionForMeta: 'Find Fleet at DefCon and get a custom tee shirt.', } }, + 'GET /imagine/jamf-alternative': { + action: 'imagine/view-jamf-alternative', + locals: { + pageTitleForMeta: 'An open-source alternative to Jamf', + pageDescriptionForMeta: 'Simplify vulnerability management with Fleet, an open-source platform with superior visibility.', + } + }, // ╦ ╔═╗╔═╗╔═╗╔═╗╦ ╦ ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗ // ║ ║╣ ║ ╦╠═╣║ ╚╦╝ ╠╦╝║╣ ║║║╠╦╝║╣ ║ ║ ╚═╗ diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 1c06237d64..560194c1fc 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -252,6 +252,7 @@ + diff --git a/website/views/layouts/layout-landing.ejs b/website/views/layouts/layout-landing.ejs index b48c180e37..69960d8be8 100644 --- a/website/views/layouts/layout-landing.ejs +++ b/website/views/layouts/layout-landing.ejs @@ -252,6 +252,7 @@ + diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index d85dcb9b97..687de4eec9 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -379,6 +379,7 @@ + diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index e2ac9b4e19..cb55ec6084 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -452,6 +452,7 @@ + diff --git a/website/views/pages/imagine/jamf-alternative.ejs b/website/views/pages/imagine/jamf-alternative.ejs new file mode 100644 index 0000000000..e80f584d41 --- /dev/null +++ b/website/views/pages/imagine/jamf-alternative.ejs @@ -0,0 +1,74 @@ +
+ +
+ +
+
+

Device management built for IT, security approved

+

Fleet brings GitOps to MDM

+

Bringh-your-own MDM. Enjoy enterprise-ready open-source MDM and leverage the best of DevOps and GitOps inside a full-featured Macbook MDM.

+
+ Try Fleet today + Talk to an expert +
+
+
+
+ +
+
+
+

Finally a transparent and open-source MDM.

+

Don't waste money buying new Protection plans from your MDM provider.

+
+
+ A Fleet orb scanning a Laptop +
+
+ +
+
+ A bento box featuring all the tools Fleet can bring together +
+
+

JAMF and Intune are never perfect out of the box, so why not bring your own MDM?

+

A transparent and programmable MDM to build the solution that's best for your team.

+
+
+ +
+ Try Fleet today + Talk to an expert +
+ +
+ +
+
+
+

Don’t know osquery?

+

Dedicated support from osquery experts

+

Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.

+
+
+ + +
+ +
+

Open-source device management

+

Lighter than air

+
+ Try it out + Talk to an expert +
+
+
+
+
+ A glass city floating on top of fluffy white clouds + A glass city floating on top of fluffy white clouds + A glass city floating on top of fluffy white clouds +
+
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>