mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Add calendar section to homepage (#18209)
Closes: https://github.com/fleetdm/confidential/issues/6059 Changes: - Updated the layout and styles of the homepage to match the latest wireframes. @mike-j-thomas I'm creating this as a draft PR so you can review the changes while I set up the Salesforce integration. --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
160448f7d3
commit
5311aec0fe
3 changed files with 102 additions and 43 deletions
BIN
website/assets/images/homepage-calendar-1280x420@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-calendar-1280x420@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
111
website/assets/styles/pages/homepage.less
vendored
111
website/assets/styles/pages/homepage.less
vendored
|
|
@ -76,6 +76,8 @@
|
|||
|
||||
[purpose='homepage-content'] {
|
||||
max-width: 1200px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
[purpose='page-section'] {
|
||||
margin-bottom: 180px;
|
||||
|
|
@ -150,50 +152,53 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='category-switch'] {
|
||||
width: 831px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 28px;
|
||||
background: @ui-off-white;
|
||||
position: relative;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
|
||||
margin-bottom: 80px;
|
||||
margin-top: 100px;
|
||||
color: @core-fleet-black;
|
||||
[purpose='category-tier-switch'] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 28px;
|
||||
height: 100%;
|
||||
min-width: 140px;
|
||||
z-index: 1;
|
||||
transition: 0.3s all;
|
||||
width: 277px;
|
||||
}
|
||||
[purpose='category-switch-option'] {
|
||||
padding: 16px 40px;
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 64px;
|
||||
margin-bottom: 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='calendar-card-body'] {
|
||||
max-width: 720px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
p {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
width: 277px;
|
||||
}
|
||||
.selected {
|
||||
font-weight: 700;
|
||||
}
|
||||
.endpoint-ops-selected {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.vulnerability-management-selected {
|
||||
transform: translateX(200%);
|
||||
max-width: 720px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-card'] {
|
||||
border-radius: 24px;
|
||||
border: 1px solid #E2E4EA;
|
||||
background: linear-gradient(165deg, #F9FDFE 10.56%, #FFF 33.43%);
|
||||
overflow: hidden;
|
||||
}
|
||||
[purpose='coming-soon-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
[purpose='calendar-image'] {
|
||||
margin-top: 24px;
|
||||
height: 420px;
|
||||
overflow-x: hidden;
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='homepage-text-block'] {
|
||||
margin-top: 160px;
|
||||
margin-bottom: 120px;
|
||||
|
|
@ -591,7 +596,10 @@
|
|||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px;
|
||||
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
|
@ -643,6 +651,15 @@
|
|||
font-size: 48px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
[purpose='calendar-card-body'] {
|
||||
padding: 60px 24px 24px 24px;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: 2800px auto;
|
||||
background-position: center bottom;
|
||||
|
|
@ -834,6 +851,10 @@
|
|||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 278px;
|
||||
background-position: center bottom;
|
||||
|
|
@ -1085,6 +1106,12 @@
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
[purpose='calendar-image'] {
|
||||
height: 287px;
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 270px;
|
||||
|
|
@ -1316,6 +1343,8 @@
|
|||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='platform-block'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
|
|
|||
34
website/views/pages/homepage.ejs
vendored
34
website/views/pages/homepage.ejs
vendored
|
|
@ -25,7 +25,7 @@
|
|||
<%/* Homepage content */%>
|
||||
<div purpose="homepage-content" class="container">
|
||||
<%/* Testimonial videos */%>
|
||||
<div purpose="page-section">
|
||||
<div purpose="page-section" class="mb-0">
|
||||
<div purpose="testimonials" class="d-flex flex-lg-row flex-column justify-content-center card-deck">
|
||||
<div purpose="testimonial" class="d-flex align-items-center card" @click="clickOpenVideoModal('nick-fohs')">
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
|
|
@ -48,7 +48,37 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="calendar-section">
|
||||
<div purpose="calendar-card" class="d-flex flex-column align-items-center">
|
||||
<div purpose="calendar-card-body" class="d-flex flex-column align-items-center">
|
||||
<div purpose="coming-soon-badge">Coming soon</div>
|
||||
<% if(!primaryBuyingSituation) {%>
|
||||
<h3>Stop nudging</h3>
|
||||
<p>Stop installing updates and forcing restarts when your users are busy using their computers. Fleet finds time in the calendar for a reboot and uses AI to explain why.</p>
|
||||
<%} else if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Put IT in your calendar</h3>
|
||||
<p>Install updates and force restarts when your users’ computers are actually free.</p>
|
||||
<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Tell employees why</h3>
|
||||
<p>Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.</p>
|
||||
<%}%>
|
||||
<% if(me && me.primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(me.primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else if(primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm" target="_blank">Let me know</a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div purpose="calendar-image">
|
||||
<img alt="Fleet in your calendar" src="/images/homepage-calendar-1280x420@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="homepage-content" class="container">
|
||||
<div purpose="page-section">
|
||||
<%/* Endpoint ops block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
|
||||
<div purpose="category-text-block" class="d-flex flex-column">
|
||||
|
|
|
|||
Loading…
Reference in a new issue