templates/main/site/views/Static/temoignages.photos.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'Site' %}
  2. {% extends "main/site/views/common/base.html.twig" %}
  3. {% from ('main/site/views/Partials/icon.html.twig') import icon  %}
  6. {% block title %}
  7.     {{ 'site.testimonieVideo.pageData.title'|trans() }}
  8. {% endblock %}
  10. {% block meta_description %}
  11.     <meta name="description" content="{{ 'site.testimonieVideo.pageData.metadescription'|trans() }}">
  12. {% endblock %}
  15. {% set videoTestimonials = [
  16.     {
  17.         name: 'site.testimonieVideo.testimonies.1.name'|trans(),
  18.         cite: 'site.testimonieVideo.testimonies.1.cite'|trans(),
  19.         cite_author: 'site.testimonieVideo.testimonies.1.cite_author'|trans(),
  20.         text: 'site.testimonieVideo.testimonies.1.text'|trans(),
  21.         youtube_id: 'site.testimonieVideo.testimonies.1.youtube_id'|trans(),
  22.         youtube_cover: asset('/images/main/temoignages/before-after/laura-video.webp'),
  23.         before_after_images: [
  24.             asset('/images/main/temoignages/before-after/laura-before.webp'),
  25.             asset('/images/main/temoignages/before-after/laura-after.webp'),
  26.         ]
  27.     },
  28.     {
  29.         name: 'site.testimonieVideo.testimonies.2.name'|trans(),
  30.         cite: 'site.testimonieVideo.testimonies.2.cite'|trans(),
  31.         cite_author: 'site.testimonieVideo.testimonies.2.cite_author'|trans(),
  32.         text: 'site.testimonieVideo.testimonies.2.text'|trans(),
  33.         youtube_id: 'site.testimonieVideo.testimonies.2.youtube_id'|trans(),
  34.         youtube_cover: asset('/images/main/temoignages/before-after/ania-video.webp'),
  35.         before_after_images: [
  36.             asset('/images/main/temoignages/before-after/ania-before.webp'),
  37.             asset('/images/main/temoignages/before-after/ania-after.webp'),
  38.         ]
  39.     },
  40.     {
  41.         name: 'site.testimonieVideo.testimonies.3.name'|trans(),
  42.         cite: 'site.testimonieVideo.testimonies.3.cite'|trans(),
  43.         cite_author: 'site.testimonieVideo.testimonies.3.cite_author'|trans(),
  44.         text: 'site.testimonieVideo.testimonies.3.text'|trans(),
  45.         youtube_id: 'site.testimonieVideo.testimonies.3.youtube_id'|trans(),
  46.         youtube_cover: asset('/images/main/temoignages/before-after/armonie-video.webp'),
  47.         before_after_images: [
  48.             asset('/images/main/temoignages/before-after/armonie-before.webp'),
  49.             asset('/images/main/temoignages/before-after/armonie-after.webp'),
  50.         ]
  51.     },
  52.     {
  53.         name: 'site.testimonieVideo.testimonies.4.name'|trans(),
  54.         cite: 'site.testimonieVideo.testimonies.4.cite'|trans(),
  55.         cite_author: 'site.testimonieVideo.testimonies.4.cite_author'|trans(),
  56.         text: 'site.testimonieVideo.testimonies.4.text'|trans(),
  57.         youtube_id: 'site.testimonieVideo.testimonies.4.youtube_id'|trans(),
  58.         youtube_cover: asset('/images/main/temoignages/before-after/cyrielle-video.webp'),
  59.         before_after_images: [
  60.             asset('/images/main/temoignages/before-after/cyrielle-before.webp'),
  61.             asset('/images/main/temoignages/before-after/cyrielle-after.webp'),
  62.         ]
  63.     },
  64. ] %}
  66. {% block page_content %}
  67.     <div class="content" role="main">
  69.         {% include "main/site/views/Partials/Heroes/heroBrulafine.html.twig" with {
  70.                 headerTag: "p"
  71.             } %}
  73.         {% if siteHasPackForNewUsers() %}
  74.             <div class="container-fluid mt-2">
  75.                 {{ include('main/site/views/Partials/newUserPackBanner.html.twig')}}
  76.             </div>
  77.         {% endif %}
  78.         <div class="section pb-0">
  79.             <div class="container-fluid">
  80.                 <div class="section__title mb-0">
  81.                     <h1 class="text-center underline-bottom mb-2">{{'site.testimonieVideo.mainTitle'|trans()}}{% if affiliateForLegalNotices(tracking) %}<sup>*</sup>{% endif %}</h1>
  82.                     
  83.                     {% if affiliateForLegalNotices(tracking) %}
  84.                         <p class="text-center font-xs text-gray">{{'site.testimonieVideo.mainLegal'|trans()}}</p>
  85.                     {% endif %}
  86.                 </div>
  87.             </div>
  89.             {% macro nameWithTestimoniePreffix(name) %}
  90.                 {% if name|first|lower in ['a', 'e', 'i', 'o', 'u', 'y' ] %}
  91.                     <span>
  92.                         {{'site.testimonieVideo.testimonieOf.option1'|trans({'%name%': name | capitalize})}}
  93.                     </span>
  94.                 {% else %}
  95.                     <span>
  96.                         {{'site.testimonieVideo.testimonieOf.option2'|trans({'%name%': name | capitalize})}}
  97.                     </span>
  98.                 {% endif %}
  99.             {% endmacro %}
  101.             <div class="container-fluid">
  102.                 {% for item in videoTestimonials|slice(0, 2) %}
  103.                     <div class="section section--small">
  105.                         <h3 class="h2 mb-0" {% if loop.index == 2 %} style="text-align: right" {% endif %}>
  106.                             {{ _self.nameWithTestimoniePreffix(item.name) }} {% if affiliateForLegalNotices(tracking) %}<sup>*</sup>{% endif %}
  107.                         </h3>
  108.                         {% if affiliateForLegalNotices(tracking) %}
  109.                         <p class="mb-4 font-xs text-gray" {% if loop.index == 2 %} style="text-align: right" {% endif %}>
  110.                             {{'site.testimonieVideo.legalText'|trans()}}
  111.                         </p>
  112.                         {% endif %}
  113.                         <div class="row row--flex">
  114.                             <div class="col-sm-6" {% if loop.index == 1 %} style="order: 2" {% endif %}>
  115.                                 <figure class="wow fadeInLeft mb-3">
  116.                                     <a
  117.                                         href="https://www.youtube.com/watch?v={{ item.youtube_id }}" class="swipebox video-cover" rel="youtube">
  118.                                         {# <img src="http://img.youtube.com/vi/{{ item.youtube_id }}/maxresdefault.jpg" alt=""> #}
  119.                                         <img src="{{ item.youtube_cover }}" alt="{{item.name}}">
  120.                                     </a>
  121.                                 </figure>
  122.                             </div>
  123.                             <div class="col-sm-6">
  124.                                 <div class="wow fadeInLeft" data-wow-delay=".3s">
  125.                                     <div {% if loop.index == 2 %} style="text-align: right" {% endif %}>
  126.                                         <p class="mb-1">
  127.                                             <em style="font-size: 1.125rem; color: black;">
  128.                                                 "{{item.cite}}"
  129.                                             </em>
  130.                                         </p>
  131.                                         <p class="font-xs">
  132.                                             {{item.cite_author}}
  133.                                         </p>
  134.                                     </div>
  135.                                     <div>
  136.                                         {{item.text | raw}}
  137.                                     </div>
  138.                                 </div>
  139.                                 <div class="wow fadeInBottom" data-wow-delay=".5s">
  140.                                     <p {% if loop.index == 2 %} style="text-align: right" {% endif %}>
  141.                                         <a href="#" class="btn btn-outline-primary d-inline-flex align-items-center justify-items-center" data-modal-testimonial="{{ item.name }}">
  142.                                             <span class="mr-1" style="pointer-events: none;">
  143.                                                 {{icon('photo')}}
  144.                                             </span>
  145.                                             {{'site.testimonieVideo.viewPhotos'|trans()}}
  146.                                         </a>
  147.                                     </p>
  148.                                 </div>
  149.                             </div>
  150.                         </div>
  153.                     </div>
  154.                     {% if loop.index == 1 %}
  155.                         <hr class="mb-0 mt-0"/>
  156.                     {% endif %}
  158.                 {% endfor %}
  159.             </div>
  160.         </div>
  162.         <div class="section section--small gradient-pink-orange-light">
  163.             <div class="container-fluid">
  164.                 <p class="text-center text-primary wow fadeInBottom">
  165.                     <svg class="icon icon-128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110.098" height="98.969" viewbox="0 0 110.098 98.969">
  166.                         <defs>
  167.                             <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientunits="objectBoundingBox">
  168.                                 <stop offset="0" stop-color="#e81d67"/>
  169.                                 <stop offset="1" stop-color="#f59e0b"/>
  170.                             </linearGradient>
  171.                         </defs>
  172.                         <g id="Group_437" data-name="Group 437" transform="translate(5057.646 -7415.851)">
  173.                             <path id="Path_465" data-name="Path 465" d="M609.239,620.773a2.221,2.221,0,0,1-1.576-.646l-17.078-17.1a13.053,13.053,0,0,1-3.677-7.152l-.108-.687,14.6-14.6.687.108a12.838,12.838,0,0,1,2.276.593,13.126,13.126,0,0,1,4.862,3.084l.027.027.027-.027a13.07,13.07,0,0,1,4.876-3.084,13.175,13.175,0,0,1,17.59,11.448c.027.323.04.646.04.956a13.1,13.1,0,0,1-3.865,9.32l-17.105,17.1A2.234,2.234,0,0,1,609.239,620.773Zm-.337-2.559Zm.673,0ZM589.7,596.1a10.434,10.434,0,0,0,2.8,5.024l16.755,16.755,16.755-16.755a10.4,10.4,0,0,0,3.071-7.408c0-.242-.013-.512-.027-.768a10.493,10.493,0,0,0-17.873-6.64l-1.939,1.939-1.939-1.939a10.279,10.279,0,0,0-3.865-2.451,11.159,11.159,0,0,0-1.145-.337Z" transform="translate(-5579.333 6894.046)" fill="url(#linear-gradient)"/>
  174.                             <path id="Path_466" data-name="Path 466" d="M125.88,620.844a2.221,2.221,0,0,1-1.576-.646l-17.092-17.1a13.183,13.183,0,0,1,0-18.64,13.167,13.167,0,0,1,18.627,0l.027.027.027-.027a13.071,13.071,0,0,1,4.876-3.084,11.473,11.473,0,0,1,1.158-.35l.741-.189,15.5,15.489-.189.741a13.134,13.134,0,0,1-3.448,6.034l-17.092,17.092A2.2,2.2,0,0,1,125.88,620.844Zm-.337-2.559Zm.673,0Zm-9.684-34.978a10.4,10.4,0,0,0-7.408,3.071,10.485,10.485,0,0,0,0,14.829l16.755,16.755,16.755-16.768a10.525,10.525,0,0,0,2.532-4.068l-13.28-13.28c-.067.027-.135.04-.2.067a10.5,10.5,0,0,0-3.879,2.451L125.88,588.3l-1.939-1.939a10.28,10.28,0,0,0-3.865-2.451A10.529,10.529,0,0,0,116.533,583.307Z" transform="translate(-5161 6893.976)" fill="url(#linear-gradient)"/>
  175.                             <path id="Path_467" data-name="Path 467" d="M285.99,393.994a2.692,2.692,0,0,1-1.913-.795l-26.748-26.735A19.852,19.852,0,0,1,285.4,338.383l.579.579.579-.579a19.526,19.526,0,0,1,7.34-4.647,19.863,19.863,0,0,1,26.493,17.253c.04.485.054.97.054,1.441a19.669,19.669,0,0,1-5.818,14.034L287.9,393.213A2.7,2.7,0,0,1,285.99,393.994Zm-14.613-58.723a17.149,17.149,0,0,0-12.135,29.28l26.735,26.735c.013.013.013.013.027,0l26.735-26.735a17.021,17.021,0,0,0,5.024-12.135q0-.626-.04-1.253a17.155,17.155,0,0,0-29.254-10.883l-2.492,2.492L283.5,340.3a17.057,17.057,0,0,0-12.122-5.024Z" transform="translate(-5289.203 7108.596)" fill="url(#linear-gradient)"/>
  176.                             <path id="Path_468" data-name="Path 468" d="M311.979,457.572a13.6,13.6,0,0,1,.013-1.657,12.1,12.1,0,0,1,.781-3.515l2.519.956a9.66,9.66,0,0,0-.606,2.748c-.027.431-.027.862-.013,1.293Z" transform="translate(-5341.51 7004.909)" fill="#f23978"/>
  177.                             <path id="Path_469" data-name="Path 469" d="M340.8,399.022l-1.9-1.9a12.3,12.3,0,0,1,8.741-3.623v2.694A9.494,9.494,0,0,0,340.8,399.022Z" transform="translate(-5364.821 7055.876)" fill="#f23978"/>
  178.                             <path id="Path_470" data-name="Path 470" d="M712.09,165.661a1.593,1.593,0,0,1-1.522-1.1l-.229-.727a10.554,10.554,0,0,0-7.138-6.9l-.943-.269a1.606,1.606,0,0,1,0-3.084l.364-.108a10.606,10.606,0,0,0,7.354-7.664,1.623,1.623,0,0,1,1.468-1.226,1.6,1.6,0,0,1,1.589,1.024l.431,1.131a10.6,10.6,0,0,0,7.031,6.424l1.414.391a1.6,1.6,0,0,1,1.172,1.549,1.573,1.573,0,0,1-1.172,1.535l-.875.242a10.5,10.5,0,0,0-7.273,7.165l-.135.444a1.6,1.6,0,0,1-1.508,1.145C712.1,165.661,712.1,165.661,712.09,165.661Zm-1.037-1.913Zm-5.185-8.687a13.234,13.234,0,0,1,6.209,5.98,13.113,13.113,0,0,1,5.993-5.872,13.352,13.352,0,0,1-6.451-5.993A13.347,13.347,0,0,1,705.868,155.061Zm-2.855,1.1Zm7.515-9.59Z" transform="translate(-5678.238 7271.271)" fill="url(#linear-gradient)"/>
  179.                             <path id="Path_471" data-name="Path 471" d="M140.619,253.454a1.5,1.5,0,0,1-1.428-1.037l-.148-.444a5.89,5.89,0,0,0-3.987-3.852l-.566-.162a1.5,1.5,0,0,1-1.091-1.441,1.483,1.483,0,0,1,1.091-1.441l.229-.067a5.925,5.925,0,0,0,4.108-4.283,1.506,1.506,0,0,1,1.374-1.145,1.491,1.491,0,0,1,1.5.97l.256.687a5.928,5.928,0,0,0,3.933,3.6l.862.242a1.495,1.495,0,0,1-.013,2.882l-.525.148a5.873,5.873,0,0,0-4.067,4l-.081.269a1.5,1.5,0,0,1-1.414,1.077Zm-1.145-1.845Zm-1.576-5.158a8.546,8.546,0,0,1,2.721,2.613,8.472,8.472,0,0,1,2.532-2.505,8.7,8.7,0,0,1-2.8-2.626A8.741,8.741,0,0,1,137.9,246.451Zm8.108,1.212Zm-10.775,0Zm10.775-2.29Z" transform="translate(-5186.999 7189.067)" fill="url(#linear-gradient)"/>
  180.                         </g>
  181.                     </svg>
  183.                 </p>
  184.                 <h2 class="h3 text-center mb-2">{{'site.testimonieVideo.titleCta'|trans()}}</h2>
  185.                 <p class="text-center mb-0">
  186.                     <a href="{{ path('brulafine_show_packs') }}" class="btn btn-lg btn-default">{{'site.testimonieVideo.buttonCta'|trans()}}</a>
  187.                 </p>
  188.             </div>
  189.         </div>
  190.         <div class="section pb-2">
  191.             <div class="container-fluid">
  192.                 <h2 class="h1 underline-bottom text-center">{{'site.testimonieVideo.titleViewMore'|trans()}}</h2>
  193.                 <div class="row row--flex">
  194.                     {% for item in videoTestimonials|slice(2, videoTestimonials|length) %}
  195.                         <div class="col-sm-6 mb-5">
  196.                             <div class="d-flex flex-column" style="height:100%">
  197.                                 <figure class="wow fadeInBottom mb-2">
  199.                                     <a
  200.                                         href="https://www.youtube.com/watch?v={{item.youtube_id}}" class="swipebox video-cover" rel="youtube">
  201.                                         {# <img src="http://img.youtube.com/vi/{{item.youtube_id}}/maxresdefault.jpg" alt=""> #}
  202.                                         <img src="{{ item.youtube_cover }}" alt="{{item.name}}">
  203.                                     </a>
  204.                                 </figure>
  206.                                 <div class="wow fadeInBottom" data-wow-delay=".3s" style="flex-grow: 1;">
  207.                                     <h3 class="h3 mb-0 text-center">
  208.                                         {{ _self.nameWithTestimoniePreffix(item.name) }}{% if affiliateForLegalNotices(tracking) %}<sup>*</sup>{% endif %}
  209.                                     </h3>
  210.                                     {% if affiliateForLegalNotices(tracking) %}
  211.                                     <p class="mb-3 font-xs text-gray text-center" style="max-width: 80%; margin: 0 auto">
  212.                                         {{'site.testimonieVideo.legalText'|trans()}}
  213.                                     </p>
  214.                                     {% endif %}
  216.                                     <p class="text-center mb-1">
  217.                                         <em style="font-size: 1.125rem; color: black;">
  218.                                             "{{item.cite}}"
  219.                                         </em>
  220.                                     </p>
  221.                                     <p class="font-xs text-center">
  222.                                         {{item.cite_author}}
  223.                                     </p>
  224.                                     <div class="font-sm">
  225.                                         {{item.text | raw}}
  226.                                     </div>
  227.                                 </div>
  228.                                 <div class="text-center wow fadeInBottom" data-wow-delay=".5s">
  229.                                     <p>
  230.                                         <a href="#" class="btn btn-outline-primary d-inline-flex align-items-center justify-items-center" data-modal-testimonial="{{ item.name }}">
  231.                                             <span class="mr-1" style="pointer-events: none;">
  232.                                                 {{icon('photo')}}
  233.                                             </span>
  234.                                             {{'site.testimonieVideo.viewPhotos'|trans()}}
  235.                                         </a>
  236.                                     </p>
  237.                                 </div>
  238.                             </div>
  240.                         </div>
  241.                     {% endfor %}
  242.                 </div>
  243.             </div>
  244.         </div>
  247.     </div>
  248. {% endblock %}
  249. {% block page_modals %}
  250.     <div id="before-after-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="beforeAfterModal" aria-hidden="true">
  251.         <div class="modal-dialog modal-lg">
  252.             <div class="modal-content">
  253.                 <div class="modal-header pb-0">
  254.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  255.                 </div>
  256.                 <div class="modal-body">
  257.                     <div class="temoignage-images-list">
  258.                         <div class="row mb-3" data-testimonial-photos></div>
  259.                     </div>
  260.                     <h5 class="h4 text-center mb-1">{{ 'site.testimonieVideo.title4'|trans }}</h5>
  261.                     <p class="text-center">
  262.                         <a href="{{ path('brulafine_show_packs') }}" class="btn btn-lg btn-default d-inline-flex align-items-center justify-content-center">
  263.                             {{icon('cart', 'mr-1')}}
  264.                             {{ 'site.common.buttons.buyNowV2'|trans }}
  265.                         </a>
  266.                     </p>
  267.                 </div>
  268.             </div>
  269.         </div>
  270.     </div>
  271. {% endblock %}
  272. {% block javascripts %}
  273.     {{ parent() }}
  274.     <script defer>
  276.         const testimonials = {{ videoTestimonials | json_encode | raw }};
  278. const textPhotoOf = "{{ 'site.testimonieVideo.title3.part1'|trans }}";
  279. const textBefore = "{{ 'site.testimonieVideo.title3.part2'|trans }}";
  280. const textAfter = "{{ 'site.testimonieVideo.title3.part3'|trans }}";
  281. const textEnd = "{{ 'site.testimonieVideo.title3.part4' |trans }}";
  283. const columnText = (name, index) => {
  284. return `<h3 class="h4 text-center">
  285.                     ${textPhotoOf} ${name}
  286.                     <br />
  287.                     <span class="h2 text-primary">
  288.                         ${
  289. index === 0 ? textBefore : textAfter
  290. } ${textEnd}
  291.                     </span>
  292.                 </h3>`
  293. };
  295. (function () {
  296. const modalTriggers = document.querySelectorAll('[data-modal-testimonial]');
  297. const modalPhotos = document.querySelector('[data-testimonial-photos]');
  299. function showModal(e) {
  300. e.preventDefault();
  301. const testimonialName = e.target.getAttribute('data-modal-testimonial');
  302. const testimonial = testimonials.find(t => t.name === testimonialName);
  303. modalPhotos.innerHTML = testimonial.before_after_images.map((img, index) => `
  304.                                     <div class="col-sm-6 mb-2">
  305.                                         ${
  306. columnText(testimonial.name, index)
  307. }
  308.                                         <img src="${img}" alt="" />
  309.                                     </div>`).join('');
  310. $('#before-after-modal').modal('show');
  311. }
  313. modalTriggers.forEach(trigger => trigger.addEventListener('click', showModal));
  314. })();
  315.     </script>
  316. {% endblock %}