diff --git a/website/assets/images/logo-docker-51x36@2x.png b/website/assets/images/logo-docker-51x36@2x.png new file mode 100644 index 0000000000..eb13923500 Binary files /dev/null and b/website/assets/images/logo-docker-51x36@2x.png differ diff --git a/website/assets/images/logo-node-59x36@2x.png b/website/assets/images/logo-node-59x36@2x.png new file mode 100644 index 0000000000..93eb96fc81 Binary files /dev/null and b/website/assets/images/logo-node-59x36@2x.png differ diff --git a/website/assets/images/logo-slack-24x24@2x.png b/website/assets/images/logo-slack-24x24@2x.png new file mode 100644 index 0000000000..ca0c7af6be Binary files /dev/null and b/website/assets/images/logo-slack-24x24@2x.png differ diff --git a/website/assets/images/logo-slack-28x28@2x.png b/website/assets/images/logo-slack-28x28@2x.png deleted file mode 100644 index 8fc00a6aad..0000000000 Binary files a/website/assets/images/logo-slack-28x28@2x.png and /dev/null differ diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less index 7b6215be6d..93b02dcf17 100644 --- a/website/assets/styles/bootstrap-overrides.less +++ b/website/assets/styles/bootstrap-overrides.less @@ -33,13 +33,13 @@ h1, h2, h3, h4 { } h1 { - font-size: 48px; - line-height: 56px; + font-size: 36px; + line-height: 48px; } h2 { - font-size: 36px; - line-height: 48px; + font-size: 28px; + line-height: 36px; } p { diff --git a/website/assets/styles/mixins-and-variables/typography.less b/website/assets/styles/mixins-and-variables/typography.less index 6ea90853d9..c28036fc2b 100644 --- a/website/assets/styles/mixins-and-variables/typography.less +++ b/website/assets/styles/mixins-and-variables/typography.less @@ -3,6 +3,8 @@ @header-font: 'Nunito Sans', sans-serif; @navigation-font: 'Nunito Sans', sans-serif; +@code-font: 'Source Code Pro', sans-serif; + // Font weights: @bold: 700; @normal: 400; diff --git a/website/assets/styles/pages/get-started.less b/website/assets/styles/pages/get-started.less index 73bb9fcdea..569a790ed2 100644 --- a/website/assets/styles/pages/get-started.less +++ b/website/assets/styles/pages/get-started.less @@ -1,75 +1,89 @@ #get-started { - h1, p { - color: #192147; - } - section { - max-width: 800px; - } + a { - color: #6a67fe; - } - #primary-button { - color: #fff; - } - #learn-more { - background: #f9fafc; - filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1)); - box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.05); - padding: 0px; + color: @core-vibrant-blue; } + .btn { - font-family: @header-font; - font-weight: 700; - padding-top: 18px; - padding-bottom: 18px; - font-size: 20px; - line-height: 23px; - border-radius: 10px; - &.btn-schedule { - position: relative; - padding-right: 20px; - color: #192147; - background-color: #f9fafc; - border-color: #f9fafc; + font-size: 16px; + line-height: 25px; + padding: 16px 32px; + } + + .btn-primary { + color: #fff; + &:active { + background: @core-vibrant-red; + border-color: @core-vibrant-red; } } - #arrow { - padding-right: 45px; - cursor: pointer; - position: relative; - width: auto; - color: #192147; - 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; + .btn-outline-secondary { + color: @core-fleet-black; + border: 1px solid #C5C7D1; + &:hover { + background: #fff; + } + &:focus { + box-shadow: none; + } } - #arrow:before { - content: url('/images/arrow-right-16x16@2x.png'); - transform: scale(0.5); - position: absolute; - top: 12px; - 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; */ + .btn-node { + color: #fff; + background: #333; + img { + display: inline; + height: 36px; + width: auto; + } + &:focus { + box-shadow: none; + } } - #arrow:hover:before { - 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; */ + .btn-docker { + color: #fff; + background: #0073EC; + img { + display: inline; + height: 36px; + width: auto; + } + &:focus { + box-shadow: none; + } + } + + .btn-slack { + img { + display: inline; + height: 24px; + width: auto; + } + &:focus { + box-shadow: none; + } + } + + .muted { + padding: 24px; + border: 1px solid @core-fleet-black-25; + border-radius: 4px; + margin: 16px 0px 32px; + background: @ui-off-white; + p { + font-family: @code-font; + font-weight: @normal; + font-size: 18px; + line-height: 32px; + margin-bottom: 0px; + } + .comment { + color: @core-fleet-black-50; + } + .command { + color: @core-fleet-black; + } } } diff --git a/website/config/routes.js b/website/config/routes.js index e1158c4a96..2bfaba892f 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -17,7 +17,7 @@ module.exports.routes = { 'GET /company/contact': { action: 'view-contact' }, 'GET /get-started': { action: 'view-pricing' }, - 'GET /install': 'https://github.com/fleetdm/fleet/blob/main/README.md', // « FUTURE: When ready, bring back { action: 'view-get-started' } + 'GET /install': { action: 'view-get-started' }, '/hall-of-fame': 'https://github.com/fleetdm/fleet/pulse', '/company/about': '/handbook', // FUTURE: brief "about" page explaining the origins of the company diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index a4dc10ccad..c6a471bbc2 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -22,7 +22,7 @@ Google Fonts, etc. - above the «body» to prevent the page flickering when fonts load.) */ %> - + <% /* Certain scripts, normally analytics tools like Google Tag Manager and Google Analytics, should only be included in production: */ if (sails.config.environment === 'production') { %> @@ -154,7 +154,7 @@ Follow us on Twitter - Slack logo + Slack logo Join the community on Slack diff --git a/website/views/pages/get-started.ejs b/website/views/pages/get-started.ejs index a4818f081e..715f7cdcfb 100644 --- a/website/views/pages/get-started.ejs +++ b/website/views/pages/get-started.ejs @@ -1,107 +1,44 @@
-
-
-
-

Get Started with Fleet

-

- No need to put the kettle on, you'll be up and running before you can - say "osquery." -

- Fleet introduction to hosts -
-
-

Try Fleet

-

- With - Node.js - and - Docker - installed: -

- Install and run fleet in command-line -

- The Fleet UI is now available at - http://localhost:1337. -

-
-
-
-

Ready to run your first query?

-

- Target some of the sample hosts included, and give it a try. -
Unsure of what questions to ask? - Here’s a few queries to get you started. -

- Install and run fleet in command-line -
-
-
-
-
-
-

Learn more about how to use Fleet

-
    -
  • - See how companies like Palantir use osquery in production. -
    • -
  • - Need even more functionality? Install osquery extensions - like these from Trail of Bits. -
    • -
-
- - Go to docs - - Schedule a demo - -
-
-
-
-
-
+
+

Get started

+
+

1. Install Node and Docker

+

If you don't have them already, you can install Node.js and Docker to run Fleet on your laptop.

+
+ + NodeJS logo + Find my Node installer + + + Docker logo + Get Docker + +
+
+

2. Install Fleet

+

To install Fleet:

+
+

# Install the Fleet command-line tool

+

npm install -g fleetctl

+

# Run a local demo of the Fleet server

+

sudo fleetctl preview

+
+

The Fleet UI is now available at http://localhost:1337.

+
+
+

Next steps

+
+ + Learn how to use Fleet + + + Slack logo + Ask for help on Slack + +
+
+
+