{% extends 'layout.html' %}
{% load i18n %}
{% load staticfiles %}

{% block headers %}
    <meta name="description" content="{% trans 'CCrypto VPN is a cheap, fast, anonymous and secure VPN service' %}" />
{% endblock %}

{% block content %}
<div class="content">
    <div class="pure-g home-content">
        <div class="home-item pure-u-1 pure-u-md-1-5">
            <img src="{% static 'img/unlimited.svg' %}" alt="" />
            <div class="home-item-content">
                <h2>{% trans 'Unlimited' %}</h2>
                <p><b>{% trans 'Unlimited bandwidth' %}</b>.<br />
                    <b>{% trans 'Uncensored' %}</b>.<br />
                    {% trans 'The data must flow.' %}</p>
            </div>
        </div>
        <div class="home-item pure-u-1 pure-u-md-1-5">
            <img src="{% static 'img/cheap.svg' %}" alt="" />
            <div class="home-item-content">
                <h2>{% trans 'Affordable' %}</h2>
                <p><b>{{eur_price}}&euro;</b> {% trans 'per month!' %}<br/>
                    {% trans 'Pay by card, PayPal, or 50+ cryptocurrencies.' %}</p>
            </div>
        </div>
        <div class="home-item pure-u-1 pure-u-md-1-5">
            <img src="{% static 'img/anon.svg' %}" alt="" />
            <div class="home-item-content">
                <h2>{% trans 'Secure' %}</h2>
                <p><b>{% trans 'Encrypted tunnel' %}</b>
                    {% trans 'with an <b>anonymous address</b>.' %}<br />
                    {% trans 'Supports DNSSEC and PFS.' %}</p>
            </div>
        </div>
        <div class="home-item pure-u-1 pure-u-md-1-5">
            <img src="{% static 'img/openvpn.svg' %}" alt="" />
            <div class="home-item-content">
                <h2>{% trans 'OpenVPN' %}</h2>
                <p>
                    <ul>
                        <li><b>Windows, OSX</b></li>
                        <li><b>GNU/Linux, BSD</b></li>
                        <li><b>Android, iOS</b></li>
                    </ul>
                </p>
            </div>
        </div>
        <div class="home-item pure-u-1 pure-u-md-1-5">
            <img src="{% static 'img/fast.svg' %}" alt="" />
            <div class="home-item-content">
                <h2>{% trans 'Fast' %}</h2>
                <p><b>1Gbps</b><br/>
                    <b>{% trans 'Compressed tunnel.' %}</b><br />
                    {% trans 'Even on YouTube.' %}
                </p>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>

    <p class="home-signup">
        <a href="/account/signup" class="home-signup-button pure-button pure-button-primary">
            {% trans 'Sign up and get your free trial' %}
        </a>
    </p>

    <div class="pure-g home-secondary">
        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Hide your IP address</b> to disrupt tracking and geolocation.' %}</p>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Protect your privacy</b> on insecure networks with AES GCM 256 bits, RSA 4096 bits.' %}</p>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Get a clean and neutral access</b> without censorship, interception, or manipulation.' %}</p>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Bypass firewalls</b> in restricted network environments.' %}</p>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Transparently compress your traffic</b> to save data and gain speed on slow connections.' %}</p>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <p>{% trans '<b>Get IPv6 connectivity</b> on IPv4-only networks or where IPv6 is not equally supported.' %}</p>
        </div>
    </div>
</div>

{% endblock %}


