diff --git a/website/api/controllers/view-fleet-mdm.js b/website/api/controllers/view-device-management.js similarity index 91% rename from website/api/controllers/view-fleet-mdm.js rename to website/api/controllers/view-device-management.js index 95341354a9..d16c7d3e3c 100644 --- a/website/api/controllers/view-fleet-mdm.js +++ b/website/api/controllers/view-device-management.js @@ -1,16 +1,16 @@ module.exports = { - friendlyName: 'View fleet mdm', + friendlyName: 'View device management', - description: 'Display "Fleet mdm" page.', + description: 'Display "Device management" page.', exits: { success: { - viewTemplatePath: 'pages/fleet-mdm' + viewTemplatePath: 'pages/device-management' }, badConfig: { responseType: 'badConfig' }, }, diff --git a/website/assets/images/device-management-absolute-certainty-380x320@2x.png b/website/assets/images/device-management-absolute-certainty-380x320@2x.png index 8acbb985ec..de508138f5 100644 Binary files a/website/assets/images/device-management-absolute-certainty-380x320@2x.png and b/website/assets/images/device-management-absolute-certainty-380x320@2x.png differ diff --git a/website/assets/images/device-management-feature-image-1-380x320@2x.png b/website/assets/images/device-management-feature-image-1-380x320@2x.png new file mode 100644 index 0000000000..353b33df84 Binary files /dev/null and b/website/assets/images/device-management-feature-image-1-380x320@2x.png differ diff --git a/website/assets/images/device-management-icon-automatic-posture-assessment-48x48@2x.png b/website/assets/images/device-management-icon-automatic-posture-assessment-48x48@2x.png new file mode 100644 index 0000000000..f4d291b35c Binary files /dev/null and b/website/assets/images/device-management-icon-automatic-posture-assessment-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-circular-action-48x48@2x.png b/website/assets/images/device-management-icon-circular-action-48x48@2x.png new file mode 100644 index 0000000000..ac184cb50f Binary files /dev/null and b/website/assets/images/device-management-icon-circular-action-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-control-login-experience-48x48@2x.png b/website/assets/images/device-management-icon-control-login-experience-48x48@2x.png new file mode 100644 index 0000000000..35f077cbb6 Binary files /dev/null and b/website/assets/images/device-management-icon-control-login-experience-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-manage-device-posture-48x48@2x.png b/website/assets/images/device-management-icon-manage-device-posture-48x48@2x.png new file mode 100644 index 0000000000..82909a4410 Binary files /dev/null and b/website/assets/images/device-management-icon-manage-device-posture-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-patch-every-os-48x48@2x.png b/website/assets/images/device-management-icon-patch-every-os-48x48@2x.png new file mode 100644 index 0000000000..1eb62e1d5a Binary files /dev/null and b/website/assets/images/device-management-icon-patch-every-os-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-simplify-health-checks-48x48@2x.png b/website/assets/images/device-management-icon-simplify-health-checks-48x48@2x.png new file mode 100644 index 0000000000..ca3ff220b3 Binary files /dev/null and b/website/assets/images/device-management-icon-simplify-health-checks-48x48@2x.png differ diff --git a/website/assets/images/device-management-icon-verify-updates-and-settings-48x48@2x.png b/website/assets/images/device-management-icon-verify-updates-and-settings-48x48@2x.png new file mode 100644 index 0000000000..7448e42641 Binary files /dev/null and b/website/assets/images/device-management-icon-verify-updates-and-settings-48x48@2x.png differ diff --git a/website/assets/js/pages/fleet-mdm.page.js b/website/assets/js/pages/device-management.page.js similarity index 100% rename from website/assets/js/pages/fleet-mdm.page.js rename to website/assets/js/pages/device-management.page.js diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less index 19b759fe98..e0ae3c7f4d 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -66,7 +66,7 @@ @import 'pages/connect-vanta.less'; @import 'pages/vanta-authorization.less'; @import 'pages/admin/generate-license.less'; -@import 'pages/fleet-mdm.less'; +@import 'pages/device-management.less'; @import 'pages/upgrade.less'; @import 'pages/endpoint-ops.less'; @import 'pages/transparency.less'; diff --git a/website/assets/styles/pages/fleet-mdm.less b/website/assets/styles/pages/device-management.less similarity index 68% rename from website/assets/styles/pages/fleet-mdm.less rename to website/assets/styles/pages/device-management.less index ed4e0460e0..50b5787d15 100644 --- a/website/assets/styles/pages/fleet-mdm.less +++ b/website/assets/styles/pages/device-management.less @@ -1,19 +1,28 @@ #device-management { + @heading-lineheight: 120%; + @text-lineheight: 150%; + + @page-container-max-width-xl: 960px; + @page-container-max-width-lg: 840px; + @page-container-max-width-md: 480px; + background: linear-gradient(180deg, #E8F1F6 0%, #FFF 8.76%); + h1 { - font-size: 56px; + font-size: 48px; font-weight: 800; - line-height: 54px; + line-height: @heading-lineheight; } h2 { font-weight: 800; font-size: 32px; - line-height: 38px; + line-height: @heading-lineheight; + margin-bottom: 24px; } h3 { + font-size: 20px; font-weight: 800; - font-size: 24px; - line-height: 32px; + line-height: @heading-lineheight; } h4 { font-family: 'Roboto Mono'; @@ -26,30 +35,34 @@ } p { font-size: 16px; - line-height: 24px; + line-height: @text-lineheight; color: @core-fleet-black-75; } strong { - colore: @core-fleet-black; + color: @core-fleet-black; + } + [purpose='page-content'] { + max-width: @page-container-max-width-xl; } - [purpose='page-content'] { - max-width: 960px; - } - [purpose='page-container'] { - padding-left: 120px; - padding-right: 120px; - margin-left: auto; - margin-right: auto; - } + [purpose='page-section'] { + margin-bottom: 160px; + } + + [purpose='page-container'] { + padding-left: 120px; + padding-right: 120px; + margin-left: auto; + margin-right: auto; + } [purpose='page-headline'] { - padding-bottom: 60px; + margin-bottom: 60px; h2 { font-size: 64px; font-style: normal; font-weight: 800; - line-height: 1.2; + line-height: @heading-lineheight; margin-bottom: 0px; } } @@ -60,7 +73,6 @@ [purpose='hero-image'] { max-width: 380px; img { - padding-left: 25px; max-width: 100%; max-height: 100%; width: 380px; @@ -84,7 +96,8 @@ a { font-weight: 700; font-size: 16px; - line-height: 24px; + line-height: @text-lineheight; + white-space: nowrap; } [purpose='cta-button'] { cursor: pointer; @@ -178,7 +191,7 @@ font-size: 20px; font-style: italic; font-weight: 400; - line-height: 30px; + line-height: @text-lineheight; } } [purpose='quote-image'] { @@ -193,20 +206,15 @@ [purpose='name'] { font-size: 12px; font-weight: 700; - line-height: 18px; margin-bottom: 0px; } [purpose='title'] { color: @core-fleet-black-75; font-size: 12px; font-weight: 400; - line-height: 18px; margin-bottom: 0px; } - } - - } [purpose='testimonial-video'] { @@ -218,6 +226,7 @@ display: flex; margin-bottom: 0px; position: relative; + box-shadow: none; span { img { height: 10.235px; @@ -238,7 +247,7 @@ font-size: 11.132px; font-style: normal; font-weight: 400; - line-height: 16.698px; + line-height: @text-lineheight; } &:hover { box-shadow: 0px 4px 16px 0px #E2E4EA; @@ -292,7 +301,7 @@ } [purpose='feature'] { - margin-bottom: 180px; + margin-bottom: 140px; h3 { margin-bottom: 24px; } @@ -301,11 +310,17 @@ } } + [purpose='feature-note'] { + padding-top: 40px; + font-size: 12px; + margin-bottom: 0px; + } + [purpose='feature-image'].left { - margin-left: 24px; + margin-right: 24px; } [purpose='feature-image'].right { - margin-right: 24px; + margin-left: 24px; } [purpose='feature-image'] { max-width: 380px; @@ -327,7 +342,6 @@ font-size: 14px; font-style: normal; font-weight: 400; - line-height: 21px; padding-left: 37px; text-indent: -37px; margin-bottom: 1.5rem; @@ -347,9 +361,53 @@ height: 20px; } } + [purpose='feature-headline'] { + max-width: 510px; + margin-bottom: 80px; + } + [purpose='two-column-features'] { + max-width: 1080px; + margin-bottom: 140px; + } + [purpose='feature-row'] { + margin-bottom: 80px; + [purpose='feature-column'] { + margin-left: 40px; + margin-right: 40px; + max-width: 440px; + p { + font-size: 14px; + margin-bottom: 0px; + } + img { + height: 48px; + width: auto; + margin-bottom: 16px; + } + h5 { + font-weight: 800; + font-size: 16px; + line-height: @heading-lineheight; + margin-bottom: 16px; + } + } + } + [purpose='three-column-features'] { + margin-bottom: 160px; + max-width: 1080px; + [purpose='feature-row'] { + [purpose='feature-column'] { + max-width: 267px; + } + } + } + + [purpose='tweets-container'] { - padding-top: 200px; - max-width: 960px; + padding-top: 160px; + max-width: @page-container-max-width-xl; + padding-left: 80px; + padding-right: 80px; } [parasails-component='scrollable-tweets'] { [purpose='tweets'] { @@ -377,11 +435,11 @@ max-width: 100%; } [purpose='modal-content'] { - max-width: 960px; + max-width: @page-container-max-width-xl; height: 540px; } iframe { - width: 960px; + width: @page-container-max-width-xl; height: 540px; } } @@ -393,10 +451,24 @@ padding-right: 40px; } [purpose='page-content'] { - max-width: 840px; + max-width: @page-container-max-width-lg; } [purpose='tweets-container'] { - max-width: 840px; + max-width: @page-container-max-width-lg; + padding-left: 40px; + padding-right: 40px; + } + [purpose='testimonials'] { + margin-bottom: 100px; + } + [purpose='page-section'] { + margin-bottom: 140px; + } + [purpose='tweets-container'] { + padding-top: 120px; + } + [purpose='three-column-features'] { + margin-bottom: 140px; } [purpose='testimonial-videos'] { width: 410px; @@ -407,31 +479,53 @@ [purpose='feature-text'] { width: 410px; } + + [purpose='feature'].flex-column { + [purpose='feature-text'] { + margin-left: 40px; + } + } + [purpose='feature'].flex-column-reverse { + [purpose='feature-text'] { + margin-right: 40px; + } + } } @media (max-width: 767px) { - - [purpose='page-container'] { - padding-left: 40px; - padding-right: 40px; - } [purpose='page-content'] { - max-width: 480px; + max-width: @page-container-max-width-md; } [purpose='tweets-container'] { - max-width: 480px; - padding-left: 40px; - padding-right: 40px; + max-width: @page-container-max-width-md; padding-top: 120px; } [purpose='page-headline'] { - padding-bottom: 80px; + margin-bottom: 60px; width: 100%; h2 { font-size: 42px; - line-height: 50.4px; } } + [purpose='testimonials'] { + margin-bottom: 80px; + } + [purpose='testimonial-quote'] { + [purpose='quote'] { + p { + font-size: 18px; + } + } + } + [purpose='page-section'] { + margin-bottom: 120px; + } + [purpose='tweets-container'] { + padding-top: 120px; + } + [purpose='three-column-features'] { + margin-bottom: 140px; + } [purpose='hero-image'] { margin-right: unset; } @@ -442,6 +536,7 @@ [purpose='testimonial-videos'] { width: unset; } + [purpose='button-row'] { max-width: 100%; [purpose='cta-button'] { @@ -456,23 +551,48 @@ [purpose='feature'] { margin-bottom: 120px; } + [purpose='feature'].flex-column { + [purpose='feature-text'] { + margin-left: auto; + } + } + [purpose='feature'].flex-column-reverse { + [purpose='feature-text'] { + margin-right: auto; + } + } [purpose='feature-image'] { margin-left: auto; margin-right: auto; margin-bottom: 60px; &.left { - margin-left: auto; + margin-right: auto; } &.right { - margin-right: auto; + margin-left: auto; + } + } + [purpose='three-column-features'] { + [purpose='feature-row'] { + margin-bottom: 60px; + [purpose='feature-column'] { + margin-bottom: 60px; + margin-left: 0px; + margin-right: 0px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + max-width: unset; + p { + margin-bottom: 0px; + } + } } } [purpose='hero-image'] { margin-bottom: 60px; } - [purpose='testimonials'] { - margin-bottom: 120px; - } [purpose='testimonial-videos'] { margin-left: auto; margin-right: auto; @@ -515,14 +635,7 @@ } @media (max-width: 575px) { - [purpose='page-container'] { - padding-left: 40px; - padding-right: 40px; - } - [purpose='tweets-container'] { - padding-left: 40px; - padding-right: 40px; - } + [purpose='feature-image'] { img { max-width: 100%; @@ -545,19 +658,58 @@ margin-left: 10px; } } + [purpose='page-headline'] { + margin-bottom: 80px; + } + [purpose='page-section'] { + margin-bottom: 100px; + } + [purpose='tweets-container'] { + padding-top: 100px; + } + [purpose='three-column-features'] { + margin-bottom: 100px; + } + [purpose='two-column-features'] { + margin-bottom: 100px; + } + [purpose='video-modal'] { + [purpose='modal-content'] { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + iframe { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + } - [purpose='video-modal'] { - [purpose='modal-content'] { - width: 95vw; - height: calc(~'9/16 * 95vw'); - } - iframe { - width: 95vw; - height: calc(~'9/16 * 95vw'); - } - } + [purpose='two-column-features'] { + [purpose='feature-row'] { + margin-bottom: 60px; + [purpose='feature-column'] { + max-width: unset; + margin-bottom: 60px; + margin-left: 0px; + margin-right: 0px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + p { + margin-bottom: 0px; + } + } + } + } } @media (max-width: 472px) { + h1 { + font-size: 32px; + } + h2 { + font-size: 24px; + } [purpose='testimonial-videos'] { flex-direction: column; } @@ -574,12 +726,34 @@ margin-left: auto; } } - } @media (max-width: 375px) { + [purpose='page-headline'] { + margin-bottom: 60px; + } + [purpose='testimonial-quote'] { + [purpose='quote'] { + p { + font-size: 16px; + } + } + } + [purpose='page-section'] { + margin-bottom: 80px; + } + [purpose='tweets-container'] { + padding-top: 80px; + } + [purpose='three-column-features'] { + margin-bottom: 80px; + } + [purpose='two-column-features'] { + margin-bottom: 80px; + } + [purpose='page-container'] { - padding-left: 32px; - padding-right: 32px; + padding-left: 20px; + padding-right: 20px; } [purpose='tweets-container'] { padding-left: 32px; diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index dad94d6190..de3589c95d 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -540,7 +540,7 @@ border-radius: 12px; border: 1px dashed #C5C7D1; background: rgba(0, 0, 0, 0.01); - &:has(img){ + &:has(img) { background: #FFF; } margin-left: 8px; @@ -1116,7 +1116,7 @@ border-radius: 12px; border: 1px dashed #C5C7D1; background: rgba(0, 0, 0, 0.01); - &:has(img){ + &:has(img) { background: #FFF; } margin-left: 8px; diff --git a/website/config/policies.js b/website/config/policies.js index 27c8058792..b2082f70b3 100644 --- a/website/config/policies.js +++ b/website/config/policies.js @@ -47,7 +47,7 @@ module.exports.policies = { 'view-connect-vanta': true, 'view-vanta-authorization': true, 'create-vanta-authorization-request': true, - 'view-fleet-mdm': true, + 'view-device-management': true, 'deliver-mdm-beta-signup': true, 'deliver-apple-csr': true, 'download-rss-feed': true, diff --git a/website/config/routes.js b/website/config/routes.js index 8cab17376d..be8dd20cfa 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -249,7 +249,7 @@ module.exports.routes = { }, 'GET /device-management': { - action: 'view-fleet-mdm', + action: 'view-device-management', locals: { pageTitleForMeta: 'Device management (MDM) | Fleet', pageDescriptionForMeta: 'Configure your devices with sensible defaults, or customize MDM features exactly how you want. Manage your IT infrastructure in any browser or use git to make changes as code.', diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 7ee7cc56dd..fd6fa86b69 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -237,6 +237,7 @@ + @@ -245,7 +246,6 @@ - diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index 9e09961194..3070902481 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -342,6 +342,7 @@ + @@ -350,7 +351,6 @@ - diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index 0db60bd209..3e81398003 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -429,6 +429,7 @@ + @@ -437,7 +438,6 @@ - diff --git a/website/views/pages/device-management.ejs b/website/views/pages/device-management.ejs new file mode 100644 index 0000000000..f2aba03c8e --- /dev/null +++ b/website/views/pages/device-management.ejs @@ -0,0 +1,216 @@ +
+ 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.
+ Consolidate your tools +Deploy a modern Mac-first MDM that’s purpose-built to manage your Apple, Windows, and Linux computers.
+ Implement “zero trust” faster +Use Fleet to enforce conditional access checking at login. (It's pretty easy to customize whatever you need.)
+We wanted an open-source MDM to easily use configuration-as-code, deliver the best possible experience for our employees, and make security happy.
+
Kenny Botelho
+Lead Client Platform Engineer
+
+ 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.
+Ramp up to modern management faster with the latest compliance standards and security features built in.
+Reclaim lost engineering hours and leave clicky-clicky manual entry in the past. (There's a great GUI if you like clicking.)
+Lower barriers to integration with an intentional API-first design and surprisingly easy access to data. Everything you can do in the UI, you can do with the API.
+Deploy a modern Mac-first MDM that’s purpose-built to manage your Apple, Windows, and Linux computers.
+Shorten patch timelines with custom, enforceable deadlines and grace periods for every operating system. Encourage updates with Declarative Device Management (DDM), Nudge, and Windows Update from one interface.
+Remote-control settings on your Macs and PCs like Wi-Fi, certificates, passwords, screen lock, etc. Deploy baselines or customize your own to comply with your organization’s security requirements.
+Get employees the software and settings they need with less drama by managing app packages, operating system versions, and patch levels for every platform, on top of open standards and data.
+Turn on the latest native macOS and Windows operating system capabilities like DDM and Autopilot, all in one place. Fleet’s team and community test against every new Apple and Microsoft release.
+
+ Easily enroll everything in one place and please auditors without making engineers give up their Linux computers.
+Offboard employees with remote lock, and decommission lost and stolen devices with remote wipe.
+Connect to identity providers like Okta, Azure, Google Workspace, or any other that supports OpenID Connect.
+Keep hard disks encrypted with key escrow for FileVault and Bitlocker, and prove it with a couple of clicks or the REST API.
+Enroll all your devices with Apple Business Manager, Microsoft Autopilot, and built-in packages for Linux systems.
+Manage your IT infrastructure in any browser or use git to make infrastructure changes as code. You can use the CLI or API to automate the deployment, configuration, and monitoring of your devices.
+
+ Use Fleet to enforce conditional access checking at login. (It's pretty easy to customize whatever you need.)
+Ensure that only healthy, up-to-date devices can log in and access company data and resources with conditional access.
+Find vulnerable software, track progress for security remediation project deadlines, and enforce due dates with automations and tickets.
+Use common health checks from industry peers, or easily create your own with low-level access to system data and events.
+Reduce time wasted hunting down whether a change happened. Actually verify that settings are applied using real data pulled from your users' devices.
+Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting etc)
+Every change to a policy or security control is tracked and auditable in Fleet’s history, or via the repo commit log
+
+
+ Increase buy-in from end users by clarifying how their work computers are managed.
+Give end users assurance about what actions IT can take on their computer
+Let end users see exactly what data is collected, all the way down to the source code
+Set clear expectations about how to configure company devices
+
- Configure your devices with sensible defaults, or customize every traditional MDM feature exactly how you want it.
- Absolute certainty -Actually verify that settings are applied using real data pulled from your users' devices.
- ClickOps or DevOps -Manage your IT infrastructure in any browser or use git to make changes as code. Use the CLI or API to automate the deployment, configuration, and monitoring of your devices.
-We wanted an open-source MDM that is easy to integrate with our configuration-as-code environment and to deliver the best possible experience for our employees and make security happy.
-
Kenny Botelho
-Lead Client Platform Engineer
-
- Configure your users' computers with sensible defaults, or customize every traditional MDM feature exactly how you want it with Fleet's API, CLI, and webhooks.
-Migrate devices quickly with out-of-the-box features, or control every detail using a modern REST API
-Tasked with zero trust? Use sensible, enterprise-ready device health checks from the community, or build your own
-Set up and verify ongoing compliance with CIS standards (one click, 400+ queries, supported by Fleet), or pick and choose baselines for different environments
-Use default workflows for employee offboarding, or run any low-level MDM command
-Reduce time wasted hunting down whether a change happened. Actually verify that settings are applied using real data pulled from your users' devices.
-Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting, etc.)
-Every change to a policy or security control is tracked and auditable in Fleet’s history, or via the repo commit log
-
-
- Manage your IT infrastructure in any browser, or use git to make changes using your existing approval processes and audit trail.
-Increase buy-in from end users by clarifying how their work computers are managed.
-Give end users assurance about what actions IT can take on their computer
-Let end users see exactly what data is collected, all the way down to the source code
-Set clear expectations about how to configure company devices
-
- Fill out the form below to see Dave bootstrapping a macOS device with MDM.
-How many hosts do you have?
-We just sent you an email in case you need to watch it again.
-Watch Dave's MDM demo
-