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

{% block title %}Nos collections{% endblock %}

{% block description %}Retrouvez les meilleures marques de lunette et venez les essayer en magasin.{% endblock %}

{% block css %}
{% endblock %}

{% block body %}

    <section class="page-header parallax page-header-text-light page-header-crumbs-light overlay overlay-color-dark overlay-show overlay-op-3" data-image-src="{{ asset('/img/branche/bandeau-menu.jpg') }}" style="position: relative; overflow: hidden; height: 200px;">
        <div class="parallax-background" style="background-image:url({{ asset('/img/branche/islide3.jpg') }}); background-position:50% center; background-size:cover; height:180%; left:0px; position:absolute; top:0px; transform:translate3d(0px, -54.8571px, 0px); width:100%">&nbsp;</div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8 text-left">
                    <h1 class="text-white fs-36">Nos collections</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="container mb-9">
        <div class="row">
            <div class="col-md-12">
                <div class="v-heading-v2">
                    <h3>Choisissez votre collection</h3>
                </div>
            </div>
            <div class="col-md-6 p-35">
                <div class="tab-pane fade active show" id="image-frames">
                    <figure class="lightbox animated-overlay overlay-alt clearfix text-center">
                        <img src="{{ asset('/img/branche/solar2.jpg') }}" class="attachment-full">
                        <a href="{{ path('collection_lunettes', {'lunettes': 'lunettes-solaires'}) }}"></a>
                        <figcaption>
                            <div class="thumb-info">
                                <h4>Voir la collection</h4>
                                <i class="fa fa-eye"></i>
                            </div>
                        </figcaption>
                    </figure>
                    <div class="text-center fs-25 mt-5">
                        Solaire
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-35">
                <div class="tab-pane fade active show" id="image-frames">
                    <figure class="lightbox animated-overlay overlay-alt clearfix text-center">
                        <img src="{{ asset('/img/branche/woman2.jpg') }}" class="attachment-full">
                        <a href="{{ path('collection_lunettes', {'lunettes': 'lunettes-femme'}) }}"></a>
                        <figcaption>
                            <div class="thumb-info">
                                <h4>Voir la collection</h4>
                                <i class="fa fa-eye"></i>
                            </div>
                        </figcaption>
                    </figure>
                    <div class="text-center fs-25 mt-5">
                        Femme
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-35">
                <div class="tab-pane fade active show" id="image-frames">
                    <figure class="lightbox animated-overlay overlay-alt clearfix text-center">
                        <img src="{{ asset('/img/branche/man2.jpg') }}" class="attachment-full">
                        <a href="{{ path('collection_lunettes', {'lunettes': 'lunettes-homme'}) }}"></a>
                        <figcaption>
                            <div class="thumb-info">
                                <h4>Voir la collection</h4>
                                <i class="fa fa-eye"></i>
                            </div>
                        </figcaption>
                    </figure>
                    <div class="text-center fs-25 mt-5">
                        Homme
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-35">
                <div class="tab-pane fade active show" id="image-frames">
                    <figure class="lightbox animated-overlay overlay-alt clearfix text-center">
                        <img src="{{ asset('/img/branche/kid2.jpg') }}" class="attachment-full">
                        <a href="{{ path('collection_lunettes', {'lunettes': 'lunettes-enfant'}) }}"></a>
                        <figcaption>
                            <div class="thumb-info">
                                <h4>Voir la collection</h4>
                                <i class="fa fa-eye"></i>
                            </div>
                        </figcaption>
                    </figure>
                    <div class="text-center fs-25 mt-5">
                        Enfant
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}
{% endblock %}