Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

plans_page: Rough out structures and grid layout.

This commit is contained in:
Karl Stolley 2023-11-20 14:37:48 -06:00 committed by Tim Abbott
parent a6498ad666
commit 52f8f56286
2 changed files with 96 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
templates/corporate/plans.html
View File

@ -16,12 +16,56 @@
<div class="portico-pricing plans"> <div class="portico-pricing plans">
<div class="main"> <div class="main">
{% include "corporate/pricing_model.html" %} {% include "corporate/pricing_model.html" %}
<div class="plans_top_faq plans_faq_questions"> </div>
<h2>Other questions?</h2>
<p> <div class="additional-pricing-information">
See our <a href="/help/zulip-cloud-billing">billing help page</a> for <div class="discounts-section">
additional details <header>
</p> <h2>Discounts?</h2>
<p>
We sponsor hundreds of worthy organizations
</p>
</header>
<div class="discounted-community-plan">
<h3>Community plan</h3>
<ul>
<li>
<a href="/for/open-source/">Open source projects</a>
</li>
<li>
<a href="/for/research/">Research groups or departments</a>
</li>
<li>
<a href="/for/events/">Academic conferences and most other non-profit events</a>
</li>
</ul>
</div>
<div class="discounted-business-plan">
<h3>Business plan with 85% discount</h3>
<ul>
<li>
<a href="/for/education/">Education</a> (online or in-person)
</li>
<li>
<a href="/for/communities/">Non-profits and communities</a>
</li>
</ul>
<a href="{{ sponsorship_url }}">Request sponsorship</a>
<p>
If you don’t have a Zulip account yet, contact us via
<a href="mailto:contact@zulip.com">contact@zulip.com</a>
</p>
</div>
</div>
<div class="questions-section">
<header>
<h2>Other questions?</h2>
<p>
See our <a href="/help/zulip-cloud-billing">billing help page</a> for
additional details
</p>
</header>
<ul> <ul>
<li> <li>
<a href="/help/zulip-cloud-billing#differences-between-zulip-cloud-plans">Differences between Zulip Cloud plans</a> <a href="/help/zulip-cloud-billing#differences-between-zulip-cloud-plans">Differences between Zulip Cloud plans</a>
@ -47,44 +91,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="discounts-section">
<header>
<h2>Discounts?</h2>
<p>
We sponsor hundreds of worthy organizations
</p>
</header>
<div class="discounted-community-plan">
<h3>Community plan</h3>
<ul>
<li>
<a href="/for/open-source/">Open source projects</a>
</li>
<li>
<a href="/for/research/">Research groups or departments</a>
</li>
<li>
<a href="/for/events/">Academic conferences and most other non-profit events</a>
</li>
</ul>
</div>
<div class="discounted-business-plan">
<h3>Business plan with 85% discount</h3>
<ul>
<li>
<a href="/for/education/">Education</a> (online or in-person)
</li>
<li>
<a href="/for/communities/">Non-profits and communities</a>
</li>
</ul>
<a href="{{ sponsorship_url }}">Request sponsorship</a>
<p>
If you don’t have a Zulip account yet, contact us via
<a href="mailto:contact@zulip.com">contact@zulip.com</a>
</p>
</div>
</div>
</div> </div>
{% include 'zerver/footer.html' %}
{% endblock %} {% endblock %}

47
web/styles/portico/hello.css
View File

@ -1062,9 +1062,7 @@ ul {
} }
.portico-pricing { .portico-pricing {
.padded-content { padding: 102px 0 58px;
padding: 102px 0;
}
h1 { h1 {
font-weight: 500; font-weight: 500;
@ -1098,4 +1096,47 @@ ul {
} }
} }
} }
.pricing-container {
display: grid;
grid-template:
". cloud-title self-hosted-title . " auto
"pricing pricing pricing pricing" auto / 30px minmax(
0,
1fr
) minmax(0, 1fr) 30px;
max-width: 960px;
margin: 0 auto;
}
.cloud-plan-title {
grid-area: cloud-title;
}
.cloud-plan-pricing {
grid-area: pricing;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: auto;
}
.self-hosted-plan-title {
grid-area: self-hosted-title;
}
.self-hosted-plan-pricing {
grid-area: pricing;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: auto;
}
.additional-pricing-information {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
column-gap: 32px;
max-width: 912px;
margin: 0 auto;
}
} }