From bfef6cf3685d5f9dbbcd4136b0ac7201f40b9b00 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 20 Apr 2022 15:20:30 -0500 Subject: [PATCH] Website: Update homepage CTA (#5265) * update animated button styles * clean up stylesheet, bring back demo button * Update homepage.less * button update * update img src --- ...16@2x.png => arrow-right-red-16x16@2x.png} | Bin .../images/arrow-right-white-16x16@2x.png | Bin 0 -> 246 bytes .../styles/mixins-and-variables/buttons.less | 41 +++- website/assets/styles/pages/homepage.less | 208 +++--------------- website/assets/styles/pages/landing.less | 6 +- website/assets/styles/pages/pricing.less | 2 +- .../views/pages/docs/basic-documentation.ejs | 4 +- website/views/pages/homepage.ejs | 89 ++------ website/views/pages/landing.ejs | 3 +- 9 files changed, 103 insertions(+), 250 deletions(-) rename website/assets/images/{arrow-right-16x16@2x.png => arrow-right-red-16x16@2x.png} (100%) create mode 100644 website/assets/images/arrow-right-white-16x16@2x.png diff --git a/website/assets/images/arrow-right-16x16@2x.png b/website/assets/images/arrow-right-red-16x16@2x.png similarity index 100% rename from website/assets/images/arrow-right-16x16@2x.png rename to website/assets/images/arrow-right-red-16x16@2x.png diff --git a/website/assets/images/arrow-right-white-16x16@2x.png b/website/assets/images/arrow-right-white-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..86caac8747a47c8068ddbb540279d314167c6072 GIT binary patch literal 246 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=Hmq|4jF3G n8*cdMF;4!|nxR*2caYJCA?Am^Ue8savlu*G{an^LB{Ts5{6ka& literal 0 HcmV?d00001 diff --git a/website/assets/styles/mixins-and-variables/buttons.less b/website/assets/styles/mixins-and-variables/buttons.less index 279d64d5c2..c58673e962 100644 --- a/website/assets/styles/mixins-and-variables/buttons.less +++ b/website/assets/styles/mixins-and-variables/buttons.less @@ -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; */ + } +} diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 0aada4d6b2..db867877b6 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -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; - } } } diff --git a/website/assets/styles/pages/landing.less b/website/assets/styles/pages/landing.less index 72a3d393f2..9558f499d5 100644 --- a/website/assets/styles/pages/landing.less +++ b/website/assets/styles/pages/landing.less @@ -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'] { diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index dd3488da51..f241e56592 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -20,7 +20,7 @@ } [purpose='animated-arrow-button'] { - .btn-animated-arrow(); + .btn-animated-arrow-red(); } } diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs index 125c175a32..0949bcba82 100644 --- a/website/views/pages/docs/basic-documentation.ejs +++ b/website/views/pages/docs/basic-documentation.ejs @@ -33,7 +33,7 @@

Install osquery and Fleet

Get started - right arrow + right arrow @@ -43,7 +43,7 @@

Can't find what you need?

Support - right arrow + right arrow diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 8525850bf7..ee59a86161 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -1,8 +1,8 @@
-
-
+
+

@@ -12,33 +12,12 @@

Quickly deploy osquery and secure 300,000+ devices on top of a stable core technology.
-
- -
-
- 💡 -

- Live Q&A session -
- April 12th, 2022 2:30pm (CST) -

-
-
-
- - Register -
-
- Please enter a valid email address e.g., example@email.com -
-
-
- -
-

Thank you for registering.
Please check your inbox for event details.

-
+
+ Try it out + Schedule a demo +
- Fleet ctl terminal and Fleet UI + Fleet ctl terminal and Fleet UI
@@ -83,9 +62,7 @@
-

- Deploy anywhere -

+

Deploy anywhere

Fleet is self-hosted and self-managed, and can be run within your own data centers or in the cloud.

@@ -113,55 +90,46 @@ Automate scheduled queries to integrate alerts and dashboards across your enterprise.

-
-
+
+
filesystem icon

Filesystem

-
+
Splunk logo

Splunk

-
+
AWS Kinesis logo

AWS Kinesis

-
+
Google Cloud Platform PubSub logo

GCP PubSub

-
+
AWS Lambda logo

AWS Lambda

-
+
Elastic logo

Elastic

-
+
Sumo Logic logo

Sumo Logic

-
+
Graylog logo

Graylog

- + Try it out - Schedule a demo + + Schedule a demo
@@ -259,29 +227,18 @@
-
-

From small businesses to large enterprises.

Teams use osquery with Fleet every day to stay secure and compliant.

- + Try it out - Schedule a demo + + Schedule a demo
diff --git a/website/views/pages/landing.ejs b/website/views/pages/landing.ejs index d9eed4fee9..44f153d9ae 100644 --- a/website/views/pages/landing.ejs +++ b/website/views/pages/landing.ejs @@ -8,9 +8,8 @@

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.

Try it out - + Schedule a demo - A small white arrow pointing to the right