Skip to content

Update homepage tabs #24453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mike-j-thomas merged 4 commits into from
Dec 6, 2024
Merged

Update homepage tabs #24453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0eb8c7
Update homepage tabs
mike-j-thomas Dec 5, 2024
1fcabf9
update sstyles and layout
eashaw Dec 5, 2024
82a0903
update-homepage-tabs
mike-j-thomas Dec 5, 2024
3673f53
Merge branch 'main' into update-homepage-tabs
mike-j-thomas Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added website/assets/images/software-management-hero-image-380x380@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions website/assets/styles/pages/homepage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,11 +411,11 @@
font-weight: 700;
}
.it-selected {
transform: translateX(100%);
}
.security-selected {
transform: translateX(200%);
}
.software-management-selected {
transform: translateX(100%);
}
}
@keyframes fadeIn {
from { opacity: 0; }
Expand Down Expand Up @@ -488,7 +488,6 @@
display: flex;
width: 380px;
height: 380px;
padding: 20px 36px 20px 35px;
justify-content: center;
align-items: center;
flex-shrink: 0;
Expand Down Expand Up @@ -932,6 +931,7 @@
}
[purpose='category-switch-option'] {
width: 229px;
padding: 16px 24px;
}
.endpoint-ops-selected {
transform: translateX(100%);
Expand Down Expand Up @@ -1155,11 +1155,11 @@
}
.it-selected {
width: 100%;
transform: translateY(56px);
transform: translateY(113px);
}
.security-selected {
.software-management-selected {
width: 100%;
transform: translateY(113px);
transform: translateY(56px);
}
.mdm-selected {
width: 100%;
Expand Down
50 changes: 25 additions & 25 deletions website/views/pages/homepage.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,24 @@
<% if(!primaryBuyingSituation){ %>
<div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
<div purpose="category-switch-option" :class="[selectedCategory === 'mdm' ? 'selected' : '']" @click="selectedCategory = 'mdm'">Device management</div>
<div purpose="category-switch-option" :class="[selectedCategory === 'software-management' ? 'selected' : '']" @click="selectedCategory = 'software-management'">Software management</div>
<div purpose="category-switch-option" :class="[selectedCategory === 'eo-it' ? 'selected' : '']" @click="selectedCategory = 'eo-it'">IT engineering</div>
<div purpose="category-switch-option" :class="[selectedCategory === 'eo-security' ? 'selected' : '']" @click="selectedCategory = 'eo-security'">Security engineering</div>
<div purpose="category-tier-switch" :class="[selectedCategory === 'eo-it' ? 'it-selected' : selectedCategory === 'eo-security' ? 'security-selected' : selectedCategory === 'mdm' ? 'mdm-selected' : 'mdm-selected']"></div>
<div purpose="category-tier-switch" :class="[selectedCategory === 'eo-it' ? 'it-selected' : selectedCategory === 'software-management' ? 'software-management-selected' : selectedCategory === 'mdm' ? 'mdm-selected' : 'mdm-selected']"></div>
</div>
<%/* Device management block */%>
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" :class="[selectedCategory === 'mdm' ? 'visible' : '']" v-if="selectedCategory === 'mdm'">
<div purpose="device-management-image" class="left">
<img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
</div>
<div purpose="category-text-block" class="d-flex flex-column">
<strong>Everything in one place - even Linux</strong>
<p>Enroll all your computing devices from a single system. Going only Apple or 50/50 Mac and Windows? What about Linux? It’s up to you. </p>
<strong>Debunk the cross-platform myth</strong>
<p>Fleet exposes familiar concepts from traditional MDMs like custom attributes and dynamic grouping, but in a way that lets you work directly with data and events from each native operating system.</p>
<strong>Less friction</strong>
<p>Automatically manage updates and apps on Apple, Windows, and Linux computers.</p>
<strong>Real employee choice — even Linux</strong>
<p>Enroll all your computing devices. Going only Apple or 50/50 Mac and Windows? What about Linux? Speak to them all in one language.</p>
<strong>Users have choice, you should too</strong>
<p>Love working in the UI? Check. Want to work in GitOps? Double check. Don't use GitOps? That's ok, plenty of people use Fleet without it.</p>
<strong>Know the state of your devices in seconds</strong>
<p>Collect and normalize the latest details about any device, like hardware specs, installed software, and security configurations.</p>
<div>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/device-management">Start with device management</a>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/device-management">See how we compare</a>
</div>
</div>
</div>
Expand All @@ -77,32 +77,32 @@
<img alt="Endpoint ops" src="/images/endpoint-operations-hero-image-380x380@2x.png">
</div>
<div purpose="category-text-block" class="d-flex flex-column">
<strong>Automate anything</strong>
<p>Remotely run scripts and prompts to complete tasks on every kind of computer, including Linux.</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>Use "read-only" mode or enable remote scripting to automate anything on every operating system, including Linux.</p>
<strong>Orchestrate anything</strong>
<p>Use a robust API to remotely run scripts, verify configs, or create webhooks for every kind of device — including servers.</p>
<strong>Democratize change with GitOps</strong>
<p>Maintain reliable employee experiences with version-controlled changes and enhancements. Use CI/CD and peer reviews to look before you leap.</p>
<strong>In the cloud or on-prem</strong>
<p>Fleet uses the same open-source code base regardless of where it’s installed. You can deploy and configure it to fit your needs.</p>
<div>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/observability?purpose=it">Start with IT engineering</a>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/observability?purpose=it">More about IT engineering</a>
</div>
</div>
</div>

<%/* Security engineering block */%>
<div purpose="platform-block" :class="[selectedCategory === 'eo-security' ? 'visible' : '']" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" v-if="selectedCategory === 'eo-security'">
<div purpose="platform-block" :class="[selectedCategory === 'software-management' ? 'visible' : '']" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" v-if="selectedCategory === 'software-management'">
<div purpose="vuln-management-image" class="left">
<img alt="An orb being scanned for vulnerabilities" src="/images/vulnerability-management-hero-image-345x380@2x.png">
<img alt="An orb being scanned for vulnerabilities" src="/images/software-management-hero-image-380x380@2x.png">
</div>
<div purpose="category-text-block" class="d-flex flex-column">
<strong>Osquery on easy mode</strong>
<p>Use "read-only" mode or enable remote scripting to automate anything on every operating system, including Linux.</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>
<strong>Comprehensive software inventory</strong>
<p>In-depth insights into everything installed on your devices, all accessible from a single unified view.</p>
<strong>Patch software automatically</strong>
<p>Seamlessly enforce security updates and automate software installations or script execution.</p>
<strong>Head to head with the big players</strong>
<p>Fleet has the features you need, including zero-touch installs and self-service, to keep your employees secure and productive.</p>
<div>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/observability?purpose=security">Start with security engineering</a>
<a purpose="category-button" class="text-nowrap btn btn-primary" href="/software-management">See how we compare</a>
</div>
</div>
</div>
Expand Down