mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: header CTA (#6157)
* Add header CTA, update layout * Updated meta description in routes Changed to new CTA phrasing * Updated layout-landing with new CTA copy * Updated layouts to include new CTA copy * Updated layout-landing to include new CTA copy Missed a space on my last edit * Updated meta description for sodm report Used final copy version * Updated SODM report CTA to final copy Updated after working with Mike T * Updated SODM CTA to final copy Worked with Mike T to improve final version Co-authored-by: Tim Kern <tim@fleetdm.com>
This commit is contained in:
Eric
GitHub
parent
1341c29a60
commit
d5aac8b76e
6 changed files with 82 additions and 14 deletions
66
website/assets/styles/layout.less
vendored
66
website/assets/styles/layout.less
vendored
|
|
@ -106,6 +106,21 @@ html, body {
|
|||
}
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
height: 48px;
|
||||
strong {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
} // Homepage header styles
|
||||
&.homepage-header {
|
||||
z-index: 9999;
|
||||
|
|
@ -119,13 +134,13 @@ html, body {
|
|||
color: #192147;
|
||||
|
||||
.btn.btn-link {
|
||||
color: #192147;
|
||||
color: #192147;
|
||||
}
|
||||
|
||||
[purpose='header-nav'] {
|
||||
a {
|
||||
color: #192147;
|
||||
}
|
||||
a {
|
||||
color: #192147;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -142,6 +157,14 @@ html, body {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
} // Non-homepage header styles
|
||||
&.header {
|
||||
left: 0;
|
||||
|
|
@ -173,6 +196,13 @@ html, body {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[purpose='header-report-cta'] {
|
||||
background-color: @core-fleet-black;
|
||||
color: #FFF;
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer styles
|
||||
|
|
@ -235,17 +265,31 @@ body.detected-mobile {
|
|||
[purpose='page-footer'] {
|
||||
height: 264px;
|
||||
}
|
||||
|
||||
[purpose='page-header'] {
|
||||
[purpose='header-report-cta'] {
|
||||
height: 58px;
|
||||
}
|
||||
}
|
||||
.translate-y-0 {
|
||||
transform: translateY(-153px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 371px;
|
||||
|
||||
[purpose='page-footer'] {
|
||||
height: 371px;
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 371px;
|
||||
[purpose='page-footer'] {
|
||||
height: 371px;
|
||||
}
|
||||
[purpose='page-header'] {
|
||||
[purpose='header-report-cta'] {
|
||||
height: 78px;
|
||||
}
|
||||
}
|
||||
.translate-y-0 {
|
||||
transform: translateY(-173px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -274,5 +318,5 @@ body.detected-mobile {
|
|||
|
||||
// Some utilities for the sticky nav behaviour
|
||||
.translate-y-0 {
|
||||
transform: translateY(-95px);
|
||||
transform: translateY(-143px);
|
||||
}
|
||||
|
|
|
|||
7
website/assets/styles/pages/homepage.less
vendored
7
website/assets/styles/pages/homepage.less
vendored
|
|
@ -16,6 +16,7 @@
|
|||
}
|
||||
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 162px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(173.74deg, #1F1D42 4.94%, #00FFF0 87.78%);
|
||||
|
|
@ -180,6 +181,9 @@
|
|||
[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%);
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 172px;
|
||||
}
|
||||
[purpose='report-banner-container'] {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
|
@ -223,6 +227,9 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 355px) {
|
||||
|
|
|
|||
3
website/config/routes.js
vendored
3
website/config/routes.js
vendored
|
|
@ -174,7 +174,8 @@ module.exports.routes = {
|
|||
action: 'reports/view-state-of-device-management',
|
||||
locals: {
|
||||
pageTitleForMeta: 'State of device management | Fleet for osquery',
|
||||
pageDescriptionForMeta: '',
|
||||
pageDescriptionForMeta: 'We surveyed 200+ security practitioners to discover the state of device management in 2022. Click here to learn about their struggles and best practices.',
|
||||
headerCTAHidden: true,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
9
website/views/layouts/layout-landing.ejs
vendored
9
website/views/layouts/layout-landing.ejs
vendored
|
|
@ -95,8 +95,15 @@
|
|||
</head>
|
||||
<body>
|
||||
<div style="padding-bottom: 60px; background-color: #FFFFFF;" purpose="page-wrap">
|
||||
|
||||
<div style="background-color: #FFFFFF;" class="header" purpose="page-header">
|
||||
<div purpose="header-report-cta" class="d-flex flex-row justify-content-center align-items-md-center">
|
||||
<div class="mb-0 d-flex flex-md-row flex-column justify-content-center px-2">
|
||||
<strong class="text-center pr-1">We surveyed 200+ security practitioners to discover the state of device management in 2022. </strong>
|
||||
<p class="mb-0">
|
||||
<a class="pl-3 d-block text-center d-sm-inline text-sm-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex align-items-center justify-content-between pt-3 pb-3 px-3 px-md-4">
|
||||
<a class="" href="/" style="max-width: 118px;">
|
||||
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>
|
||||
|
|
|
|||
9
website/views/layouts/layout.ejs
vendored
9
website/views/layouts/layout.ejs
vendored
|
|
@ -4,6 +4,7 @@
|
|||
// don't have to do `typeof` checks below.
|
||||
var me;
|
||||
var isHomepage;
|
||||
var headerCTAHidden;
|
||||
%><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -95,6 +96,14 @@
|
|||
<body>
|
||||
<div purpose="page-wrap">
|
||||
<div class="<%= isHomepage ? 'homepage-header' : 'header' %>" purpose="page-header">
|
||||
<div purpose="header-report-cta" class="<%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
|
||||
<div class="mb-0 d-flex flex-md-row flex-column justify-content-center px-2">
|
||||
<strong class="text-center pr-1">We surveyed 200+ security practitioners to discover the state of device management in 2022. </strong>
|
||||
<p class="mb-0">
|
||||
<a class="pl-3 d-block text-center d-sm-inline text-sm-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
|
||||
<a href="/" style="max-width: 118px;">
|
||||
<% /* The homepage-header on the homepage has a white fleet logo */ %>
|
||||
|
|
|
|||
2
website/views/pages/homepage.ejs
vendored
2
website/views/pages/homepage.ejs
vendored
|
|
@ -1,7 +1,7 @@
|
|||
<div id="homepage" v-cloak>
|
||||
|
||||
<div style="max-height: 1160px;">
|
||||
<div style="padding-top: 114px" purpose="hero-banner">
|
||||
<div purpose="hero-banner">
|
||||
<div purpose="hero-clouds">
|
||||
<div class="container-lg">
|
||||
<div class="container-fluid text-center pt-3 pt-sm-5">
|
||||
|
|
|
|||
Loading…
Reference in a new issue