Skip to content
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

Website: Update pricing page #14273

Merged
merged 9 commits into from
Oct 6, 2023
Merged

Website: Update pricing page #14273

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3b78b15
Update pricing page
eashaw Oct 3, 2023
ea1f5da
update breakpoint
eashaw Oct 3, 2023
79fd7b8
update background color and mobile width
eashaw Oct 3, 2023
a3d5a1e
update layout
eashaw Oct 3, 2023
1ea2c52
Update pricing.less
eashaw Oct 4, 2023
f0cf8ad
update styles to match wireframes
eashaw Oct 4, 2023
9c19ea5
Update pricing.less
eashaw Oct 4, 2023
2f309a3
Merge branch 'main' into website-update-pricing-page-2023-10
mike-j-thomas Oct 5, 2023
1fc29ad
Update CODEOWNERS
eashaw Oct 6, 2023
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
2 changes: 1 addition & 1 deletion website/assets/js/pages/pricing.page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ parasails.registerPage('pricing', {
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
displaySecurityPricingMode: false,// For pricing mode switch
pricingMode: 'all',
},

// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
Expand Down
57 changes: 46 additions & 11 deletions website/assets/styles/pages/pricing.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@
max-width: 1120px;
}
[purpose='pricing-switch'] {
width: 280px;
width: 600px;
cursor: pointer;
border: 1px solid #E2E4EA;
border-radius: 28px;
background: #EBF2F5;
background: @ui-off-white;
position: relative;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
margin-bottom: 40px;
margin-top: 40px;
[purpose='pricing-tier-switch'] {
position: absolute;
top: 0px;
Expand All @@ -53,23 +55,31 @@
transition: 0.25s all;
}
[purpose='pricing-switch-option'] {
padding: 16px;
width: 140px;
padding: 16px 40px;
text-align: center;
cursor: pointer;
z-index: 3;
user-select: none;
white-space: nowrap;
}
.security-selected {
transform: translateX(140px);
width: 251px;
transform: translateX(167px);
}
.it-selected {
width: 183px;
transform: translateX(416px);
}
.all-selected {
width: 167px;
}
}

[purpose='free-tier-card'] {
padding: 40px;
border-radius: 15px;
margin-right: 6px;
width: 380px;
width: 50%;
strong {
color: #192147;
font-size: 16px;
Expand All @@ -78,7 +88,7 @@
}

[purpose='premium-card'] {
width: 66%;
width: 50%;
}
[purpose='premium-tier-card'] {
padding: 40px;
Expand Down Expand Up @@ -147,7 +157,7 @@
}
}
[purpose='pricing-tier-title'] {
text-align: left;
text-align: center;
h1 {// Price e.g., $0
font-weight: 700;
font-size: 32px;
Expand All @@ -166,7 +176,7 @@
font-size: 14px;
line-height: 20px;
color: #515774;
margin-bottom: 24px;
margin-bottom: 4px;
}
h4 { // "Starting at"
font-weight: 400;
Expand Down Expand Up @@ -255,7 +265,7 @@
}

[purpose='features-table'] {
padding-top: 80px;
// padding-top: 80px;
}
[purpose='mobile-feature-table-section'] {
margin-bottom: 16px;
Expand Down Expand Up @@ -410,6 +420,29 @@
}
}

@media (max-width: 767px) {
[purpose='pricing-switch'] {
width: 100%;
[purpose='pricing-tier-switch'] {
height: 56px;
left: 0px;
}
[purpose='pricing-switch-option'] {
height: 56px;
}
.security-selected {
width: 100%;
transform: translateY(56px);
}
.it-selected {
width: 100%;
transform: translateY(113px);
}
.all-selected {
width: 100%;
}
}
}
@media (max-width: 575px) {
// >575px:
// - The Premium Cloud card switches to a column layout
Expand All @@ -424,9 +457,11 @@
}
[purpose='free-tier-card'] {
padding: 24px;
justify-content: center;
}
[purpose='premium-tier-card'] {
padding: 24px;
justify-content: center;
}
[purpose='pricing-categories-table'] {
margin-bottom: 40px;
Expand Down
122 changes: 21 additions & 101 deletions website/views/pages/pricing.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,35 @@
<div class="px-0 d-flex flex-column justify-content-center pt-5 mx-auto">
<div purpose="hero-text">
<h2 class="text-center mb-5">
Select the plan based on your needs
Compare plans and pricing
</h2>
</div>
<div purpose="pricing-switch" class="d-flex flex-row justify-content-center mx-auto mb-5" @click="displaySecurityPricingMode = !displaySecurityPricingMode">
<div purpose="pricing-switch-option" :class="[!displaySecurityPricingMode ? 'selected' : '']">IT</div>
<div purpose="pricing-switch-option" :class="[displaySecurityPricingMode ? 'selected' : '']">Security</div>
<div purpose="pricing-tier-switch" :class="[displaySecurityPricingMode ? 'security-selected' : '']"></div>
</div>
<div purpose="pricing-tiers" class="d-flex flex-column flex-lg-row justify-content-center">

<%// Fleet Free tier card %>
<div purpose="free-tier-card" class="card d-flex flex-column">
<div purpose="pricing-tier-title">
<div class="d-flex flex-row justify-content-between">
<div class="d-flex flex-column justify-content-start">
<h2>Free</h2>
<div class="d-flex flex-row justify-content-center">
<div class="d-flex flex-column justify-content-center">
<h2>Community</h2>
<h3>Unlimited hosts</h3>
</div>
<div class="d-flex flex-column align-items-center">
<h1>$0</h1>
<div class="d-flex flex-row align-items-center">
<h1>$0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
</div>
</div>
</div>
</div>
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto" href="/try-fleet">Get started free</a>
<p class="mb-4 mt-4 pt-1"><strong>Includes:</strong></p>

<%// IT features (free) %>
<div purpose="features-list" v-if="!displaySecurityPricingMode">
<p>Opt-in macOS MDM</p>
<p>REST API and webhooks</p>
<p>YAML configuration</p>
<p>Enforce device configurations</p>
<p>Run MDM commands via CLI</p>
<p>End user transparency</p>
<p>Community support (MacAdmins Slack)</p>
<p>Self-hosted</p>
</div>

<%// Security features (free) %>
<div purpose="features-list" v-else>
<p>Manage osquery at enterprise scale</p>
<p>Monitor query performance</p>
<p>REST API and webhooks</p>
<p>YAML configuration</p>
<p>Detect vulnerabilities</p>
<p>Software inventory</p>
<p>Device health report</p>
<p>Ship logs to Splunk, Snowflake, and more</p>
<p>Self-hosted</p>
</div>
</div>
<div purpose="premium-card" class="d-flex flex-column">

<%// Fleet Premium tier card %>
<%// Fleet Premium tier card %>
<div purpose="premium-card" class="d-flex flex-column justify-content-center">
<div purpose="premium-tier-card" class="card d-flex h-100 flex-column">
<div purpose="pricing-tier-title">
<div class="d-flex flex-sm-row flex-column justify-content-between">
<div class="d-flex flex-column justify-content-start">
<div class="d-flex flex-column justify-content-between">
<div class="d-flex flex-column justify-content-center">
<h2>Premium</h2>
<h3>Unlimited hosts</h3>
</div>
<div class="d-flex flex-row align-items-center">
<div class="d-flex flex-row align-items-center ">
<h4>Starting at </h4><h1 class="mb-2">$7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
<div class="d-flex flex-row align-items-center justify-content-center">
<h4>From </h4><h1 class="mb-2">$7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
</div>
</div>
</div>
Expand All @@ -75,62 +40,18 @@
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/customers/register">Get started</a>
<p purpose="contact-sales-link">For organizations with large deployments, <a @click="clickOpenChatWidget()">contact sales</a>.</p>
</div>
<p class="mb-4"><strong>All of Free plus:</strong></p>

<%// IT features (Premium) %>
<div class="d-flex flex-sm-row flex-column align-items-around" v-if="!displaySecurityPricingMode">
<div class="w-sm-50 w-100 mr-3" purpose="features-list">
<p>Zero-touch MDM for macOS</p>
<p>Windows MDM with Autopilot*</p>
<p>Safely execute remote scripts*</p>
<p>Programmable remediations*</p>
<p>Disk encryption key escrow</p>
<p>macOS update via Nudge</p>
<p>Remote lock and wipe</p>
</div>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</p>
<p>Self-managed or private cloud hosted</p>
<p>Dedicated Slack channel</p>
<p>End user sign-in with Okta, AD, or any IDP</p>
<p>Integrate with Munki, Chef, and Puppet</p>
<p>Enterprise-ready MDM migration</p>
</div>
</div>

<%// Security features (Premium) %>
<div class="d-flex flex-sm-row flex-column align-items-around" v-else>
<div class="w-sm-50 w-100" purpose="features-list">
<p>GitOps-ready</p>
<p>CIS for macOS and Windows</p>
<p>Custom vulnerability reporting</p>
<p>Phased rollouts (canaries)</p>
<p>Single-Sign On (SSO)</p>
<p>Version history for queries and config</p>
<p>Granular role-based access</p>
<p>Target and configure specific device groups</p>
<p>Programable audit log</p>
<p>Vulnerability scores (EPSS and CVSS)</p>
<p>CISA known exploited vulnerabilities</p>
</div>
<div class="w-sm-50 w-100" purpose="features-list">
<p>24x7 support</p>
<p>Self-managed or private cloud hosted</p>
<p>Sync user roles from Okta, AD, or any IDP</p>
<p>Just-in-time (JIT) provisioning</p>
<p>Aggregate insights for groups of devices</p>
<p>Agent auto-updates</p>
<p>Manage osquery extensions remotely</p>
</div>

</div>
</div>
</div>
</div>
<div purpose="pricing-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
<div purpose="pricing-switch-option" class="all" :class="[pricingMode === 'all' ? 'selected' : '']" @click="pricingMode = 'all'">All features</div>
<div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'security' ? 'selected' : '']" @click="pricingMode = 'security'">For security engineers</div>
<div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'it' ? 'selected' : '']" @click="pricingMode = 'it'">For IT admins</div>
<div purpose="pricing-tier-switch" :class="pricingMode+'-selected'"></div>
</div>
</div>
<%// IT-focused features table %>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="!displaySecurityPricingMode">
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="pricingMode === 'all' || pricingMode === 'it'">
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop IT-focused features tables %>
<div class="d-none d-md-block">
Expand Down Expand Up @@ -199,8 +120,7 @@
</div>
</div>
<%// Security-focused features table %>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else>
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else-if="pricingMode === 'security'">
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop security-focused features tables %>
<div class="d-none d-md-block">
Expand Down