{% extends "zerver/portico.html" %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% stylesheet 'portico' %}
{% stylesheet 'landing-page' %}
{{ render_bundle('landing-page') }}
<style>
.portico-page {
    padding-bottom: 0px;
}
</style>

{% endblock %}

{% block portico_content %}

{% include 'zerver/landing_nav.html' %}

<div class="gradients">
    <div class="gradient sunburst"></div>
    <div class="gradient dark-blue"></div>
    <div class="gradient green"></div>
    <div class="gradient blue"></div>
    <div class="gradient white-fade"></div>
</div>

<div class="portico-landing hello show">
    <div class="hero">
        <div class="content">
            <header>
                <h1>The world's most productive group chat</h1>
                <p>
                    Zulip combines the immediacy of Slack with an email
                    threading model.  <br />With Zulip, you can catch
                    up on important conversations while ignoring
                    irrelevant ones.
                </p>
                {% if register_link_disabled %}
                {% elif only_sso %}
                <a href="{{ url('login-sso') }}">
                   <button href="" class="download-button" type="button"
                           name="button">{{ _('Log in now!') }}</button>
                </a>
                {% else %}
                <a href="{{ url('register') }}">
                   <button href="" class="download-button" type="button"
                           name="button">{{ _('Register now!') }}</button>
                </a>
                {% endif %}
                <!-- we want this to be il-block so we'll put a <br> above so it's on
                     the next line.
                <a id="see_all_apps" class="arrow">See all apps</a>
                -->
            </header>
        </div>
    </div>

    <div class="screen hero-screen">
        <div class="main-page">
            <div class="left-sidebar col-4">
                <div class="action-block">
                    <div class="line med"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                </div>
                <div class="action-block">
                    <div class="line small red"></div>
                    <div class="sub-block">
                        <div class="line small"></div>
                        <div class="line"></div>
                        <div class="line med"></div>
                        <div class="line med"></div>
                    </div>
                    <div class="line blue"></div>
                    <div class="sub-block">
                        <div class="line small"></div>
                        <div class="line"></div>
                        <div class="line small"></div>
                    </div>
                    <div class="line green"></div>
                    <div class="sub-block">
                        <div class="line"></div>
                        <div class="line med"></div>
                        <div class="line small"></div>
                        <div class="line med"></div>
                        <div class="line"></div>
                    </div>
                    <div class="line med orange"></div>
                    <div class="sub-block">
                        <div class="line med"></div>
                    </div>
                </div>
            </div>
            <div class="center-page col-2">
                <div class="message-feed">
                    <div class="stream">
                        <div class="line micro red"></div>
                        <div class="line nano"></div>

                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line"></div>
                                <div class="line"></div>
                                <div class="line med"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line med"></div>
                                <div class="line small"></div>
                            </div>
                        </div>
                    </div>
                    <div class="stream">
                        <div class="line micro green"></div>
                        <div class="line nano"></div>

                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line"></div>
                                <div class="line small"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line"></div>
                                <div class="line small"></div>
                                <div class="line med"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line med"></div>
                            </div>
                        </div>
                    </div>
                    <div class="stream">
                        <div class="line micro blue"></div>
                        <div class="line nano"></div>

                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line med"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line med"></div>
                                <div class="line small"></div>
                                <div class="line small"></div>
                            </div>
                        </div>
                    </div>
                    <div class="stream">
                        <div class="line micro green"></div>
                        <div class="line nano"></div>

                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line"></div>
                                <div class="line small"></div>
                                <div class="line med"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line"></div>
                                <div class="line small"></div>
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <div class="avatar"></div>
                                <div class="line top-line"></div>
                            </div>
                            <div class="content">
                                <div class="line med"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-sidebar col-4">
                <div class="action-block">
                    <div class="line small darker"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                    <div class="line med"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                    <div class="line med"></div>
                    <div class="line"></div>
                </div>

                <div class="action-block">
                    <div class="line small darker"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                    <div class="line"></div>
                    <div class="line med"></div>
                    <div class="line med"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="features">
        <header>

        </header>
        <div class="content">
            <div class="col-2">
            <img src="/static/images/landing-page/organised.svg" alt=""/>
                <div class="il-block">
                    <h2>Organized</h2>
                    <p>
                        Tired of important discussions being disrupted
                        by automated messages, lunch plans and random
                        links?  With Zulip, each conversation has its
                        own thread.  Looking for a conversation from
                        two months ago?  Zulip's fast and powerful
                        search experience will delight you.
                    </p>
                    <p>
                        Share content with drag-and-drop file uploads,
                        link previews, and inline images.
                    </p>
                </div>
            </div>
            <div class="col-2">
            <img src="/static/images/landing-page/featured.svg" alt=""/>
                <div class="il-block">
                    <h2>Fully Featured</h2>
                    <p>
                        Zulip has everything you want in group
                        chat. Apps for the iPhone, Android and
                        desktop.  More than 60 integrations (GitHub,
                        Jira, Stripe, Zendesk, etc.). Keyboard
                        shortcuts. Emoji reactions.  Translated into a
                        dozen languages.
                    </p>
                    <p>
                        Need anything else?  <a href="/features">We
                        probably have it.</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="apps">
        <div class="triangle"></div>
        <div class="left-side">
            <div class="content">
                <header>
                    <h1>Apps for every platform</h1>
                </header>
                <p>
                    Zulip has modern apps for every major platform,
                    powered by Electron and React Native.
                </p>
                <br />
            </div>

            <div class="platform-icons">
                <div class="group">
                    <h2>Web</h2>
                    <a href="{{ apps_page_url }}">
                        <i class="icon-vector-desktop platform-icon"></i>
                    </a>
                </div>
                <div class="group">
                    <h2>Desktop</h2>
                    <a href="{{ apps_page_url }}mac">
                        <i class="icon-vector-apple platform-icon"></i>
                    </a>
                    <a href="{{ apps_page_url }}windows">
                        <i class="icon-vector-windows platform-icon"></i>
                    </a>
                    <a href="{{ apps_page_url }}linux">
                        <i class="icon-vector-linux platform-icon"></i>
                    </a>
                </div>
                <div class="group">
                    <h2>Mobile</h2>
                    <a href="{{ apps_page_url }}ios">
                        <i class="icon-vector-mobile-phone platform-icon"></i>
                    </a>
                    <a href="{{ apps_page_url }}android">
                        <i class="icon-vector-android platform-icon"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="right-side">
            <div class="screen ios">
                <div class="main-page">
                    <div class="navbar"></div>
                    <div class="center-page">
                        <div class="message-feed">
                            <div class="stream">
                                <div class="line micro red"></div>
                                <div class="line nano"></div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line"></div>
                                        <div class="line"></div>
                                        <div class="line med"></div>
                                    </div>
                                </div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line med"></div>
                                        <div class="line"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="stream">
                                <div class="line micro blue"></div>
                                <div class="line nano"></div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line med"></div>
                                        <div class="line med"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line"></div>
                                        <div class="line"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="screen android">
                <div class="main-page">
                    <div class="navbar"></div>
                    <div class="center-page">
                        <div class="message-feed">
                            <div class="stream">
                                <div class="line micro red"></div>
                                <div class="line nano"></div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line"></div>
                                        <div class="line"></div>
                                        <div class="line med"></div>
                                    </div>
                                </div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line med"></div>
                                        <div class="line"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="stream">
                                <div class="line micro blue"></div>
                                <div class="line nano"></div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line med"></div>
                                        <div class="line med"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>

                                <div class="message">
                                    <div class="top">
                                        <div class="avatar"></div>
                                        <div class="line top-line"></div>
                                    </div>
                                    <div class="content">
                                        <div class="line"></div>
                                        <div class="line"></div>
                                        <div class="line small"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="open-source">
        <div class="flex">
            <img src="/static/images/landing-page/opensource.svg" alt=""/>
            <div class="il-block">
                <h2>Open Source</h2>
                <p>
                    Zulip is 100% open source software, built by a
                    vibrant community of hundreds of developers from
                    all around the world.  With 100,000 words of
                    developer documentation, a high quality code base,
                    and a welcoming community, it’s easy to extend or
                    tweak Zulip.
                </p>
                <p>
                    Zulip has a significantly larger and more
                    active development community than other modern
                    open source group chat solutions like
                    Mattermost, Rocket.Chat, and matrix.org.
                </p>
            </div>
        </div>
    </div>

    <div class="integrations">
        <div class="content">
            <header>
                <h1>Seamless integrations with everything you use</h1>
            </header>
            <p>
                Zulip has more than 60 native integrations. Several hundred more
                are available through
                <a href="/integrations/doc/hubot">Hubot</a>,
                <a href="/integrations/doc/zapier">Zapier</a>,
                and
                <a href="/integrations/doc/ifttt">IFTTT</a>.
            </p>
            <p><a href="/integrations">See all available integrations.</a></p>
            <br />
        </div>

        <div class="integration-icons">
            <a href="/integrations/doc/travis">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/travis.svg" alt="{{ _('Travis logo') }}"></img>
                    <h3 class="integration-name">Travis CI</h3>
                    <p class="integration-description">See build results immediately</p>
                </div>
            </a>
            <a href="/integrations/doc/github">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/github.svg" alt="{{ _('Github logo') }}"></img>
                    <h3 class="integration-name">Github</h3>
                    <p class="integration-description">Track issues and pull requests</p>
                </div>
            </a>
            <a href="/integrations/doc/heroku">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/heroku.svg" alt="{{ _('Heroku logo') }}"></img>
                    <h3 class="integration-name">Heroku</h3>
                    <p class="integration-description">Keep up with deployments</p>
                </div>
            </a>
            <a href="/integrations/doc/zendesk">
                <div class="group">
                    <img class="integration-logo" src="/static/images/integrations/logos/zendesk.svg" alt="{{ _('Zendesk logo') }}"></img>
                    <h3 class="integration-name">Zendesk</h3>
                    <p class="integration-description">Receive support tickets and updates</p>
                </div>
            </a>
            <a href="/integrations/doc/jira">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/jira.svg" alt="{{ _('JIRA logo') }}"></img>
                    <h3 class="integration-name">JIRA</h3>
                    <p class="integration-description">Monitor project bugs and issues</p>
                </div>
            </a>
            <a href="/integrations/doc/sentry">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/sentry.svg" alt="{{ _('Sentry logo') }}"></img>
                    <h3 class="integration-name">Sentry</h3>
                    <p class="integration-description">See real-time error tracking</p>
                </div>
            </a>
            <a href="/integrations/doc/pagerduty" class="hide-1">
                <div class="group">
                   <img class="integration-logo" src="/static/images/integrations/logos/pagerduty.svg" alt="{{ _('Pagerduty logo') }}"></img>
                    <h3 class="integration-name">Pagerduty</h3>
                    <p class="integration-description">Connect to your monitoring systems</p>
                </div>
            </a>
        </div>
    </div>

    <div class="testimonials">
        <div class="padded-content">
            <div class="quote-container">
                <blockquote>
                    Choosing Zulip over Slack as our group chat is one
                    of the best decisions we've ever made. Zulip makes
                    it easy for our community of 1000 Recursers around
                    the world to stay involved, even years after their
                    batches finish. No other tool has a user
                    experience that scales to a community of our
                    size.
                </blockquote>
                <cite>Nick Bergson-Shilcock, founder and CEO, Recurse Center</cite>
            </div>

            <hr />

            <div class="company-container">
                <header>
                    <h2 class="float left">Leading organizations use Zulip:</h2>
                    <div class="float clear"></div>
                </header>
                <div class="company-box">
                    <div class="company akamai"></div>
                    <div class="company doctorondemand"></div>
                    <div class="company levelup"></div>
                    <div class="company recurse"></div>
                    <div class="company panjiva"></div>
                    <div class="company layershift"></div>
                    <div class="company solano"></div>
                    <div class="company veelo"></div>
                    <div class="company cmt"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="padded-content call-to-action-bottom">
        <h1>Experience Zulip today!</h1>
        {% if register_link_disabled %}
        {% elif only_sso %}
        <a href="{{ url('login-sso') }}">
           <button href="" type="button"
                   name="button">{{ _('Log in now!') }}</button>
        </a>
        {% else %}
        <a href="{{ url('register') }}">
          <button href="" type="button"
                  name="button">{{ _('Register now!') }}</button>
        </a>
        {% endif %}
        <div class="zulip-octopus"></div>
    </div>
</div>
{% endblock %}