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

{% block title 'RO\'MA Nature | Home' %}

{% block body %}
    <div class="header">
        <div class="fadeOut fadeIn owl-carousel owl-theme">
            <div class="item" data-dot="Text1">
                <div class="overlay-slide animation slide-out"></div>
                <img src="{{ asset('images/showroom.jpg') }}" alt="Showroom RO'MA Nature">
                <div class="titre-image animation-delay-2 fadeInTop">
                    <h1>
                        Venez découvrir 900m<sup>2</sup><br>
                        de sources <span class="ls">d</span>'inspiration
                    </h1>
                    <a href="{{ path('contact') }}" class="btn">Nous contacter</a>
                </div>
                <div class="decouvrir"><a href="#gammes">Découvrir</a></div>
            </div>
        </div>
    </div>

    <main>
        <div class="gammes" id="gammes">
            <div class="container">
                <div class="gamme">
                    {% for category in categories %}
                        <a href="{{ path('category.show', {slug: category.slug, id: category.id}) }}" class="btn-plus">
                            <div class="g {{ category.name|lower|replace({' ': '-', '/': '', 'é':'e'}) }}">
                                <img src="{{ asset('images/picto/picto-'~category.name|lower|replace({" ": "-", "/": "", "é":"e"})~'.png') }}" class="picto" alt="Icon dallage">
                                <h3>{{ category.name }}</h3>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="cote-deco">
            <a href="{{ path('productDeco.index') }}">
                <div class="overlay"></div>
                <div class="container">
                    <div class="coin">
                        <div class="trait"></div>
                        <div class="trait2"></div>
                    </div>
                    <div class="coin c2">
                        <div class="trait"></div>
                        <div class="trait2"></div>
                    </div>
                    <h1>Côté Déco</h1>
                    <p>
                        RO'MA Nature c'est également un cocon de retrouvailles idéal, un savant mix entre le charme<br>
                        de la matière et une décoration aux tonalités modernes.
                    </p>
                </div>
            </a>
        </div>
        <div class="entretien-actu">
            <div class="entretien">
                <a href="{{ path('productEntretien.index') }}">
                    <div class="overlay"></div>
                    <div class="container">
                        <div class="coin">
                            <div class="trait"></div>
                            <div class="trait2"></div>
                        </div>
                        <div class="coin c2">
                            <div class="trait"></div>
                            <div class="trait2"></div>
                        </div>
                        <h1>
                            L 'espace<br>
                            <span class="beige">conseil et entretien</span>
                        </h1>
                        <p>
                            Retrouvez tous nos produits et services<br>
                            pour pérenniser la beauté de votre projet.
                        </p>
                    </div>
                </a>
            </div>
            <div class="actu">
                <a href="{{ path('actuality.index') }}">
                    <div class="fond">
                        <div class="degrade"></div>
                        <div class="container">
                            <div class="coin">
                                <div class="trait"></div>
                                <div class="trait2"></div>
                            </div>
                            <div class="coin c2">
                                <div class="trait"></div>
                                <div class="trait2"></div>
                            </div>
                            <h1>
                                <span class="beige">L 'actu</span><br>
                                Ro'marquable
                            </h1>
                            <p>
                                Temps forts, promotions, nouveaux produits...<br>
                                Ne passez plus à côté de nos immanquables !
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="developpement-durable">
            <a href="{{ path('devdurable') }}">
                <div class="container">
                    <img src="images/logo-roma-dev-durable.png" class="logo" alt="logo ro'ma developpement durable">
                    <p>
                        Préférer nos produits, c'est choisir d'optimiser les ressources d'aujourd'hui pour garantir<br>
                        votre qualité de vie de demain.
                    </p>
                </div>
            </a>
        </div>
    </main>
{% endblock %}