{% extends 'base.html' %}

{% block content %}

<div class="container py-5">

    <!-- HERO -->
    <div class="row align-items-center min-vh-75">

        <!-- Texto -->
        <div class="col-md-7">

            <span class="badge bg-success mb-3">
                SONARA
            </span>

            <h1 class="display-3 fw-bold text-white">
                Sua música.<br>
                Seu momento.
            </h1>

            <p class="lead text-secondary mt-4">
                Explore suas playlists, descubra suas músicas favoritas
                e aproveite sua experiência musical utilizando a
                Spotify Web API.
            </p>

            <div class="mt-4">

                <a
                    class="btn btn-success btn-lg rounded-pill px-4 me-2"
                >
                    Saiba mais
                </a>

                <a
                    href="/login"
                    class="btn btn-outline-light btn-lg rounded-pill px-4"
                >
                    Entrar com Spotify
                </a>

            </div>

        </div>


        <!-- Ícone -->
        <div class="col-md-5 text-center mt-5 mt-md-0">

            <div
                class="bg-success rounded-circle mx-auto
                       d-flex align-items-center justify-content-center
                       shadow-lg"
                style="width: 250px; height: 250px;"
            >

            </div>

        </div>

    </div>


    <!-- CARDS -->
    <div class="row g-4 mt-5">

        <div class="col-md-4">

            <div class="card bg-dark border-0 h-100 p-3">

                <div class="card-body">

                    <h4 class="text-white">
                        Suas Playlists
                    </h4>

                    <p class="text-secondary">
                        Acesse e organize suas playlists do Spotify
                        em um único lugar.
                    </p>

                </div>

            </div>

        </div>


        <div class="col-md-4">

            <div class="card bg-dark border-0 h-100 p-3">

                <div class="card-body">

                    <h4 class="text-white">
                        Encontre músicas
                    </h4>

                    <p class="text-secondary">
                        Pesquise rapidamente pelas suas playlists
                        favoritas.
                    </p>

                </div>

            </div>

        </div>


        <div class="col-md-4">

            <div class="card bg-dark border-0 h-100 p-3">

                <div class="card-body">

                    <h4 class="text-white">
                        Experiência musical
                    </h4>

                    <p class="text-secondary">
                        Uma interface simples e moderna para
                        explorar seu catálogo.
                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock content %}