zulip/templates/zerver/hello.html

{% extends "zerver/portico.html" %}
{% load i18n %}
{% block hello_page_container %} hello-main{% endblock %}
{% block hello_page_footer %} hello-footer{% endblock %}
{% block os_announcement %}
  {% if zulip_com %}
  <div class="os-headline-container">
    <img src="/static/images/logo/zballoon.png" class="os-illustration" alt="Zulip balloon" />
    <div class="main-headline-text">
      <span class="tagline os-tagline">
         {% trans 'Zulip has been released as open source software!' %}
      </span>
      <span class="footnote os-footnote">
         {% blocktrans %}Read the <a href="https://blogs.dropbox.com/tech/2015/09/open-sourcing-zulip-a-dropbox-hack-week-project" target="_blank">announcement</a> or go to <a href="https://www.zulip.org" target="_blank">the Zulip open source project website</a>.{% endblocktrans %}
      </span>
    </div>
  </div>
  {% endif %}
{% endblock %}

{% block portico_content %}
<div class="app main-headline">
  <div class="app-main main-headline-container">
    <img src="/static/images/logo/textlogo@2x.png" class="main-headline-logo" alt="Zulip logo" />
    <div class="main-headline-text">
      <span class="tagline">
        {% trans 'Finally, workplace chat that actually improves your productivity.*' %}
      </span>
      <span class="footnote">{% trans "* It's also great for sharing cat pictures" %}.</span>
        {% if not_voyager %}
        {% elif only_sso %}
          <a href="{% url 'login-sso' %}" class="main-signup-button btn btn-large btn-primary">{% trans 'Log in now!' %}</a>
        {% else %}
          <a href="{% url 'register' %}" class="main-signup-button btn btn-large btn-primary">{% trans 'Register now!' %}</a>
        {% endif %}
    </div>
    <img src="/static/images/landing-page/laptop-screenshot.png" class="main-image" alt="Screenshot of Zulip" />
  </div>
</div>

<div class="app feature-line dark">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      {% trans 'Conversations, not messages' %}.
    </span>
    <span class="description">
      <p>{% blocktrans %}Every conversation in Zulip has a <em>topic</em>, so it&rsquo;s
      easy to keep conversations straight. Are your coworkers discussing
      a software bug and the content of your website at the same time?
      No problem.{% endblocktrans %}
    </p>
    <p>{% trans "You wouldn’t tolerate email without subject lines or threading, so why do you for chat?" %}</p>
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image" src="/static/images/landing-page/threads.png" alt="message threading in Zulip" />
  </div>
  </div>
</div>

<div class="app feature-line light">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      {% trans 'Easily read just the important things' %}.
    </span>
    <span class="description">
      <p>{% blocktrans %}Sometimes, important things get discussed when you&rsquo;re not
      around. Unfortunately, so do a lot of unimportant things.{% endblocktrans %}</p>

      <p>{% blocktrans %}<em>Narrowing</em> by stream or topic lets you focus on that important
      customer project without having to read about how Jim&rsquo;s guitar lessons
      are going.{% endblocktrans %}</p>
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image shadow" src="/static/images/landing-page/important-things.png" alt="Zulip streams bar" />
  </div>
  </div>
</div>

<div class="app feature-line dark">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      {% trans "Search that's better than Gmail's" %}.
    </span>
    <span class="description">
      {%  blocktrans %}An impressive amount of knowledge lives in your chat system.  Zulip&rsquo;s
      powerful and fast search will delight you with how quickly you can find
      exactly what you&rsquo;re looking for.{% endblocktrans %}
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image shadow" src="/static/images/landing-page/better-search.png" alt="example of Zulip search" />
  </div>
  </div>
</div>

<div class="app feature-line light">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      {% trans "Integrations that don't intrude" %}.
    </span>
    <span class="description">
      <p>{% blocktrans %}Zulip has <a href="/integrations">many integrations</a> and
      a powerful <a href="/api">API</a> to match. But here&rsquo;s
      where it gets interesting: thanks to how Zulip categorizes messages,
      automated messages never overwhelm you. As with any topic in Zulip,
      they&rsquo;re easy to focus on, skim, defer to later, or ignore&mdash;as appropriate.{% endblocktrans %}</p>
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image shadow" src="/static/images/landing-page/integrations.png" alt="Zulip's Jenkins integration" />
  </div>
  </div>
</div>

<div class="app feature-line dark">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      {% trans 'As technical as you want to be' %}.
    </span>
    <span class="description">
      <p>{% trans 'Keyboard shortcuts? Check.' %}<br />
        {% trans 'Syntax highlighting? Check.' %}<br />
        {% trans 'Discuss code and technical topics with ease.' %}</p>
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image shadow" src="/static/images/landing-page/technical.png" alt="code highlighting in Zulip" />
  </div>
  </div>
</div>

<div class="app feature-line light">
  <div class="app-main feature-line-container">
   <div class="feature-text">
    <span class="tagline">
      &hellip; {% trans 'and all the obvious stuff, too.' %}
    </span>
    <span class="description">
      <p>{% blocktrans %}Drag-and-drop file uploads, image pasting, group private messages,
         audible notifications, missed-message emails, desktop apps, and
        <a href="/features">everything else you might want</a>. Including emoji, naturally.{% endblocktrans %}</p>
    </span>
  </div>
  <div class="feature-illustration">
    <img class="feature-image shadow" src="/static/images/landing-page/features.png" alt="unicode and emoji in Zulip" />
  </div>
  </div>
</div>

<div class="app feature-line dark">
  <div class="app-main feature-line-container">
   <div class="platform-text">
    <span class="tagline">
      {% trans 'On the platform of your choice.' %}
    </span>
   </div>
   <div class="platform-icons">
      <div class="platform">
         <i class="icon-vector-apple platform-icon"></i>
         <h4>Mac</h4>
      </div>
      <div class="platform">
         <i class="icon-vector-windows platform-icon"></i>
         <h4>Windows</h4>
      </div>
      <div class="platform">
         <i class="icon-vector-linux platform-icon"></i>
         <h4>Linux</h4>
      </div>
      <div class="platform">
         <i class="icon-vector-android platform-icon"></i>
         <h4>Android</h4>
      </div>
      <div class="platform">
         <i class="icon-vector-mobile-phone platform-icon"></i>
         <h4>iOS</h4>
      </div>
      <div class="platform">
         <i class="icon-vector-desktop platform-icon"></i>
         <h4>Web</h4>
      </div>
    </div>
  </div>
</div>

<div class="app feature-line light">
  <div class="app-main feature-line-container centered-content">
    {% if not_voyager %}
    {% elif only_sso %}
      <a href="{% url 'login-sso' %}" class="bottom-signup-button btn btn-large btn-primary">{% trans 'Log in now' %}</a>
    {% else %}
      <a href="{% url 'register' %}" class="bottom-signup-button btn btn-large btn-primary">{% trans 'Register now' %}</a>
    {% endif %}
  </div>
</div>
{% endblock %}