<section class="why-thumbor">
    <div class="stripe">
        <div class="picture sm-container"></div>
        <div class="container">
            <div class="text">
                <div class="col-5-5">
                    <p class="title">
                        No more headless bodies
                    </p>
                    <p>
                        With the most advanced face detection technology, Thumbor ensure you to have the best image crop possible. Everytime a face is detected, it will crop the image around it, making sure the most important parts of the picture are preserved.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="stripe">
        <div class="picture sm-container"></div>
        <div class="container">
            <div class="text">
                <div class="col-5-5">
                    <p class="title">
                        Images everywhere
                    </p>
                    <p>
                        Thumbor allows users to store and load images from anywhere needed. It's really simple to implement a new loader or storage. It comes packaged with file, http, redis and mongo implementations for loaders and storages. Just pick what makes sense for you or implement your own.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="stripe">
        <div class="picture sm-container"></div>
        <div class="container">
            <div class="text">
                <div class="col-5-5">
                    <p class="title">
                        Filter to enhance
                    </p>
                    <p>
                        Thumbor has support for image filters. Filters usually apply some post-processing to the images and they can be chained and applied in order. Thumbor's extensible nature allows you to write your own filters, but it comes with some pre-packaged filters of its own. Brightness, contrast, grayscale, red-eye and blur are a few samples.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="stripe">
        <div class="picture sm-container"></div>
        <div class="container">
            <div class="text">
                <div class="col-5-5">
                    <p class="title">
                        Thumbor supports webp
                    </p>
                    <p>
                        WebP is a new format for lossy and lossless images that compresses a lot better than jpeg and png. Thumbor allows users to specify that browsers that support WebP automatically get it. This can have a dramatic increase in the performance of your website. Besides WebP, Thumbor also uses some tactics to reduce the file size even further.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="size-comparison container">
    <div class="col-4 sm-half">
        <div class="image-bubble jpg" style="background-image: url('{{ config.THUMBOR_SERVER_URL }}/{{ thumbor_url('size-comparison.jpg', width=280, height=280, smart=True) }}');">
            <div class="ribbon">
                <strong>
                    19
                    <span class="unit">kb</span>
                </strong>
                <span class="format">jpg</span>
            </div>
        </div>
    </div>
    <div class="col-4 sm-half">
        <div class="image-bubble webp" style="background-image: url('{{ config.THUMBOR_SERVER_URL }}/{{ thumbor_url('size-comparison.jpg', width=280, height=280, smart=True) }}');">
            <div class="ribbon">
                <strong>
                    12
                    <span class="unit">kb</span>
                </strong>
                <span class="format">thumbor webp</span>
            </div>
        </div>
    </div>

    <div class="col-6">
        <form class="thumborize" action="http://thumborize.me/">
            <p class="title">Put your website on a diet. Test it now!</p>
            <div class="subtitle">Fill your url below to see how many KB Thumbor would help you save.</div>

            <input name="url" type="url" value="http://"/>
            <input type="submit" class="btn btn-blue btn-light" value="THUMBORIZE ME" />
        </form>
    </div>
</section>
