diff --git a/website/api/controllers/download-sitemap.js b/website/api/controllers/download-sitemap.js index 50d718a400..813858a564 100644 --- a/website/api/controllers/download-sitemap.js +++ b/website/api/controllers/download-sitemap.js @@ -65,6 +65,7 @@ module.exports = { '/deploy', '/podcasts', '/device-management', + '/osquery-management', // FUTURE: Do something smarter to get hand-coded HTML pages from routes.js, like how rebuild-cloud-sdk works, to avoid this manual duplication. // See also https://github.com/sailshq/sailsjs.com/blob/b53c6e6a90c9afdf89e5cae00b9c9dd3f391b0e7/api/helpers/get-pages-for-sitemap.js#L27 ]; diff --git a/website/api/controllers/view-osquery-management.js b/website/api/controllers/view-osquery-management.js new file mode 100644 index 0000000000..fbb0736c04 --- /dev/null +++ b/website/api/controllers/view-osquery-management.js @@ -0,0 +1,27 @@ +module.exports = { + + + friendlyName: 'View osquery management', + + + description: 'Display "Osquery management" page.', + + + exits: { + + success: { + viewTemplatePath: 'pages/osquery-management' + } + + }, + + + fn: async function () { + + // Respond with view. + return {}; + + } + + +}; diff --git a/website/assets/images/osquery-management-feature-image-1.svg b/website/assets/images/osquery-management-feature-image-1.svg new file mode 100644 index 0000000000..b20aa6c30f --- /dev/null +++ b/website/assets/images/osquery-management-feature-image-1.svg @@ -0,0 +1,94 @@ + diff --git a/website/assets/images/osquery-management-feature-image-2.svg b/website/assets/images/osquery-management-feature-image-2.svg new file mode 100644 index 0000000000..364799312f --- /dev/null +++ b/website/assets/images/osquery-management-feature-image-2.svg @@ -0,0 +1,205 @@ + diff --git a/website/assets/images/osquery-management-feature-image-3.svg b/website/assets/images/osquery-management-feature-image-3.svg new file mode 100644 index 0000000000..0a037c50a3 --- /dev/null +++ b/website/assets/images/osquery-management-feature-image-3.svg @@ -0,0 +1,147 @@ + diff --git a/website/assets/images/osquery-management-feature-image-4.svg b/website/assets/images/osquery-management-feature-image-4.svg new file mode 100644 index 0000000000..161dd18007 --- /dev/null +++ b/website/assets/images/osquery-management-feature-image-4.svg @@ -0,0 +1,291 @@ + diff --git a/website/assets/js/pages/osquery-management.page.js b/website/assets/js/pages/osquery-management.page.js new file mode 100644 index 0000000000..6f7b4fa186 --- /dev/null +++ b/website/assets/js/pages/osquery-management.page.js @@ -0,0 +1,25 @@ +parasails.registerPage('osquery-management', { + // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ + // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ + // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ + data: { + //… + }, + + // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ + // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ + // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ + beforeMount: function() { + //… + }, + mounted: async function() { + //… + }, + + // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ + // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ + // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ + methods: { + //… + } +}); diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less index 449a93b3dd..2af1205004 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -71,6 +71,7 @@ @import 'pages/fleet-mdm.less'; @import 'pages/upgrade.less'; @import 'pages/compliance.less'; +@import 'pages/osquery-management.less'; @import 'pages/transparency.less'; @import 'pages/press-kit.less'; diff --git a/website/assets/styles/pages/osquery-management.less b/website/assets/styles/pages/osquery-management.less new file mode 100644 index 0000000000..c607a4991d --- /dev/null +++ b/website/assets/styles/pages/osquery-management.less @@ -0,0 +1,366 @@ +#osquery-management { + + 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 { + color: @core-fleet-black-75; + font-weight: 500; + font-size: 18px; + line-height: 24px; + /* Text gradient */ + background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + display: inline-block; + /* End text gradient */ + } + 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; + } + [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'] { + height: 100%; + img { + max-height: 300px; + } + } + + [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; + background-color: @ui-off-white; + } + + [purpose='logos'] { + height: 80px; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + img { + margin-top: 23.5px; + margin-bottom: 23.5px; + padding-left: 35px; + padding-right: 35px; + } + [purpose='snowflake-logo'] { + height: 30px; + } + [purpose='wayfair-logo'] { + height: 33px; + } + [purpose='uber-logo'] { + height: 29px; + } + [purpose='atlassian-logo'] { + height: 22px; + } + [purpose='segment-logo'] { + height: 32px; + } + } + + @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'] { + 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/policies.js b/website/config/policies.js index d4af44426c..5820ca0ce8 100644 --- a/website/config/policies.js +++ b/website/config/policies.js @@ -55,4 +55,5 @@ module.exports.policies = { 'view-upgrade': true, 'deliver-premium-upgrade-form': true, 'view-compliance': true, + 'view-osquery-management': true, }; diff --git a/website/config/routes.js b/website/config/routes.js index c953fb4007..200d0f5af5 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -274,6 +274,14 @@ module.exports.routes = { } }, + 'GET /osquery-management': { + action: 'view-osquery-management', + locals: { + pageTitleForMeta: 'Osquery management | Fleet for osquery', + pageDescriptionForMeta: 'Fleet lets you harness the power of osquery to stream accurate, real-time data from all your endpoints.', + } + }, + // ╦╔╦╗╔═╗╔═╗╦╔╗╔╔═╗ ┌─┬ ┌─┐┌┐┌┌┬┐┬┌┐┌┌─┐ ┌─┐┌─┐┌─┐┌─┐┌─┐─┐ diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 8cb4980dfc..394f7525c2 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -256,6 +256,7 @@ + diff --git a/website/views/layouts/layout-landing.ejs b/website/views/layouts/layout-landing.ejs index 2b2ebc0ae4..40baae28d9 100644 --- a/website/views/layouts/layout-landing.ejs +++ b/website/views/layouts/layout-landing.ejs @@ -257,6 +257,7 @@ + diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index 3f437ce9f3..acaa1a9d03 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -164,7 +164,6 @@ Platform