portico: Add use case buttons to /why-zulip and /hello.

static/styles/portico/landing_page.css

@@ -702,6 +702,10 @@ nav {
 .portico-landing.hello {
     background-color: transparent;
     color: hsl(219, 23%, 33%);
+
+    .hero-buttons {
+        margin-top: 40px;
+    }
 }
 
 .portico-landing.hello .hero {
@@ -2112,6 +2116,10 @@ nav {
 .portico-landing.hello .call-to-action-bottom {
     position: relative;
     padding: 50px 100px 0;
+
+    @media (width <= 768px) {
+        padding: 50px 10px 0;
+    }
     margin-top: 0;
 }
 
@@ -2332,6 +2340,10 @@ nav {
 .portico-landing.why-page .hero {
     padding: 200px 50px 100px;
 
+    @media (width < 900px) {
+        padding: 200px 0 100px;
+    }
+
     &.empty-hero {
         padding: 50px 50px 70px;
     }
@@ -4532,3 +4544,65 @@ nav {
 .mirror-image {
     transform: scaleX(-1);
 }
+
+.why-zulip {
+    .discounts-section {
+        margin: 30px;
+
+        h1 {
+            font-weight: 700 !important;
+            font-size: 26px !important;
+        }
+    }
+}
+
+.portico-landing.why-page .hero.why-zulip {
+    padding-bottom: 120px;
+
+    .bg-dimmer {
+        background-color: hsla(224, 52%, 12%, 0.85);
+    }
+
+    .padded-content {
+        padding-top: 0;
+        padding-bottom: 10px;
+    }
+
+    @media (width <= 768px) {
+        .register-buttons {
+            display: none;
+        }
+    }
+
+    .discounts-section .register-buttons a {
+        color: hsl(169, 71%, 64%);
+
+        &:hover {
+            color: hsl(0, 0%, 100%);
+        }
+    }
+}
+
+.why-zulip,
+.hello {
+    .register-buttons {
+        max-width: 800px;
+        margin: auto;
+        margin-top: 30px;
+
+        a {
+            min-height: 40px;
+            padding: 7px 0;
+        }
+    }
+
+    @media (width <= 768px) {
+        .register-buttons {
+            a {
+                margin: 10px calc(5vw - 10px);
+                width: clamp(130px, 40vw, 200px);
+                font-size: 13px;
+            }
+        }
+    }
+}

templates/zerver/hello.html

@@ -531,20 +531,23 @@
     </div>
 
     <div class="padded-content call-to-action-bottom">
-        <h1>Experience Zulip today!</h1>
-        {% if root_domain_landing_page %}
-        <a href="{{ url('plans') }}" class="download-button styled-button button green">
-            {{ _('See plans and pricing') }}
-        </a>
-        {% endif %}
+        <h1>Learn how Zulip can help your organization!</h1>
+        <div class="register-buttons">
+            <a href="/for/companies" class="register-now button">Companies</a>
+            <a href="/for/open-source" class="register-now button">Open source</a>
+            <a href="/for/education" class="register-now button">Education</a>
+            <a href="/for/events" class="register-now button">Events and Conferences</a>
+            <a href="/for/research" class="register-now button">Research</a>
+            <a href="/for/communities" class="register-now button">Communities</a>
+        </div>
         {% if register_link_disabled %}
         {% elif only_sso %}
         <a href="{{ url('login-sso') }}" class="styled-button button green">
             {{ _('Log in now') }}
         </a>
         {% else %}
-        <a href="{{ url('register') }}" class="styled-button button green">
-            {{ _('Sign up now') }}
+        <a href="/plans" class="styled-button button green">
+            {{ _('See plans and pricing') }}
         </a>
         {% endif %}
         <div class="zulip-octopus"></div>

templates/zerver/why-zulip.html

@@ -21,10 +21,10 @@
         <div class="bg-dimmer"></div>
         <div class="content">
             <h1 class="center">Why Zulip?</h1>
-            <p></p>
         </div>
     </div>
 
+
     <div class="main">
         <div class="padded-content">
             <div class="inner-content markdown">
@@ -32,6 +32,22 @@
             </div>
         </div>
     </div>
+
+    <div class="why-zulip">
+        <div class="discounts-section">
+            <header>
+                <h2>Learn how Zulip can help your organization!</h2>
+            </header>
+            <div class="register-buttons">
+                <a href="/for/companies" class="register-now button">Companies</a>
+                <a href="/for/open-source" class="register-now button">Open source</a>
+                <a href="/for/education" class="register-now button">Education</a>
+                <a href="/for/events" class="register-now button">Events and Conferences</a>
+                <a href="/for/research" class="register-now button">Research</a>
+                <a href="/for/communities" class="register-now button">Communities</a>
+            </div>
+        </div>
+    </div>
 </div>
 
 {% endblock %}

templates/zerver/why-zulip.md

@@ -154,11 +154,3 @@ transform how your organization communicates:
 > experienced with Skype and Slack.
 >
 > —Grahame Grieve, founder, FHIR health care standards body
-
-## Further reading
-
-- [Zulip features](/features)
-- [Plans and pricing](/plans)
-- [Zulip for companies](/for/companies)
-- [Zulip for open source organizations](/for/open-source)
-- [Zulip for communities](/for/communities)