From a6498ad6665cc3cb0953f7a29277ab0960920ab5 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 20 Nov 2023 13:12:54 -0600
Subject: [PATCH] plans_page: Simplify structures and present page header.

---
 templates/corporate/plans.html         | 15 +++++-----
 templates/corporate/pricing_model.html | 40 +++++++++++++-------------
 web/styles/portico/hello.css           | 39 +++++++++++++++++++++++++
 web/webpack.assets.json                |  8 ++++++
 4 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/templates/corporate/plans.html b/templates/corporate/plans.html
index 9b6f5b9ce6..32a0397777 100644
--- a/templates/corporate/plans.html
+++ b/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)
diff --git a/templates/corporate/pricing_model.html b/templates/corporate/pricing_model.html
index 8faabdae9e..60e6287396 100644
--- a/templates/corporate/pricing_model.html
+++ b/templates/corporate/pricing_model.html
@@ -1,24 +1,24 @@
 <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">
-                    <h2>Cloud</h2>
-                    <p>
-                        Always updated to the latest version of Zulip.
-                        Simple managed solution, with no setup or maintenance.
-                    </p>
-                </div>
+            <div class="cloud-plan-title pricing-tab">
+                <h2>Cloud</h2>
+                <p>
+                    Always updated to the latest version of Zulip.
+                    Simple managed solution, with no setup or maintenance.
+                </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,15 +104,15 @@
                 </div>
             </div>
 
-            <div class="block">
-                <div class="plan-title responsive-title">
-                    <h2>Self-hosted</h2>
-                    <p>
-                        Retain full control over your data and simplify compliance by self-hosting.
-                        Customize Zulip for all your needs.
-                    </p>
-                </div>
+            <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.
+                    Customize Zulip for all your needs.
+                </p>
+            </div>
 
+            <div class="self-hosted-plan-pricing pricing-pane">
                 <div class="price-box" tabindex="-1">
                     <div class="text-content">
                         <h2>Free</h2>
diff --git a/web/styles/portico/hello.css b/web/styles/portico/hello.css
index a8bd7b6027..c749342afb 100644
--- a/web/styles/portico/hello.css
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/web/webpack.assets.json b/web/webpack.assets.json
index 4074f079cd..370ee76283 100644
--- a/web/webpack.assets.json
+++ b/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",