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 chat for distributed&nbsp;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-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 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 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 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 %}