<section class="position-relative pat-100 pab-30 text-center text-md-left"> <div class="bgp-center bgs-cover w-100 h-100 position-absolute t-0 l-0 uexpmv" style="background-image:url({{ asset('assets/img/Motif.png')|imagine_filter('large') }})"> </div> <div class="container position-relative"> <img src="{{ asset('assets/img/motif point.png')|imagine_filter('small') }}" alt="View Point" class="wi-91 position-absolute t--20 l--20"/> <div class="row mab-50" data-aos="fade-up" data-aos-duration="800"> <div class="col-md-6"> <h3 class="title1">{{ "landing.categories.title"|trans|raw }}</h3> </div> <div class="col-md-6"> <div class="text"> {{ "landing.categories.intro"|trans }} </div> </div> </div> <div class="row"> {% for key, category in categories %} <div class="col-md-4 mab-50" data-aos="fade-left" data-aos-duration="800" data-aos-delay="{{(loop.index)*200}}"> <div class="catDiv pa-30-lg pa-20-md pa-55 bgc-white position-relative catDiv{{ loop.index }}" data-link> <div class="bgp-center bgs-cover w-100 h-100 catDivBackH position-absolute l-0 t-0" style="background-image:url({{ asset('assets/img/cat_back_hover.png')|imagine_filter('medium') }})"> </div> <div class="mab-20 gtyqtp position-relative d-table mx-auto-mobile"> <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone" class="wi-70 hexagonCategory {{category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue")}} "/> <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}" alt="{{ category.title }}" class="mawi-40 catIcon img-white position-absolute t-0 b-0 h-auto l-0 r-0 m-auto img-white"/> <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}" alt="{{ category.title }}" class="mawi-40 catIconHover img-white position-absolute t-0 b-0 h-auto l-0 r-0 m-auto img-white"/> </div> <div class="mab-20 gtyqtp"> </div> <h4 class="mab-10 amzkvd"> <a href="{{ path('front_products', {'catSlug':category.slug}) }}" class="title2 c-white-h"> {{ category.title }} </a> </h4> <div class="text1 xyusnr"> {{ category.description|length > 130 ? category.description|slice(0, 130) ~ '...' : category.description }} </div> </div> </div> {% endfor %} </div> </div></section>