mirror of https://github.com/zulip/zulip.git
649 lines
29 KiB
HTML
649 lines
29 KiB
HTML
{% extends "zerver/portico.html" %}
|
||
|
||
{% block customhead %}
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
{{ 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 class="line-break-desktop">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">{{ _('Sign up 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>
|
||
<p>
|
||
<a href="/why-zulip">Learn more about what makes Zulip unique →</a>
|
||
</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 90 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 120,000 words of
|
||
developer documentation, a high quality code base,
|
||
and a welcoming community, it’s easy to extend or
|
||
tweak Zulip.
|
||
</p>
|
||
<p>
|
||
<a href="https://github.com/zulip/zulip/graphs/contributors">Zulip</a>
|
||
has a significantly larger and more
|
||
active development community than other modern
|
||
open source group chat solutions like
|
||
<a href="https://github.com/mattermost/mattermost-server/graphs/contributors">Mattermost</a>,
|
||
<a href="https://github.com/RocketChat/Rocket.Chat/graphs/contributors">Rocket.Chat</a>,
|
||
and <a href="https://github.com/matrix-org/synapse/graphs/contributors">matrix.org</a>.
|
||
</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 90 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>
|
||
</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') }}">
|
||
<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') }}">
|
||
<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') }}">
|
||
<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') }}">
|
||
<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') }}">
|
||
<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') }}">
|
||
<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') }}">
|
||
<h3 class="integration-name">Pagerduty</h3>
|
||
<p class="integration-description">Connect to your monitoring systems</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="content">
|
||
<p>Or build your own integrations with <a href="/api/integration-guide">Zulip's powerful API</a>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonials">
|
||
<div class="padded-content">
|
||
<div id="quote-carousel" class="carousel slide" data-ride="carousel">
|
||
<div class="carousel-quotes">
|
||
<div class="carousel-inner">
|
||
<div class="item active 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>
|
||
<div class="item quote-container">
|
||
<blockquote>
|
||
Zulip’s unique threading saves me well
|
||
over an hour a day in working with our
|
||
distributed team of engineers and PMs
|
||
across 7+ time zones. We tried Slack,
|
||
Mattermost, and other team chat
|
||
products that claim to support
|
||
threading, and nothing handles
|
||
synchronous and asynchronous
|
||
communication so intuitively.
|
||
</blockquote>
|
||
<cite>Jacinda Shelly, CTO, Doctor on Demand</cite>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a class="fa fa-chevron-left" href="#quote-carousel" data-slide="prev"></a>
|
||
<a class="fa fa-chevron-right" href="#quote-carousel" data-slide="next"></a>
|
||
</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">{{ _('Sign up now!') }}</button>
|
||
</a>
|
||
{% endif %}
|
||
<div class="zulip-octopus"></div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|