index.njk

---
layout: layouts/main
---

<section id="intro">
    <div class="hero-text">
        <h1>Collaboration and privacy</h1>
        <p>Yes, you can have both</p>
    </div>

    <div class="hero-img">
        <img class="screenshot" src="/images/drive-preview-sandpaper.png?ver{{cache.buster}}" alt="cryptdrive with some folders and documents">

    </div>
</section>

<section id="try-cryptpad">
    <p>CryptPad is a collaborative office suite that is end-to-end encrypted and open-source.</p>
    <a class="fake-button" href="/instances/">Try CryptPad <i class="fa fa-arrow-right"></i></a>
</section>

<section class="features">
    <div>
        <a href="/about/#a-full-suite" aria-label="click to read more">
            <img src="/images/full-suite.svg?ver{{cache.buster}}" alt="">
            <p>Full suite of apps</p>
        </a>
    </div>
    <div>
        <a href="/about/#e2ee" aria-label="click to read more">
            <img src="/images/e2ee-shredder.svg?ver{{cache.buster}}" alt="">
            <p>End-to-end encrypted</p>
        </a>
    </div>
    <div>
        <a href="/about/#collab" aria-label="click to read more">
            <img src="/images/collab.svg?ver{{cache.buster}}" alt="">
            <p>Real-time editing and collaboration</p>
        </a>
    </div>
</section>

<section id="testimonials">
    <h2>Testimonials</h2>
    <p>We asked users what they love about CryptPad.<br>
        <a href="{{ site.testimonial_survey }}">Submit a testimonial</a>
    </p>
    {% import "components/testimonial_carousel.njk" as testimonial with context %}
    {{ testimonial.carousel() }}
    <p><a href="/testimonials/">See all {{ testimonials.responses | length }} Testimonials</a></p>

</section>