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

{% block title %}Bienvenu sur l'accueil{% endblock %}

{% block content %}
    <section class="grid-autfitcol border-b fullvh">           
        <article class='border-r base-pad' data-aoe="fadeInUp">            
            <h1>Des instruments fabriqués à la main, du bois chargé d'histoire.</h1>
            <h2 data-aoe="fadeInUp">Bienvenue !</h2>
            <p data-aoe="fadeInUp">Ravi que vous nous ayez trouvés - laissez-nous vous montrer comment une guitare Origine(s) vous relie à un morceau du passé et à l'esprit de son lieu d'origine. </p>
            <p data-aoe="fadeInUp">Découvrez nos instruments, tous des pièces uniques, entièrement faites à la main pour quelque chose de vraiment différent !</p>
        </article>
        <figure>
            <img 
                srcset = "{{asset('imgs/craft.jpg')}} 1000w, {{asset('imgs/lagrange_800.jpg')}}  2000w,"
                src={{asset('imgs/lagrange_800.jpg')}} alt="Guitare modèle LaGrange ">
        </figure>
    </section>

    <section class="separation">
        <h2>Technical and ethical expertise</h2>
        <p>The combination of FSC certified and reclaimed woods is what gives our instruments that vintage and raw, yet sleek look. We value eco-friendly techniques and the preservation of our beautiful heritage and the nostalgia that comes with handmade things.</p>
    </section>
    <section class="grid-tech">
        <article  data-aoe="fadeInUp">
            <img src={{asset('imgs/fsc.svg')}} alt="icone FSC">
            <div class="about">
                <h3>FSC certified wood</h3>
                <p>All our woods, from the handle to the head plate, are guaranteed FSC quality. </p>
            </div>
        </article>
         <article  data-aoe="fadeInUp">
            <img src={{asset('imgs/cordes.svg')}} alt="icone cordes">
            <div class="about">
                <h3>Handmade strings</h3>
                <p>Our strings are handcrafted by Justin Larue in the South of France.</p>
            </div>
        </article>
        <article  data-aoe="fadeInUp">
            <img src={{asset('imgs/bois.svg')}} alt="icone bois">
            <div class="about">
                <h3>Reclaimed wood</h3>
                <p>Cut, treated, cleaned, worked and pampered, our woods become a magnificent electric guitar top. </p>
            </div>
        </article>
         <article  data-aoe="fadeInUp">
            <img src={{asset('imgs/mics.svg')}} alt="icone micros">
            <div class="about">
                <h3>Handmade mics</h3>
                <p>Our microphones are made in Provence and handcrafted by SP Custom, the French reference, which has been acclaimed by HellFest.</p>
            </div>
        </article>
    </section>
    
    <div class="grid-autfitcol border-b">
        <section class='nopad'>
            <img src={{asset('imgs/craft.jpg')}} alt="Savoir faire">
        </section>

        <section class='just-center flex base-pad'>
            <h1>Proudly crafted in the south of France.</h1>
            <p>With over a decade of experience in the design and construction of string instruments, we created BELLES ORIGINES in 2019. </p>
            <p>We want to harmoniously blend terroir, heritage, history and know-how - so that old wood, otherwise left to disappear, becomes the basis for our eco-design and your unique guitar.</p>
        </section>
    </div>

    <a href="{{ path('catalogue_list') }}">
        <section class="separation flex just-bet">
            <h2 class='nomarg'>Have a look at our current catalogue.</h2>
            <button class='arrow' data-aoe='fadeInLeft'>
                <svg width="161" height="31" viewBox="0 0 161 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M158.094 17.7749L-8.74228e-07 17.7749L0 12.7749L158.094 12.7749L158.094 17.7749Z" fill="#FF7222"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M155.188 15.4878L147.933 3.01407L152.255 0.500245L161 15.5359L152.234 30.0497L147.954 27.4646L155.188 15.4878Z" fill="#FF7222"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M141.188 15.4878L133.933 3.01407L138.255 0.500245L147 15.5359L138.234 30.0497L133.954 27.4646L141.188 15.4878Z" fill="#FF7222"/>
                </svg>
            </button>
        </section>
    </a>
    

    <section class="flex border-b">
        <div class="grid-autfitrow grid-row-gap-4 map base-pad mw-50">
            <img  src={{asset('imgs/regionpaca.svg')}} alt="carte région PACA">
            <div>
                <h3>La Bastide du machin en verdon</h3>
                <p>
                One of the "Les Plus Beaux Villages de France" Gordes is perched on the side of a hill overlooking the Little Luberon and makes for a dramatic sunrise picture.
                </p>
                <p>
                How we found this wood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
        </div>
        <div class="grid-autfitrow-1fr border-l">
            <div class='base-pad'>
                <h3>From a land of contrast and colors.</h3>
                <p>
                    Our workshop is in the city of Aix-en-Provence, situated in the beautiful south of France.
                </p>
            </div>
            <div>
                <img 
                srcset = "{{asset('imgs/500/a_Fontayne_500.jpg')}} 1000w, {{asset('imgs/1024/a_Fontayne_1024.jpg')}}  2000w,"
                src={{asset('imgs/1024/a_Fontayne_1024.jpg')}} alt="Mont_Sainte_Victoire_resize">
            </div>
        </div>
    </section>

    <section class="separation">
    <h2>Un titre de folie</h2>
    <p>
    One of the "Les Plus Beaux Villages de France" Gordes is perched on the side of a hill overlooking the Little Luberon and makes for a dramatic sunrise picture.
    How we found this wood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.     
    </p>
    </section>

    <div class="grid-autfitcol border-b">
         <figure>
            <img style='max-height: 100vh' 
             srcset = "{{asset('imgs/800/France_ARA_26_Montbrun_les_Bains_03_800.jpg')}} 1000w, {{asset('imgs/800/France_ARA_26_Montbrun_les_Bains_03_800.jpg')}}  2000w,"
             src={{asset('imgs/1024/France_ARA_26_Montbrun_les_Bains_03_1024.jpg')}} alt="Montbrun les Bains">
        </figure> 
        <section class='flex f-col base-pad' data-aoe="fadeInUp">
            <h2>Village des Gordes</h2>
            <p>
                One of the "Les Plus Beaux Villages de France" Gordes is perched on the side of a hill overlooking the Little Luberon and makes for a dramatic sunrise picture.</br>
                How we found this wood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>
        </section>
   </div>

   <div class="grid-autfitcol border-b">
        <section class='flex f-col base-pad' data-aoe="fadeInUp">
            <h2>Fontaine de Juventus</h2>
            <p>
                One of the "Les Plus Beaux Villages de France" Gordes is perched on the side of a hill overlooking the Little Luberon and makes for a dramatic sunrise picture.</br>
                How we found this wood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p> 
        </section>

        <figure class='nopad'>
            <img style='max-height: 100vh' 
             srcset = "{{asset('imgs/800/a_eau_800.jpg')}} 1000w, 
                       {{asset('imgs/800/a_eau_800.jpg')}}  2000w,"
             src={{asset('imgs/1024/a_eau_1024.jpg')}} alt="Fréjus">  
        </figure>
    </div>
    
    <a href="{{ path('catalogue_list') }}">
        <section class="separation flex just-bet">
            <h2 class='nomarg'>Have a look at our current catalogue.</h2>
            <button class='arrow' data-aoe='fadeInLeft'>
                <svg width="161" height="31" viewBox="0 0 161 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M158.094 17.7749L-8.74228e-07 17.7749L0 12.7749L158.094 12.7749L158.094 17.7749Z" fill="#FF7222"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M155.188 15.4878L147.933 3.01407L152.255 0.500245L161 15.5359L152.234 30.0497L147.954 27.4646L155.188 15.4878Z" fill="#FF7222"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M141.188 15.4878L133.933 3.01407L138.255 0.500245L147 15.5359L138.234 30.0497L133.954 27.4646L141.188 15.4878Z" fill="#FF7222"/>
                </svg>
            </button>
        </section>
    </a>

    <section class="grid-autfitcol border-b photo">
        <img 
        style='max-height: 100vh'
        srcset = "{{asset('imgs/800/Lavender_stripes_Valensole_and_Moustiers-Sainte-Marie_800.jpg')}} 1000w, {{asset('imgs/1024/Lavender_stripes_Valensole_and_Moustiers-Sainte-Marie_1024.jpg')}}  2000w,"
        src={{asset('imgs/1024/Lavender_stripes_Valensole_and_Moustiers-Sainte-Marie_1024.jpg')}} alt="Champ de Lavande près de Valensole">
    </section>
    <section class="grid-autfitcol border-b base-pad">
    <h2>Valensole</h2>
    <p>
    One of the "Les Plus Beaux Villages de France" Gordes is perched on the side of a hill overlooking the Little Luberon and makes for a dramatic sunrise picture.
    How we found this wood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.     
    </p>
    </section>

    <div class="grid-autfitcol border-b">
        <section class='flex f-col base-pad' data-aoe="fadeInUp">
            <h1>Meet the team</h1>
            <p>With over a decade of experience in the design and construction of string instruments, we created BELLES ORIGINES in 2019. </p>
            <p>We want to harmoniously blend terroir, heritage, history and know-how - so that old wood, otherwise left to disappear, becomes the basis for our eco-design and your unique guitar.</p>
        </section>

        <section class='nopad'>
            <img src={{asset('imgs/craft.jpg')}} alt="Savoir faire">
        </section>
    </div>

{% endblock %}

{% block pagescripts %}
    <script>
        console.log('pagescript');
    </script>
{% endblock %}