mirror of https://github.com/zulip/zulip.git
541 lines
29 KiB
HTML
541 lines
29 KiB
HTML
{% extends "zerver/portico.html" %}
|
||
|
||
{% block customhead %}
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<!-- Bootstrap 2.3.2-->
|
||
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
||
|
||
{{ 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>
|
||
</header>
|
||
<div class="tour">
|
||
<div id="tour-carousel" class="carousel slide carousel-fade">
|
||
<!-- Carousel items -->
|
||
<div class="carousel-inner">
|
||
<div class="item-container">
|
||
<div class="item active">
|
||
<div class="item-inner">
|
||
|
||
<button href="#tour-carousel" data-slide="next" type="button" name="button" class="start-button">Take the tour</button>
|
||
<img src="/static/images/story-tutorial/zulip-topic-blurred.png" alt="" class="start-image">
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">In Zulip, you subscribe to <b>streams.</b> Streams are like channels in Slack or IRC.</p>
|
||
<div class="zulip-slack-comparison">
|
||
<div class="comparison-zulip">
|
||
<div class="caption">Zulip</div>
|
||
<img src="/static/images/story-tutorial/zulip-streams.png" class="zulip-streams" alt="{{ _('Streams in Zulip') }}">
|
||
</div>
|
||
<div class="comparison-slack">
|
||
<div class="caption">Other team chat</div>
|
||
<img src="/static/images/story-tutorial/slack-streams.png" class="slack-streams" alt="{{ _('Streams in Slack') }}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">Each stream message also has a <b>topic.</b> Topics are unique to Zulip.</p>
|
||
<div class="zulip-slack-comparison">
|
||
<div class="comparison-zulip">
|
||
<div class="caption">Zulip</div>
|
||
<img src="/static/images/story-tutorial/zulip-streams-selected.png" class="zulip-streams-selected" alt="{{ _('Topics in Zulip') }}">
|
||
</div>
|
||
<div class="comparison-slack">
|
||
<div class="caption">Other team chat</div>
|
||
<img src="/static/images/story-tutorial/slack-streams-selected.png" class="slack-streams-selected" alt="{{ _('Streams in Slack') }}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">Topics make it easy to catch up after a day of meetings.</p>
|
||
<div class="zulip-slack-comparison">
|
||
<div class="comparison-zulip">
|
||
<div class="caption comparison-2-caption-zulip">Zulip</div>
|
||
<img src="/static/images/story-tutorial/zulip-streams-unreads-arrows.png" alt="{{ _('Stream topics in Zulip') }}" class="zulip-unreads-arrows">
|
||
</div>
|
||
<div class="comparison-slack">
|
||
<div class="caption comparison-2-caption-slack">Other team chat</div>
|
||
<img src="/static/images/story-tutorial/slack-streams-unreads.png" class="slack-stream-unreads" alt="{{ _('Streams in Slack') }}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">Let’s click on “Tuesday night catering.”</p>
|
||
<img src="/static/images/story-tutorial/zulip-topic.png" alt="{{ _('The Tuesday night catering topic in Zulip') }}" class="zulip-topic mobile-hide">
|
||
<img src="/static/images/story-tutorial/zulip-topic-crop.png" alt="{{ _('The Tuesday night catering topic in Zulip') }}" class="centered-image zulip-topic mobile-show">
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">Messages in Zulip retain their context even if they’re sent hours after the conversation started:</p>
|
||
<img src="/static/images/story-tutorial/zulip-streams-easy.png" alt="{{ _('The Tuesday night catering topic in Zulip') }}" class="zulip-easy mobile-hide">
|
||
<div class="mobile-show">
|
||
<img src="/static/images/story-tutorial/zulip-streams-easy-mobile-top.png" class="centered-image" alt="{{ _('The Tuesday night catering topic in Zulip') }}">
|
||
<p class="tour-explanation">Messages sent hours apart are linked in the same topic.</p>
|
||
<img src="/static/images/story-tutorial/zulip-streams-easy-mobile-bottom.png" class="centered-image" alt="{{ _('The Tuesday night catering topic in Zulip - compose box') }}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header">Without topics, it’s hard to catch up efficiently, and hard to participate in conversations that started while you were away.</p>
|
||
<img src="/static/images/story-tutorial/slack-overwhelming.png" alt="{{ _('The Tuesday night catering topic in Slack') }}" class="slack-overwhelming mobile-hide">
|
||
<div class="mobile-show">
|
||
<img src="/static/images/story-tutorial/slack-overwhelming-mobile.png" class="centered-image" alt="{{ _('The Tuesday night catering topic in Slack') }}">
|
||
<p class="tour-explanation">The last message about Tuesday night catering is hidden 56 messages ago. Meanwhile, you just see a mix of unrelated messages.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner">
|
||
<p class="tour-item-header tour-item-header-top-push tour-item-header-centered">Zulip Free is free for an unlimited number of users.</p>
|
||
<button href="/plans" type="button" name="button"
|
||
class="call-to-action carousel-link-button">
|
||
{{ _('See plans and pricing') }}
|
||
</button>
|
||
<div class="other-resources">
|
||
<div class="other-resources-section">
|
||
<a href="/why-zulip"><img src="/static/images/landing-page/organised.svg" alt=""></a>
|
||
<p><a href="/why-zulip">What makes Zulip unique →</a></p>
|
||
</div>
|
||
<div class="other-resources-section">
|
||
<a href="/features"><img src="/static/images/landing-page/featured.svg" alt=""></a>
|
||
<p><a href="/features">See all features →</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a class="carousel-control left visibility-control hide" href="#tour-carousel" data-slide="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
|
||
<a class="carousel-control right visibility-control" href="#tour-carousel" data-slide="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#tour-carousel" data-slide-to="0" class="active"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="1"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="2"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="3"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="4"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="5"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="6"></li>
|
||
<li data-target="#tour-carousel" data-slide-to="7"></li>
|
||
</ol>
|
||
</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="fa fa-desktop platform-icon" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
<div class="group">
|
||
<h2>Desktop</h2>
|
||
<a href="{{ apps_page_url }}mac">
|
||
<i class="fa fa-apple platform-icon" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="{{ apps_page_url }}windows">
|
||
<i class="fa fa-windows platform-icon" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="{{ apps_page_url }}linux">
|
||
<i class="fa fa-linux platform-icon" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
<div class="group">
|
||
<h2>Mobile</h2>
|
||
<a href="{{ apps_page_url }}ios">
|
||
<i class="fa fa-mobile-phone platform-icon" aria-hidden="true"></i>
|
||
</a>
|
||
<a href="{{ apps_page_url }}android">
|
||
<i class="fa fa-android platform-icon" aria-hidden="true"></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 <a href="https://github.com/zulip/zulip">100% open source software</a>,
|
||
built by a vibrant community of hundreds of developers
|
||
from all around the world. With 120,000 words of
|
||
<a href="https://zulip.readthedocs.io/">developer documentation</a>,
|
||
a high quality code base, and a
|
||
<a href="https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html">welcoming community</a>,
|
||
it’s easy to extend or tweak Zulip.
|
||
</p>
|
||
<p>
|
||
Zulip has a significantly
|
||
<a href="https://github.com/zulip/zulip/graphs/contributors">larger and more active</a>
|
||
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>
|
||
Akamai’s Zulip Enterprise deployment
|
||
connects over 2000 users around the planet.
|
||
The threading model of conversations
|
||
provides a large number of participants the
|
||
ability to engage in real, ongoing, and
|
||
substantive discussions, without the
|
||
overwhelming experience of many other chat
|
||
systems. This coordination across far-flung
|
||
teams has had a significant, positive impact
|
||
on the happiness and productivity of our
|
||
personnel, regardless of location or
|
||
seniority.
|
||
</blockquote>
|
||
<cite>Andy Ellis, Chief Security Officer, Akamai</cite>
|
||
</div>
|
||
<div class="item 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>
|
||
|
||
<div class="left visibility-control hide">
|
||
<a class="fa fa-chevron-left" aria-hidden="true" href="#quote-carousel" data-slide="prev"></a>
|
||
</div>
|
||
<div class="right visibility-control">
|
||
<a class="fa fa-chevron-right" aria-hidden="true" href="#quote-carousel" data-slide="next"></a>
|
||
</div>
|
||
</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 %}
|