diff --git a/website/assets/images/homepage-report-cta-background.svg b/website/assets/images/homepage-report-cta-background.svg new file mode 100644 index 0000000000..7d0a05d4f3 --- /dev/null +++ b/website/assets/images/homepage-report-cta-background.svg @@ -0,0 +1,19 @@ + diff --git a/website/assets/images/state-of-device-management-hero-394x177@2x.png b/website/assets/images/state-of-device-management-hero-394x177@2x.png new file mode 100644 index 0000000000..c9f098e7ab Binary files /dev/null and b/website/assets/images/state-of-device-management-hero-394x177@2x.png differ diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 75c9874e96..bdb70b08ce 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -88,6 +88,30 @@ } } + [purpose='report-banner-container'] { + background: linear-gradient(#FFF 50%, #F4F6FA 50%); + padding-right: 40px; + padding-left: 40px; + } + [purpose='report-banner-cta'] { + max-width: 1080px; + margin-top: 40px; + border-radius: 16px; + background-color: #261c50; + background-image: url('/images/homepage-report-cta-background.svg'); + background-position-x: right; + background-size: cover; + color: #FFF; + padding: 27px 87px 34px 87px; + img { + margin-right: 60px; + } + a { + font-weight: 400; + color: #FFF; + } + } + @media (min-width: 1200px) { @@ -121,6 +145,17 @@ flex: 1 1 295px; } } + [purpose='report-banner-cta'] { + padding: 27px 43px 34px 43px; + img { + margin-right: 0px; + } + + } + [purpose='report-banner-container'] { + padding-right: 20px; + padding-left: 20px; + } } @@ -145,6 +180,10 @@ [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='report-banner-container'] { + padding-right: 15px; + padding-left: 15px; + } } @media (min-width: 600px) and (max-width: (767px)) { diff --git a/website/assets/styles/pages/reports/state-of-device-management.less b/website/assets/styles/pages/reports/state-of-device-management.less index d6f5c72a8a..ba1ba62a97 100644 --- a/website/assets/styles/pages/reports/state-of-device-management.less +++ b/website/assets/styles/pages/reports/state-of-device-management.less @@ -294,6 +294,12 @@ @media (min-width: 1024px) { + [purpose='hero-content'] { + flex-direction: row; + [purpose='hero-image'] { + margin-left: 46px; + } + } [purpose='report-sidebar'] { width: 240px; max-width: 240px; @@ -307,6 +313,10 @@ @media (max-width: 1024px) { [purpose='hero-content'] { align-items: center; + flex-direction: column; + [purpose='hero-image'] { + display: none; + } } [purpose='report-container'] { padding-left: 40px; diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 99658e56f6..1546486384 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -137,9 +137,18 @@ - -
+ We surveyed 200+ security practitioners in charge of device management.
Here’s what we learned about their struggles, frustrations, and desires.
That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches. diff --git a/website/views/pages/reports/state-of-device-management.ejs b/website/views/pages/reports/state-of-device-management.ejs index 53569a6cc8..75fb13ef0e 100644 --- a/website/views/pages/reports/state-of-device-management.ejs +++ b/website/views/pages/reports/state-of-device-management.ejs @@ -1,6 +1,6 @@
We surveyed 200+ security practitioners who are responsible for device management at their organization. Here’s what we learned about thier current challenges, frustrations, and desires when it comes to managing their devices.
@@ -9,6 +9,9 @@ Download PDF
+