portico: Add quote to Why Zulip page.

Adds a quote from Grahame Grieve to the Why Zulip page.

With tweaks by tabbott to make the linter pass.

static/styles/landing-page.scss

@@ -1308,7 +1308,7 @@ nav ul li.active::after {
 
 .portico-landing.hello .testimonials {
     color: #fff;
-    background-color: hsl(169, 35%, 35%);
+    background-color: #23584d;
 }
 
 .portico-landing.hello .testimonials .text-header .text-content {
@@ -1366,18 +1366,13 @@ nav ul li.active::after {
     margin-right: -3px;
 }
 
-.portico-landing.hello .testimonials blockquote::after {
-    content: "”";
-    margin-left: -3px;
-}
-
 .portico-landing.hello .testimonials blockquote + cite {
     display: block;
     margin-top: 5px;
     margin-bottom: 30px;
 
-    color: white;
+    color: #ffffff;
-    opacity: 0.5;
+    opacity: 0.7;
     font-weight: 400;
 }
 
@@ -1930,7 +1925,59 @@ nav ul li.active::after {
     z-index: 1;
 }
 
-#why-zulip-padded-content {
+.portico-landing.why-page .testimonials {
+    background: #23584d;
+    color: #fff;
+    margin-bottom: 40px;
+}
+
+.portico-landing.why-page .testimonials .quote-container {
+    width: 98%;
+    margin: 30px auto 20px auto;
+    padding-left: 2%;
+
+    font-size: 1.2rem;
+}
+
+.portico-landing.why-page .testimonials .carousel-quotes {
+    width: 60%;
+    margin: auto;
+}
+
+.portico-landing.why-page .testimonials .carousel-inner {
+    width: 100%;
+    left: -2%;
+}
+
+.portico-landing.why-page .testimonials blockquote::before {
+    content: "“";
+    margin-left: -10px;
+    margin-right: -3px;
+}
+
+.portico-landing.why-page .testimonials blockquote + cite {
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 30px;
+
+    color: white;
+    opacity: 0.7;
+    font-weight: 400;
+    line-height: 140%;
+}
+
+.portico-landing.why-page .testimonials blockquote {
+    padding: 0px;
+
+    font-weight: 400;
+    line-height: 1.6;
+    text-align: left;
+    border: none;
+
+    opacity: 0.8;
+}
+
+.why-zulip-padded-content {
     padding-top: 0px;
 }
 
@@ -3079,6 +3126,15 @@ nav ul li.active::after {
         padding: 50px 20px;
     }
 
+    .portico-landing.why-page .testimonials .carousel-quotes {
+	     width: 90%;
+	 }
+
+	 .portico-landing.why-page .testimonials .quote-container {
+	     padding-left: 4%;
+	     font-size: 1em;
+	 }
+
     #integration-instruction-block .integration-lozenge {
         display: none !important;
     }

templates/zerver/why-zulip.html

@@ -15,13 +15,42 @@
 
 <div class="portico-landing why-page">
     <div class="hero small-hero" id="why-zulip-hero"></div>
-    <div class="main">"
+    <div class="main">
-        <div class="padded-content" id="why-zulip-padded-content">
+        <div class="padded-content why-zulip-padded-content">
             <div class="inner-content">
                 {{ render_markdown_path('zerver/why-zulip.md') }}
             </div>
         </div>
     </div>
+    <div class="testimonials">
+        <div class="padded-content">
+            <div class="carousel slide" data-ride="carousel">
+                <div class="carousel-quotes">
+                    <div class="carousel-inner">
+                        <div class="item active quote-container">
+                            <blockquote>
+                                Zulip helped the FHIR community grow from a tiny group of dreamers to 500 active users sending 6000 messages per month, all driving the creation of better healthcare standards. Zulip&rsquo;s topic-based threading helps us manage simultaneous discussions with clarity, ensuring the right people can pay attention to the right messages. This makes our large-group discussion far more manageable than what we&rsquo;ve experienced with Skype and Slack.&rdquo;
+                            </blockquote>
+                            <cite>Grahame Grieve, founder, FHIR open health care standard</cite>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="main">
+        <div class="padded-content why-zulip-padded-content">
+            <div class="inner-content">
+                <h2>Read more about how we’ve made Zulip work for you</h2>
+                <ul>
+                    <li><a href="/for/companies">Zulip for companies</a></li>
+                    <li><a href="/for/open-source">Zulip for open source projects</a></li>
+                    <li><a href="for/working-groups-and-communities">Zulip for working groups and part-time communities</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
 </div>
 
 {% endblock %}

templates/zerver/why-zulip.md

@@ -69,9 +69,3 @@ conversations don’t require coordinating busy schedules, or hour long
 commitments from folks that just need a 5 minute update. And unlike email, a
 lively discussion of 300 Zulip messages is just as easy to digest and
 respond to as an in-person conversation.
-
-## Read more about how we’ve made Zulip work for you
-
-* [Zulip for companies](/for/companies)
-* [Zulip for open source projects](/for/open-source)
-* [Zulip for working groups and part-time communities](/for/working-groups-and-communities)