zulip/templates/corporate/hello.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 team&nbsp;chat</h1>
            <div class='h1-subheader'>
                For distributed teams of all sizes.
            </div>
            <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-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }} 2x"
                      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-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }} 2x"
                      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-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-2x.webp') }} 2x"
                      media="(min-width: 941px)"/>
                    <source class='appshot-1__img'
                      type="image/webp"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }} 2x"
                      media="(max-width: 940px)"/>
                    <source class='appshot-1__img'
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.jpg') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }} 2x"
                      media="(max-width: 940px)"/>
                    <img alt="" width="1095" height="496" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }}"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }},
                      {{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }} 2x"/>
                </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 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__logo_akamai'></div>
                <div class='client-logos__logo_tum'></div>
                <div class='client-logos__logo_wikimedia'></div>
                <div class='client-logos__logo_rust'></div>
                <div class='client-logos__logo_dr_on_demand'></div>
                <div class='client-logos__logo_maria'></div>
            </div>
        </div>
        <div class="screen-2">
            <div class="screen-2__container">
                <div class="screen-2__content">
                    <h2 class="screen-2__header">What makes Zulip different</h2>
                    <div class="screen-2__desc">
                        <p>
                            People often tell us that traditional team chat tools (Slack, Microsoft Teams, etc.) feel chaotic and stressful.
                        </p>
                        <p>
                            Zulip is designed around conversations that are labeled with topics, to make communication <a href="/why-zulip/">organized and efficient</a>. It’s easy to get an overview of what conversations are happening, and to read one conversation at a time.
                        </p>
                    </div>
                    <a class="quote" href="/case-studies/idrift/">
                        <div class="quote__text">
                            Zulip&rsquo;s <strong>threading model</strong> makes it so&nbsp;much easier to <strong>manage my team</strong>… As a&nbsp;leader, <strong>in&nbsp;just a&nbsp;few minutes</strong> I can get an overview over what&rsquo;s going on and see where my&nbsp;attention is&nbsp;needed.
                        </div>
                        <div class="quote__source">
                            Case study with <strong>Gaute Lund</strong>, <i>co-founder of iDrift AS</i>
                        </div>
                    </a>
                </div>
                <div class="appshot-2">
                    <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 -->
                        <!-- we only have mobile images here -->
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x"
                          media="(prefers-color-scheme: dark)"/>
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/>
                        <img alt="" class='appshot-2__img'
                          src="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }}"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }} 2x"/>
                    </picture>
                </div>
            </div>
        </div>
        <div class="screen-3">
            <div class="screen-3__container">
                <div class="screen-3__content">
                    <h2 class="screen-3__header">Zulip transforms how work gets done.</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/asciidoctor/">
                            <div class="quote__text">
                                <h4>Less stress</h4>
                                With Zulip, I can <strong>manage hundreds of participants</strong> across two communities extremely efficiently, and I don’t feel stressed.
                            </div>
                            <div class="quote__source">
                                <strong>Dan Allen</strong>, <i>Asciidoctor open-source project lead</i>
                            </div>
                        </a>
                        <a class="quote" href="/case-studies/rust/">
                            <div class="quote__text">
                                <h4>Faster decisions</h4>
                                Zulip lets us move faster, connect with each other better, and have interactive technical discussions that are <strong>organized, recorded, and welcoming</strong>.
                            </div>
                            <div class="quote__source">
                                <strong>Josh Triplett</strong>, <i>Rust Language team co-lead</i>
                            </div>
                        </a>
                        <a class="quote" href="/case-studies/idrift/">
                            <div class="quote__text">
                                <h4>Leaders are informed</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/tum/">
                            <div class="quote__text">
                                <h4>Scalable communication</h4>
                                Zulip has the <strong>best user experience</strong> of all the chat apps I’ve tried… It is the only app that makes hundreds of conversations manageable.
                            </div>
                            <div class="quote__source">
                                <strong>Tobias Lasser</strong>, <i>Technical University of Munich</i>
                            </div>
                        </a>
                        <a class="quote" href="/case-studies/atolio/">
                            <div class="quote__text">
                                <h4>Uninterrupted focus</h4>
                                In Zulip, it’s super <strong>easy to find</strong> things 24 hours later if you weren’t online when a discussion happened.
                            </div>
                            <div class="quote__source">
                                <strong>Gareth Watts</strong>, <i>co-founder and CTO of Atolio</i>
                            </div>
                        </a>
                        <a class="quote" href="/case-studies/gut-contact/">
                            <div class="quote__text">
                                <h4>Easy to use software</h4>
                                The software must be as simple as possible. That’s why we love Zulip.
                            </div>
                            <div class="quote__source">
                                <strong>Erik Dittert</strong>, <i>Head of IT at GUT contact</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 %}