templates/front/landing.html.twig line 1

Open in your IDE?
  1. {% import "commons/components.html.twig" as comp %}
  2. {% extends "base.html.twig" %}
  3. {% block body_tag %}
  4.     {% for key, catalog in catalogs %}
  5.         data-catalog-{{ catalog.id }}="{{ asset(vich_uploader_asset(catalog, 'catalogFile')) }}"
  6.     {% endfor %}
  7. {% endblock %}
  8. {% block body %}
  9.     <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"
  10.             style="background-image:url({{ asset('assets/img/back.png')|imagine_filter('large') }})">
  11.         <div class="container">
  12.             <div class="row align-items-center text-center text-lg-left">
  13.                 <div class="col-lg-4" >
  14.                     <div class="subtitle mab-25" data-aos="fade-down" data-aos-duration="800" data-aos-delay="400">{{ "landing.header.subtitle"|trans }}</div>
  15.                     <h2 class="title" data-aos="fade-down" data-aos-duration="800" >{{ "landing.header.title"|trans }}</h2>
  16.                     <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>
  17.                     <div class="d-flex cg-15 justify-content-center-lg">
  18.                         <a href="{{ path('front_presentation') }}" class="btn btn1" data-aos="fade-right" data-aos-duration="800" data-aos-delay="1200">
  19.                             {{ "landing.header.about_us.btn"|trans }}
  20.                         </a>
  21.                         <a href="{{ path('front_contact') }}" class="btn btn2" data-aos="fade-left" data-aos-duration="800" data-aos-delay="1200">
  22.                             {{ "landing.header.contact.btn"|trans }}
  23.                             <i class="fa fa-caret-right mal-5"></i>
  24.                         </a>
  25.                     </div>
  26.                 </div>
  27.                 <div class="col-lg-8 position-relative mat-0-lg mat-20" data-aos="fade-left" data-aos-duration="800" data-aos-delay="1400">
  28.                     <img src="{{ asset('assets/img/motif point.png')|imagine_filter('medium') }}" alt="View Point"
  29.                          class="wi-91 position-absolute t-120-sm t--20 l--50 zi-9"/>
  30.                     <div class="d-none d-sm-flex max--15">
  31.                         {% for key, category in categories %}
  32.                             <div class="col-animation {{ (loop.first) ? 'activeCat' }} pax-15 ">
  33.                                 <div class="bgp-center bgs-cover d-flex align-items-end w-100 position-relative br-20 jxxgiy"
  34.                                      data-link
  35.                                      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') }})">
  36.                                     <a href="{{ path('front_products', {'catSlug':category.slug}) }}"
  37.                                        class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60 cat-slid-title">
  38.                                         {{ category.title }}
  39.                                     </a>
  40.                                     <div
  41.                                         class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60 cat-slid-rot">
  42.                                         {{ category.title }}
  43.                                     </div>
  44.                                     <div class="position-absolute r-30  b-40 cat-slid-icon">
  46.                                         <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone"
  47.                                              class="wi-70 {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }} "/>
  48.                                         <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}"
  49.                                              alt="{{ category.title }}"
  50.                                              class="img-white position-absolute t-0 b-0 wi-40 h-auto l-0 r-0 m-auto img-white"/>
  51.                                     </div>
  52.                                 </div>
  53.                             </div>
  54.                         {% endfor %}
  55.                     </div>
  56.                     <div class="d-sm-none">
  57.                         <div class="slick-categories-lan mat-50">
  58.                             {% for key, category in categories %}
  59.                                 <div class="pax-10 ">
  60.                                     <div class="bgp-center bgs-cover d-flex align-items-end w-100 position-relative br-20 jxxgiy"
  61.                                          data-link
  62.                                          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') }})">
  63.                                         <a href="{{ path('front_products', {'catSlug':category.slug}) }}"
  64.                                            class="position-absolute l-30 b-50 c-white c-white-h fw-600 fs-30 lh-60">
  65.                                             {{ category.title }}
  66.                                         </a>
  67.                                         <div class="position-absolute r-30  b-40 ">
  69.                                             <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone"
  70.                                                  class="wi-60 {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }} "/>
  71.                                             <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}"
  72.                                                  alt="{{ category.title }}"
  73.                                                  class="img-white position-absolute t-0 b-0 wi-30 h-auto l-0 r-0 m-auto img-white"/>
  74.                                         </div>
  75.                                     </div>
  76.                                 </div>
  77.                             {% endfor %}
  78.                         </div>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </header>
  84.     {% include "front/categoriesSection.html.twig" %}
  85.     <section class="pay-100-md container pay-70-md text-center text-md-left pab-50 pat-40">
  86.         <div class="row justify-content-center">
  87.             <div class="col-lg-7 col-md-6 col-8 position-relative par-70-lg" data-aos="fade-right"
  88.                  data-aos-duration="800">
  89.                 <img src="{{ asset('assets/img/motif point.png')|imagine_filter('medium') }}" alt="View Point"
  90.                      class="wi-91 position-absolute t-100 r-35"/>
  91.                 <img src="{{ asset('assets/img/landing_aboutus.png')|imagine_filter('medium') }}" alt="View Point"
  92.                      class="w-100"/>
  93.             </div>
  94.             <div class="col-lg-5 col-md-6">
  95.                 <h3 data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"
  96.                     class="title1 mab-20">{{ "landing.about_us.title"|trans|raw }}</h3>
  97.                 <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400" class="text mab-30">
  98.                     {{ "landing.about_us.intro"|trans }}
  99.                 </div>
  100.                 <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">
  101.                     <a href="{{ path('front_presentation') }}" class="btn btn1">
  102.                         {{ "landing.header.about_us.btn"|trans }}
  103.                     </a>
  104.                 </div>
  105.             </div>
  106.         </div>
  107.     </section>
  108.     <section class="pay-100 background-blue2 position-relative overflow-hidden">
  109.         <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
  110.         <div class="position-relative zi-9" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
  111.             <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  112.                 {{ "landing.lastNews.surTitle"|trans }}
  113.             </div>
  114.             <h3 class="text-center d-table mawi-360 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  115.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2  t--20 l--20 zi-0"
  116.                      alt="points icon"/>
  117.                 {{ "landing.lastNews.title"|trans|raw }}</h3>
  118.             <div class="container">
  119.                 {% include "front/postsList.html.twig" with {'landing':1} %}
  120.                 <div class="text-center">
  121.                     <a class="btn btn1" href="{{ path('front_posts') }}">{{ "landing.posts.btn"|trans }}</a>
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </section>
  126.     <section class=" section-grey section-landing-catalog position-relative overflow-hidden pat-110">
  127.         <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  128.              class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  129.         <div class="position-relative zi-9 container" data-aos="fade-up" data-aos-duration="800">
  130.             <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  131.                 {{ "landing.publications.surTitle"|trans }}
  132.             </div>
  133.             <h3 class="text-center d-table mawi-440 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  134.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2  t--20 l--20 zi-0"
  135.                      alt="points icon"/>
  136.                 {{ "landing.publications.title"|trans|raw }}</h3>
  137.             <div class="position-relative">
  138.                 <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">
  139.                     <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/>
  140.                 </div>
  141.                 <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 ">
  142.                     <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
  143.                 </div>
  144.                 <div class="slick-publications-product">
  145.                     {% include "front/publicationsList.html.twig" %}
  146.                 </div>
  147.             </div>
  148.         </div>
  149.     </section>
  150.     <div class="position-relative">
  152.         {% if catalogs %}
  153.             <div class="landing-catalog position-relative zi-9">
  154.                 <div class="container mx-auto mawi-1020">
  155.                     <div class="row justify-content-center text-center text-md-left">
  156.                         <div class="col-md-5">
  157.                             <div class="mawi-400 mx-auto-mobile">
  158.                                 <h3 data-aos="fade-up" data-aos-duration="800"
  159.                                     class=" c-333333 fs-36 fw-700 mat-0 mab-35-sm mab-15">{{ "landing.catalogue.title"|trans|raw }}</h3>
  160.                                 <p data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"
  161.                                    class="lh2-19 c-8E9094 fw-500 fs-15 mab-35-sm mab-15">
  162.                                     {{ "landing.catalogue.intro"|trans|raw }}
  163.                                 </p>
  164.                                 <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="200" class="">
  165.                                     {% include "form/landingContactForm.html.twig" %}
  166.                                 </div>
  167.                             </div>
  168.                         </div>
  169.                         <div class="col-md-6 offset-md-1 col-6 mat-15 d-none d-md-block" data-aos="fade-left"
  170.                              data-aos-duration="800">
  171.                             <div class="position-relative">
  172.                                 <img class="br-20" src="{{ asset('assets/img/catalogue.png') }}" alt="catalogue"/>
  173.                                 <img src="{{ asset('assets/img/points.svg') }}"
  174.                                      class="position-absolute t-110 r--45 zi-0" alt="points icon"/>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.         {% endif %}
  181.     </div>
  182.     <section class="pab-100 background-blue2 position-relative section-landing-blue">
  183.         <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
  184.         <div class="position-relative zi-9">
  186.             <div class="container mx-auto mawi-1020">
  187.                 <div class="row align-items-center justify-content-center">
  188.                     <div class="col-sm-6 col-9" data-aos="fade-right" data-aos-duration="800">
  189.                         <div class="position-relative">
  190.                             <img class="br-20" src="{{ asset('assets/img/worldwide.jpg') }}"
  191.                                  alt="worlwide support team"/>
  192.                             <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute t-110 r--45 zi-0"
  193.                                  alt="points icon"/>
  194.                         </div>
  195.                     </div>
  196.                     <div class="col-md-5 offset-md-1 col-sm-6 mat-15 mat-0-sm text-center text-sm-left"
  197.                          data-aos="fade-left" data-aos-duration="800">
  198.                         <div class="mawi-400 mx-auto-mobile">
  199.                             <h3 class=" c-333333 fs-38 fw-700 mat-0 mab-35">{{ "landing.support.title"|trans }}</h3>
  200.                             <p class="lh2-19 c-8E9094 fw-500 fs-15 mab-35">
  201.                                 {{ "landing.support.intro"|trans }}
  202.                             </p>
  203.                             <a href="{{ path('front_support') }}" class="btn btn1">{{ "landing.support.btn"|trans }}<i
  204.                                     class="fa-solid fa-caret-right mal-10"></i></a>
  205.                         </div>
  206.                     </div>
  207.                 </div>
  208.             </div>
  209.         </div>
  211.     </section>
  212.     <section class="pay-100 pax-80-md pax-60-sm pax-45" data-aos="fade-up" data-aos-duration="800">
  213.         <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-70 position-relative">
  214.             <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale  t--20 l--20 zi-0"
  215.                  alt="points icon"/>
  216.             {{ "landing.partners.title"|trans|raw }}</h3>
  217.         <div class="position-relative">
  218.             <div class="pointer prev-distributors-slid position-absolute l--30-sm l-0 zi-99 t-0 b-0 d-flex align-items-center">
  219.                 <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/>
  220.             </div>
  221.             <div class="pointer next-distributors-slid  position-absolute r--30-sm r-0 zi-99 t-0 b-0 d-flex align-items-center">
  222.                 <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
  223.             </div>
  224.             <div class="container-fluid ">
  225.                 <div class="slick-distributors">
  226.                     {% include "front/partnersList.html.twig" %}
  227.                 </div>
  228.             </div>
  229.         </div>
  230.     </section>
  231. {% endblock %}