plans_page: Simplify structures and present page header.

templates/corporate/plans.html

@@ -1,5 +1,5 @@
-{% extends "zerver/portico.html" %}
-{% set entrypoint = "landing-page" %}
+{% extends "zerver/base.html" %}
+{% set entrypoint = "plans-page" %}
 
 {% set PAGE_TITLE = "Plans and pricing | Zulip" %}
 
@@ -9,12 +9,11 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 {% endblock %}
 
-{% block portico_content %}
+{% block content %}
 
-{% include 'zerver/gradients.html' %}
 {% include 'zerver/landing_nav.html' %}
 
-<div class="portico-landing plans">
+<div class="portico-pricing plans">
     <div class="main">
         {% include "corporate/pricing_model.html" %}
         <div class="plans_top_faq plans_faq_questions">
@@ -51,13 +50,13 @@
 
     <div class="discounts-section">
         <header>
-            <h1>Discounts?</h1>
+            <h2>Discounts?</h2>
             <p>
                 We sponsor hundreds of worthy organizations
             </p>
         </header>
         <div class="discounted-community-plan">
-            <h2>Community plan</h2>
+            <h3>Community plan</h3>
             <ul>
                 <li>
                     <a href="/for/open-source/">Open source projects</a>
@@ -71,7 +70,7 @@
             </ul>
         </div>
         <div class="discounted-business-plan">
-            <h2>Business plan with 85% discount</h2>
+            <h3>Business plan with 85% discount</h3>
             <ul>
                 <li>
                     <a href="/for/education/">Education</a> (online or in-person)

templates/corporate/pricing_model.html

@@ -1,17 +1,16 @@
 <div class="pricing-model">
     <div class="padded-content">
-        <h1>Pricing</h1>
-        <p>
+        <h1>Zulip plans and pricing</h1>
+        <div class="h1-subheader">
             You can <a href="https://zulip.com/help/zulip-cloud-or-self-hosting">move
                 freely</a> between <a href="/plans/">Zulip Cloud</a>
             hosting and your own servers with our high quality <a
                 href="/help/export-your-organization">export</a> and
             <a href="https://zulip.readthedocs.io/en/stable/production/export-and-import.html">import
             </a> tools.
-        </p>
+        </div>
         <div class="pricing-container">
-            <div class="block">
-                <div class="plan-title responsive-title">
+            <div class="cloud-plan-title pricing-tab">
                 <h2>Cloud</h2>
                 <p>
                     Always updated to the latest version of Zulip.
@@ -19,6 +18,7 @@
                 </p>
             </div>
 
+            <div class="cloud-plan-pricing pricing-pane">
                 <div class="price-box" tabindex="-1">
                     <div class="text-content">
                         <h2>Free</h2>
@@ -28,7 +28,7 @@
                             <li><a href="/features/">Full-featured</a> team chat service</li>
                             <li><a href="/integrations/">Hundreds of integrations</a></li>
                             <li>Advanced <a href="/help/roles-and-permissions">roles</a> and <a href="/help/stream-permissions">permissions</a></li>
-                            <li><a href="/help/roles-and-permissions">Guest accounts</a></li>
+                            <li><a href="/help/guest-users">Guest</a> accounts</li>
                         </ul>
                     </div>
                     <div class="bottom">
@@ -104,8 +104,7 @@
                 </div>
             </div>
 
-            <div class="block">
-                <div class="plan-title responsive-title">
+            <div class="self-hosted-plan-title pricing-tab">
                 <h2>Self-hosted</h2>
                 <p>
                     Retain full control over your data and simplify compliance by self-hosting.
@@ -113,6 +112,7 @@
                 </p>
             </div>
 
+            <div class="self-hosted-plan-pricing pricing-pane">
                 <div class="price-box" tabindex="-1">
                     <div class="text-content">
                         <h2>Free</h2>

web/styles/portico/hello.css

@@ -1060,3 +1060,42 @@ ul {
         }
     }
 }
+
+.portico-pricing {
+    .padded-content {
+        padding: 102px 0;
+    }
+
+    h1 {
+        font-weight: 500;
+        font-size: 58px;
+        line-height: 110%;
+        text-align: center;
+        margin: 10px;
+    }
+
+    .h1-subheader {
+        font-family: var(--font-ops);
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 145%;
+        text-align: center;
+        font-feature-settings:
+            "pnum" on,
+            "lnum" on;
+        color: hsl(0deg 0% 100%);
+        max-width: 560px;
+        margin: 0 auto;
+
+        & a {
+            text-decoration: none;
+            border-bottom: 1px solid hsl(0deg 0% 100% / 50%);
+            transition: border 0.4s ease-out;
+
+            &:hover {
+                border-bottom: 2px solid hsl(0deg 0% 100%);
+                transition: none;
+            }
+        }
+    }
+}

web/webpack.assets.json

@@ -63,6 +63,14 @@
         "./styles/portico/navbar.css",
         "./styles/portico/footer.css"
     ],
+    "plans-page": [
+        "./src/bundles/hello",
+        "./src/portico/landing-page",
+        "./src/portico/header",
+        "./styles/portico/hello.css",
+        "./styles/portico/navbar.css",
+        "./styles/portico/footer.css"
+    ],
     "integrations": [
         "./src/bundles/portico",
         "./src/portico/integrations",