{% extends "layouts/layout.html" %}

{% block header %}
<title>Cryptovote</title>
{% endblock %}

{% block content %}
<section class="portfolio-block block-intro" style="height: 90vh;">
    <div class="container" style="top: 50%;position: relative;transform: translate(0,-40%);">
        <div class="row">
            <div class="col">
                <div style="min-height: 10vh;">
                    <p class="text-info" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" style="font-size: 10vh;"><strong>Truly Secure Elections</strong></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div data-aos="fade" data-aos-duration="700" data-aos-offset="-300" data-aos-delay="250" data-aos-once="true" class="about-me" style="background-image: url(&quot;{{ url_for('static', filename='img/ballot-box.png') }}&quot;);background-position: center;background-size: cover;background-repeat: no-repeat;"><a class="btn btn-outline-secondary" role="button" href="{{ url_for('create_election.create_election_name') }}" style="margin-top: 15vh;margin-bottom: 5vh;">Get Started</a></div>
            </div>
        </div>
        <div class="row" data-aos="fade" data-aos-duration="700" data-aos-offset="-500" data-aos-delay="550" data-aos-once="true">
            <div class="col"><i class="fa fa-angle-double-down rubberBand animated infinite" style="font-size: 2em;padding: 10vh;"></i></div>
        </div>
    </div>
</section>
<section class="portfolio-block skills">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card special-skill-item border-0">
                    <div class="card-header bg-transparent border-0"><i class="icon ion-key"></i></div>
                    <div class="card-body">
                        <h3 class="card-title">Fully Encrypted</h3>
                        <p class="card-text">No one can learn how any voter cast their ballot.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card special-skill-item border-0">
                    <div class="card-header bg-transparent border-0"><i class="icon ion-android-checkmark-circle"></i></div>
                    <div class="card-body">
                        <h3 class="card-title">Verifiable</h3>
                        <p class="card-text">Each voter can verify that their ballot was counted correctly.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card special-skill-item border-0">
                    <div class="card-header bg-transparent border-0"><i class="icon ion-ios-people"></i></div>
                    <div class="card-body">
                        <h3 class="card-title">Multi Authority</h3>
                        <p class="card-text">Calculating results requires the participation of many authorities so that a subset of the authorities cannot collude on fake results.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="portfolio-block website gradient">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-12 col-lg-5 offset-lg-1 text">
                <h3>Cryptovote</h3>
                <p>Are you ready to perform truly secure elections in the digital age?</p><a class="btn btn-outline-light" role="button" href="{{ url_for('create_election.create_election_name') }}">Get Started</a></div>
            <div class="col-md-12 col-lg-5">
                <div class="portfolio-laptop-mockup">
                    <div class="screen">
                        <div class="screen-content" style="background-image: url(&quot;{{ url_for('static', filename='img/crytovote-home.png') }}&quot;);"></div>
                    </div>
                    <div class="keyboard"></div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}