{% extends 'base.html.twig' %}

{% block head %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
{% endblock %}

{% block body %}
    {% include 'partials/__header.html.twig' %}
    <main>
        <section class="hero m-auto">
            <div class="container">
                <div class="hero-inner">
                    <div class="hero-copy">
                        <h1 class="hero-title mt-0">ventry.host</h1>
                        <p class="hero-paragraph">We have revamped our free File Hosting service and are excited to
                            share the new features and benefits with you! With its customizability, you can change
                            your experience to suit your needs with no limitations. Come check it out and see for
                            yourself!</p>
                        <div class="hero-cta">
                            {% if app.user.username is not defined %}
                                <a class="button button-primary" href="{{ path('app_register') }}"> Sign up for the
                                    Beta</a>
                                <a class="button" href="{{ path('app_login') }}">Login</a>
                            {% else %}
                                <a class="button button-primary" href="{{ path('app_home') }}">Dashboard</a>
                            {% endif %}
                        </div>
                    </div>
                    <div class="hero-figure anime-element">
                        <svg class="placeholder" width="528" height="396" viewBox="0 0 528 396">
                            <rect width="528" height="396" style="fill:transparent;"></rect>
                        </svg>
                        <div class="hero-figure-box hero-figure-box-01" data-rotation="45deg"></div>
                        <div class="hero-figure-box hero-figure-box-02" data-rotation="-45deg"></div>
                        <div class="hero-figure-box hero-figure-box-04" data-rotation="-135deg"></div>
                        <div class="hero-figure-box hero-figure-box-05"
                             style="background-image: url('{{ asset('assets/img/logo-white.png') }}');background-size: cover; background-repeat: no-repeat"></div>
                        <div class="hero-figure-box hero-figure-box-06"></div>
                        <div class="hero-figure-box hero-figure-box-07"></div>
                        <div class="hero-figure-box hero-figure-box-08" data-rotation="-22deg"></div>
                        <div class="hero-figure-box hero-figure-box-09" data-rotation="-52deg"></div>
                        <div class="hero-figure-box hero-figure-box-10" data-rotation="-50deg"></div>
                    </div>
                </div>
            </div>
        </section>

        {% include 'partials/__spacer.html.twig' %}
        {% include 'partials/landing/__features.html.twig' %}
        {% include 'partials/__spacer.html.twig' %}
        {% include 'partials/landing/__faq.html.twig' %}
    </main>
{% endblock %}