mirror of https://github.com/zulip/zulip.git
300 lines
17 KiB
HTML
300 lines
17 KiB
HTML
{% extends "zerver/base.html" %}
|
||
{% set entrypoint = "landing-page-hello" %}
|
||
|
||
{% set PAGE_TITLE = "Zulip — organized team chat" %}
|
||
|
||
{% set PAGE_DESCRIPTION = "Zulip is an organized team chat app for distributed
|
||
teams of all sizes." %}
|
||
|
||
{% block customhead %}
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{% include 'zerver/landing_nav.html' %}
|
||
<div class="portico-hello-page">
|
||
<div class='body-bg'>
|
||
<div class='body-bg__layer'></div>
|
||
</div>
|
||
<div class="screen-1">
|
||
<h1>Organized chat for distributed teams</h1>
|
||
<div class='appshot-1'>
|
||
<picture>
|
||
<!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
|
||
<source class='appshot-1__img'
|
||
type="image/webp"
|
||
srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }}"
|
||
media="(min-width: 941px) and (prefers-color-scheme: dark)"/>
|
||
<source class='appshot-1__img'
|
||
type="image/webp"
|
||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }}"
|
||
media="(max-width: 940px) and (prefers-color-scheme: dark)"/>
|
||
<source width="1095" height="496" class='appshot-1__img'
|
||
type="image/webp"
|
||
srcset="{{ static('images/landing-page/hello/generated/screen-1-2x.webp') }}"
|
||
media="(min-width: 941px)"/>
|
||
<source class='appshot-1__img'
|
||
type="image/webp"
|
||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }}"
|
||
media="(max-width: 940px)"/>
|
||
<source class='appshot-1__img'
|
||
srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }}"
|
||
media="(max-width: 940px)"/>
|
||
<img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }}"/>
|
||
</picture>
|
||
<div class="cta-buttons">
|
||
<a href="/try-zulip/">
|
||
See it in use
|
||
<div class="cta-desc">in an open organization</div>
|
||
</a>
|
||
<a href="/new/">
|
||
Create an organization
|
||
<div class="cta-desc">in 1 minute for free</div>
|
||
</a>
|
||
<a href="/request-demo/">
|
||
Get a demo
|
||
<div class="cta-desc">request a call</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="client-logos">
|
||
<div class='client-logos-div client-logos__logo_akamai'></div>
|
||
<div class='client-logos-div client-logos__logo_tum'></div>
|
||
<div class='client-logos-div client-logos__logo_wikimedia'></div>
|
||
<div class='client-logos-div client-logos__logo_rust'></div>
|
||
<div class='client-logos-div client-logos__logo_dr_on_demand'></div>
|
||
<div class='client-logos-div client-logos__logo_maria'></div>
|
||
</div>
|
||
</div>
|
||
<div class="screen-2">
|
||
<div class="screen-2__container">
|
||
<div>
|
||
<h2 class="screen-2__header">Designed for async conversations.</h2>
|
||
<div class="screen-2__subtitle">Here's what it looks like in action.</div>
|
||
</div>
|
||
<div class="screen-2__tabs">
|
||
<input type="radio" id="screen-2__tab1" name="screen-2__tabs-radio" class="screen-2__tab-input" checked />
|
||
<input type="radio" id="screen-2__tab2" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||
<input type="radio" id="screen-2__tab3" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||
<input type="radio" id="screen-2__tab4" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||
<input type="radio" id="screen-2__tab5" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||
<ul>
|
||
<li>
|
||
<label for="screen-2__tab1">
|
||
Get an overview of conversations with unread messages in your inbox.
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<label for="screen-2__tab2">
|
||
Focus on one conversation at a time, no matter how many others are happening.
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<label for="screen-2__tab3">
|
||
Reply to each conversation in context.
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<label for="screen-2__tab4">
|
||
Conversations continue seamlessly over time.
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<label for="screen-2__tab5">
|
||
Start a new conversation by giving it a brief topic.
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
<div class="screen-2__tabs-content">
|
||
<div class="screen-2__tab-image">
|
||
<picture>
|
||
<source
|
||
srcset="{{ static('images/landing-page/hello/generated/01-tab-cont-dark-2x.jpg') }}"
|
||
media="(prefers-color-scheme: dark)" />
|
||
<img alt="" src="{{ static('images/landing-page/hello/generated/01-tab-cont-2x.jpg') }}"/>
|
||
</picture>
|
||
</div>
|
||
<div class="screen-2__tab-image">
|
||
<picture>
|
||
<source
|
||
srcset="{{ static('images/landing-page/hello/generated/02-tab-cont-dark-2x.jpg') }}"
|
||
media="(prefers-color-scheme: dark)" />
|
||
<img alt="" src="{{ static('images/landing-page/hello/generated/02-tab-cont-2x.jpg') }}"/>
|
||
</picture>
|
||
</div>
|
||
<div class="screen-2__tab-image">
|
||
<picture>
|
||
<source
|
||
srcset="{{ static('images/landing-page/hello/generated/03-tab-cont-dark-2x.jpg') }}"
|
||
media="(prefers-color-scheme: dark)" />
|
||
<img alt="" src="{{ static('images/landing-page/hello/generated/03-tab-cont-2x.jpg') }}"/>
|
||
</picture>
|
||
</div>
|
||
<div class="screen-2__tab-image">
|
||
<picture>
|
||
<source
|
||
srcset="{{ static('images/landing-page/hello/generated/04-tab-cont-dark-2x.jpg') }}"
|
||
media="(prefers-color-scheme: dark)" />
|
||
<img alt="" src="{{ static('images/landing-page/hello/generated/04-tab-cont-2x.jpg') }}"/>
|
||
</picture>
|
||
</div>
|
||
<div class="screen-2__tab-image">
|
||
<picture>
|
||
<source
|
||
srcset="{{ static('images/landing-page/hello/generated/05-tab-cont-dark-2x.jpg') }}"
|
||
media="(prefers-color-scheme: dark)" />
|
||
<img alt="" src="{{ static('images/landing-page/hello/generated/05-tab-cont-2x.jpg') }}"/>
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="screen-3">
|
||
<div class="screen-3__container">
|
||
<div class="screen-3__content">
|
||
<h2 class="screen-3__header">Zulip empowers remote and flexible work.</h2>
|
||
<div class="screen-3__subtitle">Check out these case studies to see the impact.</div>
|
||
<div class='screen-3__quotes'>
|
||
<a class="quote" href="/case-studies/atolio/">
|
||
<div class="quote__text">
|
||
<h4>Work better together</h4>
|
||
The first-class threads in Zulip are <strong>absolutely critical to how we work</strong>. So many people on Hacker News talk about using Zulip — I'm so glad we joined them!
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>David Lanstein</strong>, <i>co-founder and CEO of Atolio</i>
|
||
</div>
|
||
</a>
|
||
<a class="quote" href="/case-studies/idrift/">
|
||
<div class="quote__text">
|
||
<h4>Empower leaders</h4>
|
||
Using Zulip significantly <strong>increases the size of the team</strong> for which a manager can meaningfully know what’s going on.
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>Gaute Lund</strong>, <i>co-founder of iDrift AS</i>
|
||
</div>
|
||
</a>
|
||
<a class="quote" href="/case-studies/rust/">
|
||
<div class="quote__text">
|
||
<h4>Make decisions faster</h4>
|
||
Some decisions that were blocked for months on
|
||
GitHub were <strong>resolved within 24 hours</strong> on Zulip.
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>Josh Triplett</strong>, <i>Rust Language team co-lead</i>
|
||
</div>
|
||
</a>
|
||
<a class="quote" href="https://monadical.com/posts/how-to-make-remote-work-part-two-zulip.html">
|
||
<div class="quote__text">
|
||
<h4>Simplify knowledge management</h4>
|
||
Using Zulip in a way that feels natural creates
|
||
an <strong>organized repository</strong> of knowledge <i>as a
|
||
side effect</i>.
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>Max McCrea</strong>, <i>Co-founder of Monadical</i>
|
||
</div>
|
||
</a>
|
||
<a class="quote" href="/case-studies/end-point/">
|
||
<div class="quote__text">
|
||
<h4>Organize 100s of workstreams</h4>
|
||
Other apps like Slack would struggle with
|
||
organizing the flow of information in a complex
|
||
organization like ours. Zulip’s UI makes it easy
|
||
to <strong>access all the information you need</strong>.
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>Jon Jensen</strong>, <i>CTO of End Point
|
||
Dev</i>
|
||
</div>
|
||
</a>
|
||
<a class="quote" href="/case-studies/gut-contact/">
|
||
<div class="quote__text">
|
||
<h4>Communicate with efficiency</h4>
|
||
I don’t like going back to Slack now. It’s just
|
||
not as efficient a way to <strong>organize
|
||
communication</strong>.
|
||
</div>
|
||
<div class="quote__source">
|
||
<strong>James van Lommel</strong>, <i>Director of Engineering at Semsee</i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="screen-4">
|
||
<div class="screen-4__container">
|
||
<div class="screen-4__content">
|
||
<img alt="" class='switch-diagram' loading="lazy" width="400" height="358"
|
||
src="{{ static('images/landing-page/hello/switch-diagram.png') }}"
|
||
/>
|
||
<div class="screen-4__desc">
|
||
<h2 class="screen-4__header">Switching to Zulip isn’t hard.</h2>
|
||
<p>
|
||
Zulip offers a convenient cloud solution, with <a href="/features/">features</a> to make your users and IT team happy. Import your data and integrations <a href="/help/import-from-slack">from Slack</a> and other products.
|
||
</p>
|
||
<h3>Your data is yours!</h3>
|
||
<p>
|
||
For ultimate control and <a href="/help/gdpr-compliance">compliance</a>, <a href="/self-hosting/">self-host</a> Zulip’s 100% <a href="https://github.com/zulip/zulip#readme">open-source</a> software, with easy <a href="https://zulip.readthedocs.io/en/stable/production/install.html">installation</a> and <a href="https://zulip.readthedocs.io/en/stable/production/upgrade.html">upgrades</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="badges">
|
||
<a class="badge-getapp" href="https://www.getapp.com/collaboration-software/web-collaboration/category-leaders/">
|
||
<img alt="" src="https://capterra.s3.amazonaws.com/assets/images/gdm-badges/ga-category_leaders-2023.png"/>
|
||
</a>
|
||
<a class="badge-capterra" href="https://www.capterra.com/p/197945/Zulip/">
|
||
<img alt="" src="{{ static('images/landing-page/hello/capterra-2023.png') }}"/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="screen-5">
|
||
<div class="screen-5__container">
|
||
<h2 class="screen-5__header">Curious to learn more?</h2>
|
||
<div class="screen-5__subtitle">Dive into our detailed guide for organizations like yours.</div>
|
||
<div class="screen-5__cards">
|
||
<a href="/for/business/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Business</h4>
|
||
Organizations from small businesses to enterprises communicate more efficiently.
|
||
</div>
|
||
</a>
|
||
<a href="/for/research/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Research</h4>
|
||
For your group, lab, department or scientific field.
|
||
</div>
|
||
</a>
|
||
<a href="/for/education/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Education</h4>
|
||
Communication hub for classes, in-person or online.
|
||
</div>
|
||
</a>
|
||
<a href="/for/open-source/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Open-source</h4>
|
||
Grow and engage your community.
|
||
</div>
|
||
</a>
|
||
<a href="/for/communities/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Non-profits, Governments</h4>
|
||
Free or highly-discounted plans are available for most non-business uses.
|
||
</div>
|
||
</a>
|
||
<a href="/for/events/" class="card">
|
||
<div class="card__text">
|
||
<h4 class="right-arrow-icon">Events and conferences</h4>
|
||
For organizers and attendees at your conference, workshop, or hackathon.
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% include 'zerver/footer.html' %}
|
||
{% endblock %}
|