{% import "commons/components.html.twig" as comp %}
{% extends "base.html.twig" %}
{% block body_tag %}
{% for key, catalog in catalogs %}
data-catalog-{{ catalog.id }}="{{ asset(vich_uploader_asset(catalog, 'catalogFile')) }}"
{% endfor %}
{% endblock %}
{% block body %}
<header class="bgp-center bgs-cover w-100 pat-150-lg pat-80 bbs-solid bc-F0F0F0 bw-1 pab-100-lg pab-70 first-section"
style="background-image:url({{ asset('assets/img/back.png')|imagine_filter('large') }})">
<div class="container">
<div class="row align-items-center text-center text-lg-left">
<div class="col-lg-4" >
<div class="subtitle mab-25" data-aos="fade-down" data-aos-duration="800" data-aos-delay="400">{{ "landing.header.subtitle"|trans }}</div>
<h2 class="title" data-aos="fade-down" data-aos-duration="800" >{{ "landing.header.title"|trans }}</h2>
<div class="mat-25 mab-40 fw-500 fs-17 lh-28 c-333333" data-aos="fade-up" data-aos-delay="800" data-aos-duration="800">{{ "landing.header.content"|trans }}</div>
<div class="d-flex cg-15 justify-content-center-lg">
<a href="{{ path('front_presentation') }}" class="btn btn1" data-aos="fade-right" data-aos-duration="800" data-aos-delay="1200">
{{ "landing.header.about_us.btn"|trans }}
</a>
<a href="{{ path('front_contact') }}" class="btn btn2" data-aos="fade-left" data-aos-duration="800" data-aos-delay="1200">
{{ "landing.header.contact.btn"|trans }}
<i class="fa fa-caret-right mal-5"></i>
</a>
</div>
</div>
<div class="col-lg-8 position-relative mat-0-lg mat-20" data-aos="fade-left" data-aos-duration="800" data-aos-delay="1400">
<img src="{{ asset('assets/img/motif point.png')|imagine_filter('medium') }}" alt="View Point"
class="wi-91 position-absolute t-120-sm t--20 l--50 zi-9"/>
<div class="d-none d-sm-flex max--15">
{% for key, category in categories %}
<div class="col-animation {{ (loop.first) ? 'activeCat' }} pax-15 ">
<div class="bgp-center bgs-cover d-flex align-items-end w-100 position-relative br-20 jxxgiy"
data-link
style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 39.06%, rgba(0, 0, 0, 0.5) 100%),url({{ asset(vich_uploader_asset(category, 'categoryFile'))|imagine_filter('medium') }})">
<a href="{{ path('front_products', {'catSlug':category.slug}) }}"
class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60 cat-slid-title">
{{ category.title }}
</a>
<div
class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60 cat-slid-rot">
{{ category.title }}
</div>
<div class="position-absolute r-30 b-40 cat-slid-icon">
<img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone"
class="wi-70 {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }} "/>
<img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}"
alt="{{ category.title }}"
class="img-white position-absolute t-0 b-0 wi-40 h-auto l-0 r-0 m-auto img-white"/>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="d-sm-none">
<div class="slick-categories-lan mat-50">
{% for key, category in categories %}
<div class="pax-10 ">
<div class="bgp-center bgs-cover d-flex align-items-end w-100 position-relative br-20 jxxgiy"
data-link
style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 39.06%, rgba(0, 0, 0, 0.5) 100%),url({{ asset(vich_uploader_asset(category, 'categoryFile'))|imagine_filter('medium') }})">
<a href="{{ path('front_products', {'catSlug':category.slug}) }}"
class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60">
{{ category.title }}
</a>
<div class="position-absolute r-30 b-40 ">
<img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone"
class="wi-60 {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }} "/>
<img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}"
alt="{{ category.title }}"
class="img-white position-absolute t-0 b-0 wi-30 h-auto l-0 r-0 m-auto img-white"/>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</header>
{% include "front/categoriesSection.html.twig" %}
<section class="pay-100-md container pay-70-md text-center text-md-left pab-50 pat-40">
<div class="row justify-content-center">
<div class="col-lg-7 col-md-6 col-8 position-relative par-70-lg" data-aos="fade-right"
data-aos-duration="800">
<img src="{{ asset('assets/img/motif point.png')|imagine_filter('medium') }}" alt="View Point"
class="wi-91 position-absolute t-100 r-35"/>
<img src="{{ asset('assets/img/landing_aboutus.png')|imagine_filter('medium') }}" alt="View Point"
class="w-100"/>
</div>
<div class="col-lg-5 col-md-6">
<h3 data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"
class="title1 mab-20">{{ "landing.about_us.title"|trans|raw }}</h3>
<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400" class="text mab-30">
{{ "landing.about_us.intro"|trans }}
</div>
<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">
<a href="{{ path('front_presentation') }}" class="btn btn1">
{{ "landing.header.about_us.btn"|trans }}
</a>
</div>
</div>
</div>
</section>
<section class="pay-100 background-blue2 position-relative overflow-hidden">
<img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
<div class="position-relative zi-9" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
{{ "landing.lastNews.surTitle"|trans }}
</div>
<h3 class="text-center d-table mawi-360 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
<img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2 t--20 l--20 zi-0"
alt="points icon"/>
{{ "landing.lastNews.title"|trans|raw }}</h3>
<div class="container">
{% include "front/postsList.html.twig" with {'landing':1} %}
<div class="text-center">
<a class="btn btn1" href="{{ path('front_posts') }}">{{ "landing.posts.btn"|trans }}</a>
</div>
</div>
</div>
</section>
<section class=" section-grey section-landing-catalog position-relative overflow-hidden pat-110">
<img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
<div class="position-relative zi-9 container" data-aos="fade-up" data-aos-duration="800">
<div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
{{ "landing.publications.surTitle"|trans }}
</div>
<h3 class="text-center d-table mawi-440 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
<img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2 t--20 l--20 zi-0"
alt="points icon"/>
{{ "landing.publications.title"|trans|raw }}</h3>
<div class="position-relative">
<div class="pointer prev-pub-slid position-absolute l--30-sm l-0 zi-99 t-0 b-0 {{ publications|length > 3 ? "d-flex" : "d-none" }} align-items-center justify-content-center">
<img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/>
</div>
<div class="pointer next-pub-slid position-absolute r--30-sm r-0 zi-99 t-0 b-0 {{ publications|length > 3 ? "d-flex" : "d-none" }} align-items-center justify-content-center ">
<img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
</div>
<div class="slick-publications-product">
{% include "front/publicationsList.html.twig" %}
</div>
</div>
</div>
</section>
<div class="position-relative">
{% if catalogs %}
<div class="landing-catalog position-relative zi-9">
<div class="container mx-auto mawi-1020">
<div class="row justify-content-center text-center text-md-left">
<div class="col-md-5">
<div class="mawi-400 mx-auto-mobile">
<h3 data-aos="fade-up" data-aos-duration="800"
class=" c-333333 fs-36 fw-700 mat-0 mab-35-sm mab-15">{{ "landing.catalogue.title"|trans|raw }}</h3>
<p data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"
class="lh2-19 c-8E9094 fw-500 fs-15 mab-35-sm mab-15">
{{ "landing.catalogue.intro"|trans|raw }}
</p>
<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="200" class="">
{% include "form/landingContactForm.html.twig" %}
</div>
</div>
</div>
<div class="col-md-6 offset-md-1 col-6 mat-15 d-none d-md-block" data-aos="fade-left"
data-aos-duration="800">
<div class="position-relative">
<img class="br-20" src="{{ asset('assets/img/catalogue.png') }}" alt="catalogue"/>
<img src="{{ asset('assets/img/points.svg') }}"
class="position-absolute t-110 r--45 zi-0" alt="points icon"/>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<section class="pab-100 background-blue2 position-relative section-landing-blue">
<img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
<div class="position-relative zi-9">
<div class="container mx-auto mawi-1020">
<div class="row align-items-center justify-content-center">
<div class="col-sm-6 col-9" data-aos="fade-right" data-aos-duration="800">
<div class="position-relative">
<img class="br-20" src="{{ asset('assets/img/worldwide.jpg') }}"
alt="worlwide support team"/>
<img src="{{ asset('assets/img/points.svg') }}" class="position-absolute t-110 r--45 zi-0"
alt="points icon"/>
</div>
</div>
<div class="col-md-5 offset-md-1 col-sm-6 mat-15 mat-0-sm text-center text-sm-left"
data-aos="fade-left" data-aos-duration="800">
<div class="mawi-400 mx-auto-mobile">
<h3 class=" c-333333 fs-38 fw-700 mat-0 mab-35">{{ "landing.support.title"|trans }}</h3>
<p class="lh2-19 c-8E9094 fw-500 fs-15 mab-35">
{{ "landing.support.intro"|trans }}
</p>
<a href="{{ path('front_support') }}" class="btn btn1">{{ "landing.support.btn"|trans }}<i
class="fa-solid fa-caret-right mal-10"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pay-100 pax-80-md pax-60-sm pax-45" data-aos="fade-up" data-aos-duration="800">
<h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-70 position-relative">
<img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale t--20 l--20 zi-0"
alt="points icon"/>
{{ "landing.partners.title"|trans|raw }}</h3>
<div class="position-relative">
<div class="pointer prev-distributors-slid position-absolute l--30-sm l-0 zi-99 t-0 b-0 d-flex align-items-center">
<img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/>
</div>
<div class="pointer next-distributors-slid position-absolute r--30-sm r-0 zi-99 t-0 b-0 d-flex align-items-center">
<img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
</div>
<div class="container-fluid ">
<div class="slick-distributors">
{% include "front/partnersList.html.twig" %}
</div>
</div>
</div>
</section>
{% endblock %}