/apps/: Redesign apps page.

Tweaked by tabbott to update the URLs to point to the Electron desktop app.

static/js/portico/landing-page.js

@@ -1,6 +1,11 @@
 import fuzzysearch from 'fuzzysearch';
 import blueslip from './../blueslip';
 
+const ELECTRON_APP_VERSION = "1.2.0-beta";
+const ELECTRON_APP_URL_LINUX = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-${ELECTRON_APP_VERSION}-x86_64.AppImage`;
+const ELECTRON_APP_URL_MAC = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-${ELECTRON_APP_VERSION}.dmg`;
+const ELECTRON_APP_URL_WINDOWS = `https://github.com/zulip/zulip-electron/releases/download/v${ELECTRON_APP_VERSION}/Zulip-Web-Setup-${ELECTRON_APP_VERSION}.exe`;
+
 // this will either smooth scroll to an anchor where the `name`
 // is the same as the `scroll-to` reference, or to a px height
 // (as specified like `scroll-to='0px'`).
@@ -271,13 +276,97 @@ var hello_events = function () {
     $(".footer").addClass("hello");
 };
 
+var apps_events = function () {
+    var version;
+    var info = {
+        windows: {
+            image: "/static/images/landing-page/microsoft.png",
+            alt: "Windows",
+            description: "Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
+            link: ELECTRON_APP_URL_WINDOWS,
+        },
+        mac: {
+            image: "/static/images/landing-page/macbook.png",
+            alt: "MacOS",
+            description: "Zulip on MacOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
+            link: ELECTRON_APP_URL_MAC,
+        },
+        android: {
+            image: "/static/images/app-screenshots/zulip-android.png",
+            alt: "Android",
+            description: "Zulip's native Android app makes it easy to keep up while on the go.",
+            link: "https://play.google.com/store/apps/details?id=com.zulip.android",
+        },
+        ios: {
+            image: "/static/images/app-screenshots/zulip-iphone-rough.png",
+            alt: "iOS",
+            description: "Zulip's native iOS app makes it easy to keep up while on the go.",
+            link: "https://itunes.apple.com/us/app/zulip/id1203036395",
+        },
+        linux: {
+            image: "/static/images/landing-page/ubuntu.png",
+            alt: "Linux",
+            description: "Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
+            link: ELECTRON_APP_URL_LINUX,
+        },
+    };
+
+    var nav_version = {
+        Win: "windows",
+        MacIntel: "mac",
+        Linux: "linux",
+        iP: "ios",
+    };
+
+    // if the hash is not a valid section, then identify it.
+    version = window.location.hash.replace(/^#/, "");
+
+    if (info[version]) {
+        window.location.hash = version;
+    } else {
+        for (var x in nav_version) {
+            if (navigator.platform.indexOf(x) !== -1) {
+                window.location.hash = nav_version[x];
+                version = nav_version[x];
+                break;
+            }
+        }
+
+        if (!version || !info[version]) {
+            version = "mac";
+        }
+
+        window.location.hash = version;
+    }
+
+    var update_version = function (version) {
+        var version_info = info[version];
+        $(".info .platform").text(version_info.alt);
+        $(".info .description").text(version_info.description);
+        $(".info .link").attr("href", version_info.link);
+        $(".image img").attr("src", version_info.image);
+    };
+
+
+    window.onhashchange = function () {
+        update_version(window.location.hash.substr(1));
+    };
+
+    update_version(version);
+
+    $(".apps > .icon").click(function () {
+        $("body").animate({ scrollTop: 0 }, 200);
+    });
+};
+
 var events = function () {
     ScrollTo();
 
     $("a").click(function (e) {
         // if the pathname is different than what we are already on, run the
         // custom transition function.
-        if (window.location.pathname !== this.pathname && !this.hasAttribute("download")) {
+        if (window.location.pathname !== this.pathname && !this.hasAttribute("download") &&
+            !/no-action/.test(this.className)) {
             e.preventDefault();
             $(".portico-landing").removeClass("show");
             setTimeout(function () {
@@ -306,57 +395,9 @@ var events = function () {
         $("nav ul").addClass("show");
     });
 
-    (function () {
-        var $last = $(".details-box").eq(0).addClass("show");
-        var $li = $("ul.sidebar li");
-        var version;
-
-        var nav_version = {
-            Win: "windows",
-            MacIntel: "mac",
-            Linux: "linux",
-            iP: "ios",
-        };
-
-        for (var x in nav_version) {
-            if (navigator.platform.indexOf(x) !== -1) {
-                $('li[data-name="' + nav_version[x] + '"]').click();
-                version = nav_version[x];
-                break;
-            }
-        }
-
-        var switch_to_tab = function (elem) {
-            var target = $(elem).data("name");
-            var $el = $(".details-box[data-name='" + target + "']");
-
-            // $li is a semi-global variable from the closure above.
-            $li.removeClass("active");
-            $(elem).addClass("active");
-
-            $last.removeClass("show");
-            $el.addClass("show");
-
-            $last = $el;
-        };
-
-        // this is for the sidebar on the /apps/ page to trigger the correct info box.
-        $li.click(function () {
-            window.location.hash = $(this).data("name");
-        });
-
     if (detectPath() === "apps") {
-            var hash = function () {
+        apps_events();
-                return window.location.hash.replace(/^#/, "");
-            };
-
-            switch_to_tab($("ul.sidebar li[data-name='" + (hash() || version || "windows") + "']"));
-
-            window.onhashchange = function () {
-                switch_to_tab($("ul.sidebar li[data-name='" + hash() + "']"));
-            };
     }
-    }());
 
     if (detectPath() === "integrations") {
         integration_events();

static/styles/landing-page.css

@@ -1300,308 +1300,146 @@ nav ul li.active::after {
 }
 
 /* -- apps page -- */
+.portico-landing.apps {
+    padding-top: 0px;
+}
 .portico-landing.apps .main,
 .portico-landing.features-app .main {
     background-color: #fff;
 }
 
-.portico-landing.apps .main {
+.portico-landing.apps .hero {
-    max-width: 1600px;
-}
-
-.portico-landing.apps .main .padded-content.headline {
-    padding-bottom: 0px;
-}
-
-.portico-landing.apps .main .headline h1 {
-    font-size: 2.5em;
-}
-
-.portico-landing.apps .main .headline h3 {
-    font-weight: 400;
-    font-size: 1.1em;
-    color: hsl(0, 0%, 66%);
-}
-
-.portico-landing.apps .main ul.sidebar {
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 -4px 0 0;
-    list-style: none;
-    font-weight: 500;
-    color: hsl(0, 0%, 66%);
-}
-
-.portico-landing.apps .main ul.sidebar li {
     position: relative;
-    padding: 20px 15px 20px 0px;
-    margin: 2px 0px;
-    width: 130px;
-    text-align: right;
-    background-color: #fff;
-    cursor: pointer;
 
-    transition: all 0.3s ease;
+    padding: 100px 50px 50px 50px;
+    background: linear-gradient(35deg, #0d7373, #6ae4c8);
+    height: 600px;
+
+    color: #fff;
+
+    overflow: hidden;
 }
 
-.portico-landing.apps .main ul.sidebar li:first-of-type {
+.portico-landing.apps .hero h1 {
+    font-size: 3em;
+    margin-bottom: 0px;
+}
+
+.portico-landing.apps .hero h1 {
     margin-top: 0px;
 }
 
-.portico-landing.apps .main ul.sidebar li.active {
+.portico-landing.apps .hero #waves {
-    color: hsl(0, 0%, 27%);
-    font-weight: 600;
-
-    transform: translateX(-10px);
-}
-
-/* active arrow that slides in when a tab is .active on */
-.portico-landing.apps .main ul.sidebar li::after {
-    content: ">";
-    position: absolute;
-    right: 0px;
-    top: 21px;
-    opacity: 0;
-    transform: translateX(3px);
-}
-
-.portico-landing.apps .main ul.sidebar li.active::after {
-    transform: translateX(0px);
-    opacity: 1;
-}
-
-.portico-landing.apps .main .details-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    height: 500px;
-    width: calc(100% - 155px);
-    background-color: hsl(0, 0%, 53%);
-}
-
-.portico-landing.apps .main .details-container .details-box {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0;
-    pointer-events: none;
 
-    transition: all 0.3s ease;
+    background-image: url(/static/images/waves.svg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.portico-landing.apps .hero .info,
+.portico-landing.apps .hero .image {
+    position: relative;
+
+    width: 50%;
+    float: left;
+    height: 100%;
+
     z-index: 1;
 }
 
-.portico-landing.apps .main .details-container .details-box.show {
+.portico-landing.apps .hero .info .cta {
-    opacity: 1;
+    text-shadow: 0px 0px 60px rgba(0,0,0,0.3);
-    pointer-events: auto;
-    z-index: 2;
 }
 
-.portico-landing.apps .main .details-container .details-box[data-name="android"] {
+.portico-landing.apps .hero .image img[src="/static/images/landing-page/tar.gz.svg"] {
-    color: hsl(156, 56%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="ios"] {
-    color: hsl(203, 48%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="windows"] {
-    color: hsl(0, 0%, 93%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="mac"] {
-    color: hsl(350, 92%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="linux"] {
-    color: hsl(16, 93%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="snipe"] {
-    color: hsl(350, 92%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
-}
-
-.portico-landing.apps .main .details-container .details-box[data-name="plan9"] {
-    color: hsl(350, 92%, 95%);
-
-    background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
-    background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="android"].active {
-    color: hsl(175, 74%, 35%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="ios"].active {
-    color: hsl(196, 57%, 58%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="windows"].active {
-    color: hsl(216, 70%, 39%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="mac"].active {
-    color: hsl(340, 55%, 51%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="linux"].active {
-    color: hsl(6, 88%, 43%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="snipe"].active {
-    color: hsl(246, 82%, 30%);
-}
-
-.portico-landing.apps .main ul.sidebar li[data-name="plan9"].active {
-    color: hsl(356, 82%, 30%);
-}
-
-.portico-landing.apps .main .details-container .platform.description {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 300px;
-    padding: 50px;
-}
-
-.portico-landing.apps .main .details-container .platform.image {
-    float: right;
-    width: calc(49.5% - 40px);
-}
-
-.portico-landing.apps .main .details-container {
-    overflow: hidden;
-}
-
-.portico-landing.apps .details-box[data-name="mac"] .platform.image {
-    text-align: center;
-}
-
-.portico-landing.apps .main .details-box .platform.image {
-    opacity: 0;
-    transform: scale(0.2);
-    transition: transform 0.3s ease;
-}
-
-.portico-landing.apps .main .details-box.show .platform.image {
-    opacity: 1;
-    transform: scale(1);
-}
-
-.portico-landing.apps .details-box[data-name="mac"] .platform.image img {
-    width: 450px;
-}
-
-.portico-landing.apps .details-box[data-name="windows"] .platform.image img {
-    width: 450px;
-}
-
-.portico-landing.apps .details-box[data-name="ios"] .platform.image img {
-    width: 175px;
-}
-
-.portico-landing.apps .details-box[data-name="android"] .platform.image img {
-    width: 240px;
-}
-
-.portico-landing.apps .details-box button.grey-transparent {
-    margin-top: 30px;
-}
-
-.portico-landing.apps .details-box[data-name="mac"] button.grey-transparent:active {
-    color: hsl(356, 58%, 47%);
-}
-
-.portico-landing.apps .details-box[data-name="ios"] button.grey-transparent:active {
-    color: hsl(205, 33%, 56%);
-}
-
-.portico-landing.apps .details-box[data-name="windows"] button.grey-transparent:active {
-    color: hsl(216, 50%, 35%);
-}
-
-.portico-landing.apps .main .details-box > .image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding: 35px 0px;
-    height: calc(100% - 70px);
-    background-color: hsla(0, 0%, 100%, 0.1);
-}
-
-.portico-landing.apps .main .details-container h1 {
-    margin: 20px 0px;
-}
-
-.portico-landing.apps .main .details-container .platform {
-    display: inline-block;
-    vertical-align: top;
-    padding: 20px;
-    text-align: center;
     width: 50%;
 }
 
-.portico-landing.apps .main .details-container .platform h2 {
+.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-iphone-rough.png"] {
-    margin-top: 0px;
+    height: 85%;
 }
 
-.portico-landing.apps .main .details-container pre {
+.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-android.png"] {
-    display: inline-block;
+    height: 100%;
-    max-width: 400px;
-    border: none;
-    padding: 15px;
-    box-shadow: 0px 0px 30px hsla(0, 0%, 100%, 0.3);
-    text-align: left;
-    background-color: hsl(16, 93%, 95%);
-    color: hsl(7, 32%, 57%);
 }
 
-.portico-landing.apps .main .details-container .instructions {
+.portico-landing.apps .hero .info .flex {
-    margin: 30px auto 0 auto;
+    height: 100%;
-    text-align: left;
-    font-size: 1.1rem;
 }
 
-.portico-landing.apps .main .details-container .instructions a {
+.portico-landing.apps .hero .info button {
+    padding: 10px 20px;
+    margin-top: 50px;
+
+    font-size: 1em;
+    font-weight: 600;
+
+    border: 2px solid #fff;
     color: #fff;
+    background-color: transparent;
 }
 
-.portico-landing.apps .main .details-container .instructions a:not(.no-style):before {
+.portico-landing.apps .other-apps {
-    background-color: hsla(0, 0%, 100%, 0.5);
-    width: 50%;
-    left: 25%;
-}
-
-.portico-landing.apps .main .details-container .instructions a:not(.no-style):hover:before {
     background-color: #fff;
-    width: 100%;
+    padding: 50px 50px 120px 50px;
-    left: 0%;
+
+    text-align: center;
 }
 
-.portico-landing.apps .main .details-container .instructions img {
+.portico-landing.apps .other-apps h2 {
+    width: 600px;
+    margin: 0 auto;
+
+    text-align: center;
+}
+
+.portico-landing.apps .other-apps .apps {
+    display: inline-block;
+    margin: 50px 0px 0px 0px;
+}
+
+.portico-landing.apps .other-apps .apps .icon {
+    vertical-align: top;
+
+    width: 50px;
+    padding: 20px 30px;
+    border-radius: 70px;
+
+    color: #ccc;
+
+    font-size: 3em;
+    text-align: center;
+
+    transition: all 0.2s ease;
+}
+
+.portico-landing.apps .other-apps .apps .icon:hover {
+    color: #777;
+    background: linear-gradient(-45deg, #d4d4d4, #fafafa);
+}
+
+.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
+    font-size: 4em;
+    padding: 11.5px 27px;
+}
+
+.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone::after {
+    margin-top: 1px;
+}
+
+.portico-landing.apps .other-apps .apps .icon::after {
+    content: attr(data-label);
     display: block;
-    margin: -32px auto 0px auto;
+
-    width: 195px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    font-family: "Humbug", sans-serif;
+    margin-top: 10px;
 }
 
 /* -- /for/open-source/ -- */
@@ -1657,6 +1495,7 @@ nav ul li.active::after {
     color: #333;
 }
 
+/* -- hello page styling -- */
 .portico-landing.hello .apps .screen {
     display: inline-block;
     margin: 0px 10px;
@@ -2433,6 +2272,55 @@ nav ul li.active::after {
         padding-top: 120px;
     }
 
+    .portico-landing.apps .hero {
+        height: 350px;
+    }
+
+    .portico-landing.apps .hero h1 {
+        font-size: 1.9em;
+        font-weight: 400;
+    }
+
+    .portico-landing.apps .other-apps {
+        padding: 50px 5px 120px 5px;
+    }
+
+    .portico-landing.apps .other-apps h2 {
+        font-size: 1.5em;
+        width: 100%;
+    }
+
+    .portico-landing.apps .other-apps .apps .icon {
+        padding: 0px 14px;
+        width: 30px;
+        padding-top: 8px;
+        padding-bottom: 0px;
+        font-size: 2.3em;
+    }
+
+    .portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
+        padding: 7px 10px 5px 10px;
+        width: 35px;
+        font-size: 2.5em;
+    }
+
+    .portico-landing.apps .other-apps .apps .icon.fa-windows {
+        font-size: 2em;
+        padding: 10px 13px 2px 13px !important;
+    }
+
+    .portico-landing.apps .other-apps .apps .icon::after {
+        content: "";
+    }
+
+    .portico-landing.apps .hero .image {
+        display: none;
+    }
+
+    .portico-landing.apps .hero .info {
+        width: 100%;
+    }
+
     .portico-landing.integrations .main,
     .main {
         width: calc(100% - 50px);

templates/zerver/apps.html

@@ -2,6 +2,11 @@
 
 {% block customhead %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style media="screen">
+    .app.portico-page {
+        padding-bottom: 0px;
+    }
+</style>
 {% stylesheet 'portico' %}
 {% stylesheet 'landing-page' %}
 {{ render_bundle('landing-page') }}
@@ -13,191 +18,36 @@
 {% include 'zerver/landing_nav.html' %}
 {% include 'zerver/gradients.html' %}
 
-<div class="portico-landing apps">
+<div class="portico-landing apps no-slide">
-    <div class="main">
+    <div class="hero">
-        <div class="padded-content headline">
+        <div id="waves"></div>
-            <h1 class="center">{% trans %}Do we have apps? Appsolutely.{% endtrans %}</h1>
+        <div class="info">
-            <h3 class="center">{% trans %}Ok, I take it back, I'm sorry, please don't go.{% endtrans %}</h3>
+            <div class="flex">
-        </div>
+                <div class="cta">
-
+                    <h1>Zulip for <span class="platform"></span></h1>
-        <div class="padded-content">
+                    <p><span class="description"></span></p>
-            <ul class="sidebar">
+                    <a class="link no-style no-action" href="">
-                <li data-name="android">Android</li>
+                        <button type="button" name="button">Download Zulip for <span class="platform"></span></button>
-                <li data-name="ios">iOS</li>
-                <li data-name="mac">MacOS</li>
-                <li data-name="windows">Windows</li>
-                <li data-name="linux">{{ _('Linux desktop') }}</li>
-                <li data-name="snipe">{{ _('Terminal client') }}</li>
-                <li data-name="plan9">Plan 9</li>
-            </ul>
-            <div class="details-container">
-                <div class="details-box" data-name="ios">
-                    <div class="image">
-                        <div class="platform description">
-                            <div class="wrapper">
-                                <h2>iOS</h2>
-                                <div class="instructions">
-                                    <p class="center">
-                                        {% trans %}Zulip's brand-new
-                                        iOS app makes it easy to
-                                        browse your messages with
-                                        lightning-fast scrolling!
-                                        {% endtrans %}
-                                    </p>
-                                </div>
-                                <a href="https://itunes.apple.com/us/app/zulip/id1203036395" target="_blank">
-                                    <button class="button grey-transparent" type="button" name="button">{{ _('Get from App Store') }}</button>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="platform image">
-                          <img src="/static/images/app-screenshots/zulip-iphone-rough.png" alt="{{ _('Zulip iOS') }}" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="details-box" data-name="android">
-                    <div class="image">
-                        <div class="platform description">
-                            <div class="wrapper">
-                                <h2>Android</h2>
-                                <div class="instructions">
-                                    <p class="center">
-                                      {% trans %}Read and reply to
-                                      your messages while on the go
-                                      with Zulip's free, native app
-                                      for Android.
-                                      {% endtrans %}
-                                    </p>
-                                </div>
-                                <a href="https://play.google.com/store/apps/details?id=com.zulip.android" target="_blank">
-                                    <button class="button grey-transparent" type="button" name="button">{{ _('Get from Play Store') }}</button>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="platform image">
-                            <img src="/static/images/app-screenshots/zulip-android.png" alt="{{ _('Zulip Android') }}" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="details-box" data-name="mac">
-                    <div class="image">
-                        <div class="platform description">
-                            <div class="wrapper">
-                                <h2>MacOS</h2>
-                                <div class="instructions">
-                                    <p class="center">
-                                        {% trans %}You love your Mac. And you love Zulip. So what could be better than a Zulip app for Mac? Enjoy notifications for messages and PMs in your dock whether you're in Sublime, emacs, or Photoshop.{% endtrans %}
-                                    </p>
-                                </div>
-                                <a href="https://zulip.org/dist/apps/mac/Zulip-latest.dmg" download>
-                                    <button class="button grey-transparent" type="button" name="button">{{ _('Download now') }}</button>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="platform image">
-                            <img src="/static/images/landing-page/macbook.png" alt="{{ _('MacOS') }}" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="details-box" data-name="windows">
-                    <div class="image">
-                        <div class="platform description">
-                            <div class="wrapper">
-                                <h2>{{ _('Windows 7+') }}</h2>
-                                <div class="instructions">
-                                    <p class="center">
-                                        {% trans %}We proudly present Zulip for Windows: the second-best app for Windows on the market today (after Solitaire, obviously).{% endtrans %}
-                                    </p>
-                                </div>
-                                <a href="https://github.com/zulip/zulip-electron/releases/download/v1.0.0-beta/Zulip-Web-Setup-1.0.0-beta.exe" download>
-                                    <button class="button grey-transparent" type="button" name="button">{{ _('Download now') }}</button>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="platform image">
-                            <img src="/static/images/landing-page/microsoft.png" alt="{{ _('Windows') }}" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="details-box" data-name="linux">
-                    <div class="image">
-                        <div class="platform">
-                            <h2>{{ _('Ubuntu &amp; Debian') }}</h2>
-                            <div class="instructions">
-                                <p>
-                                    {% trans %}We have an APT repository for Zulip, so adding and installing the app is easy.{% endtrans %}
-                                </p>
-                            </div>
-<pre>
-wget https://zulip.org/dist/keys/user-apt.asc
-cat user-apt.asc | sudo apt-key add -
-sudo apt-add-repository http://apt.zulip.com/user/
-sudo apt-get update
-
-sudo apt-get install zulip-desktop
-</pre>
-                        </div>
-                        <div class="platform">
-                            <h2>{{ _('Other platforms') }}</h2>
-                            <div class="instructions">
-                                <p>{% trans %}We provide a <a href="https://zulip.org/dist/apps/linux/zulip-desktop_latest.bin.tar.gz" download>binary tarball</a> of the Zulip application, built for 64-bit systems.{% endtrans %}
-                                </p>
-                                <a href="https://zulip.org/dist/apps/linux/zulip-desktop_latest.bin.tar.gz" download>
-                                    <img src="/static/images/landing-page/tar.gz.svg" alt="{{ _('Download') }}" />
                     </a>
                 </div>
             </div>
         </div>
+        <div class="image">
+            <div class="flex">
+                <img src="" />
+            </div>
+        </div>
     </div>
 
-                <div class="details-box" data-name="plan9">
+    <div class="other-apps">
-                    <div class="image">
+        <h2>Apps for every platform.</h2>
-                        <div class="platform description">
+
-                            <div class="wrapper">
+        <div class="apps">
-                                <h2>Plan 9</h2>
+            <a class="icon fa fa-apple no-style" href="/apps/#mac" data-label="MacOS"></a>
-                                <div class="instructions">
+            <a class="icon fa fa-windows no-style" href="/apps/#windows" data-label="Windows"></a>
-                                    <p class="center">
+            <a class="icon fa fa-linux no-style" href="/apps/#linux" data-label="Linux"></a>
-                                      {% trans %}First, connect to our
+            <a class="icon fa fa-android no-style" href="/apps/#android" data-label="Android"></a>
-                                      hosted 9P filesystem
+            <a class="icon fa fa-mobile-phone no-style" href="/apps/#ios" data-label="iOS"></a>
-                                      at <tt>plan9.zulip.org</tt> and
-                                      then... no, we're - totally
-                                      kidding. There definitely isn't
-                                      a version of Zulip - for Plan
-                                      9.{% endtrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="details-box" data-name="snipe">
-                    <div class="image">
-                        <div class="platform description">
-                            <div class="wrapper">
-                                <h2>Snipe</h2>
-                                <div class="instructions">
-                                    <p class="center">
-                                      {% trans %}Snipe, a modern
-                                      multi-protocol terminal-based
-                                      chat client, is a great way to
-                                      use Zulip from a terminal.
-                                      {% endtrans %}
-                                    </p>
-                                    <a href="https://github.com/kcr/snipe">
-                                        <button class="button
-                                        grey-transparent" type="button"
-                                        name="button">{{ _('Download from GitHub') }}</button>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>