Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Website: Add images to pricing tier cards (#26425)

Browse Source 
Closes: #24993

Changes:
- Added images to the pricing tiers on the pricing page.
This commit is contained in:
Eric
2025-02-18 15:45:16 -06:00
committed by GitHub
parent 5ee9c0c809
commit 683c3b3892
5 changed files with 150 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/images/pricing-page-card-custom-543x233@2x.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

website/assets/images/pricing-page-card-free-543x233@2x.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

website/assets/images/pricing-page-card-premium-543x233@2x.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

website/assets/styles/pages/pricing.less
Vendored
+99 -22
View File
@@ -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'] {
website/views/pages/pricing.ejs
Vendored
+51 -38
View File
@@ -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>