diff --git a/website/assets/images/homepage-calendar-1280x420@2x.png b/website/assets/images/homepage-calendar-1280x420@2x.png new file mode 100644 index 0000000000..00e87d8e59 Binary files /dev/null and b/website/assets/images/homepage-calendar-1280x420@2x.png differ diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index a9d8427354..3088727514 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -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; } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 9a8c3655fc..1f64eab901 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -25,7 +25,7 @@ <%/* Homepage content */%>
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.
+ <%} else if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%> +Install updates and force restarts when your users’ computers are actually free.
+ <%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%> +Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.
+ <%}%> + <% if(me && me.primaryBuyingSituation) {%> + Let me know + <% } else if(primaryBuyingSituation) {%> + Let me know + <% } else {%> + Let me know + <% } %> +
+