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

View File

@ -16,38 +16,9 @@
<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">
<h2>Other questions?</h2>
<p>
See our <a href="/help/zulip-cloud-billing">billing help page</a> for
additional details
</p>
<ul>
<li>
<a href="/help/zulip-cloud-billing#differences-between-zulip-cloud-plans">Differences between Zulip Cloud plans</a>
</li>
<li>
<a href="/help/zulip-cloud-billing#payment-methods">Payment methods</a>
</li>
<li>
<a href="/help/zulip-cloud-billing#temporary-users-and-guests">Temporary users and guests</a>
</li>
</ul>
<ul>
<li>
<a href="/help/migrating-from-other-chat-tools">Migrating from other chat tools</a>
</li>
<li>
<a href="https://zulip.com/help/trying-out-zulip">Trying out Zulip</a>
</li>
</ul>
<p>
If you have any other questions, please dont hesitate to reach out to
<a href="mailto:sales@zulip.com">sales@zulip.com</a>.
</p>
</div>
</div> </div>
<div class="additional-pricing-information">
<div class="discounts-section"> <div class="discounts-section">
<header> <header>
<h2>Discounts?</h2> <h2>Discounts?</h2>
@ -86,5 +57,41 @@
</p> </p>
</div> </div>
</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>
<li>
<a href="/help/zulip-cloud-billing#differences-between-zulip-cloud-plans">Differences between Zulip Cloud plans</a>
</li>
<li>
<a href="/help/zulip-cloud-billing#payment-methods">Payment methods</a>
</li>
<li>
<a href="/help/zulip-cloud-billing#temporary-users-and-guests">Temporary users and guests</a>
</li>
</ul>
<ul>
<li>
<a href="/help/migrating-from-other-chat-tools">Migrating from other chat tools</a>
</li>
<li>
<a href="https://zulip.com/help/trying-out-zulip">Trying out Zulip</a>
</li>
</ul>
<p>
If you have any other questions, please dont hesitate to reach out to
<a href="mailto:sales@zulip.com">sales@zulip.com</a>.
</p>
</div>
</div>
</div> </div>
{% include 'zerver/footer.html' %}
{% endblock %} {% endblock %}

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;
}
} }