diff --git a/website/api/controllers/view-support.js b/website/api/controllers/view-support.js new file mode 100644 index 0000000000..88b92cbde0 --- /dev/null +++ b/website/api/controllers/view-support.js @@ -0,0 +1,27 @@ +module.exports = { + + + friendlyName: 'View support', + + + description: 'Display "Support" page.', + + + exits: { + + success: { + viewTemplatePath: 'pages/support' + } + + }, + + + fn: async function () { + + // Respond with view. + return {}; + + } + + +}; diff --git a/website/assets/images/icon-ask-anything-64x64@2x.png b/website/assets/images/icon-ask-anything-64x64@2x.png new file mode 100644 index 0000000000..d91d9309a5 Binary files /dev/null and b/website/assets/images/icon-ask-anything-64x64@2x.png differ diff --git a/website/assets/images/icon-bug-64x64@2x.png b/website/assets/images/icon-bug-64x64@2x.png new file mode 100644 index 0000000000..55e96704ee Binary files /dev/null and b/website/assets/images/icon-bug-64x64@2x.png differ diff --git a/website/assets/images/icon-premium-support-64x64@2x.png b/website/assets/images/icon-premium-support-64x64@2x.png new file mode 100644 index 0000000000..d9199e2034 Binary files /dev/null and b/website/assets/images/icon-premium-support-64x64@2x.png differ diff --git a/website/assets/images/icon-suggestion-64x64@2x.png b/website/assets/images/icon-suggestion-64x64@2x.png new file mode 100644 index 0000000000..59ed3a258f Binary files /dev/null and b/website/assets/images/icon-suggestion-64x64@2x.png differ diff --git a/website/assets/images/logo-macadmins-48x48@2x.png b/website/assets/images/logo-macadmins-48x48@2x.png new file mode 100644 index 0000000000..fe26ce907c Binary files /dev/null and b/website/assets/images/logo-macadmins-48x48@2x.png differ diff --git a/website/assets/images/logo-osquery-48x48@2x.png b/website/assets/images/logo-osquery-48x48@2x.png new file mode 100644 index 0000000000..f317b184a6 Binary files /dev/null and b/website/assets/images/logo-osquery-48x48@2x.png differ diff --git a/website/assets/js/pages/support.page.js b/website/assets/js/pages/support.page.js new file mode 100644 index 0000000000..dafec182db --- /dev/null +++ b/website/assets/js/pages/support.page.js @@ -0,0 +1,29 @@ +parasails.registerPage('support', { + // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ + // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ + // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ + 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 fa3f22bde5..6000f28d3f 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -74,6 +74,7 @@ @import 'pages/transparency.less'; @import 'pages/press-kit.less'; @import 'pages/vulnerability-management.less'; +@import 'pages/support.less'; // Imagine = landing pages for Marketing diff --git a/website/assets/styles/pages/support.less b/website/assets/styles/pages/support.less new file mode 100644 index 0000000000..515c40b038 --- /dev/null +++ b/website/assets/styles/pages/support.less @@ -0,0 +1,234 @@ +#support { + + background: linear-gradient(180deg, #E8F1F6 0%, #FFF 100%); + + p { + font-size: 16px; + line-height: 24px; + } + + a { + color: unset; + } + + a:hover { + text-decoration: none; + } + + h1 { + font-size: 36px; + font-weight: 800; + line-height: 54px; + margin-bottom: 16px; + } + h2 { + font-size: 18px; + line-height: 27px; + } + + [purpose='page-container'] { + max-width: 1200px; + padding-top: 60px; + padding-bottom: 60px; + padding-left: 40px; + padding-right: 40px; + } + + [purpose='page-title'] { + margin-bottom: 60px; + text-align: center; + max-width: 800px; + } + + [purpose='support-card']:hover { + box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.05); + } + [purpose='support-card'] { + cursor: pointer; + img { + height: auto; + width: 48px; + margin-bottom: 16px; + } + h3 { + font-size: 18px; + font-weight: 700; + line-height: 27px; + } + p { + font-size: 14px; + line-height: 21px; + margin-bottom: 0px; + } + height: 318px; + background: #FFFFFF; + border: 1px solid #E2E4EA; + border-radius: 16px; + padding: 40px; + margin-left: 12px; + margin-right: 12px; + margin-bottom: 30px; + box-shadow: none; + } + + + [purpose='community-cards'] { + [purpose='support-card'] { + width: 100%; + height: 200px; + img { + margin-right: 12px; + } + } + } + [purpose='support-cards'] { + flex-direction: column; + [purpose='support-row'] { + flex-direction: row; + width: 100%; + } + a { + width: 50%; + } + + margin-bottom: 30px; + } + + @media (min-width: 1201px) { + [purpose='page-container'] { + max-width: 1200px; + padding-top: 80px; + padding-bottom: 80px; + } + + + [purpose='support-cards'] { + flex-direction: row; + margin-bottom: 50px; + max-width: 1120px; + [purpose='support-row'] { + flex-direction: row; + } + } + + [purpose='support-row'] { + [purpose='support-card'] { + width: 282px; + height: 221px; + } + } + + [purpose='community-cards'] { + [purpose='support-card'] { + width: 384px; + height: 178px; + } + } + [purpose='page-title'] { + margin-bottom: 80px; + } + + + } + @media (max-width: 1201px) { + [purpose='page-container'] { + padding-top: 60px; + padding-bottom: 60px; + } + + [purpose='community-cards'] { + a { + width: 50%; + } + [purpose='support-card'] { + height: 178px; + } + } + [purpose='support-cards'] { + [purpose='support-card'] { + height: 200px; + } + } + } + @media (max-width: 991px) { + [purpose='support-card'] { + margin-bottom: 30px; + } + [purpose='support-cards'] { + [purpose='support-card'] { + height: 221px; + } + } + + } + @media (max-width: 768px) { + + [purpose='support-cards'] { + flex-direction: column; + [purpose='support-row'] { + flex-direction: column; + } + a { + width: 100%; + } + } + + [purpose='community-cards'] { + a { + width: 100%; + } + } + + } + @media (max-width: 576px) { + + [purpose='support-cards'] { + [purpose='support-card'] { + text-align: center; + align-items: center; + } + } + [purpose='community-cards'] { + [purpose='support-card'] { + padding: 32px 40px 40px 40px; + } + } + [purpose='page-title'] { + margin-bottom: 40px; + max-width: 380px; + } + [purpose='page-container'] { + padding-top: 40px; + padding-bottom: 40px; + padding-left: 24px; + padding-right: 24px; + } + } + @media (max-width: 375px) { + + h1 { + line-height: 43px; + } + + [purpose='support-card'] { + margin-bottom: 30px; + margin-right: 0px; + margin-left: 0px; + } + [purpose='community-cards'] { + [purpose='support-card'] { + padding-top: 32px; + margin-bottom: 16px; + } + } + [purpose='support-cards'] { + [purpose='support-card'] { + margin-bottom: 16px; + } + } + + } + + + +} diff --git a/website/config/policies.js b/website/config/policies.js index 9cc44fc066..df377db37d 100644 --- a/website/config/policies.js +++ b/website/config/policies.js @@ -59,4 +59,5 @@ module.exports.policies = { 'view-osquery-management': true, 'view-vulnerability-management': true, 'deliver-mdm-demo-email': true, + 'view-support': true, }; diff --git a/website/config/routes.js b/website/config/routes.js index 29f9788841..c7285c3937 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -281,6 +281,8 @@ module.exports.routes = { } }, + 'GET /support': { action: 'view-support' }, + // ╦╔╦╗╔═╗╔═╗╦╔╗╔╔═╗ ┌─┬ ┌─┐┌┐┌┌┬┐┬┌┐┌┌─┐ ┌─┐┌─┐┌─┐┌─┐┌─┐─┐ // ║║║║╠═╣║ ╦║║║║║╣ │ │ ├─┤│││ │││││││ ┬ ├─┘├─┤│ ┬├┤ └─┐ │ @@ -380,7 +382,6 @@ module.exports.routes = { 'GET /install': '/fleetctl-preview', 'GET /company': '/company/about', 'GET /company/about': '/handbook', // FUTURE: brief "about" page explaining the origins of the company - 'GET /support': '/company/contact', 'GET /contact': '/company/contact', 'GET /legal': '/legal/terms', 'GET /terms': '/legal/terms', diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 796c5f71c1..e392c3487f 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -265,6 +265,7 @@ + diff --git a/website/views/layouts/layout-landing.ejs b/website/views/layouts/layout-landing.ejs index dfbdb057bd..26d02442e2 100644 --- a/website/views/layouts/layout-landing.ejs +++ b/website/views/layouts/layout-landing.ejs @@ -265,6 +265,7 @@ + diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index e7d7c2fc7d..4636bbdc45 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -174,8 +174,9 @@
Docs Releases - Query library - Schema tables + Health checks & queries + Explore data + Support GUIDES Deployment guides How-to guides @@ -228,8 +229,9 @@
-

Can't find what you're looking for? Support

+

Can't find what you're looking for? Support

@@ -221,7 +221,7 @@

Need more help?

- + Slack logo Ask the community on Slack diff --git a/website/views/pages/support.ejs b/website/views/pages/support.ejs new file mode 100644 index 0000000000..c3b6810586 --- /dev/null +++ b/website/views/pages/support.ejs @@ -0,0 +1,74 @@ +
+
+
+

Support

+

Ask a question, chat with other engineers, or get in touch with the Fleet team.

+
+ +
+

Ask the community

+

Fleet has an active open-source community of knowledgable and helpful users. If you have a question about something that isn't in the documentation, try one of these places:

+
+ +
+
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>