Website: Add SCCM to MDM comparison table. (#27545)

Related to: #26744

Changes:
- Added "SCCM" to the comparison table on the device management page.
This commit is contained in:
Eric 2025-03-27 17:02:29 -05:00 committed by GitHub
parent e5ebc3e20b
commit db485718e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 72 additions and 17 deletions

View file

@ -4,9 +4,10 @@ parasails.registerPage('device-management-page', {
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
modal: '',
comparisonMode: 'omnissa',
comparisonMode: 'sccm',
comparisonModeFriendlyNames: {
jamf: 'Jamf Pro',
sccm: 'SCCM',
omnissa: 'Omnissa (WS1)',
intune: 'Intune',
tanium: 'Tanium',

View file

@ -169,7 +169,7 @@
margin-top: 32px;
}
[purpose='comparison-table-header'] {
font-size: 14px;
font-size: 16px;
color: @core-fleet-black;
div {
padding: 12px 24px;
@ -209,12 +209,14 @@
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;
@ -228,6 +230,7 @@
}
[purpose='feature-name'] {
width: 100%;
padding: 12px 24px;
}
[purpose='table-new-badge'] {
background-color: #0587FF;
@ -252,7 +255,6 @@
width: 12px;
}
div {
padding: 12px 24px;
display: flex;
align-items: center;
}
@ -1071,6 +1073,16 @@
}
}
}
[purpose='comparison-section'] {
[purpose='button-row'] {
flex-direction: column;
[purpose='cta-button'] {
width: 100%;
margin-bottom: 16px;
margin-right: 0;
}
}
}
}
@media (max-width: 390px) {

View file

@ -115,13 +115,14 @@
<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"><strong>Fleet</strong></div>
<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 shevron 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>
@ -146,6 +147,9 @@
<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>
@ -156,7 +160,7 @@
<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'].includes(comparisonMode)">
<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'">
@ -169,8 +173,8 @@
<div purpose="table-row">
<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.">
<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" >
@ -195,7 +199,10 @@
<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'">
<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)">
@ -218,7 +225,10 @@
<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'">
<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)">
@ -247,7 +257,7 @@
<div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="comparison-column" v-else-if="['intune'].includes(comparisonMode)">
<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>
@ -264,7 +274,10 @@
<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'">
<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'">
@ -288,7 +301,10 @@
<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'">
<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'">
@ -305,7 +321,10 @@
<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 === 'intune'">
<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>
@ -326,8 +345,9 @@
<div purpose="table-row">
<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.">
<p>
Device reporting (&lt;30 mins) <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.">
</p>
</div>
<div purpose="fleet-column">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
@ -366,6 +386,7 @@
{{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>
@ -389,6 +410,9 @@
<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>
@ -407,7 +431,7 @@
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['tanium', 'chef'].includes(comparisonMode)">
<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'">
@ -458,6 +482,9 @@
<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>
@ -486,6 +513,9 @@
<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>
@ -543,6 +573,9 @@
<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>
@ -572,6 +605,9 @@
<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>
@ -597,6 +633,9 @@
<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>
@ -670,7 +709,10 @@
</div>
</div>
<animated-arrow-button class="mx-auto" href="/pricing">View all features</animated-arrow-button>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/pricing">Compare all features</a>
<animated-arrow-button href="/testimonials">What are people saying?</animated-arrow-button>
</div>
</div>
<%/* Shorten the feedback loop section */%>
<div purpose="page-section">