mirror of
https://github.com/fleetdm/fleet
synced 2026-05-06 06:48:54 +00:00
New "Get started" page on fleetdm.com (#1721)
* Add "Get started" page to fleetdm.com * Update website/views/pages/get-started.ejs * Update get-started.ejs Responsive button fixes. Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
gillespi314
GitHub
parent
b804f2e569
commit
feba649db5
10 changed files with 125 additions and 172 deletions
BIN
website/assets/images/logo-docker-51x36@2x.png
vendored
Normal file
BIN
website/assets/images/logo-docker-51x36@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
website/assets/images/logo-node-59x36@2x.png
vendored
Normal file
BIN
website/assets/images/logo-node-59x36@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
website/assets/images/logo-slack-24x24@2x.png
vendored
Normal file
BIN
website/assets/images/logo-slack-24x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
website/assets/images/logo-slack-28x28@2x.png
vendored
BIN
website/assets/images/logo-slack-28x28@2x.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
138
website/assets/styles/pages/get-started.less
vendored
138
website/assets/styles/pages/get-started.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
website/config/routes.js
vendored
2
website/config/routes.js
vendored
|
|
@ -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
|
||||
|
||||
|
|
|
|||
4
website/views/layouts/layout.ejs
vendored
4
website/views/layouts/layout.ejs
vendored
|
|
@ -22,7 +22,7 @@
|
|||
Google Fonts, etc. - above the «body» to prevent the page flickering when fonts
|
||||
load.) */ %>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800;900&display=swap&Source+Code+Pro&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
|
||||
<% /* 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
|
||||
</a>
|
||||
<a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" class="d-flex flex-nowrap justify-content-center align-items-center px-1 px-sm-5 pb-4 pb-lg-0">
|
||||
<img alt="Slack logo" src="/images/logo-slack-28x28@2x.png" style="height: 25px; width: auto" class="mr-3"/>
|
||||
<img alt="Slack logo" src="/images/logo-slack-24x24@2x.png" style="height: 25px; width: auto" class="mr-3"/>
|
||||
<span>Join the community<span purpose="join-the-community-on-slack-expanded-text"> on Slack</span></span>
|
||||
</a>
|
||||
<a href="https://github.com/fleetdm/fleet" class="d-flex flex-shrink-1 justify-content-center align-items-center px-0 pb-4 pb-lg-0">
|
||||
|
|
|
|||
143
website/views/pages/get-started.ejs
vendored
143
website/views/pages/get-started.ejs
vendored
|
|
@ -1,107 +1,44 @@
|
|||
<div id="get-started">
|
||||
<div class="pb-5">
|
||||
<div
|
||||
style="max-width: 1260px"
|
||||
class="container-fluid pt-5 px-4 px-sm-5 mx-auto"
|
||||
>
|
||||
<section id="install-section" class="py-4 mx-auto">
|
||||
<h1>Get Started with Fleet</h1>
|
||||
<p class="mb-4">
|
||||
No need to put the kettle on, you'll be up and running before you can
|
||||
say "osquery."
|
||||
</p>
|
||||
<img
|
||||
alt="Fleet introduction to hosts"
|
||||
src="/images/intro-pic-800x364@2x.png"
|
||||
style="max-width: 900px; height: auto"
|
||||
class="w-100 my-5 mx-auto"
|
||||
/>
|
||||
</section>
|
||||
<section id="try-fleet" class="py-4 mx-auto">
|
||||
<h2 class="mb-3">Try Fleet</h2>
|
||||
<p class="my-2">
|
||||
With
|
||||
<a href="https://nodejs.org/en/download/" target="_blank">Node.js</a>
|
||||
and
|
||||
<a href="https://docs.docker.com/get-docker/" target="_blank"
|
||||
>Docker</a
|
||||
>
|
||||
installed:
|
||||
</p>
|
||||
<img
|
||||
alt="Install and run fleet in command-line"
|
||||
src="/images/install-fleet-800x188@2x.png"
|
||||
style="max-width: 900px; height: auto"
|
||||
class="w-100 my-5 mx-auto"
|
||||
/>
|
||||
<p>
|
||||
The Fleet UI is now available at
|
||||
<a href="http://localhost:1337" target="_blank"
|
||||
>http://localhost:1337</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
<hr class="solid" style="max-width: 800px" />
|
||||
<section id="query-section" class="py-4 mx-auto">
|
||||
<h2 class="mb-3">Ready to run your first query?</h2>
|
||||
<p class="mb-5">
|
||||
Target some of the sample hosts included, and give it a try.
|
||||
<br />Unsure of what questions to ask?
|
||||
<a
|
||||
href="https://github.com/fleetdm/fleet/tree/main/handbook/queries"
|
||||
target="_blank"
|
||||
>Here’s a few queries to get you started.</a
|
||||
>
|
||||
</p>
|
||||
<img
|
||||
alt="Install and run fleet in command-line"
|
||||
src="/images/run-query-800x537@2x.png"
|
||||
style="max-width: 900px; height: auto"
|
||||
class="w-100 my-4 mx-auto"
|
||||
/>
|
||||
</section>
|
||||
<section class="py-5 mx-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg px-1 mx-auto" style="max-width: 810px">
|
||||
<div style="border-radius: 15px" class="mb-4">
|
||||
<div class="py-5 px-5" id="learn-more">
|
||||
<h2 class="mb-3">Learn more about how to use Fleet</h2>
|
||||
<ul class="mb-5">
|
||||
<li>
|
||||
See how companies like <a href="https://github.com/palantir/osquery-configuration/tree/master/Fleet" target="_blank">Palantir</a> use osquery in production.
|
||||
</li>
|
||||
<li>
|
||||
Need even more functionality? Install osquery extensions
|
||||
like <a href="https://github.com/trailofbits/osquery-extensions">these</a> from Trail of Bits.
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="tpbutton btn-toolbar"
|
||||
style="text-align: left"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/fleetdm/fleet/tree/main/docs"
|
||||
style="max-width: 150px"
|
||||
class="btn btn-block btn-md btn-primary my-1 mr-2"
|
||||
id="primary-button"
|
||||
>
|
||||
Go to docs
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://calendly.com/fleetdm/demo"
|
||||
style="max-width: 250px"
|
||||
class="btn btn-block btn-lg btn-schedule my-1 ml-2"
|
||||
id="arrow"
|
||||
>Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div style="max-width: 800px; padding-top: 80px; padding-bottom: 80px;" class="container-fluid px-3">
|
||||
<h1 class="pb-4 m-0">Get started</h1>
|
||||
<div class="pt-3 pb-4">
|
||||
<h2 class="mb-3">1. Install Node and Docker</h2>
|
||||
<p>If you don't have them already, you can install Node.js and Docker to run Fleet on your laptop.</p>
|
||||
<div class="d-sm-flex">
|
||||
<a href="https://nodejs.org/en/download/" target="_blank" class="d-flex btn btn-md btn-node justify-content-center align-items-center mr-sm-3">
|
||||
<img class="pr-3" alt="NodeJS logo" src="/images/logo-node-59x36@2x.png"/>
|
||||
Find my Node installer
|
||||
</a>
|
||||
<a href="https://docs.docker.com/get-docker/" target="_blank" class="d-flex btn btn-md btn-docker justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img class="pr-3" alt="Docker logo" src="/images/logo-docker-51x36@2x.png"/>
|
||||
Get Docker
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<h2 class="pt-3 mb-3">2. Install Fleet</h2>
|
||||
<p>To install Fleet:</p>
|
||||
<div class="muted">
|
||||
<p class="comment"># Install the Fleet command-line tool</p>
|
||||
<p class="command">npm install -g fleetctl</p>
|
||||
<p class="comment"># Run a local demo of the Fleet server</p>
|
||||
<p class="command">sudo fleetctl preview</p>
|
||||
</div>
|
||||
<p class="mb-0">The Fleet UI is now available at <a href="http://localhost:1337" target="_blank">http://localhost:1337</a>.</p>
|
||||
</div>
|
||||
<div style="padding-top: 80px;">
|
||||
<h2 class="mb-4">Next steps</h2>
|
||||
<div class="d-sm-flex">
|
||||
<a href="/docs/using-fleet/learn-how-to-use-fleet" class="d-flex btn btn-primary btn-md justify-content-center mr-sm-3">
|
||||
Learn how to use Fleet
|
||||
</a>
|
||||
<a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank" class="d-flex btn btn-md btn-outline-secondary btn-slack justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
|
||||
Ask for help on Slack
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue