Website: add MDM comparison table to homepage (#27557)

Closes: #27219

Changes:
- Added an MDM comparison table to the homepage.
This commit is contained in:
Eric 2025-03-28 13:54:47 -05:00 committed by GitHub
parent ac1d5c07ee
commit 278d5b825f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 933 additions and 1 deletions

View file

@ -18,6 +18,19 @@ parasails.registerPage('homepage', {
// Server error state for the form
cloudError: '',
cloudSuccess: false,
// For MDM comparison table
comparisonMode: 'sccm',
comparisonModeFriendlyNames: {
jamf: 'Jamf Pro',
sccm: 'SCCM',
omnissa: 'Omnissa (WS1)',
intune: 'Intune',
tanium: 'Tanium',
ansible: 'Ansible',
puppet: 'Puppet',
chef: 'Chef'
}
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@ -34,6 +47,10 @@ parasails.registerPage('homepage', {
if(['mdm', 'eo-it', undefined].includes(this.primaryBuyingSituation)){
this.animateBottomTicker();
}
$('[data-toggle="tooltip"]').tooltip({
container: '#homepage',
trigger: 'hover',
});
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -554,6 +554,10 @@
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
}
[purpose='button-row'] {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
a {
font-weight: 700;
font-size: 16px;
@ -620,6 +624,240 @@
}
}
[purpose='comparison-section'] {
margin-bottom: 64px;
margin-top: 64px;
[purpose='button-row'] {
[purpose='cta-button'] {
padding: 16px 32px;
height: 53px;
}
}
}
// Desktop features comparison table styles
[purpose='desktop-comparison-table'] {
margin-top: 32px;
}
[purpose='comparison-table-header'] {
font-size: 16px;
color: @core-fleet-black;
div {
padding: 12px 24px;
}
[purpose='comparison-selector'] {
width: 152px;
height: 48px;
border-radius: 8px;
padding: 0px 12px;
background: #FFF;
color: @core-fleet-black;
border: 1px solid @core-vibrant-blue-15;
cursor: pointer;
font-weight: 700;
white-space: nowrap;
}
[purpose='comparison-selector-dropwdown'] {
width: 152px;
cursor: pointer;
font-size: 14px;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
height: 48px;
&:active {
color: unset;
}
}
}
}
[purpose='comparison-column'] {
text-align: center;
display: flex;
justify-content: center;
align-self: center;
min-width: 200px;
padding: 12px 24px;
p {
font-size: 12px;
margin-bottom: 0px;
}
}
[purpose='fleet-column'] {
padding: 12px 24px 12px 44px;
text-align: center;
display: flex;
justify-content: flex-start;
align-self: center;
min-width: 200px;
p {
white-space: nowrap;
font-size: 12px;
margin-bottom: 0px;
}
}
[purpose='feature-name'] {
width: 100%;
padding: 12px 24px;
font-size: 14px;
}
[purpose='table-new-badge'] {
background-color: #0587FF;
display: inline;
padding: 2.554px 5.109px;
align-items: center;
border-radius: 14px;
color: #FFF;
font-size: 7.024px;
font-weight: 500;
line-height: 11.494px;
text-transform: uppercase;
width: min-content;
}
[purpose='comparison-table'] {
border-radius: 8px;
border: 1px solid #E2E4EA;
margin-bottom: 48px;
[purpose='table-row'] {
[purpose='red-x'] {
height: 12px;
width: 12px;
}
div {
display: flex;
align-items: center;
}
display: flex;
img {
width: 16px;
height: 16px;
&:not(:first-of-type) {
margin-left: 12px;
}
}
p {
margin-bottom: 0px;
}
&:not(:last-of-type) {
border-bottom: 1px solid #E2E4EA;
}
&:nth-of-type(even) {
background-color: #F9FAFC;
}
}
}
// Mobile features comparison table styles
[purpose='mobile-comparison-selector'] {
height: 48px;
display: flex;
width: 100%;
padding: 0px 12px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 6px;
border: 1px solid #E2E4EA;
background: #FFF;
margin-bottom: 48px;
font-weight: 700;
color: #192147;
}
[purpose='mobile-comparison-table'] {
p {
color: @core-fleet-black;
}
[purpose='comparison-selector-dropwdown'] {
width: calc(~' 100% - 48px');
cursor: pointer;
font-size: 14px;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
height: 48px;
&:active {
color: unset;
}
}
}
margin-top: 32px;
margin-bottom: 32px;
}
[purpose='feature-table'] {
display: flex;
flex-direction: column;
border-radius: 8px;
border: 1px solid #E2E4EA;
margin-bottom: 16px;
line-height: 21px;
font-size: 14px;
color: #515774;
[purpose='feature-name'] {
color: @core-fleet-black;
display: flex;
height: 36px;
padding: 12px 16px 12px 16px;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #E2E4EA;
background-color: #F9FAFC;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
p {
margin-bottom: 0px;
font-size: 14px;
font-weight: 700;
line-height: 21px;
color: #192147;
}
img {
height: 16px;
}
}
[purpose='feature-table-row'] {
padding: 12px 16px;
display: flex;
flex-direction: row;
height: 36px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E2E4EA;
&:last-of-type {
border: none;
background-color: #F9FAFC;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
[purpose='feature-status'] {
display: flex;
flex-direction: row;
justify-content: center;
[purpose='red-x'] {
height: 12px;
width: 12px;
}
p {
white-space: nowrap;
font-size: 12px;
margin-bottom: 0px;
}
img {
height: 16px;
&:not(:first-of-type) {
margin-left: 8px;
}
}
}
}
[purpose='integration-cards'] {
margin-top: 40px;
margin-bottom: 40px;
@ -1022,6 +1260,57 @@
border-radius: 8px;
}
}
[purpose='comparison-column'] {
max-width: 140px;
min-width: 160px;
}
[purpose='comparison-table-header'] {
font-size: 14px;
div {
padding: 12px 24px;
}
[purpose='comparison-selector'] {
min-width: 152px;
height: 48px;
border-radius: 8px;
padding: 0px 12px;
background: #FFF;
border: 1px solid @core-vibrant-blue-15;
cursor: pointer;
}
[purpose='comparison-selector-dropwdown'] {
width: 152px;
cursor: pointer;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
}
}
}
[purpose='fleet-column'] {
min-width: 140px;
max-width: 140px;
}
[purpose='comparison-table-header'] {
div {
padding: 12px 16px;
}
}
[purpose='comparison-table'] {
border-radius: 8px;
border: 1px solid #E2E4EA;
[purpose='table-row'] {
div {
padding: 12px 16px;
}
}
}
[purpose='integration-cards'] {
[purpose='integration-card-column'] {
@ -1731,6 +2020,21 @@
}
}
}
[purpose='mobile-comparison-table'] {
[purpose='comparison-selector-dropwdown'] {
dispaly: flex;
flex-direction: column;
width: calc(~' 100% - 40px');
}
}
[purpose='button-row'] {
flex-direction: column;
[purpose='cta-button'] {
width: 100%;
margin-right: auto;
margin-bottom: 16px;
}
}
[purpose='statistics'] {
margin-top: 32px;
margin-bottom: 32px;

View file

@ -261,7 +261,618 @@
</div>
</div>
<% } %>
<div purpose="page-section">
<div purpose="page-section">
<div purpose="comparison-section">
<% if(primaryBuyingSituation === 'mdm'){%>
<h2>Toe-to-toe with the big players</h2>
<%} else {%>
<h2>Is it any good?</h2>
<%}%>
<p>Considering a move to Fleet as a cross-platform, open-source MDM alternative? See how we compare:</p>
<div purpose="desktop-comparison-table" class="d-none d-sm-block">
<div purpose="comparison-table-header" class="d-sm-flex d-none flex-row justify-content-end">
<div purpose="fleet-column" class="justify-content-center"><strong>Fleet</strong></div>
<div purpose="comparison-column" class="d-flex">
<div purpose="comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
</div>
</div>
</div>
<div purpose="comparison-table" class="d-sm-flex d-none flex-column">
<div purpose="table-row">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>iOS/iPadOS management</p></div>
<div purpose="fleet-column">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-if="['tanium', 'chef', 'sccm'].includes(comparisonMode)">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'puppet'">
<p>Community module</p>
</div>
<div purpose="comparison-column" v-else>
<img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name">
<p>Complete device inventory <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries."></p>
</div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Operating system updates</p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Configuration management and scripting</p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Remote lock and wipe</p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name" class="d-flex align-items-center"><p>App management </p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Automated device compliance</p></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>REST API</p></div>
<div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
<div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
<p>Microsoft Graph API</p>
</div>
<div purpose="comparison-column" v-else>
<p>Multiple APIs required</p>
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Config as code (GitOps)</p></div>
<div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
<div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name">
<p>
Device reporting (&lt;30 mins)
<img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
</p>
</div>
<div purpose="fleet-column">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'tanium'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="comparison-column" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>One-off scripts</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Open source</p></div>
<div purpose="fleet-column"><p>Free and paid version</p></div>
<div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>Only free version</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
</div>
<div purpose="mobile-comparison-table" class="d-block d-sm-none">
<p class="mt-5 mb-2 font-weight-bold">Compare with:</p>
<div purpose="mobile-comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
id="mobileDropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>iOS/iPadOS management</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['tanium', 'chef', 'sccm'].includes(comparisonMode)">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'puppet'">
<p>Community module</p>
</div>
<div purpose="feature-status" v-else>
<img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name">
<p>Complete device inventory </p>
<img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries.">
</div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS"> </div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Operating system updates</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['omnissa', 'intune',].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Configuration management and scripting</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Remote lock and wipe</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="['intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>App management </p>
</div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Automated device compliance</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>Windows only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>REST API</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'intune'">
<p>Microsoft Graph API</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<p>Multiple APIs required</p>
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Config as code (GitOps)</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name">
<p>Device reporting (<30 mins)</p>
<img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
</div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'tanium'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="feature-status" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>One-off scripts</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Open source</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>Only free version</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
</div>
<div purpose="button-row">
<a purpose="cta-button" href="/pricing">Compare all features</a>
<animated-arrow-button href="/testimonials">What are people saying?</animated-arrow-button>
</div>
</div>
</div>
<div purpose="page-section">
<div purpose="endpoints-banner">
<div purpose="endpoint-banner-text">
<h2>An open interface for every OS</h2>