mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Add images to pricing tier cards (#26425)
Closes: #24993 Changes: - Added images to the pricing tiers on the pricing page.
This commit is contained in:
Eric
GitHub
parent
5ee9c0c809
commit
683c3b3892
5 changed files with 150 additions and 60 deletions
BIN
website/assets/images/pricing-page-card-custom-543x233@2x.png
vendored
Normal file
BIN
website/assets/images/pricing-page-card-custom-543x233@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
website/assets/images/pricing-page-card-free-543x233@2x.png
vendored
Normal file
BIN
website/assets/images/pricing-page-card-free-543x233@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
website/assets/images/pricing-page-card-premium-543x233@2x.png
vendored
Normal file
BIN
website/assets/images/pricing-page-card-premium-543x233@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
121
website/assets/styles/pages/pricing.less
vendored
121
website/assets/styles/pages/pricing.less
vendored
|
|
@ -76,33 +76,64 @@
|
|||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='free-tier-card'] {
|
||||
text-align: left;
|
||||
padding: 40px;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
[purpose='pricing-tiers'] {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
[purpose='pricing-card-body'] {
|
||||
padding: 24px 32px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
[purpose='pricing-card'] {
|
||||
width: 33%;
|
||||
[purpose='pricing-tier-image'] {
|
||||
height: 149px;
|
||||
width: 100%;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
background-size: auto 100%;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
}
|
||||
[purpose='free-tier-card'] {
|
||||
text-align: left;
|
||||
padding: 0px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #E2E4EA;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
|
||||
[purpose='pricing-tier-image'] {
|
||||
background-image: url('/images/pricing-page-card-free-543x233@2x.png');
|
||||
}
|
||||
}
|
||||
[purpose='premium-tier-card'] {
|
||||
padding: 40px;
|
||||
border-radius: 15px;
|
||||
padding: 0px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #E2E4EA;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
margin-left: 16px;
|
||||
background: #fff;
|
||||
[purpose='pricing-tier-image'] {
|
||||
background-image: url('/images/pricing-page-card-premium-543x233@2x.png');
|
||||
}
|
||||
}
|
||||
[purpose='custom-tier-card'] {
|
||||
padding: 40px;
|
||||
border-radius: 15px;
|
||||
padding: 0px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #E2E4EA;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
margin-left: 16px;
|
||||
background: #fff;
|
||||
[purpose='pricing-tier-image'] {
|
||||
background-image: url('/images/pricing-page-card-custom-543x233@2x.png');
|
||||
}
|
||||
[purpose='pricing-tier-title'] {
|
||||
h2 {
|
||||
margin-bottom: 17px;
|
||||
|
|
@ -535,6 +566,16 @@
|
|||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
[purpose='pricing-card'] {
|
||||
width: 33%;
|
||||
[purpose='pricing-tier-image'] {
|
||||
height: 149px;
|
||||
width: 100%;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
background-size: 100% auto;
|
||||
background-position: center 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
// >992 width:
|
||||
|
|
@ -544,21 +585,33 @@
|
|||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
[purpose='free-tier-card'] {
|
||||
margin-bottom: 12px;
|
||||
padding: 40px;
|
||||
}
|
||||
[purpose='pricing-card'] {
|
||||
width: 100%;
|
||||
[purpose='pricing-tier-image'] {
|
||||
height: 240px;
|
||||
min-height: 100%;
|
||||
max-width: 337px;
|
||||
width: 100%;
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
[purpose='pricing-card-body'] {
|
||||
padding: 24px 64px;
|
||||
}
|
||||
[purpose='free-tier-card'] {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
[purpose='premium-tier-card'] {
|
||||
margin-left: 0px;
|
||||
margin-bottom: 12px;
|
||||
padding: 40px;
|
||||
margin-bottom: 16px;
|
||||
[purpose='card-button'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='custom-tier-card'] {
|
||||
margin-left: 0px;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -585,6 +638,21 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='pricing-card'] {
|
||||
width: 100%;
|
||||
[purpose='pricing-tier-image'] {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
max-width: 257px;
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
[purpose='pricing-card-body'] {
|
||||
padding: 24px 32px;
|
||||
}
|
||||
[purpose='features-table'] {
|
||||
.truncated {
|
||||
max-height: 1480px;
|
||||
|
|
@ -663,16 +731,25 @@
|
|||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
[purpose='pricing-card'] {
|
||||
width: 100%;
|
||||
[purpose='pricing-tier-image'] {
|
||||
height: 233px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
[purpose='free-tier-card'] {
|
||||
padding: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
[purpose='premium-tier-card'] {
|
||||
padding: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
[purpose='custom-tier-card'] {
|
||||
padding: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
[purpose='pricing-categories-table'] {
|
||||
|
|
|
|||
89
website/views/pages/pricing.ejs
vendored
89
website/views/pages/pricing.ejs
vendored
|
|
@ -9,57 +9,70 @@
|
|||
<div purpose="pricing-tiers" class="d-flex flex-column flex-lg-row justify-content-center">
|
||||
<%// Fleet Free tier card %>
|
||||
<div purpose="pricing-card">
|
||||
<div purpose="free-tier-card" class="card d-flex flex-column h-100 justify-content-between">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-row justify-content-start">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<h2>Free</h2>
|
||||
<h3>Unlimited hosts</h3>
|
||||
<div purpose="tier-price" class="d-flex flex-row align-items-center">
|
||||
<h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="free-tier-card" class="card d-flex flex-lg-column flex-sm-row flex-column h-100">
|
||||
<div purpose="pricing-tier-image">
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="button-container" class="d-flex flex-row align-items-center">
|
||||
<animated-arrow-button href="/docs">
|
||||
Read the docs
|
||||
</animated-arrow-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Fleet Premium tier card %>
|
||||
<div purpose="pricing-card" class="d-flex flex-column justify-content-center">
|
||||
<div purpose="premium-tier-card" class="card d-flex h-100 flex-column justify-content-between">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="d-flex flex-column justify-content-start">
|
||||
<h2>Premium</h2>
|
||||
<h3>Unlimited baselines</h3>
|
||||
<div purpose="tier-price" class="d-flex flex-row align-items-center justify-content-start">
|
||||
<h1><span purpose="price-dollar-sign">$</span>7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
|
||||
<div purpose="pricing-card-body">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-row justify-content-start">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<h2>Free</h2>
|
||||
<h3>Unlimited hosts</h3>
|
||||
<div purpose="tier-price" class="d-flex flex-row align-items-center">
|
||||
<h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="button-container" class="d-flex flex-row align-items-center">
|
||||
<animated-arrow-button href="/docs">
|
||||
Read the docs
|
||||
</animated-arrow-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Fleet Premium tier card %>
|
||||
<div purpose="pricing-card" class="d-flex flex-column justify-content-center">
|
||||
<div purpose="premium-tier-card" class="card d-flex h-100 flex-lg-column flex-sm-row flex-column">
|
||||
<div purpose="pricing-tier-image">
|
||||
</div>
|
||||
<div purpose="pricing-card-body">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="d-flex flex-column justify-content-start">
|
||||
<h2>Premium</h2>
|
||||
<h3>Unlimited baselines</h3>
|
||||
<div purpose="tier-price" class="d-flex flex-row align-items-center justify-content-start">
|
||||
<h1><span purpose="price-dollar-sign">$</span>7.00</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 mb-0" href="/register">Get started</a>
|
||||
<!-- <div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Custom tier card %>
|
||||
<div purpose="pricing-card" class="d-flex flex-column justify-content-center">
|
||||
<div purpose="custom-tier-card" class="card d-flex h-100 flex-column justify-content-between">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h2>Custom</h2>
|
||||
<h3>For teams who can move quickly with extremely large deployments.</h3>
|
||||
<div purpose="custom-tier-card" class="card d-flex h-100 flex-lg-column flex-sm-row flex-column">
|
||||
<div purpose="pricing-tier-image">
|
||||
|
||||
</div>
|
||||
<div purpose="pricing-card-body">
|
||||
<div purpose="pricing-tier-title">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h2>Custom</h2>
|
||||
<h3>For teams who can move quickly with extremely large deployments.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/contact">Talk to an engineer</a>
|
||||
<div>
|
||||
<a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/contact">Talk to an engineer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue