Website: Update personalization on /endpoint-ops page (#18252)

Changes:
- Updated the /endpoint-ops page to display different content in the
hero based on a users `primaryBuyingSituation`
This commit is contained in:
Eric 2024-04-12 18:21:56 -05:00 committed by GitHub
parent 29b482fffa
commit 500f33c512
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 18 deletions

View file

@ -636,6 +636,9 @@
}
}
@media (max-width: 472px) {
h1 {
font-size: 36px;
}
[purpose='testimonial-videos'] {
flex-direction: column;
}

View file

@ -4,19 +4,35 @@
<div purpose="hero">
<div purpose="page-headline">
<h4>Endpoint operations</h4>
<h1>A consistent interface</h1>
<h1>Understand your computers</h1>
</div>
<div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
<div purpose="hero-image">
<img alt="A device verifying compliance for every endpoint" src="/images/endpoint-operations-hero-image-380x380@2x.png">
</div>
<div purpose="hero-text">
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<strong>Osquery on easy mode</strong>
<p>You dont need to be an osquery expert to get the answers you need from your devices, Fleet does some of that for you.</p>
<% if(primaryBuyingSituation === 'eo-it') { %>
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<strong>Automate anything</strong>
<p>Remotely run scripts and prompts to complete tasks on every kind of computer, including Linux.</p>
<% } else if(primaryBuyingSituation === 'eo-security') { %>
<strong>Osquery on easy mode</strong>
<p>You dont need to be an osquery expert to get the answers you need from your devices, Fleet does some of that for you.</p>
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<% } else { %>
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<strong>Osquery on easy mode</strong>
<p>You dont need to be an osquery expert to get the answers you need from your devices, Fleet does some of that for you.</p>
<% }%>
<div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
<a purpose="cta-button" href="/register">Start now</a>
<a purpose="animated-arrow-button-red" href="/contact">Talk to us</a>
@ -25,19 +41,35 @@
</div>
</div>
<div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
<div purpose="testimonial-quote">
<div purpose="quote">
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
<p>I love the steady and consistent delivery of features that help teams work how they want to work, not how your product dictates they work.</p>
</div>
<div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
<div purpose="quote-image"><img src="/images/testimonial-daniel-grzelak-48x48@2x.png" alt="Daniel Grzelak"></div>
<div class="d-flex flex-column">
<p purpose="name">Daniel Grzelak</p>
<p purpose="title">CISO</p>
<% if(primaryBuyingSituation === 'eo-it') { %>
<div purpose="testimonial-quote">
<div purpose="quote">
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
<p>“Fleet provides a way to surface device data to our other teams and partners.”</p>
</div>
<div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
<div purpose="quote-image"><img src="/images/testimonial-author-nick-fohs-24x24@2x.png" alt="Nick Fohs"></div>
<div class="d-flex flex-column">
<p purpose="name">Nick Fohs</p>
<p purpose="title">Systems and infrastructure manager</p>
</div>
</div>
</div>
</div>
<% } else { %>
<div purpose="testimonial-quote">
<div purpose="quote">
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
<p>"I love the steady and consistent delivery of features that help teams work how they want to work, not how your product dictates they work."</p>
</div>
<div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
<div purpose="quote-image"><img src="/images/testimonial-daniel-grzelak-48x48@2x.png" alt="Daniel Grzelak"></div>
<div class="d-flex flex-column">
<p purpose="name">Daniel Grzelak</p>
<p purpose="title">CISO</p>
</div>
</div>
</div>
<% } %>
<div purpose="testimonial-videos" class="d-flex">
<div purpose="testimonial-video" @click="clickOpenVideoModal('austin-anderson')">
<span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>