templates/main/site/views/Partials/Homepage/homepageHero.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'Site' %}
  2. {% from ('main/site/views/Partials/icon.html.twig') import icon  %}
  4. <div class="gradient-pink-orange-light homepage-hero">
  5.     <div class="homepage-hero__wrapper">
  6.         <div class="container-fluid">
  7.             <h1 class="h1 title-dashed mb-0">
  8.                 <span>
  9.                     {{ 'site.home.heroV2.title'|trans | raw }}
  10.                 </span>
  11.             </h1>
  12.             <div class="homepage-hero__under-title">
  13.                 <div class="homepage-hero__under-title__clients">
  14.                     <img width="25" height="30" class="mr-2 hidden-xs" loading="lazy" src="{{ asset('/images/main/icon-shield-check.svg') }}" alt="">
  15.                     {{ 'site.home.heroV2.subtitle1'|trans }}
  16.                 </div>
  17.                 <div class="homepage-hero__under-title__rating">
  18.                     <div>{{ 'site.home.heroV2.note.part1'|trans }}{{ marketingTestimoniesInfo.averageRating|number_format(1, ',') }}/5</div>
  19.                     <div class="d-flex align-items-center ml-1 mr-1">
  20.                         <div class="rating-preview" style="--icon-size: 1.5rem; --rating: {{ marketingTestimoniesInfo.averageRating / 5 * 100 }}%"></div>
  21.                     </div>
  22.                     <div>
  23.                         <a href="{{ path('brulafine_avis_no_page')}}"> {{ 'site.home.heroV2.note.part2'|trans }}</a>
  24.                         {# ({{ marketingTestimoniesInfo.numberTestimonies }}) #}
  25.                     </div>
  26.                 </div>
  27.             </div>
  28.             <div class="row">
  29.                 <div class="col-sm-6">
  30.                     <div class="homepage-hero__image-wrapper">
  32.                         <div class="homepage-hero__image" style="width: 416px; height: 363px;">
  33.                             <picture>
  34.                                 <source srcset="{{ asset('/images/main/product/hero-'~app.request.locale~'.webp') }} 1x, {{ asset('/images/main/product/hero-'~app.request.locale~'@2x.webp') }} 1.5x" type="image/webp">
  35.                                 <source srcset="{{ asset('/images/main/product/hero-'~app.request.locale~'.png') }} 1x, {{ asset('/images/main/product/hero-'~app.request.locale~'@2x.png') }} 1.5x" type="image/png">
  36.                                 <img width="416" height="362" src="{{ asset('/images/main/product/hero-'~app.request.locale~'.png') }}" alt="{{ 'site.home.heroV2.altHeroImage'|trans }}">
  37.                             </picture>
  38.                         </div>
  40.                         <div class="homepage-hero__icons">
  41.                             {% if (app.request.locale == 'fr') %}
  42.                                 <span>
  43.                                     <img width="87" height="67" src="{{ asset('/images/main/icon-france.svg') }}" alt="">
  44.                                 </span>
  45.                             {% endif %}
  46.                             {% if app.request.locale == 'it' %}
  47.                                 <span>
  48.                                     <img src="{{ asset('/images/main/badge-new-italy.svg') }}" width="80" alt="" />
  49.                                 </span>
  50.                             {% endif %}
  51.                             <span>
  52.                                 <img width="89" height="86" src="{{ asset('/images/main/satisfait-'~app.request.locale~'.svg') }}" alt="">
  53.                             </span>
  54.                             <span>
  55.                                 <img width="96" height="28" src="{{ asset('/images/main/vegan-society.svg') }}" alt="">
  56.                             </span>
  57.                         </div>
  58.                     </div>
  59.                     <div class="homepage-hero__text">
  60.                         {{icon('info', 'mr-1 icon-18')}}
  61.                         <div>
  62.                             <span>
  63.                                 {{ 'site.home.heroV2.title2'|trans }}
  64.                             </span>
  65.                             <button class="btn-link show-more">
  66.                                 <strong>{{ 'site.home.heroV2.readmore'|trans }}</strong>
  67.                             </button>
  68.                             <span class="read-content" style="display:none">
  69.                                 {{ 'site.home.heroV2.title3'|trans({'%url_ingredients%': path('brulafine_ingredients'), '%url_ingredients_konjac%': path('brulafine_ingredients') ~ '#que-contient-c-konjac'}) | raw }}
  70.                                 <button class="btn-link show-less">
  71.                                     <strong>{{ 'site.home.heroV2.readless'|trans }}</strong>
  72.                                 </button>
  73.                             </span>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.                 <div class="col-sm-6">
  78.                     <div class="homepage-hero__video">
  79.                         {% if app.request.locale == 'it' %}
  80.                             {% set videoId = 'i7N96w1bmUY' %}
  81.                         {% elseif app.request.locale == 'es' %}
  82.                             {% set videoId = 'MpEiFmjaZ4A' %}
  83.                         {% elseif app.request.locale == 'en' %}
  84.                             {% set videoId = '8C_bK4Z6aKE' %}
  85.                         {% else %}
  86.                             {% set videoId = 'GzFqO2l-ShA' %}
  87.                         {% endif %}
  89.                          <div class="video">
  90.                             <div data-videoid="{{videoId}}" data-cover="https://i.ytimg.com/vi/{{videoId}}/maxresdefault.jpg">
  91.                             </div>
  92.                          </div>
  93.                          
  94.                         <script>
  95.                             function onPlayerReady(event) {
  96.                                 console.log("video READY")
  97.                             }
  99.                             function onPlayerStateChange(event) {
  100.                                 if (event.data == YT.PlayerState.PLAYING) {
  101.                                     if ({{gtmEnabled}}) {
  102.                                     dataLayer.push({
  103.                                         "event": "video_started"
  104.                                     }, {
  105.                                         "idVideo": videoId
  106.                                     });
  107.                                     }
  109.                                 } else {
  110.                                     console.log("video PAUSED")
  111.                                 }
  112.                             }
  113.                         </script>
  114.                     </div>
  115.                     <div class="homepage-hero__cta-wrapper">
  116.                         <div class="homepage-hero__cta">
  117.                             <a href="{{ path('brulafine_show_packs') }}" class="btn btn-lg btn-default d-inline-flex align-items-center justify-content-center mobile-cta">
  118.                                 {{icon('cart', 'mr-1')}}
  119.                                 {{ 'site.common.buttons.buyNowV2'|trans }}
  120.                             </a>
  121.                         </div>
  123.                         {# {% if (app.request.locale == 'fr') %} #}
  124.                             <a href="{{ path('brulafine_temoignage_videos') }}" class="homepage-hero__alt-video">
  125.                                 <div class="mr-2 flex-shrink-0">
  126.                                     <div class="video-cover">
  127.                                         <picture>
  128.                                             <source srcset="{{ asset('/images/main/cyrielle-thumb.webp') }} 1x, {{ asset('/images/main/cyrielle-thumb@2x.webp') }} 1.5x" type="image/webp">
  129.                                             <source srcset="{{ asset('/images/main/cyrielle-thumb.jpg') }} 1x, {{ asset('/images/main/cyrielle-thumb@2x.jpg') }} 1.5x" type="image/png">
  130.                                             <img width="80" height="52" loading="lazy" src="{{ asset('/images/main/cyrielle-thumb.jpg') }}" alt="">
  131.                                         </picture>
  132.                                     </div>
  133.                                 </div>
  134.                                 <div>
  135.                                     {{ 'site.home.heroV2.testimonieAlt.part1'|trans }}<br>
  136.                                     <span class="homepage-hero__alt-video__link">
  137.                                         {{ 'site.home.heroV2.testimonieAlt.part2'|trans }}
  138.                                     </span>
  139.                                 </div>
  140.                             </a>
  141.                         {# {% endif %} #}
  142.                     </div>
  143.                 </div>
  144.             </div>
  146.             {% if siteHasPackForNewUsers() %}
  147.                 <div class="homepage-hero__new-user">
  148.                     {{ include('main/site/views/Partials/newUserPackBanner.html.twig') }}
  149.                 </div>
  150.             {% endif %}
  151.         </div>
  152.     </div>
  153.     <div class="homepage-hero__features">
  154.         <div class="container-fluid">
  155.             {{ include('main/site/views/Partials/featurePoints.html.twig')}}
  156.         </div>
  157.     </div>
  158. </div>