Skip to content

Commit

Permalink
WIP: Prototype plans switcher.
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanagr
amanagr committed Dec 27, 2021
1 parent b1436ae commit 4375a1b
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 19 deletions.
12 changes: 12 additions & 0 deletions static/js/portico/landing-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,3 +232,15 @@ $(() => {
$(document).on("click", ".markdown h1, .markdown h2, .markdown h3", function () {
window.location.hash = $(this).attr("id");
});

$(document).on("click", ".cloud-plan-btn", () => {
$(".cloud-plan-btn, .self-hosted-plan-btn").toggleClass("active");
$(".price-box.cloud-plan").css("display", "inline-block");
$(".price-box.self-hosted-plan").hide();
});

$(document).on("click", ".self-hosted-plan-btn", () => {
$(".cloud-plan-btn, .self-hosted-plan-btn").toggleClass("active");
$(".price-box.cloud-plan").hide()
$(".price-box.self-hosted-plan").css("display", "inline-block");
});
44 changes: 44 additions & 0 deletions static/styles/portico/landing_page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2719,6 +2719,50 @@ nav {

.pricing-model .pricing-container {
text-align: center;

.price-box.self-hosted-plan {
display: none;
}

.pricing-switcher {
display: flex;
width: 700px;
margin: auto;
margin-top: 40px;

.btn {
outline: none;
width: 50%;
height: 50px;
border-radius: 0 10px 10px 0;
font-weight: 700;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background-color: hsl(170, 6%, 93%);

&:first-child {
border-radius: 10px 0 0 10px;
}

&.active {
color: hsl(0, 0%, 100%);
background-color: hsl(173, 100%, 21%);
box-shadow: none;
}

.content {
display: flex;
gap: 4px;
}

.fa {
font-size: 30px;
}
}
}
}

.pricing-model .pricing-container .block {
Expand Down
175 changes: 156 additions & 19 deletions templates/zerver/pricing_model.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
<div class="pricing-model">
<div class="padded-content">
<h1>Get started today.</h1>

<div class="pricing-container">
<div class="pricing-switcher">
<button class="btn cloud-plan-btn active">
<i class="fa fa-cloud"></i>
<div class="content">
Zulip <div class="coloured-div">Cloud</div>
</div>
</button>
<button class="btn self-hosted-plan-btn">
<i class="fa fa-server"></i>
<div class="content">
<div class="coloured-div">Self host</div> Zulip
</div>
</button>
</div>
<div class="block">
<div class="plan-title responsive-title">
Zulip Cloud
</div>

<div class="price-box" tabindex="-1">
<div class="price-box cloud-plan" tabindex="-1">
<div class="text-content">
<h2>Free</h2>
<div class="description">
Expand Down Expand Up @@ -43,11 +52,41 @@ <h2>Free</h2>
</div>
</div>

<div class="price-box" tabindex="-1">
<div class="price-box self-hosted-plan" tabindex="-1">
<div class="text-content">
<h2>Standard</h2>
<h2>Free</h2>
<div class="description">
Your team's collaboration hub.
Retain full control over your data.
</div>
<hr />
<ul class="feature-list">
<li>All Zulip Cloud features included</li>
<li>Friendly community support</li>
<li><a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html">SAML, OIDC, Google, social SSO</a></li>
<li><a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html#synchronizing-data">LDAP/Active Directory sync</a></li>
<li>Advanced <a href="/help/roles-and-permissions">roles</a> and <a href="/help/stream-permissions">permissions</a></li>
<li>Easy <a href="https://zulip.readthedocs.io/en/stable/production/install.html">installation</a>
and <a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">maintenance</a></li>
</ul>
</div>
<div class="bottom">
<div class="text-content">
<div class="pricing-details multi-line">
Zulip is 100% free and open
source, with no proprietary version. <br />
</div>
<a href="https://zulip.readthedocs.io/en/stable/production/install.html" class="button green">
Install a Zulip server
</a>
</div>
</div>
</div>

<div class="price-box cloud-plan" tabindex="-1">
<div class="text-content">
<h2>Free</h2>
<div class="description">
with <b>push notifications</b>.
</div>
<hr />
<ul class="feature-list">
Expand Down Expand Up @@ -103,18 +142,110 @@ <h2>Standard</h2>
</div>
</div>
</div>
<div class="price-box self-hosted-plan" tabindex="-1">
<div class="text-content">
<h2>Free</h2>
<div class="description">
with <b>push notifications</b>.
</div>
<hr />
<ul class="feature-list">
<li>Self hosted points...</li>
<li>File storage up to 10 GB per user</li>
<li><a href="/help/message-retention-policy">Message retention policies</a></li>
<li>Brand Zulip with your logo</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">
<div class="price">6<span class="price-cents">.67</span></div>
<div class="details">
<span class="pricing-period">per user per month</span>
<br />
with annual billing discount
<br />
$8/month billed monthly
</div>
</div>
<a href="/some-link-to-regsiter" class="button green">
Register for push notificatons
</a>
</div>
</div>
</div>
</div>

<div class="block">
<div class="plan-title responsive-title">
Self host Zulip
<div class="price-box cloud-plan" tabindex="-1">
<div class="text-content">
<h2>Standard</h2>
<div class="description">
Your team's collaboration hub.
</div>
<hr />
<ul class="feature-list">
<li>All Zulip Cloud features included</li>
<li>Friendly community support</li>
<li><a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html">SAML, OIDC, Google, social SSO</a></li>
<li><a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html#synchronizing-data">LDAP/Active Directory sync</a></li>
<li>Advanced <a href="/help/roles-and-permissions">roles</a> and <a href="/help/stream-permissions">permissions</a></li>
<li>Easy <a href="https://zulip.readthedocs.io/en/stable/production/install.html">installation</a>
and <a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">maintenance</a></li>
</ul>
</div>
<div class="bottom">
<div class="text-content">
<div class="standard-price-box">
<div class="price">6<span class="price-cents">.67</span></div>
<div class="details">
<span class="pricing-period">per user per month</span>
<br />
with annual billing discount
<br />
$8/month billed monthly
</div>
</div>
{% if not realm %}
<a href="/upgrade" class="button green">
{% if free_trial_days %}
Start {{ free_trial_days }} day free trial
{% else %}
Upgrade to Standard
{% endif %}
</a>
{% elif realm.plan_type in [realm.PLAN_TYPE_STANDARD, realm.PLAN_TYPE_STANDARD_FREE] %}
<a href='/billing' class="button black-current-value" type="button">
{% if realm_on_free_trial %}
Current plan (free trial)
{% else %}
Current plan
{% endif %}
</a>
{% elif sponsorship_pending %}
<a href="/billing" class="button black-current-value" type="button">
Sponsorship pending
</a>
{% else %}
<a href="/upgrade" class="button green">
{% if free_trial_days %}
Start {{ free_trial_days }} day free trial
{% else %}
Upgrade to Standard
{% endif %}
</a>
{% endif %}
</div>
</div>
</div>

<div class="price-box" tabindex="-1">
<div class="price-box self-hosted-plan" tabindex="-1">
<div class="text-content">
<h2>Self service</h2>
<h2>Standard</h2>
<div class="description">
Retain full control over your data.
Your team's collaboration hub.
</div>
<hr />
<ul class="feature-list">
Expand All @@ -129,12 +260,18 @@ <h2>Self service</h2>
</div>
<div class="bottom">
<div class="text-content">
<div class="pricing-details multi-line">
Zulip is 100% free and open
source, with no proprietary version. <br />
<div class="standard-price-box">
<div class="price">6<span class="price-cents">.67</span></div>
<div class="details">
<span class="pricing-period">per user per month</span>
<br />
with annual billing discount
<br />
$8/month billed monthly
</div>
</div>
<a href="https://zulip.readthedocs.io/en/stable/production/install.html" class="button green">
Install a Zulip server
<a href="/some-link-to-regsiter" class="button green">
Register
</a>
</div>
</div>
Expand Down

0 comments on commit 4375a1b

Please sign in to comment.