templates/modules/app/pages/home.html.twig line 1

Open in your IDE?
  1. {% extends '@app/base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ encore_entry_link_tags('app_home') }}
  5. {% endblock %}
  7. {% block content %}
  8.     <div class="page page-home" data-page="home">
  10.         {# NAVIGATION #}
  11.         {% include '@app/includes/page_navigation.html.twig' %}
  13.         {# SLIDER #}
  14.         {% include '@app/includes/_slider.html.twig' with {
  15.             'slides' : pages.active.slides
  16.         } %}
  18.         <section id="objectifs" class="section section-objectifs">
  19.             <div class="section-container">
  20.                 <header class="section-header">
  21.                     <h1 class="section-title" data-aos="fade-right" data-aos-delay="750" data-aos-anchor="#objectifs"
  22.                         data-aos-anchor-placement="top-center">{{ pages.active.textsArray['section_objectifs_title']|replace({
  23.                             '<p>': '<span>',
  24.                             '<br></p>': '</span>',
  25.                             '</p>' : '</span>',
  26.                             '<br>' : '</span><span>'
  27.                         })|raw }}</h1>
  28.                     <div class="section-controls" data-aos="fade-right" data-aos-delay="900"
  29.                          data-aos-anchor="#objectifs" data-aos-anchor-placement="top-center">
  30.                         <a href="{{ pages.list.page_default_6059cce2657fa.translate(languages.locale).uri|path(languages) }}"
  31.                            class="btn btn-submit">{{ pages.active.textsArray['section_objectifs_link']|striptags }}</a>
  32.                     </div>
  33.                 </header>
  34.                 <div class="section-content">
  35.                     <div class="block-list">
  36.                         <div class="block" data-aos="fade-left" data-aos-delay="1050" data-aos-anchor="#objectifs"
  37.                              data-aos-anchor-placement="top-center">
  38.                             <div class="figure">
  39.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
  40.                                     <defs>
  41.                                         <style>.cls-1 {
  42.                                                 fill: none;
  43.                                                 stroke: #000;
  44.                                                 stroke-linecap: round;
  45.                                                 stroke-miterlimit: 10;
  46.                                                 stroke-width: 20px;
  47.                                             }</style>
  48.                                     </defs>
  49.                                     <title>pictos SANOA SVG</title>
  50.                                     <g id="Calque_5" data-name="Calque 5">
  51.                                         <path class="cls-1" d="M159.22,627.38V336.43a50.15,50.15,0,0,1,50-50H333.56"/>
  52.                                         <path class="cls-1"
  53.                                               d="M709.11,801.21a49.66,49.66,0,0,1-18.33,3.5H209.22a50.15,50.15,0,0,1-50-50"/>
  54.                                         <line class="cls-1" x1="740.78" y1="595.72" x2="740.78" y2="681.91"/>
  55.                                         <path class="cls-1" d="M566.44,286.43H690.78a50.15,50.15,0,0,1,50,50V470.48"/>
  56.                                         <path class="cls-1" d="M313.56,280.17a136.44,136.44,0,0,1,272.88,0"/>
  57.                                         <path class="cls-1"
  58.                                               d="M260.39,280.17c0-104.72,84.89-189.61,189.61-189.61s189.61,84.89,189.61,189.61"/>
  59.                                         <line class="cls-1" x1="450" y1="143.73" x2="450" y2="176.54"/>
  60.                                         <circle class="cls-1" cx="450" cy="330.7" r="38.26"/>
  61.                                         <line class="cls-1" x1="438.11" y1="294.34" x2="428.13" y2="258.76"/>
  62.                                         <line class="cls-1" x1="351.88" y1="185.37" x2="374.17" y2="208.13"/>
  63.                                         <line class="cls-1" x1="547.95" y1="185.37" x2="525.65" y2="208.13"/>
  64.                                         <polygon class="cls-1"
  65.                                                  points="771.28 804.58 128.72 746.55 128.72 626.64 771.28 684.66 771.28 804.58"/>
  66.                                         <polyline class="cls-1"
  67.                                                   points="523.03 663.15 771.28 579.71 771.28 459.8 262.69 637.9"/>
  68.                                         <path class="cls-1"
  69.                                               d="M200.7,633.14V330.7H301.23s43.8,3.58,43.8,47.54c0,0,.56,38,57.51,38h97.54c57,0,57.52-38,57.52-38,0-44,43.79-47.54,43.79-47.54H701.92V481.92"/>
  70.                                         <line class="cls-1" x1="701.92" y1="609.32" x2="701.92" y2="678.4"/>
  71.                                         <line class="cls-1" x1="212.63" y1="636.14" x2="212.63" y2="676.72"/>
  72.                                         <line class="cls-1" x1="331.42" y1="645.14" x2="331.42" y2="688.72"/>
  73.                                         <line class="cls-1" x1="450" y1="571.77" x2="450" y2="605.35"/>
  74.                                         <line class="cls-1" x1="508.93" y1="556.77" x2="508.93" y2="570.35"/>
  75.                                         <line class="cls-1" x1="569.32" y1="531.77" x2="569.32" y2="570.35"/>
  76.                                         <line class="cls-1" x1="628.38" y1="510.77" x2="628.38" y2="534.35"/>
  77.                                         <line class="cls-1" x1="687.29" y1="489.77" x2="687.29" y2="533.35"/>
  78.                                         <line class="cls-1" x1="271.37" y1="641.14" x2="271.37" y2="664.72"/>
  79.                                         <line class="cls-1" x1="391.49" y1="654.14" x2="391.49" y2="677.72"/>
  80.                                         <line class="cls-1" x1="450" y1="658.14" x2="450" y2="700.72"/>
  81.                                         <line class="cls-1" x1="508.93" y1="666.14" x2="508.93" y2="689.72"/>
  82.                                         <line class="cls-1" x1="569.32" y1="668.14" x2="569.32" y2="711.72"/>
  83.                                         <line class="cls-1" x1="628.38" y1="677.14" x2="628.38" y2="700.72"/>
  84.                                         <line class="cls-1" x1="687.29" y1="688.14" x2="687.29" y2="723.72"/>
  85.                                     </g>
  86.                                 </svg>
  87.                             </div>
  88.                             <div class="block-content">
  89.                                 <h2 class="block-title">{{ pages.active.textsArray['section_objectifs_item_1_title']|replace({
  90.                                         '<p>': '<span>',
  91.                                         '<br></p>': '</span>',
  92.                                         '</p>' : '</span>',
  93.                                         '<br>' : '</span><span>'
  94.                                     })|raw }}</h2>
  95.                                 <div class="block-text">{{ pages.active.textsArray['section_objectifs_item_1_text']|raw }}</div>
  96.                             </div>
  97.                         </div>
  98.                         <div class="block" data-aos="fade-left" data-aos-delay="1200" data-aos-anchor="#objectifs"
  99.                              data-aos-anchor-placement="top-center">
  100.                             <div class="figure">
  101.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
  102.                                     <defs>
  103.                                         <style>.cls-1 {
  104.                                                 fill: none;
  105.                                                 stroke: #000;
  106.                                                 stroke-linecap: round;
  107.                                                 stroke-miterlimit: 10;
  108.                                                 stroke-width: 20px;
  109.                                             }</style>
  110.                                     </defs>
  111.                                     <title>pictos SANOA SVG</title>
  112.                                     <g id="Calque_3" data-name="Calque 3">
  113.                                         <path class="cls-1"
  114.                                               d="M607.87,707.3A300.44,300.44,0,0,1,450,751.83C283.3,751.83,148.17,616.7,148.17,450S283.3,148.17,450,148.17,751.83,283.3,751.83,450a300.43,300.43,0,0,1-46.29,160.69"/>
  115.                                         <path class="cls-1"
  116.                                               d="M377.65,518.38s16.86,73.52,76.52,73.52S530.07,520,530.07,520"/>
  117.                                         <path class="cls-1"
  118.                                               d="M377.65,518.38s16.86,73.52,76.52,73.52c75.9,0,75.9-71.89,75.9-71.89"/>
  119.                                         <path class="cls-1"
  120.                                               d="M377.65,518.38s5.46,77.52,76.52,73.52C530,587.63,530.07,520,530.07,520"/>
  121.                                         <path class="cls-1"
  122.                                               d="M325.38,394.65s-.51-31.85,26.84-31.85,25.43,31.85,25.43,31.85"/>
  123.                                         <path class="cls-1"
  124.                                               d="M530,394.65s-.51-31.85,26.84-31.85,25.43,31.85,25.43,31.85"/>
  125.                                         <line class="cls-1" x1="661.78" y1="662.48" x2="661.78" y2="662.48"/>
  126.                                     </g>
  127.                                 </svg>
  128.                             </div>
  129.                             <div class="block-content">
  130.                                 <h2 class="block-title">{{ pages.active.textsArray['section_objectifs_item_2_title']|replace({
  131.                                         '<p>': '<span>',
  132.                                         '<br></p>': '</span>',
  133.                                         '</p>' : '</span>',
  134.                                         '<br>' : '</span><span>'
  135.                                     })|raw }}</h2>
  136.                                 <div class="block-text">{{ pages.active.textsArray['section_objectifs_item_2_text']|raw }}</div>
  137.                             </div>
  138.                         </div>
  139.                         <div class="block" data-aos="fade-left" data-aos-delay="1350" data-aos-anchor="#objectifs"
  140.                              data-aos-anchor-placement="top-center">
  141.                             <div class="figure">
  142.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
  143.                                     <defs>
  144.                                         <style>.cls-1 {
  145.                                                 fill: none;
  146.                                                 stroke: #000;
  147.                                                 stroke-linecap: round;
  148.                                                 stroke-miterlimit: 10;
  149.                                                 stroke-width: 20px;
  150.                                             }</style>
  151.                                     </defs>
  152.                                     <title>pictos SANOA SVG</title>
  153.                                     <g id="Calque_6" data-name="Calque 6">
  154.                                         <path class="cls-1"
  155.                                               d="M624.05,141.11c-54.2,0-103.67,21-143,60.76a242.13,242.13,0,0,0-31,38.59,242.13,242.13,0,0,0-31-38.59c-39.36-39.75-88.82-60.76-143-60.76-103.75,0-176.1,86.8-176.1,190,0,139.4,147.72,256.77,341.19,424.44a13.69,13.69,0,0,0,17.92,0C652.89,587.48,800.15,470.31,800.15,331.11c0-50.6-17.26-97.87-48.61-133.11C718.89,161.31,673.62,141.11,624.05,141.11Z"/>
  156.                                         <path class="cls-1"
  157.                                               d="M555.32,413.12H493.88V351.68a11,11,0,0,0-11-11H417.09a11,11,0,0,0-11,11v61.44H344.68a11,11,0,0,0-11,11v65.82a11,11,0,0,0,11,11h61.44v61.44a11,11,0,0,0,11,11h65.82a11,11,0,0,0,11-11V500.88h61.44a11,11,0,0,0,11-11V424.09A11,11,0,0,0,555.32,413.12Z"/>
  158.                                     </g>
  159.                                 </svg>
  160.                             </div>
  161.                             <div class="block-content">
  162.                                 <h2 class="block-title">{{ pages.active.textsArray['section_objectifs_item_3_title']|replace({
  163.                                         '<p>': '<span>',
  164.                                         '<br></p>': '</span>',
  165.                                         '</p>' : '</span>',
  166.                                         '<br>' : '</span><span>'
  167.                                     })|raw }}</h2>
  168.                                 <div class="block-text">{{ pages.active.textsArray['section_objectifs_item_3_text']|raw }}</div>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                 </div>
  173.                 <div class="design" data-0="bottom:-250px; right: calc(100% - 350px);transform:rotate(30deg);"
  174.                      data-2500="bottom:-50px; right: calc(100% - 250px);transform:rotate(0deg);" data-aos="fade-right"
  175.                      data-aos-delay="1500" data-aos-anchor="#objectifs" data-aos-anchor-placement="top-center">
  176.                     <img src="{{ asset('assets/media/images/core/orange.png') }}" alt="Orange"  loading="lazy">
  177.                 </div>
  178.             </div>
  179.         </section>
  181.         <section id="temoignages" class="section section-temoignages">
  182.             <div class="section-container">
  183.                 <header class="section-header">
  184.                     <h2 class="section-title" data-aos="fade-down" data-aos-delay="750" data-aos-anchor="#temoignages"
  185.                         data-aos-anchor-placement="top-center">{{ pages.active.textsArray['section_temoignage_title']|replace({
  186.                             '<p>': '<span>',
  187.                             '<br></p>': '</span>',
  188.                             '</p>' : '</span>',
  189.                             '<br>' : '</span><span>'
  190.                         })|raw }}</h2>
  191.                 </header>
  192.                 <div class="section-content" data-aos="fade" data-aos-delay="900" data-aos-anchor="#temoignages"
  193.                      data-aos-anchor-placement="top-center">
  195.                     <div class="block-controls">
  196.                         <div class="block-container">
  197.                             <button id="temoignages-previous" class="btn btn-previous" aria-label="Précédent">
  198.                                 <i class="fas fa-chevron-left"></i>
  199.                             </button>
  200.                             <button id="temoignages-next" class="btn btn-next" aria-label="Suivant">
  201.                                 <i class="fas fa-chevron-right"></i>
  202.                             </button>
  203.                         </div>
  204.                     </div>
  205.                     <div id="temoignages-list" class="block-list  owl-carousel owl-theme">
  206.                         {% for item in pages.active.temoignages %}
  207.                             <div class="block">
  208.                                 <div class="content">
  209.                                     <div class="loader"></div>
  210.                                     <iframe src="{{ item.redirect|replace({
  211.                                         'https://youtu.be/' : 'https://www.youtube.com/embed/',
  212.                                         'https://www.youtube.com/watch?v=' : 'https://www.youtube.com/embed/'
  213.                                     }) }}"
  214.                                             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  215.                                             allowfullscreen title="Témoignage" loading="lazy"></iframe>
  216.                                 </div>
  217.                             </div>
  218.                         {% endfor %}
  219.                     </div>
  220.                 </div>
  221.             </div>
  222.         </section>
  224.         <section id="contact" class="section section-contact" data-aos="fade-up" data-aos-delay="500"
  225.                  data-aos-anchor="#temoignages" data-aos-anchor-placement="top-center">
  226.             <div class="section-container">
  227.                 <div class="column" >
  228.                     <div class="carte" data-aos="fade-right" data-aos-delay="750" data-aos-anchor="#contact"
  229.                          data-aos-anchor-placement="top-center">
  230.                         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2866.82400176657!2d4.673381123371966!3d45.24650549129197!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f513a3e0ca7bb9%3A0x3e6e600748f7d5d0!2sSANOA%20Annonay%20-%20Centre%20Minceur!5e0!3m2!1sfr!2sfr!4v1616514202318!5m2!1sfr!2sfr"
  231.                                 style="border:0;" allowfullscreen="" loading="lazy" title="SANOA Minceur - Carte"></iframe>
  232.                     </div>
  234.                     <div  data-aos="fade-up" data-aos-delay="900" data-aos-anchor="#contact"
  235.                           data-aos-anchor-placement="top-center">
  236.                     <div class="silhouette">
  237.                         <img src="{{ asset('assets/media/images/core/silhouette.png') }}" alt="Silhouette minceur" loading="lazy">
  238.                     </div>
  239.                     </div>
  240.                 </div>
  241.                 <div class="column">
  242.                     <div class="block">
  243.                         <header class="section-header" data-aos="fade-left" data-aos-delay="750"
  244.                                 data-aos-anchor="#contact" data-aos-anchor-placement="top-center">
  245.                             <h2 class="section-title">{{ pages.active.textsArray['section_contact_title']|replace({
  246.                                     '<p>': '<span>',
  247.                                     '<br></p>': '</span>',
  248.                                     '</p>' : '</span>',
  249.                                     '<br>' : '</span><span>'
  250.                                 })|raw }}</h2>
  251.                         </header>
  252.                         <div class="section-content">
  253.                             <div class="section-controls" data-aos="fade-left" data-aos-delay="900"
  254.                                  data-aos-anchor="#contact" data-aos-anchor-placement="top-center">
  255.                                 <a href="{{ pages.list.page_default_6059cd6c8a447.translate(languages.locale).uri|path(languages) }}"
  256.                                    class="btn btn-submit">{{ pages.active.textsArray['section_contact_link']|striptags }}</a>
  257.                             </div>
  258.                             <div class="section-text" data-aos="fade-left" data-aos-delay="1050"
  259.                                  data-aos-anchor="#contact" data-aos-anchor-placement="top-center">{{ pages.active.textsArray['section_contact_text']|raw }}</div>
  260.                         </div>
  261.                     </div>
  262.                 </div>
  264.                 <div class="design" data-0="bottom:-150px; left: calc(100% - 250px);"
  265.                      data-2500="bottom:-50px; left: calc(100% - 150px);" data-aos="fade-left" data-aos-delay="1500"
  266.                      data-aos-anchor="#contact" data-aos-anchor-placement="top-center">
  267.                     <img src="{{ asset('assets/media/images/core/kiwi.png') }}" alt="Kiwi" loading="lazy">
  268.                 </div>
  269.             </div>
  270.         </section>
  273.         {# FOOTER #}
  274.         {% include '@app/includes/page_footer.html.twig' %}
  276.     </div> {# /.page-home #}
  277. {% endblock %}
  279. {% block javascripts %}
  280.     <script src="{{ asset('assets/vendor/vivus/js/vivus.min.js') }}"></script>
  282.     <script>
  283.         let home_variables = {};
  284.     </script>
  286.     {{ encore_entry_script_tags('app_home') }}
  287. {% endblock %}