From cb82ea2ed8d4ad3dcb66cb17cb9622e519fab9c9 Mon Sep 17 00:00:00 2001
From: Alya Abbott <alya@zulip.com>
Date: Thu, 22 Jul 2021 21:13:28 -0700
Subject: [PATCH] portico: Add general info at the top of /for/x pages.

---
 static/styles/portico/landing_page.css | 13 +++++++++++++
 templates/zerver/for-education.html    | 11 +++++++++--
 templates/zerver/for-events.html       |  6 ++++++
 templates/zerver/for-research.html     |  7 +++++++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/static/styles/portico/landing_page.css b/static/styles/portico/landing_page.css
index eb3568850a..8002004ad7 100644
--- a/static/styles/portico/landing_page.css
+++ b/static/styles/portico/landing_page.css
@@ -4189,7 +4189,9 @@ nav {
         text-align: center;
         font-weight: bolder;
         opacity: 0.9;
+    }
 
+    .hero {
         a {
             color: hsl(170, 76%, 64%);
         }
@@ -4339,3 +4341,14 @@ nav {
         opacity: 0.8;
     }
 }
+
+.feature-intro {
+    max-width: 800px;
+    margin: 50px auto 0;
+    padding: 0 4vw 0;
+
+    h1 {
+        font-size: 36px;
+        font-weight: 600;
+    }
+}
diff --git a/templates/zerver/for-education.html b/templates/zerver/for-education.html
index bf1eb233a2..14dd178e1f 100644
--- a/templates/zerver/for-education.html
+++ b/templates/zerver/for-education.html
@@ -22,11 +22,11 @@
         <div class="bg-dimmer"></div>
         <div class="content">
             <h1 class="center">Teach a course with Zulip.</h1>
-            <p>Online, in-person, and anything in between</p>
+            <p>Online, in-person, and anything in between. <br/><a href="#feature-pricing">Free</a> for most classes!</p>
         </div>
         <div class="hero-text">
             Learn how <a href="/case-studies/tum/">Technical University of Munich</a> and
-            <br /><a href="/case-studies/ucsd/">University of California San Diego</a> are using Zulip!
+            <br /><a href="/case-studies/ucsd/">University of California San Diego</a> are using Zulip.
         </div>
         <div class="hero-buttons center">
             <a href="/new/" class="button">
@@ -41,6 +41,13 @@
         </div>
     </div>
 
+    <div class="feature-intro">
+        <h1 class="center"> Make Zulip the communication hub for your class. </h1>
+        <p>
+            <a href="/hello">Zulip</a> is the only <a href="/features">modern team chat app</a> that is <a href="/why-zulip">ideal</a> for both live and asynchronous conversations. Post lecture notes and announcements, answer students’ questions, and coordinate with teaching staff all in one place.
+        </p>
+    </div>
+
     <div class="feature-container">
         <div class="feature-half">
             <div class="feature-text">
diff --git a/templates/zerver/for-events.html b/templates/zerver/for-events.html
index 021f7a7bcb..a00c430b7b 100644
--- a/templates/zerver/for-events.html
+++ b/templates/zerver/for-events.html
@@ -40,6 +40,12 @@
         </div>
     </div>
 
+    <div class="feature-intro">
+        <h1 class="center"> Make Zulip the communication hub for your event. </h1>
+        <p>
+            <a href="/hello">Zulip</a> is the only <a href="/features">modern team chat app</a> that is <a href="/why-zulip">ideal</a> for both live and asynchronous conversations. Post presentations and announcements, host Q&A sessions, and coordinate among organizers.
+        </p>
+    </div>
 
     <div class="feature-container">
         <div class="feature-half">
diff --git a/templates/zerver/for-research.html b/templates/zerver/for-research.html
index 8c9fb71bd6..bb9bf53462 100644
--- a/templates/zerver/for-research.html
+++ b/templates/zerver/for-research.html
@@ -40,6 +40,13 @@
         </div>
     </div>
 
+    <div class="feature-intro">
+        <h1 class="center"> Make Zulip the communication hub for your research community. </h1>
+        <p>
+            <a href="/hello">Zulip</a> is the only <a href="/features">modern team chat app</a> that is <a href="/why-zulip">ideal</a> for both live and asynchronous conversations. Coordinate with collaborators, post questions and ideas, and learn from others in your field.
+        </p>
+    </div>
+
     <div class="feature-container">
         <div class="feature-half">
             <div class="feature-text">