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

{% block body %}
    <div id="container" class="slideshow">

        <!--Set your own slider options. Look at the v_RevolutionSlider() function in 'theme-core.js' file to see options-->
        <div class="home-slider-wrap fullwidthbanner-container" id="accueil">
            <div class="v-rev-slider" data-slider-options='{ "startheight": 700 }'>

                <ul>

                    <li data-transition="fade" data-slotamount="7" data-masterspeed="600">

                        <img src="assets/img/slider/background.png" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

                        <div class="tp-caption light_heavy_50 sfl stl"
                            data-x="350"
                            data-y="245"
                            data-speed="600"
                            data-start="600"
                            data-easing="Power1.easeInOut"
                            data-splitin="none"
                            data-splitout="none"
                            data-elementdelay="0"
                            data-endelementdelay="0"
                            data-endspeed="300">
                            TRUE GUITAR TABS
                        </div>

                        <div class="tp-caption v-caption-h1 sfl stl"
                            data-x="360"
                            data-y="350"
                            data-speed="700"
                            data-start="1200"
                            data-easing="Power1.easeInOut"
                            data-splitin="none"
                            data-splitout="none"
                            data-elementdelay="0"
                            data-endelementdelay="0"
                            data-endspeed="300">
                            Venez découvrir le monde de la guitare.
                        </div>

                        <div class="tp-caption sfl stl"
                            data-x="center"
                            data-y="460"
                            data-speed="600"
                            data-start="1800"
                            data-easing="Power1.easeInOut"
                            data-splitin="none"
                            data-splitout="none"
                            data-elementdelay="0"
                            data-endelementdelay="0"
                            data-endspeed="300">
                            
                            <a href="{{ path('chords.index') }}" class="btn v-btn v-second-light" style="width:300px;">LES ACCORDS</a>
                        </div>

                        <div class="tp-caption sfl stl"
                            data-x="center"
                            data-y="560"
                            data-speed="600"
                            data-start="2200"
                            data-easing="Power1.easeInOut"
                            data-splitin="none"
                            data-splitout="znone"
                            data-elementdelay="0"
                            data-endelementdelay="0"
                            data-endspeed="300">
                            <a href="{{ path('songs.index') }}" class="btn v-btn v-second-light" style="width:300px;">CHANSONS</a>
                        </div>

                    </li>
                </ul>
            </div>

            <div class="shadow-right"></div>
        </div>

        <div class="v-page-wrap no-bottom-spacing">

            <div class="container">
                <div class="v-spacer col-sm-12 v-height-small"></div>
            </div>

            <!--Mon objectif-->
            <div class="container" id="mon-objectif">

                <div class="row center">

                    <div class="col-sm-12">
                        <p class="v-smash-text-large-2x">
                            <span>Mon objectif !</span>
                        </p>
                        <div class="horizontal-break"></div>
                        <p class="lead" style="color: #999;">
                            True Guitar Tabs vous propose des tablatures et la liste des accords de guitare de chansons pour apprendre à jouer vos titres préférés. Vous trouverez les tablatures et les fiches de chansons dans les onglets respectifs.
                        </p>
                    </div>
                    <div class="v-spacer col-sm-12 v-height-standard"></div>
                </div>

            </div>
            <!--Mon objectif - END-->

            <div class="container">
                <div class="v-spacer col-sm-12 v-height-standard"></div>
            </div>

            <!--Qui suis-je-->
            <div class="v-parallax v-bg-stylish v-bg-stylish-v4 no-shadow" id="qui-suis-je">
                <div class="container">
                    <div class="row center">

                        <div class="col-sm-12">
                            <p class="v-smash-text-large-2x">
                                <span>Qui suis-je ?</span>
                            </p>
                            <div class="horizontal-break"></div>
                            <p class="lead" style="color: #999;">
                                Je m'appelle Guillaume. Je joue de la guitare depuis l'âge de 13 ans. J'ai principalement appris la guitare en autodidacte. Une fois les bases acquises, j'ai rapidement commencé à déchiffrer les morceaux à l'oreille. <br/>
                                Mon souhait est de vous proposer des tablatures et des covers, à mon humble niveau, pour partager à mon tour la passion de la guitare et permettre à ceux qui le souhaite de se faire plaisir en apprenant à jouer à la guitare leurs chansons préférées.
                            </p>
                            <p class="lead" style="color: #999;">
                                Ce site est codé et mis à jour par mes soins. Les différents contenus arrivent et se structurent progressivement. Si vous avez des tablatures que vous ne trouvez pas ailleurs ou des chansons dont vous souhaitez connaitre les accords, n'hésitez pas à me contacter et me faire des suggestions. Bonne gratte !
                            </p>
                        </div>
                        <div class="v-spacer col-sm-12 v-height-standard"></div>
                    </div>
                </div>
            </div>
            <!--Qui suis-je - END-->

            <div class="container">
                <div class="v-spacer col-sm-12 v-height-standard"></div>
            </div>

            <!--Me contacter-->
            <div class="v-parallax v-bg-stylish" id="contact">
                <div class="container">
                    <div class="row center">
                        <div class="col-sm-8 col-sm-offset-2">
                            <p class="v-smash-text-large-2x">
                                <span>Vous pouvez me retrouver :</span>
                            </p>
                            <br />
                            <p class="lead" style="color: #999;">
                                Sur les réseaux


                                <div class="row">
                                    <a href="https://www.youtube.com/channel/UCwdXzW7UhcUfVx5M7S9R74w" target="_blank"><button type="button" class="btn v-btn v-pomegranate">YouTube</button></a>
                                    <a href="https://soundcloud.com/guidia12" target="_blank"><button type="button" class="btn v-btn v-carrot">SoundCloud</button></a>
                                </div>
                            </p>
                            <div class="horizontal-break"></div>
                            <p class="lead" style="color: #999;">
                                Ou par email à l'adresse <br/>
                                <span style="font-weight: bold;">trueguitartabs@gmail.com</span>
                            </p>
                            <div class="v-spacer col-sm-12 v-height-small"></div>


                        </div>
                    </div>

                    <div class="row">
                        <div class="v-spacer col-sm-12 v-height-small"></div>
                    </div>

                </div>
            </div>
            <!--Me contacter - END-->
        </div>
{% endblock %}