mirror of
https://github.com/fleetdm/fleet
synced 2026-05-05 22:39:17 +00:00
Website: Update homepage CTA (#5265)
* update animated button styles * clean up stylesheet, bring back demo button * Update homepage.less * button update * update img src
This commit is contained in:
Eric
GitHub
parent
b3fc0cd844
commit
bfef6cf368
9 changed files with 103 additions and 250 deletions
|
Before Width: | Height: | Size: 345 B After Width: | Height: | Size: 345 B |
BIN
website/assets/images/arrow-right-white-16x16@2x.png
vendored
Normal file
BIN
website/assets/images/arrow-right-white-16x16@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 B |
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-animated-arrow() {
|
||||
.btn-animated-arrow-red() {
|
||||
padding-right: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
&:before {
|
||||
content: url('/images/arrow-right-16x16@2x.png');
|
||||
content: url('/images/arrow-right-red-16x16@2x.png');
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
|
@ -48,3 +48,40 @@
|
|||
/* opacity:1; */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-animated-arrow-white() {
|
||||
padding-right: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: auto;
|
||||
color: #FFF;
|
||||
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;
|
||||
&:before {
|
||||
content: url('/images/arrow-right-white-16x16@2x.png');
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
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: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; */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
208
website/assets/styles/pages/homepage.less
vendored
208
website/assets/styles/pages/homepage.less
vendored
|
|
@ -11,25 +11,11 @@
|
|||
line-height: 36px;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
font-family: @main-font;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #ff5c83;
|
||||
border-color: #ff5c83;
|
||||
&:hover {
|
||||
background-color: darken(#ff5c83, 10%);
|
||||
border-color: darken(#ff5c83, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-banner {
|
||||
[purpose='hero-banner'] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(173.74deg, #1F1D42 4.94%, #00FFF0 87.78%);
|
||||
|
|
@ -42,19 +28,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hero-clouds {
|
||||
[purpose='hero-clouds'] {
|
||||
background-image: url('/images/clouds-1600x320@2x.png');
|
||||
background-position: bottom 150px center;
|
||||
background-size: 1600px auto;
|
||||
background-repeat: repeat-x;
|
||||
|
||||
}
|
||||
|
||||
.log-destination-grid {
|
||||
max-width: 736px;;
|
||||
|
||||
[purpose='top-try-it-out-btn'] {
|
||||
max-width: 220px;
|
||||
line-height: 24px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.log-destination {
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
[purpose='animated-arrow-button-white'] {
|
||||
.btn-animated-arrow-white();
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
[purpose='log-destination-grid'] {
|
||||
max-width: 736px;
|
||||
}
|
||||
|
||||
[purpose='log-destination'] {
|
||||
height: 80px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -85,115 +87,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.avatar-frame {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
border-radius: 50%;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
display: inline;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.logos {
|
||||
max-width: 360px;
|
||||
img {
|
||||
width: auto;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='demo-cta'] {
|
||||
padding: 16px;
|
||||
background: rgba(25, 33, 71, 0.5);
|
||||
border-radius: 16px;
|
||||
[purpose='demo-cta-text' ] {
|
||||
white-space: nowrap;
|
||||
p {
|
||||
vertical-align: middle;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
margin-block-end: 0px;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
height: 44px;
|
||||
padding: 4px 4px 4px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
input {
|
||||
border: none;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
}
|
||||
input:focus {
|
||||
border: none;
|
||||
outline: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
[purpose='demo-cta-form' ] {
|
||||
position: relative;
|
||||
}
|
||||
[purpose='demo-cta-error-message'] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 52px;
|
||||
padding: 4px 8px;
|
||||
background: #D66C7B;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #FFFFFF;
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #D66C7B;
|
||||
z-index: 1000;
|
||||
top: -3px;
|
||||
left: 10px;
|
||||
border-top: 1px solid #D66C7B;
|
||||
border-right: 1px solid #D66C7B;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
[purpose='register-button'] {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
min-width: 87px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='demo-cta-success-message'] {
|
||||
padding: 25px 16px;
|
||||
background: rgba(25, 33, 71, 0.5);
|
||||
border-radius: 12px;
|
||||
max-width: 960px;
|
||||
p {
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
margin-block-end: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='animated-arrow-button'] {
|
||||
.btn-animated-arrow();
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
[purpose='tweets'] {
|
||||
|
|
@ -205,9 +99,6 @@
|
|||
flex: 0 1 326px;
|
||||
}
|
||||
}
|
||||
[purpose='demo-cta'] {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
|
@ -221,49 +112,25 @@
|
|||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
[purpose='demo-cta-container'] {
|
||||
padding-left: 65px;
|
||||
padding-right: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
[purpose='demo-cta'] {
|
||||
[purpose='demo-cta-text' ] {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 990px) {
|
||||
[purpose='tweets'] {
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 295px;
|
||||
}
|
||||
}
|
||||
[purpose='demo-cta-container'] {
|
||||
padding-left: 45px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 722px) {
|
||||
[purpose='demo-cta-container'] {
|
||||
[purpose='demo-cta-text' ] {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.log-destination-grid {
|
||||
[purpose='log-destination-grid'] {
|
||||
max-width: 976px;
|
||||
}
|
||||
.log-destination {
|
||||
[purpose='log-destination'] {
|
||||
flex: 0 0 228px;
|
||||
}
|
||||
.logos {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -274,13 +141,13 @@
|
|||
flex: 1 1 316px;
|
||||
}
|
||||
}
|
||||
.hero-clouds {
|
||||
[purpose='hero-clouds'] {
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: (767px)) {
|
||||
.log-destination {
|
||||
[purpose='log-destination'] {
|
||||
flex: 0 0 280px;
|
||||
p {
|
||||
display: flex;
|
||||
|
|
@ -289,7 +156,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.log-destination {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 160px;
|
||||
p {
|
||||
display: none;
|
||||
|
|
@ -306,9 +173,8 @@
|
|||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[purpose='demo-cta-container'] {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
[purpose='top-try-it-out-btn'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
[purpose='tweets'] {
|
||||
padding-left: 16px;
|
||||
|
|
@ -320,19 +186,9 @@
|
|||
}
|
||||
|
||||
@media (max-width: 355px) {
|
||||
.log-destination {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 80px;
|
||||
}
|
||||
[purpose='demo-cta'] {
|
||||
.form-control {
|
||||
height: 44px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
[purpose='demo-cta-container'] {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
6
website/assets/styles/pages/landing.less
vendored
6
website/assets/styles/pages/landing.less
vendored
|
|
@ -19,7 +19,11 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
[purpose='demo-btn'] {
|
||||
.btn-animated-arrow();
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
|
||||
[purpose='demo-btn-white'] {
|
||||
.btn-animated-arrow-white();
|
||||
}
|
||||
|
||||
[purpose='banner-background'] {
|
||||
|
|
|
|||
2
website/assets/styles/pages/pricing.less
vendored
2
website/assets/styles/pages/pricing.less
vendored
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
[purpose='animated-arrow-button'] {
|
||||
.btn-animated-arrow();
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Install osquery and Fleet</p>
|
||||
<a class="p-0 pl-md-4 pt-2 pt-md-0 arrow" href="/install">
|
||||
Get started
|
||||
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-16x16@2x.png" />
|
||||
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<p class="font-weight-bold p-0 pl-md-4 pt-2 pt-md-0 m-0">Can't find what you need?</p>
|
||||
<a class="p-0 pl-md-4 pt-2 pt-md-0 arrow">
|
||||
Support
|
||||
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-16x16@2x.png" />
|
||||
<img class="d-inline mb-1" style="height: 16px; width: auto;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
89
website/views/pages/homepage.ejs
vendored
89
website/views/pages/homepage.ejs
vendored
|
|
@ -1,8 +1,8 @@
|
|||
<div id="homepage" v-cloak>
|
||||
|
||||
<div style="max-height: 1096px;">
|
||||
<div style="padding-top: 114px" class="hero-banner">
|
||||
<div class="hero-clouds">
|
||||
<div style="padding-top: 114px" purpose="hero-banner">
|
||||
<div purpose="hero-clouds">
|
||||
<div class="container-lg">
|
||||
<div class="container-fluid text-center pt-3 pt-sm-5">
|
||||
<h1>
|
||||
|
|
@ -12,33 +12,12 @@
|
|||
<h6 style="max-width: 580px;" class="mx-auto mt-3 mb-0">
|
||||
Quickly deploy <a target="_blank" style="color: white; text-decoration-line: underline;" href="https://osquery.io/">osquery</a> and secure 300,000+ devices on top of a stable core technology.
|
||||
</h6>
|
||||
<div purpose="demo-cta-container" class="mx-auto pb-5 pb-sm-2" style="padding-top: 32px;">
|
||||
<ajax-form action="deliverDemoSignup" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()" v-if="!cloudSuccess">
|
||||
<div purpose="demo-cta" class="flex-row row justify-content-between align-items-center mx-auto">
|
||||
<div purpose="demo-cta-text" class="pl-0 pr-3 text-left">
|
||||
<span style="font-size: 32px; vertical-align: middle;">💡</span>
|
||||
<p class="d-inline-block">
|
||||
<strong>Live Q&A session</strong>
|
||||
<br class="d-lg-none d-block">
|
||||
April 12th, 2022 2:30pm (CST)
|
||||
</p>
|
||||
</div>
|
||||
<div purpose="demo-cta-form" class="flex-grow-1 col-12 col-sm-auto px-0 pt-sm-0">
|
||||
<div class="form-control d-inline-flex" :class="[formErrors.emailAddress ? 'is-invalid' : '']">
|
||||
<input class="float-left pr-1" v-model.trim="formData.emailAddress" placeholder="Enter your email">
|
||||
<ajax-button purpose="register-button" spinner="true" :syncing="syncing" type="submit" class="btn btn-sm btn-info float-right">Register</ajax-button>
|
||||
</div>
|
||||
<div purpose="demo-cta-error-message" v-if="formErrors.emailAddress">
|
||||
Please enter a valid email address e.g., example@email.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ajax-form>
|
||||
<div purpose="demo-cta-success-message" class="mx-auto" v-else>
|
||||
<p class="text-center">Thank you for registering.<br class="d-sm-none d-block"> Please check your inbox for event details.</p>
|
||||
</div>
|
||||
<div style="max-width: 500px;" class="mt-5 mx-auto mb-0 d-sm-flex justify-content-center">
|
||||
<a purpose="top-try-it-out-btn" class="d-sm-flex align-items-center justify-content-center btn btn-block btn-primary mx-auto mx-sm-0" href="/get-started">Try it out</a>
|
||||
<a style="max-width: 220px;" class="btn btn-lg btn-white pl-4 mx-auto mx-sm-0" purpose="animated-arrow-button-white" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top">Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
<img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto" />
|
||||
<img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,9 +62,7 @@
|
|||
</div>
|
||||
<div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
|
||||
<div class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
|
||||
<h3>
|
||||
Deploy anywhere
|
||||
</h3>
|
||||
<h3>Deploy anywhere</h3>
|
||||
<p class="pb-4 mb-0">
|
||||
Fleet is self-hosted and self-managed, and can be run within your own data centers or in the cloud.
|
||||
</p>
|
||||
|
|
@ -113,55 +90,46 @@
|
|||
Automate scheduled queries to integrate alerts and dashboards across your enterprise.
|
||||
</p>
|
||||
</div>
|
||||
<div class="log-destination-grid container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination-grid" class="container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="filesystem icon" src="/images/icon-log-destination-filesystem-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Filesystem</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="Splunk logo" src="/images/icon-log-destination-splunk-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Splunk</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="AWS Kinesis logo" src="/images/icon-log-destination-firehose-40x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">AWS Kinesis</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="Google Cloud Platform PubSub logo" src="/images/icon-log-destination-pubsub-53x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">GCP PubSub</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="AWS Lambda logo" src="/images/icon-log-destination-lambda-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">AWS Lambda</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="Elastic logo" src="/images/icon-log-destination-elastic-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Elastic</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="Sumo Logic logo" src="/images/icon-log-destination-sumo-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Sumo Logic</p>
|
||||
</div>
|
||||
<div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<img alt="Graylog logo" src="/images/icon-log-destination-graylog-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Graylog</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5">
|
||||
<a
|
||||
style="max-width: 220px"
|
||||
class="btn btn-block btn-md btn-primary mx-4"
|
||||
href="/get-started?tryitnow"
|
||||
>
|
||||
<a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/get-started?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
<a
|
||||
style="max-width: 220px"
|
||||
class="btn btn-block btn-lg btn-white pl-0 m-0"
|
||||
purpose="animated-arrow-button"
|
||||
target="_blank"
|
||||
href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top"
|
||||
>Schedule a demo
|
||||
<a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top">
|
||||
Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,29 +227,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
|
||||
<p class="px-4">
|
||||
Teams use osquery with Fleet every day to stay secure and compliant.
|
||||
</p>
|
||||
<div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
|
||||
<a
|
||||
style="max-width: 220px"
|
||||
class="btn btn-block btn-md btn-primary mx-4"
|
||||
href="/get-started?tryitnow"
|
||||
>
|
||||
<a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/get-started?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
<a
|
||||
style="max-width: 220px"
|
||||
class="btn btn-block btn-lg btn-white pl-0 m-0"
|
||||
purpose="animated-arrow-button"
|
||||
target="_blank"
|
||||
href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom"
|
||||
>Schedule a demo
|
||||
<a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom">
|
||||
Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
3
website/views/pages/landing.ejs
vendored
3
website/views/pages/landing.ejs
vendored
|
|
@ -8,9 +8,8 @@
|
|||
<p>Fleet allows you to harness the power of osquery to stream accurate, real-time data from all of your devices. It’s easy to deploy at scale, granular and open source.</p>
|
||||
<div class="flex-row row justify-content-around mx-md-0 mx-4 pt-2">
|
||||
<a href="/get-started" class="btn btn-primary col-md-6 col-12">Try it out</a>
|
||||
<a style="color:#F9FAFC;" class="btn col-md-6 col-12" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+banner" target="_blank">
|
||||
<a purpose="demo-btn-white" style="color:#F9FAFC;" class="btn col-md-6 col-12" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+banner" target="_blank">
|
||||
Schedule a demo
|
||||
<img class="d-inline" style="height: 16px; width: 16px; position: relative; bottom: 2px; margin-left: 8px;" alt="A small white arrow pointing to the right" src="/images/platform/icon-right-arrow-white-16x16@2x.png">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue