mirror of https://github.com/zulip/zulip.git
portico: Add pricing widget from /plans to for-education page.
This commit is contained in:
parent
8cb86eff4c
commit
56ce1f9f63
|
@ -4218,58 +4218,14 @@ nav {
|
|||
max-width: 800px;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-pricing {
|
||||
margin: auto;
|
||||
max-width: 635px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
table tr th,
|
||||
table tr td {
|
||||
border-right: 1px solid hsl(0, 0%, 73.3%);
|
||||
border-bottom: 1px solid hsl(0, 0%, 73.3%);
|
||||
padding: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
table tr th:first-child,
|
||||
table tr td:first-child {
|
||||
border-left: 1px solid hsl(0, 0%, 73.3%);
|
||||
}
|
||||
|
||||
td:nth-child(2),
|
||||
th:nth-child(2) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
background: hsl(0, 0%, 93.3%);
|
||||
border-top: 1px solid hsl(0, 0%, 73.3%);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* top-left border-radius */
|
||||
table tr:first-child th:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
||||
/* top-right border-radius */
|
||||
table tr:first-child th:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
/* bottom-left border-radius */
|
||||
table tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
/* bottom-right border-radius */
|
||||
table tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.price-asterisk {
|
||||
text-align: center;
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
font-size: 15px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4288,3 +4244,64 @@ nav {
|
|||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.for-education.pricing-model {
|
||||
.padded-content {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.pricing-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
.pricing-details {
|
||||
color: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
margin: 10px;
|
||||
height: 625px;
|
||||
|
||||
.bottom {
|
||||
height: 275px;
|
||||
|
||||
.standard-register-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.free-text {
|
||||
margin-top: 90px;
|
||||
|
||||
.pricing-details {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
.standard-price-box {
|
||||
flex-flow: row wrap;
|
||||
height: 90px;
|
||||
font-size: 15px;
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0 0 -10px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 550;
|
||||
color: hsl(169, 46%, 33%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -225,23 +225,81 @@
|
|||
<div class="feature-end">
|
||||
<div class="feature-pricing" id="feature-pricing">
|
||||
<h1 class="center"> Zulip Cloud for Education plans </h1>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Zulip Cloud Standard with education discount</th>
|
||||
<th>
|
||||
<div>$1 per user per month</div>
|
||||
<div>$1.20/month billed monthly</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zulip Cloud Standard for education non-profits*</td>
|
||||
<td>
|
||||
<div>$0.67 per user per month</div>
|
||||
<div>$0.80/month billed monthly</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<div class="for-education pricing-model">
|
||||
<div class="padded-content">
|
||||
<div class="pricing-container">
|
||||
<div class="price-box" tabindex="-1">
|
||||
<div class="text-content">
|
||||
<h2>Free</h2>
|
||||
<div class="description">
|
||||
Try Zulip for an unlimited period of time.
|
||||
</div>
|
||||
<hr />
|
||||
<ul class="feature-list">
|
||||
<li>10,000 messages of search history</li>
|
||||
<li>File storage up to 5 GB total</li>
|
||||
<li>Convenient web service</li>
|
||||
<li>No sysadmin work required</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="text-content free-text">
|
||||
<div class="pricing-details">
|
||||
Free
|
||||
</div>
|
||||
<a href="/new/" class="button green">
|
||||
Create organization
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-box" tabindex="-1">
|
||||
<div class="text-content">
|
||||
<h2>Standard for Education</h2>
|
||||
<div class="description">
|
||||
Make Zulip your home.
|
||||
</div>
|
||||
<hr />
|
||||
<ul class="feature-list">
|
||||
<li>Full search history</li>
|
||||
<li>File storage up to 10 GB per user</li>
|
||||
<li>Full access to enterprise features
|
||||
like guest users and user groups</li>
|
||||
<li>Priority commercial support</li>
|
||||
<li>Funds the Zulip open source project</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="text-content">
|
||||
<div class="standard-price-box">
|
||||
<p>Education (for-profit)</p>
|
||||
<div class="price">1</div>
|
||||
<div class="details">
|
||||
per user per month
|
||||
<br />
|
||||
$1.20/month billed monthly
|
||||
</div>
|
||||
</div>
|
||||
<div class="standard-price-box">
|
||||
<p>Education (non-profit)*</p>
|
||||
<div class="price">0<span class="price-cents">.67</span></div>
|
||||
<div class="details">
|
||||
per user per month
|
||||
<br />
|
||||
$0.80/month billed monthly
|
||||
</div>
|
||||
</div>
|
||||
<a href="/accounts/go/?next=/upgrade%23sponsorship" class="button green standard-register-button">
|
||||
Request education pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="price-asterisk">
|
||||
* Discount applies to online purchases only for use at
|
||||
non-profit institutions (e.g. colleges and universities).
|
||||
</p>
|
||||
|
|
|
@ -158,7 +158,7 @@ class DocPageTest(ZulipTestCase):
|
|||
self._test("/why-zulip/", "Why Zulip?")
|
||||
self._test("/for/open-source/", "for open source projects")
|
||||
self._test("/for/events/", "for conferences and events")
|
||||
self._test("/for/education/", "for education")
|
||||
self._test("/for/education/", "education pricing")
|
||||
self._test("/case-studies/tum/", "Technical University of Munich")
|
||||
self._test("/case-studies/ucsd/", "UCSD")
|
||||
self._test("/for/research/", "for research")
|
||||
|
|
Loading…
Reference in New Issue