mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
0ff2051982
This adds a tour of Zulip to the bottom of the homepage. In order to get the carousel nave, we use Bootstrap 2 from a CDN on this page; this isn't ideal in the medium term, but upgrading Bootstrap across the project is too much work for now.
782 lines
39 KiB
HTML
782 lines
39 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>
|
|
|
|
<!-- Bootstrap 2.3.2--->
|
|
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
|
<div class="tour">
|
|
<div class="tour-inner">
|
|
<div id="myCarousel" 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="#myCarousel" 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 mobile-hide">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 mobile-hide">
|
|
<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="centered-image 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="centered-image 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 centered-image 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>
|
|
{% if register_link_disabled %}
|
|
{% elif only_sso %}
|
|
<a href="{{ url('login-sso') }}">
|
|
<button href="" type="button"
|
|
name="button" class="call-to-action">{{ _('Log in now') }}</button>
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ url('register') }}">
|
|
<button href="" type="button"
|
|
name="button" class="call-to-action">{{ _('Try it free') }}</button>
|
|
</a>
|
|
{% endif %}
|
|
<div class="other-resources">
|
|
<h3>Other resources:</h3>
|
|
<ul>
|
|
<li><a href="/plans/">Plans and pricing</a></li>
|
|
<li><a href="/features">Features</a></li>
|
|
<li><a href="/why-zulip">Why Zulip</a> (10 min read)</li>
|
|
<li>First time users’ guide: <a href="https://zulipchat.com/help/getting-your-organization-started-with-zulip">admin</a>, <a href="https://zulipchat.com/help/getting-started-with-zulip">user</a></li>
|
|
<li><a href="https://zulip.readthedocs.io/en/stable/production/install.html">Installing Zulip on-premise</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
|
|
<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
|
<li data-target="#myCarousel" data-slide-to="3"></li>
|
|
<li data-target="#myCarousel" data-slide-to="4"></li>
|
|
<li data-target="#myCarousel" data-slide-to="5"></li>
|
|
<li data-target="#myCarousel" data-slide-to="6"></li>
|
|
<li data-target="#myCarousel" data-slide-to="7"></li>
|
|
</ol>
|
|
</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 %}
|