landing.hbs

<div class="content m-auto p-4" style="max-width: 60em">
    <div class="landing-block row">
        <div class="col-lg-8">
            <h2>Let's Block It!</h2>
            <p class="fs-5">
                Remove low-quality content and useless nags, focus on what matters.
                Make the web yours again with this collection of community-owned content filters.
            </p>
            <p>
                A companion to the great <a href="https://ublockorigin.com/">uBlock Origin</a>
                content blocker.
            </p>
        </div>
        <p class="col-lg-4 d-none d-lg-block container landing-icon">
            {{>icon name="shield-check"}}
        </p>
        <hr class="landing-divider">
    </div>
    <div class="landing-block row">
        <p class="col-lg-4 d-none d-lg-block container landing-icon">
            {{>icon name="adjustments"}}
        </p>
        <div class="col-lg-8">
            <h3>It's all about <strong>you</strong></h3>
            <p>
                <strong>Decide what you want to see</strong>: hide
                that <a href="{{href "view-filter" "search-results"}}">annoying SEO-spam website in Google results</a>,
                that <a href="{{href "view-filter" "nebula-creators"}}">creator on Nebula</a>,
                that <a href="{{href "view-filter" "youtube-video-title"}}">topic on Youtube</a>,
                that <a href="{{href "view-filter" "linkedin-posts-by-link"}}">pushy company on Linkedin</a>.
            </p>
            <p>
                <strong>De-clutter your web experience</strong>: hide
                <a href="{{href "view-filter" "google-search-cleanup"}}">Google contextual results</a> and
                <a href="{{href "view-filter" "youtube-shorts"}}">Youtube shorts</a>,
                keep the good stuff only.
            </p>
            <p><a class="btn btn-primary" href="{{href "list-filters" ""}}">Browse the filter list</a></p>
        </div>
        <hr class="landing-divider">
    </div>
    <div class="landing-block row">
        <div class="col-lg-8">
            <h3>It's all about <strong>us</strong></h3>
            <p>
                Customizable templates make it easy for everyone to get on board.
                Broken rules? One person can fix it <em>for everyone</em>.
            </p>
            <p>This project is maintained by a growing community:</p>
            <p>{{#with (all_avatars)}}
                {{>contributors}}
            {{/with}}</p>
            <p><a class="btn btn-primary me-2" href="{{href "help" "contributing"}}">Learn how to contribute</a></p>
        </div>
        <p class="col-lg-4 d-none d-lg-block container landing-icon">
            {{>icon name="users"}}
        </p>
        <hr class="landing-divider">
    </div>
    <div class="landing-block row">
        <p class="col-lg-4 d-none d-lg-block container landing-icon">
            {{>icon name="devices"}}
        </p>
        <div class="col-lg-8">
            <h3>It's on <strong>all</strong> your devices</h3>
            <p>
                Create an account to build your customized filter list, then add it in your browser.
                Add your <a href="{{href "view-filter" "custom-rules"}}">custom filters</a> for content that is
                not <a href="{{href "help" "contributing"}}">(yet?)</a> covered by our templates.
            </p>
            <p>
                Your filters will update daily on all your browsers, even on your phone with Firefox Mobile.
            </p>
            <form method="POST" action="{{href "user-action" "loginOrRegistration"}}">
                {{{csrf @root}}}
                <button class="btn btn-primary" type="submit">Create an account</button>
            </form>
        </div>
        <hr class="landing-divider">
    </div>
    <div class="landing-block row">
        <div class="col-lg-8">
            <h3>It's <strong>Open-source</strong></h3>
            <p>The filter corpus and the server code are licensed under
                <a href="https://github.com/letsblockit/letsblockit/blob/main/LICENSE.txt">
                    the Apache License 2.0.</a></p>
            <p>
                This official instance is the simplest way to get started, but you can also
                <a href="https://github.com/letsblockit/letsblockit/blob/main/cmd/server/README.md">
                    self-host the server</a> or use
                <a href="https://github.com/letsblockit/letsblockit/blob/main/cmd/render/README.md">
                    the offline render CLI</a> if you prefer.
            </p>
            <p><a class="btn btn-primary me-2" href="https://github.com/letsblockit/letsblockit">
                Check us out on Github</a></p>
        </div>
        <p class="col-lg-4 d-none d-lg-block container landing-icon">
            {{>icon name="brand-open-source"}}
        </p>
    </div>
</div>

<style>
    div.landing-block p {
        text-align: justify;
    }

    p.landing-icon {
        font-size: 4rem;
        padding: 0 2rem;
        color: #DC926E;
    }

    p.landing-icon svg {
        stroke-width: 1.25;
    }

    div.landing-block:nth-child(even) p.landing-icon {
        text-align: right;
    }

    hr.landing-divider {
        border: none !important;
        opacity: 0.6;
        height: 0.25rem;
        margin: 3rem 15%;
        max-width: 70%;
        background: linear-gradient(-0.25turn, #b83e51, var(--bs-body-bg));
    }

    div.landing-block:nth-child(odd) hr.landing-divider {
        background: linear-gradient(0.25turn, #b83e51, var(--bs-body-bg));
    }
</style>