templates/front/presentation.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% set currentPage = "navbar.about"|trans %}
  3. {% set whiteMenu = true %}
  4. {% block body %}
  5.     <section class="position-relative bgs-cover header-presentation first-section" style="background-image:linear-gradient(rgba(51, 51, 51, 0.5),rgba(51, 51, 51, 0.5)),url({{ asset('assets/img/Bandeau-page-about-us-entreprise_opti.jpg') }})">
  6.         <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute t-120 l-0 zi-0" alt="points icon"/>
  7.         <div class="container position-relative he-480 d-flex  align-items-center">
  8.             <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute b--50 r-0 zi-0" alt="points icon"/>
  9.             <div class="position-absolute t-20 l-20">
  10.                 {#                {% include "front/menu.html.twig" with {'menu':{("menu.presentation"|trans):path("front_presentation")} %}#}
  11.                 {% include "front/menu.html.twig" with {'menu':{("menu.presentation"|trans):"#"}} %}
  13.             </div>
  14.             <div class="position-relative">
  15.                 <h2 data-aos="fade-up"  data-aos-duration="800" class="text-left c-white fs-70 fw-600 mab-35 position-relative">
  16.                     {{'presentation.header.title'|trans|raw}}
  17.                 </h2>
  18.                 <p data-aos="fade-up"  data-aos-duration="800"data-aos-delay="200" class="mawi-380 fs-18 lh2-14 c-white">
  19.                     {{'presentation.header.intro'|trans|raw}}
  20.                 </p>
  21.             </div>
  22.         </div>
  23.     </section>
  24.     <div class="menu-sticky d-table">
  25.         <ul class="0">
  26.             {% for key, linkNav in getPresentationBloc() %}
  28.                 <li role="button" data-href="{{ linkNav }}" class=" c-9DC771-h pointer pointer c-888888  fw-600 fs-12 mab-10">
  29.                     <a class="  c-inherit  nav-sticky pointer"
  30.                        href="{{ linkNav }}">
  31.                         {{ key }}
  32.                     </a>
  33.                 </li>
  34.             {% endfor %}
  35.         </ul>
  36.     </div>
  37.     <section class="main-div" id="histories">
  38.         {% if presentation %}
  39.         <div class="pat-120  mawi-1020 mx-auto">
  40.             <div class="container text-center position-relative">
  41.                 <div data-aos="fade-in"  data-aos-duration="800" data-aos-delay="400"  class="surtitle text-center ls-custom2 c-204A9A fs-16 fw-600 text-uppercase">
  42.                     {{ "presentation.surTitle"|trans|raw }}
  43.                 </div>
  44.                 <div data-aos="fade-in"  data-aos-duration="800" data-aos-delay="400" class="position-relative mab-120-lg mab-100-md mab-70-sm mab-50 mat-25">
  45.                     <img src="{{ asset('assets/img/points_blue.svg') }}" class="grayscale position-absolute t--20 l--20 zi-0" alt="points icon"/>
  46.                     <h3 class="text-center titleh1 mab-10">
  47.                         {{ presentation.title|raw }}
  48.                     </h3>
  49.                 </div>
  50.             </div>
  51.             <div class="row max--40 fs-15 fw-500 c-8E9094 lh2-19 text-center text-lg-left">
  52.                 <div class="col-lg-6 pax-40" data-aos="fade-right"  data-aos-duration="800" data-aos-delay="200">
  53.                     {{ presentation.contentLeft|raw|nl2br }}
  54.                 </div>
  55.                 <div class="col-lg-6 pax-40" data-aos="fade-left"  data-aos-duration="800" data-aos-delay="200" >
  56.                     {{ presentation.contentRight|raw|nl2br }}
  57.                 </div>
  58.             </div>
  59.         </div>
  60.         {% endif %}
  61.         <div class="container">
  62.             {% for key, presentationParagraph in presentationParagraphs %}
  63.                 <div class="may-140-lg may-70 text-center text-lg-left">
  64.                     <div class="row align-items-center justify-content-center {% if loop.index is odd %}flex-row-reverse{% endif %}">
  65.                         <div data-aos="fade-{% if loop.index is odd %}left{% else%}right{% endif %}"  data-aos-duration="800" class="col-lg-5 fs-15 fw-500 c-8E9094 lh2-19 {% if loop.index is odd %}offset-lg-1{% endif %}">
  66.                             {{ presentationParagraph.content|raw }}
  67.                         </div>
  68.                         <div  data-aos="fade-{% if loop.index is odd %}right{% else%}left{% endif %}"  data-aos-duration="800" class="col-lg-6 col-md-7 col-sm-9 position-relative {% if loop.index is even %}offset-lg-1{% endif %}">
  69.                             <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2  t-40 r--20 zi-0" alt="points icon"/>
  70.                             <img src="{{ asset(vich_uploader_asset(presentationParagraph, 'presentationParagraphFile')) }}"
  71.                                  alt="View Point" class="br-20 "/>
  72.                             {#   <img src="{{ asset(vich_uploader_asset(presentationParagraph, 'presentationParagraphFile'))|imagine_filter('medium') }}"
  73.                                     alt="View Point" class="br-20 "/>#}
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.             {% endfor %}
  78.         </div>
  79.     </section>
  80.     <section id="values" class="pay-100 background-blue2 position-relative">
  81.         <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
  82.         <div class="position-relative zi-9">
  83.             <h3 data-aos="fade-in"  data-aos-duration="800"  class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  84.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute t--20 l--20 zi-0" alt="points icon"/>
  86.                 {{"presentation.values.title"|trans|raw}}</h3>
  87.             <p data-aos="fade-in"  data-aos-duration="800"  data-aos-delay="200" class="mawi-610 mx-auto text-center c-8C8C8C fw-500 fs-14 mab-35">
  88.                 {{"presentation.values.intro"|trans|raw}}
  89.             </p>
  90.             <div class="mat-70 container">
  91.                 <div class="row">
  92.                     {% for key, presentationValue in presentationValues %}
  93.                         <div class="col-lg-3 col-sm-6" data-aos="fade-left"  data-aos-duration="800"  data-aos-delay="{{(loop.index)*200}}">
  94.                             <div class="div-value text-center mx-auto">
  95.                                 <div class="position-relative d-flex align-items-center justify-content-center">
  96.                                     <img src="{{ asset('assets/img/hexagone.svg') }}" alt="{{ presentationValue.title }}" class="he-80 "/>
  97.                                     <img src="{{ asset(vich_uploader_asset(presentationValue, 'presentationValueFile')) }}"
  98.                                          alt="{{ presentationValue.title }}" class="position-absolute t-0 b-0 w-auto h-auto l-0 r-0 m-auto"/>
  99.                                 </div>
  100.                                 <h4 class="fs-18 c-2C3E73 fw-600 mat-20">
  101.                                     {{ presentationValue.title }}
  102.                                 </h4>
  103.                                 <div class="fs-14 c-8E9094 lh2-18">
  104.                                     {{ presentationValue.description|raw }}
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                     {% endfor %}
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </section>
  113.     <section id="team" class="pat-100 pab-120 position-relative section-grey">
  114.         <div class="position-relative zi-9">
  115.             <h3 data-aos="fade-up"  data-aos-duration="800"   class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  116.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale  t--20 l--20 zi-0" alt="points icon"/>
  117.                 {{"presentation.members.title"|trans|raw}}</h3>
  118.             <p data-aos="fade-up"  data-aos-duration="800"  data-aos-delay="200" class="mawi-610 mx-auto text-center c-8C8C8C fw-500 fs-14 mab-35">
  119.                 {{"presentation.members.intro"|trans|raw}}
  120.             </p>
  121.             <div data-aos="fade-up"  data-aos-duration="800"  data-aos-delay="400" class="container">
  122.                 {% include "front/membersList.html.twig" %}
  123.             </div>
  124.         </div>
  125.         <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif" class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  127.     </section>
  128.     <section id="partners" class="pay-100 section-grey">
  129.         <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif" class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  130.         <div class="container position-relative zi-9" data-aos="fade-in"  data-aos-duration="800"  data-aos-delay="200">
  131.             <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-70 position-relative">
  132.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale  t--20 l--20 zi-0" alt="points icon"/>
  133.                 {{"presentation.partnersList.title"|trans|raw}}</h3>
  134.             <div class="slick-partners">
  135.                 {% include "front/partnersList.html.twig" %}
  136.             </div>
  137.         </div>
  138.     </section>
  139.     <section id="distributors" class="pay-100" data-aos="fade-in"  data-aos-duration="800"  data-aos-delay="200">
  140.         <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-70 position-relative">
  141.             <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale  t--20 l--20 zi-0" alt="points icon"/>
  142.             {{"presentation.distributors.title"|trans|raw}}</h3>
  143.         <div class="container">
  145.             <div class="slick-distributors">
  146.                 {% include "front/partnersList.html.twig" with {'partners':distributors} %}
  147.             </div>
  148.         </div>
  149.     </section>
  150.     <section id="world" class="pat-100 pab-75 position-relative background-blue">
  151.         <img src="{{ asset('assets/img/motif1.png') }}" class="motif" alt="motif"/>
  152.         <div class="position-relative zi-9" data-aos="fade-down"  data-aos-duration="800"  data-aos-delay="200">
  153.             <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  154.                 {{ "contact.map.surTitle"|trans }}
  155.             </div>
  156.             <div class="position-relative mawi-440 mx-auto">
  157.                 <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute t--15 l-0 zi-0" alt="points icon"/>
  158.                 <h3 class="text-center titleh1 mab-80 position-relative zi-9 ">{{ "contact.map.title"|trans }}</h3>
  159.             </div>
  160.             <div class="container">
  162.                 {% if setting %}
  163.                     <div>
  164.                         <img src="{{ asset(vich_uploader_asset(setting, 'mapFile')) }}" alt="View Point"
  165.                              class="w-100"/>
  166.                     </div>
  167.                 {% endif %}
  168.             </div>
  169.         </div>
  170.     </section>
  171.     {% if presentation %}
  172.     <section id="iso" class="iso pay-110 text-center text-center text-md-left">
  173.         <div class="text-center">
  174. {#            <img class="wi-150" data-aos="fade-up"  data-aos-duration="800"  src="{{ asset('assets/img/afaq-iso-9001.svg') }}" alt="icone iso 9001"/>#}
  175.             <img class="wi-150" data-aos="fade-up"  data-aos-duration="800"  src="{{ asset(vich_uploader_asset(presentation, 'isoIcon')) }}" alt="icone iso 9001"/>
  176.         </div>
  177.         <h3 data-aos="fade-up"  data-aos-duration="800"  data-aos-delay="200" class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-35 mab-65 position-relative">
  178.             <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale  t--20 l--20 zi-0" alt="points icon"/>
  179.             {{ presentation.titleIso|raw }}
  180.         </h3>
  181.         <div data-aos="fade-up"  data-aos-duration="800"  data-aos-delay="400" class="fs-15 fw-500 c-8E9094 lh2-19 text-center text-md-left">
  182.             {{ presentation.contentIso|raw|nl2br }}
  183.         </div>
  184.     </section>
  185.     {% endif %}
  186.     <section id="join" class="pay-100 background-blue2 position-relative">
  187.         <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1" class="position-absolute t-0 r-0 w-100 l-0"/>
  188.         <div class="position-relative zi-9 container text-center text-md-left">
  189.             <div class="row align-items-stretch">
  190.                 <div class="col-md ">
  191.                     <div class="mawi-700">
  192.                         <div data-aos="fade-left"  data-aos-duration="800"  class="surtitle text-center text-md-left c-204A9A fs-16 fw-600 text-uppercase ls-custom3">
  193.                             {{ "presentation.resume.surTitle"|trans|raw }}
  194.                         </div>
  195.                         <h3 data-aos="fade-left"  data-aos-duration="800" data-aos-delay="200" class="text-center text-md-left  titleh1 may-20">{{ "presentation.resume.title"|trans|raw }}</h3>
  196.                         <div data-aos="fade-left"  data-aos-duration="800" data-aos-delay="400" class=" fs-15 fw-500 c-8E9094 lh2-19 ">
  197.                             {{ "presentation.resume.content"|trans|raw }}
  198.                         </div>
  199.                     </div>
  200.                 </div>
  201.                 <div class="col-md-auto mat-0-md mat-20 d-md-flex flex-column justify-content-end" data-aos="fade-left"  data-aos-duration="800" data-aos-delay="600" >
  202.                     <a href="javascript:window.location.href = 'mailto:' + ['info','viewpoint.fr'].join('@')" class="btn btn-green d-inline-block br-8 pay-15">
  203.                         {{ "presentation.resume.btn"|trans|raw }}
  204.                         <i class="fas fs-12 mal-12 fa-arrow-right" aria-hidden="true"></i>
  205.                     </a>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </section>
  210.     <section>
  212.         {% include "front/categoriesSection.html.twig" %}
  213.     </section>
  214. {% endblock %}