hello: Add interactive block showing basic usage.

Co-Authored-By: Vlad Korobov <terpimost@gmail.com>

templates/corporate/hello.html

@@ -68,43 +68,86 @@
         </div>
         <div class="screen-2">
             <div class="screen-2__container">
-                <div class="screen-2__content">
+                <div>
-                    <h2 class="screen-2__header">What makes Zulip different</h2>
+                    <h2 class="screen-2__header">Designed for async conversations.</h2>
-                    <div class="screen-2__desc">
+                    <div class="screen-2__subtitle">Here's what it looks like in action.</div>
-                        <p>
-                            People often tell us that traditional team chat tools (Slack, Microsoft Teams, etc.) feel chaotic and stressful.
-                        </p>
-                        <p>
-                            Zulip is designed around conversations that are labeled with topics, to make communication <a href="/why-zulip/">organized and efficient</a>. It’s easy to get an overview of what conversations are happening, and to read one conversation at a time.
-                        </p>
                 </div>
-                    <a class="quote" href="/case-studies/idrift/">
+                <div class="screen-2__tabs">
-                        <div class="quote__text">
+                    <input type="radio" id="screen-2__tab1" name="screen-2__tabs-radio" class="screen-2__tab-input" checked />
-                            Zulip&rsquo;s <strong>threading model</strong> makes it so&nbsp;much easier to <strong>manage my team</strong>… As a&nbsp;leader, <strong>in&nbsp;just a&nbsp;few minutes</strong> I can get an overview over what&rsquo;s going on and see where my&nbsp;attention is&nbsp;needed.
+                    <input type="radio" id="screen-2__tab2" name="screen-2__tabs-radio" class="screen-2__tab-input" />
-                        </div>
+                    <input type="radio" id="screen-2__tab3" name="screen-2__tabs-radio" class="screen-2__tab-input" />
-                        <div class="quote__source">
+                    <input type="radio" id="screen-2__tab4" name="screen-2__tabs-radio" class="screen-2__tab-input" />
-                            Case study with <strong>Gaute Lund</strong>, <i>co-founder of iDrift AS</i>
+                    <input type="radio" id="screen-2__tab5" name="screen-2__tabs-radio" class="screen-2__tab-input" />
-                        </div>
+                    <ul>
-                    </a>
+                        <li>
-                </div>
+                            <label for="screen-2__tab1">
-                <div class="appshot-2">
+                                Get an overview of conversations with unread messages in your inbox.
+                            </label>
+                        </li>
+                        <li>
+                            <label for="screen-2__tab2">
+                                Focus on one conversation at a time, no matter how many others are happening.
+                            </label>
+                        </li>
+                        <li>
+                            <label for="screen-2__tab3">
+                                Reply to each conversation in context.
+                            </label>
+                        </li>
+                        <li>
+                            <label for="screen-2__tab4">
+                                Conversation continue seamlessly over time.
+                            </label>
+                        </li>
+                        <li>
+                            <label for="screen-2__tab5">
+                                Start a new conversation by giving it a brief topic.
+                            </label>
+                        </li>
+                    </ul>
+                    <div class="screen-2__tabs-content">
+                        <div class="screen-2__tab-image">
                             <picture>
-                        <!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
+                                <source
-                        <!-- we only have mobile images here -->
+                                  srcset="{{ static('images/landing-page/hello/generated/01-tab-cont-dark-2x.jpg') }}"
-                        <source class='appshot-2__img'
+                                  media="(prefers-color-scheme: dark)" />
-                          type="image/webp"
+                                <img alt="" src="{{ static('images/landing-page/hello/generated/01-tab-cont-2x.jpg') }}"/>
-                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }},
-                          {{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x"
-                          media="(prefers-color-scheme: dark)"/>
-                        <source class='appshot-2__img'
-                          type="image/webp"
-                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }},
-                          {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/>
-                        <img alt="" class='appshot-2__img'
-                          src="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"
-                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"/>
                             </picture>
                         </div>
+                        <div class="screen-2__tab-image">
+                            <picture>
+                                <source
+                                  srcset="{{ static('images/landing-page/hello/generated/02-tab-cont-dark-2x.jpg') }}"
+                                  media="(prefers-color-scheme: dark)" />
+                                <img alt="" src="{{ static('images/landing-page/hello/generated/02-tab-cont-2x.jpg') }}"/>
+                            </picture>
+                        </div>
+                        <div class="screen-2__tab-image">
+                            <picture>
+                                <source
+                                  srcset="{{ static('images/landing-page/hello/generated/03-tab-cont-dark-2x.jpg') }}"
+                                  media="(prefers-color-scheme: dark)" />
+                                <img alt="" src="{{ static('images/landing-page/hello/generated/03-tab-cont-2x.jpg') }}"/>
+                            </picture>
+                        </div>
+                        <div class="screen-2__tab-image">
+                            <picture>
+                                <source
+                                  srcset="{{ static('images/landing-page/hello/generated/04-tab-cont-dark-2x.jpg') }}"
+                                  media="(prefers-color-scheme: dark)" />
+                                <img alt="" src="{{ static('images/landing-page/hello/generated/04-tab-cont-2x.jpg') }}"/>
+                            </picture>
+                        </div>
+                        <div class="screen-2__tab-image">
+                            <picture>
+                                <source
+                                  srcset="{{ static('images/landing-page/hello/generated/05-tab-cont-dark-2x.jpg') }}"
+                                  media="(prefers-color-scheme: dark)" />
+                                <img alt="" src="{{ static('images/landing-page/hello/generated/05-tab-cont-2x.jpg') }}"/>
+                            </picture>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="screen-3">

tools/setup/generate_landing_page_images.py

@@ -36,7 +36,7 @@ def generate_landing_page_images() -> None:
         scaled_width = get_x_size(image.width, size)
         scaled_height = get_x_size(image.height, size)
         scaled = image.thumbnail_image(scaled_width, height=scaled_height)
-        for format in ("webp[Q=55]", "jpg[Q=75,optimize-coding=true]"):
+        for format in ("webp[Q=60]", "jpg[Q=80,optimize-coding=true]"):
             scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
 
 

web/styles/portico/hello.css

@@ -91,7 +91,7 @@ ul {
 
     .screen-1 {
         background: linear-gradient(
-            180deg,
+            0deg,
             hsl(209deg 45% 58%) 0%,
             hsl(210deg 48% 66%) 100%
         );
@@ -172,13 +172,12 @@ ul {
     .cta-buttons a:hover {
         transition-duration: 0.1s;
         background: hsl(215.9deg 98.3% 53.3%);
-        transform: scale(1.01);
     }
 
     .cta-buttons a:active {
         transition-duration: 0.1s;
         background: hsl(215.8deg 89.3% 47.8%);
-        transform: scale(0.99);
+        transform: scale(0.98);
     }
 
     .cta-desc {
@@ -210,15 +209,132 @@ ul {
     }
 
     .screen-2 {
-        height: 740px;
         background: linear-gradient(
             180deg,
-            hsl(210deg 48% 66%) 0%,
+            hsl(209deg 45% 58%) 0%,
-            hsl(236deg 48% 58%) 100%
+            hsl(236deg 47% 50%) 100%
         );
     }
 
-    .screen-2__container,
+    .screen-2__container {
+        margin: 0;
+        display: flex;
+        padding: 42px 8px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+    }
+
+    .screen-2__tabs {
+        align-items: center;
+        max-width: 986px;
+        margin: 0 auto;
+        padding: 16px 16px 16px 28px;
+        display: flex;
+        border-radius: 64px;
+        background: hsl(0deg 0% 0% / 10%);
+    }
+
+    input[type="radio"].screen-2__tab-input {
+        display: none;
+    }
+
+    .screen-2__tabs ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .screen-2__tabs ul li {
+        flex: 1;
+        display: block;
+    }
+
+    .screen-2__tabs ul li label {
+        display: block;
+        padding: 24px 16px 24px 24px;
+        text-align: left;
+        cursor: pointer;
+        color: hsl(0deg 0% 100%);
+        font-family: sans-serif;
+        font-size: 26px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 130%; /* 33.8px */
+        position: relative;
+        opacity: 0.7;
+        transition: all 0.1s;
+    }
+
+    .screen-2__tabs ul li label:hover {
+        opacity: 0.85;
+    }
+
+    .screen-2__tabs ul li label::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 24px;
+        bottom: 24px;
+        left: -2px;
+        width: 5px;
+        border-radius: 5px;
+        background: hsl(0deg 0% 100%);
+        opacity: 0.3;
+        transition: all 0.1s;
+    }
+
+    .screen-2__tabs ul li label:hover::before {
+        opacity: 0.45;
+    }
+
+    .screen-2__tabs .screen-2__tabs-content .screen-2__tab-image {
+        display: none;
+    }
+
+    .screen-2__tabs-content img {
+        max-width: 357px;
+        border-radius: 50px;
+        vertical-align: bottom;
+    }
+
+    #screen-2__tab1:checked
+        ~ .screen-2__tabs-content
+        .screen-2__tab-image:nth-of-type(1),
+    #screen-2__tab2:checked
+        ~ .screen-2__tabs-content
+        .screen-2__tab-image:nth-of-type(2),
+    #screen-2__tab3:checked
+        ~ .screen-2__tabs-content
+        .screen-2__tab-image:nth-of-type(3),
+    #screen-2__tab4:checked
+        ~ .screen-2__tabs-content
+        .screen-2__tab-image:nth-of-type(4),
+    #screen-2__tab5:checked
+        ~ .screen-2__tabs-content
+        .screen-2__tab-image:nth-of-type(5) {
+        display: block;
+    }
+
+    #screen-2__tab1:checked ~ ul li:nth-of-type(1) label,
+    #screen-2__tab2:checked ~ ul li:nth-of-type(2) label,
+    #screen-2__tab3:checked ~ ul li:nth-of-type(3) label,
+    #screen-2__tab4:checked ~ ul li:nth-of-type(4) label,
+    #screen-2__tab5:checked ~ ul li:nth-of-type(5) label {
+        opacity: 1;
+    }
+
+    #screen-2__tab1:checked ~ ul li:nth-of-type(1) label::before,
+    #screen-2__tab2:checked ~ ul li:nth-of-type(2) label::before,
+    #screen-2__tab3:checked ~ ul li:nth-of-type(3) label::before,
+    #screen-2__tab4:checked ~ ul li:nth-of-type(4) label::before,
+    #screen-2__tab5:checked ~ ul li:nth-of-type(5) label::before {
+        opacity: 0.7;
+        width: 7px;
+        left: -3px;
+    }
+
     .screen-3__container,
     .screen-4__container,
     .screen-5__container {
@@ -229,8 +345,7 @@ ul {
         gap: 56px;
     }
 
-    .screen-4__container,
+    .screen-4__container {
-    .screen-2__container {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -263,12 +378,7 @@ ul {
         margin: 32px 0 16px;
     }
 
-    .screen-2__header {
+    .screen-2__header,
-        max-width: 600px;
-        display: inline-block;
-        margin: 0;
-    }
-
     .screen-4__header,
     .screen-5__header {
         margin: 0;
@@ -325,7 +435,6 @@ ul {
         color: hsl(233deg 14% 26%);
     }
 
-    .screen-2 .quote__text,
     .screen-3 .quote__text {
         max-width: 580px;
     }
@@ -389,11 +498,6 @@ ul {
         }
     }
 
-    .screen-2 .quote__text strong {
-        color: hsl(233.8deg 65% 52.9%);
-        font-weight: 600;
-    }
-
     .quote__source {
         position: relative;
         top: 7px;
@@ -433,8 +537,8 @@ ul {
         height: 920px;
         background: linear-gradient(
             180deg,
-            hsl(236deg 48% 58%) 0%,
+            hsl(236deg 47% 50%) 0%,
-            hsl(250deg 50% 54%) 100%
+            hsl(250deg 50% 45%) 99.36%
         );
 
         .screen-3__quotes {
@@ -450,10 +554,6 @@ ul {
             margin: 0;
         }
 
-        .quote__text {
-            line-height: 130%;
-        }
-
         .quote__text strong {
             color: hsl(250deg 70% 60% / 100%);
             font-weight: 600;
@@ -473,12 +573,14 @@ ul {
         padding: 60px 16px;
     }
 
+    .screen-2__header,
     .screen-3__header,
     .screen-5__header {
         margin: 0;
         text-align: center;
     }
 
+    .screen-2__subtitle,
     .screen-3__subtitle,
     .screen-5__subtitle {
         text-align: center;
@@ -493,8 +595,8 @@ ul {
     .screen-4 {
         background: linear-gradient(
             180deg,
-            hsl(250deg 50% 54%) 0%,
+            hsl(250deg 50% 45%) 0%,
-            hsl(281deg 67% 62%) 100%
+            hsl(281deg 68% 55%) 100%
         );
     }
 
@@ -532,8 +634,8 @@ ul {
     .screen-5 {
         background: linear-gradient(
             180deg,
-            hsl(281deg 67% 62%) 0%,
+            hsl(281deg 68% 55%) 0%,
-            hsl(317deg 45% 32%) 100%
+            hsl(317deg 45% 30%) 100%
         );
         box-sizing: border-box;
         overflow: hidden;
@@ -607,12 +709,20 @@ ul {
 
         .screen-1 {
             background: linear-gradient(
-                180deg,
+                0deg,
                 hsl(209deg 55% 40%) 0%,
                 hsl(209deg 40% 55%) 100%
             );
         }
 
+        .screen-2 {
+            background: linear-gradient(
+                180deg,
+                hsl(209deg 55% 40%) 0%,
+                hsl(236deg 47% 50%) 100%
+            );
+        }
+
         .appshot-1__img {
             box-shadow: 0 0 70px hsl(209deg 100% 24%);
         }
@@ -635,42 +745,6 @@ ul {
             background: hsl(216deg 90% 82%);
         }
 
-        .screen-2 {
-            background: linear-gradient(
-                180deg,
-                hsl(209deg 40% 55%) 0%,
-                hsl(236deg 47% 50%) 100%
-            );
-        }
-
-        .appshot-2__img {
-            box-shadow: 0 0 40px hsl(233.5deg 100% 18.2% / 50%);
-        }
-
-        .screen-3 {
-            background: linear-gradient(
-                180deg,
-                hsl(236deg 47% 50%) 0%,
-                hsl(250deg 50% 45%) 99.36%
-            );
-        }
-
-        .screen-4 {
-            background: linear-gradient(
-                180deg,
-                hsl(250deg 50% 45%) 0%,
-                hsl(281deg 68% 55%) 100%
-            );
-        }
-
-        .screen-5 {
-            background: linear-gradient(
-                180deg,
-                hsl(281deg 68% 55%) 0%,
-                hsl(317deg 45% 30%) 100%
-            );
-        }
-
         .screen-5 .quote__text {
             background: hsl(255deg 52% 80%);
         }
@@ -692,22 +766,11 @@ ul {
         }
     }
 
-    @media (width <= 1311px) {
-        .screen-2 {
-            height: 768px;
-        }
-
-        .appshot-2__img {
-            width: 320px;
-        }
-    }
-
     @media (width <= 1129px) {
         .appshot-1__img {
             width: calc(var(--appshot-1-img-width) * 0.8);
         }
 
-        .screen-2__container,
         .screen-4__container {
             gap: 32px;
         }
@@ -725,7 +788,6 @@ ul {
             grid-template-rows: 100px 100px;
         }
 
-        .screen-2__container,
         .screen-3__container,
         .screen-4__container {
             gap: 16px 24px;
@@ -746,6 +808,11 @@ ul {
             font-size: 28px;
         }
 
+        .screen-2__tabs ul li label {
+            font-size: 22px;
+        }
+
+        .screen-2 .screen-2__subtitle,
         .screen-3 .screen-3__subtitle,
         .screen-5 .screen-5__subtitle {
             font-size: 24px;
@@ -796,7 +863,6 @@ ul {
             height: auto;
         }
 
-        .screen-2__container,
         .screen-3__container,
         .screen-4__container {
             flex-direction: column;
@@ -805,15 +871,11 @@ ul {
             align-items: unset;
         }
 
-        .screen-2__content,
         .screen-4__content {
             transform: scale(1);
             padding: 0;
             max-width: 600px;
             margin: auto;
-        }
-
-        .screen-4__content {
             flex-direction: column;
             gap: 16px;
             align-items: flex-start;
@@ -886,13 +948,6 @@ ul {
             margin-top: 50px;
         }
 
-        .appshot-2__img {
-            position: static;
-            width: 100%;
-            height: auto;
-            max-width: 375px;
-        }
-
         .badges {
             margin-top: 16px;
         }
@@ -902,6 +957,42 @@ ul {
         .client-logos {
             transform: scale(0.86);
         }
+
+        .screen-2__tabs ul li label {
+            padding: 16px 16px 16px 24px;
+            font-size: 20px;
+        }
+
+        .screen-2__tabs ul li label::before {
+            top: 16px;
+            bottom: 16px;
+        }
+
+        .screen-2__tabs-content img {
+            max-width: 300px;
+            border-radius: 42px;
+        }
+
+        .screen-2__tabs {
+            border-radius: 56px;
+        }
+    }
+
+    @media (width <= 700px) {
+        .screen-2__tabs ul li label {
+            font-size: 16px;
+            padding: 16px 12px 16px 14px;
+        }
+
+        .screen-2__tabs {
+            border-radius: 0;
+            background: none;
+            padding: 16px 16px 16px 10px;
+        }
+
+        .screen-2__tabs-content img {
+            max-width: 260px;
+        }
     }
 
     @media (width <= 530px) {
@@ -911,6 +1002,59 @@ ul {
             grid-template-rows: 100px 100px;
             margin: -29px -500px;
         }
+
+        .screen-2__tabs {
+            flex-direction: column-reverse;
+            padding: 0;
+            gap: 8px;
+        }
+
+        .screen-2__tabs ul {
+            padding-left: 8px;
+        }
+
+        .screen-2__tabs ul li label {
+            padding: 8px 10px;
+        }
+
+        .screen-2__tabs ul li label::before {
+            top: 8px;
+            bottom: 8px;
+        }
+
+        .screen-2__tabs-content {
+            overflow: hidden;
+            height: 393px;
+            width: 100%;
+            text-align: center;
+            border-bottom: 1px solid hsl(0deg 0% 100%);
+            border-image-slice: 1;
+            border-width: 1px;
+            border-image-source: linear-gradient(
+                to right,
+                transparent 0%,
+                hsl(0deg 0% 100%) 25%,
+                hsl(0deg 0% 100%) 75%,
+                transparent 100%
+            );
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .screen-2__tabs-content {
+                border-color: hsl(0deg 0% 0%);
+                border-image-source: linear-gradient(
+                    to right,
+                    transparent 0%,
+                    hsl(0deg 0% 0%) 25%,
+                    hsl(0deg 0% 0%) 75%,
+                    transparent 100%
+                );
+            }
+        }
+
+        .screen-2__container {
+            padding-bottom: 24px;
+        }
     }
 
     @media (width <= 400px) {
@@ -928,7 +1072,6 @@ ul {
             margin: 30px 7px;
         }
 
-        .appshot-2__img,
         .appshot-1__img {
             /* Let the image change width based on window width */
             width: 100% !important;