zulip/templates/zerver/hello.html

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

{% block inner_content %}
<div class="row-fluid landing-page shaded-background">
  <div class="content">
    <div class="span12">
      <div class="main-headline">
        <img src="/static/images/landing-page/zulip-header.png" style="height: 75px">
        <h2>Finally, workplace chat that actually improves your productivity*</h2>
        * It's also great for sharing cat pictures.
      </div>
    </div>

    <center>
      <a href="{% url 'signup' %}" class="main-signup-button btn btn-large btn-info">Sign up now, for free!</a>

      <div class="laptop-image">
        <img class="laptop-screen" src="/static/images/landing-page/app-screenshot.png" />
      </div>
    </center>

  </div>
</div>

{##################################}
<div class="content">
  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <h3>Conversations, not messages</h3>
      <p>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.
      </p>
      <p>You wouldn&rsquo;t tolerate email without subject lines or
      threading, so why do you for chat?</p>
    </div>
    <div class="span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/threads.png" />
    </div>
  </div>

  <div class="row-fluid">
    <div class="offset2 span8">
      <hr />
    </div>
  </div>

{##################################}

  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/catching-up.png" />
    </div>

    <div class="span4">
      <h3>Easily read just the important things</h3>

      <p>Sometimes, important things get discussed when you&rsquo;re not
      around. Unfortunately, so do a lot of unimportant things.</p>

      <p><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.</p>
    </div>
  </div>

  <div class="row-fluid">
    <div class="offset2 span8">
      <hr />
    </div>
  </div>

{##################################}

  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <h3>Search that&rsquo;s better than Gmail</h3>
      <p>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.</p>
    </div>
    <div class="span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/search.png" />
    </div>
  </div>

  <div class="row-fluid">
    <div class="offset2 span8">
      <hr />
    </div>
  </div>

{##################################}

  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/api.png" />
    </div>
    <div class="span4">
      <h3>Integrations that don&rsquo;t intrude</h3>
      <p>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:</p>

      <p>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.</p>
    </div>
  </div>

  <div class="row-fluid">
    <div class="offset2 span8">
      <hr />
    </div>
  </div>

{##################################}

  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <h3>As technical as you want to be</h3>
      <p>Keyboard shortcuts? Check.<br />
        Syntax highlighting? Check.<br />
        Discuss code and technical topics with ease.</p>
    </div>
    <div class="span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/efficient.png" />
    </div>
  </div>

  <div class="row-fluid">
    <div class="offset2 span8">
      <hr />
    </div>
  </div>

{##################################}

  <div class="row-fluid landing-page">
    <div class="offset2 span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/more.png" />
    </div>
    <div class="span4">
      <h3>...and all the obvious stuff, too</h3>
      <p>Drag-and-drop file uploads, group private messages, audible
        notifications, missed-message emails, desktop apps, and
        <a href="/features">everything else you might
        want</a>. Including emoji, naturally.</p>
    </div>
  </div>

{##################################}
</div> {# end of "content" div #}

<div class="row-fluid landing-page main-headline darker-background">
  <div class="content">
    <div class="span12">
      <h2>On the platform of your choice</h2>
    </div>
  </div>
</div>
<div class="row-fluid main-headline darker-background landing-page-bottom">
  <div class="content">
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/mac-icon.png" />
      <h4>Mac</h4>
    </div>
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/windows-icon.png" />
      <h4>Windows</h4>
    </div>
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/linux-icon.png" />
      <h4>Linux</h4>
    </div>
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/android-icon.png" />
      <h4>Android</h4>
    </div>
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/iOS-icon.png" />
      <h4>iOS</h4>
    </div>
    <div class="span2">
      <img class="platform-icon" src="/static/images/landing-page/platforms/browser-icon.png" />
      <h4>Web</h4>
    </div>
  </div>
</div>

{##################################}

<div class="row-fluid landing-page shaded-background">
  <div class="content">
    <div class="span12">
      <center>
        <a href="{% url 'signup' %}" class="signup-button btn btn-large btn-info"><h2>Sign up now</h2></a>
      </center>
    </div>
  </div>
</div>

{% endblock %}