Website: Add homepage banner CTA (#26796)

Closes: https://github.com/fleetdm/confidential/issues/9802

Changes:
- Added a banner CTA to the homepage
This commit is contained in:
Eric 2025-03-03 19:14:55 -06:00 committed by GitHub
parent d8dad02c75
commit e2152cd198
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 21 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -218,11 +218,17 @@ html, body {
[purpose='header-ribbon-cta'] {
background-color: #7487C2;
background-color: #0587FF;
padding: 12px 8px;
img {
height: 20px;
margin-right: 10px;
}
p {
font-size: 14px;
line-height: 20px;
color: #fff;
margin-bottom: 0px;
}
a {
font-size: 14px;
@ -230,6 +236,10 @@ html, body {
font-weight: 700;
text-decoration: underline;
color: #fff;
&:hover {
color: #FFF;
text-decoration-color: #FFF;
}
}
}

View file

@ -17,6 +17,7 @@ module.exports.routes = {
action: 'view-homepage-or-redirect',
locals: {
isHomepage: true,
showHeaderCTA: true,
}
},

View file

@ -5,6 +5,7 @@
var me;
var isHomepage;
var currentSection;
var showHeaderCTA;
var hideHeaderLinks;// Hides the header navigation links.
var hideFooterLinks;// Hides footer links, reduces the height of the footer to 60px;
var showAdminLinks;// Shows links to admin pages to admin users.
@ -131,6 +132,14 @@
</head>
<body>
<div purpose="page-wrap" class="<%= hideFooterLinks ? 'reduced-footer-links' : '' %> collapse" id="navbarToggleExternalContent">
<%// Call to action ribbon above page header %>
<div purpose="header-ribbon-cta" class="<%= showHeaderCTA ? 'd-flex' : 'd-none' %> flex-row justify-content-center align-items-md-center">
<div class="mb-0 d-flex flex-row align-items-center">
<p class="text-center">
<img src="/images/icon-emoji-wave-20x20@2x.png" class="d-inline" alt="👋">Were launching free support for BYOD Android devices and looking for early feedback. <a href="/contact">Interested?</a>
</p>
</div>
</div>
<%// Page header%>
<div class="header" purpose="header-container" hide-when-scrolled data-nosnippet>
<div purpose="header-background">