zulip/templates/zephyr/hello.html

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

{% block inner_content %}
<div class="row-fluid landing-page shaded-background">
  <div class="content">
    <div class="span12">
      <div class="main-headline">
        <h1>We&rsquo;ve built the group conversation tool of your dreams.</h1>
        <h4>Lightning-fast search, drag-and-drop file sharing, and more&mdash;all from your computer or mobile device.</h4>
      </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>Threaded conversations</h3>
      <p>You wouldn't tolerate email without subject lines or threading,
        so why do you in chat? Easily focus on the messages you care
        about, and ignore the ones you don't.</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/search.png" />
    </div>

    <div class="span4">
      <h3>Lightning-fast, full-history search</h3>
      <p>Find that important conversation from two weeks ago in seconds,
        using our powerful search feature.</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>Efficient, just like you</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/one-on-one.png" />
    </div>

    <div class="span4">
      <h3>One-on-one or group messaging</h3>
      <p>Have private conversations with one or as many people as you
        need.</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>Drag-and-drop file uploads</h3>
      <p>Whether you&rsquo;re sending that important document or a hilarious
        cat picture, we&rsquo;ve got you covered. Drag, drop, share.</p>
    </div>
    <div class="span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/file-uploads.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>API and integrations</h3>
      <p><a href="/integrations">Integrations</a> for Jenkins, Github,
        Jira, Nagios, Pivotal Tracker, Capistrano, and many more right out
        of the box. And a powerful <a href="/api">API</a> to match.</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>...and much more</h3>
      <p>Keyboard shortcuts, @-notifications, audible alerts,
        missed-message emails, and basically everything else you might
        want. Including emoji, obviously.</p>
    </div>
    <div class="span4">
      <img class="spotlighted-feature" src="/static/images/landing-page/more.png" />
    </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">Sign up now</a>
      </center>
    </div>
  </div>
</div>

{% endblock %}