templates/front/about/about.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{{ page.title }} | {{ parent() }}{% endblock %}
  3. {% block body %}
  4. <section class="parallax-section single-par" data-scrollax-parent="true">
  5.     <div class="bg" {% if page.background %}data-bg="{{ asset('/uploads/files/about/' ~ page.background) }}"{% endif %} data-scrollax="properties: { translateY: '30%' }"></div>
  6.     <div class="overlay"></div>
  7.     <div class="container">
  8.         <div class="home-intro">
  9.             <div class="section-title-separator"><span></span></div>
  10.             <h2><span class="text-capitalize">{{ page.title }}</span></h2>
  11.             <span class="section-separator"></span>
  12.             <h3 style="font-size: 1.5rem !important">{{ page.subTitle }}</h3>
  13.         </div>
  14.     </div>
  15.     <div class="header-sec-link">
  16.         <div class="container"><a href="#sec1" class="custom-scroll-link color-bg"><i class="fal fa-angle-double-down"></i></a></div>
  17.     </div>
  18. </section>
  19. <div class="breadcrumbs-fs fl-wrap">
  20.     <div class="container">
  21.         <div class="breadcrumbs fl-wrap">
  22.             <a href="#">À propos</a><span>{{ page.title }}</span>
  23.         </div>
  24.     </div>
  25. </div>
  26. <section  id="sec1" class="middle-padding">
  27.     <div class="container">
  28.         <div class="about-wrap">
  29.             <div class="row">
  30.                 <div class="col-md-6">
  31.                     <div class="video-box fl-wrap video-box-span-none">
  32.                         {% if page.image1 %}
  33.                             <img src="{{ asset('/uploads/files/about/' ~ page.image1) | imagine_filter('597x396') }}" class="respimg" alt="{{ page.title }}">
  34.                         {% else %}
  35.                             <img src="{{ asset('front/images/all/ryvup.jpeg') | imagine_filter('597x396') }}" class="respimg" alt="{{ page.title }}">
  36.                         {% endif %}                        
  37.                         {% if page.videoLink1 is defined and page.videoLink1 is not null %}
  38.                             <a class="video-box-btn image-popup" href="{{ page.videoLink1 }}"><i class="fa fa-play" aria-hidden="true"></i></a>
  39.                             <span class="video-box-title">Notre présentation vidéo</span>
  40.                         {% endif %}
  41.                     </div>
  42.                 </div>
  43.                 <div class="col-md-6">
  44.                     <div class="list-single-main-item-title fl-wrap">
  45.                         <h3>{{ page.title1|raw }}</h3>
  46.                     </div>
  47.                     <div class="control-description">
  48.                         {{ page.description1|raw }}
  49.                     </div>
  50.                     <a href="#sec2" class="btn color-bg float-btn custom-scroll-link">Voir notre équipe <i class="fal fa-users"></i></a>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         
  55.         <div class="single-facts fl-wrap">
  56.             <div class="inline-facts-wrap">
  57.                 <div class="inline-facts">
  58.                     {{ whyChooseUs.icon4|raw }}
  59.                     <div class="milestone-counter">
  60.                         <div class="stats animaper">
  61.                             <div class="num" data-content="0" data-num="{{ whyChooseUs.content4|raw }}">{{ whyChooseUs.content4|raw }}</div>
  62.                         </div>
  63.                     </div>
  64.                     <h6>{{ whyChooseUs.title4|raw }}</h6>
  65.                 </div>
  66.             </div>
  67.             <div class="inline-facts-wrap">
  68.                 <div class="inline-facts">
  69.                     {{ whyChooseUs.icon5|raw }}
  70.                     <div class="milestone-counter">
  71.                         <div class="stats animaper">
  72.                             <div class="num" data-content="0" data-num="{{ whyChooseUs.content5|raw }}">{{ whyChooseUs.content5|raw }}</div>
  73.                         </div>
  74.                     </div>
  75.                     <h6>{{ whyChooseUs.title5|raw }}</h6>
  76.                 </div>
  77.             </div>
  78.             <div class="inline-facts-wrap">
  79.                 <div class="inline-facts">
  80.                     {{ whyChooseUs.icon6|raw }}
  81.                     <div class="milestone-counter">
  82.                         <div class="stats animaper">
  83.                             <div class="num" data-content="0" data-num="{{ whyChooseUs.content6|raw }}">{{ whyChooseUs.content6|raw }}</div>
  84.                         </div>
  85.                     </div>
  86.                     <h6>{{ whyChooseUs.title6|raw }}</h6>
  87.                 </div>
  88.             </div>
  89.             <div class="inline-facts-wrap">
  90.                 <div class="inline-facts">
  91.                     {{ whyChooseUs.icon7|raw }}
  92.                     <div class="milestone-counter">
  93.                         <div class="stats animaper">
  94.                             <div class="num" data-content="0" data-num="{{ whyChooseUs.content7|raw }}">{{ whyChooseUs.content7|raw }}</div>
  95.                         </div>
  96.                     </div>
  97.                     <h6>{{ whyChooseUs.title7|raw }}</h6>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102. </section>
  103. <section class="color-bg hidden-section">
  104.     <div class="wave-bg wave-bg2"></div>
  105.     <div class="container">
  106.         <div class="section-title">
  107.             <h2>{{ whyChooseUs.title|raw }}</h2>
  108.             <span class="section-separator"></span>
  109.             <p>{{ whyChooseUs.subTitle|raw }}</p>
  110.         </div>
  111.         <div class="row">
  112.             <div class="col-md-4">
  113.                 <div class="process-item big-pad-pr-item">
  114.                     <span class="process-count"> </span>
  115.                     <div class="time-line-icon">
  116.                         {{ whyChooseUs.icon1|raw }}
  117.                     </div>
  118.                     <h4><a href="#">{{ whyChooseUs.title1|raw }}</a></h4>
  119.                     <p>{{ whyChooseUs.content1|raw }}</p>
  120.                 </div>
  121.             </div>
  122.             <div class="col-md-4">
  123.                 <div class="process-item big-pad-pr-item">
  124.                     <span class="process-count"> </span>
  125.                     <div class="time-line-icon">
  126.                         {{ whyChooseUs.icon2|raw }}
  127.                     </div>
  128.                     <h4> <a href="#">{{ whyChooseUs.title2|raw }}</a></h4>
  129.                     <p>{{ whyChooseUs.content2|raw }}</p>
  130.                 </div>
  131.             </div>
  132.             <div class="col-md-4">
  133.                 <div class="process-item big-pad-pr-item nodecpre">
  134.                     <span class="process-count"> </span>
  135.                     <div class="time-line-icon">
  136.                         {{ whyChooseUs.icon3|raw }}
  137.                     </div>
  138.                     <h4><a href="#">{{ whyChooseUs.title3|raw }}</a></h4>
  139.                     <p>{{ whyChooseUs.content3|raw }}</p>
  140.                 </div>                               
  141.             </div>
  142.         </div>
  143.     </div>
  144. </section>
  145. <section id="sec2">
  146.     <div class="container">
  147.         <div class="section-title">
  148.             <h2 class="text-capitalize">Notre équipe</h2>
  149.             <span class="section-separator"></span>
  150.             <p>Notre équipe est le cœur de Ryvup. Chaque membre est dédié à offrir un service exceptionnel et à garantir la satisfaction de nos clients. <br> Voici quelques-uns des visages derrière notre succès :</p>
  151.         </div>
  152.         <div class="team-holder section-team fl-wrap">
  153.             <div class="row">
  154.                 {% for member in team %}   
  155.                 <div class="col-4">         
  156.                     <div class="team-box">
  157.                         <div class="team-photo">
  158.                             {% if member.avatar %}
  159.                             <img src="{{ asset('/uploads/files/team/avatar/' ~ member.avatar) | imagine_filter('392x259') }}" alt="{{ member.fullName }}" class="respimg">
  160.                             {% else %}
  161.                             <img src="{{ asset('front/images/avatar/2.jpg') | imagine_filter('392x259') }}" alt="{{ member.fullName }}" class="respimg">
  162.                             {% endif %}
  163.                         </div>
  164.                         <div class="team-info">
  165.                             <div class="team-dec">
  166.                                 {{ member.iconFont|raw }}
  167.                             </div>
  168.                             <h3><a href="{{ url('app_front_member_single', {'slug': member.slug }) }}">{{ member.fullName }}</a></h3>
  169.                             <h4>{{ member.profession }}</h4>
  170.                             <div class="control-description">
  171.                                 {% if member.about|length > 360 %}
  172.                                     {{ member.about|slice(0,360)|raw }}...
  173.                                 {% else %}
  174.                                     {{ member.about|slice(0,360)|raw }}
  175.                                 {% endif %}
  176.                             </div>
  177.                             <div class="team-social">
  178.                                 <ul>
  179.                                     {% if member.facebook %}
  180.                                     <li><a href="{{ member.facebook }}" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
  181.                                     {% endif %}
  182.                                     {% if member.twitter %}
  183.                                     <li><a href="{{ member.twitter }}" target="_blank"><i class="fab fa-twitter"></i></a></li>
  184.                                     {% endif %}
  185.                                     {% if member.instagram %}
  186.                                     <li><a href="{{ member.instagram }}" target="_blank"><i class="fab fa-instagram"></i></a></li>
  187.                                     {% endif %}
  188.                                     {% if member.linkedin %}
  189.                                     <li><a href="{{ member.linkedin }}" target="_blank"><i class="fab fa-linkedin"></i></a></li>
  190.                                     {% endif %}
  191.                                 </ul>
  192.                                 {% if member.email %}
  193.                                 <a class="team-contact_link" href="mailto:{{ member.email }}"><i class="fal fa-envelope"></i></a>
  194.                                 {% endif %}
  195.                                 {% if (member.facebook is not defined or member.facebook is null) and
  196.                                     (member.twitter is not defined or member.twitter is null) and
  197.                                     (member.instagram is not defined or member.instagram is null) and
  198.                                     (member.linkedin is not defined or member.linkedin is null) and
  199.                                     (member.email is not defined or member.email is null) %}
  200.                                     <ul>
  201.                                         <li><a class="" href="#"><i class=""></i></a></li>
  202.                                     </ul>
  203.                                 {% endif %}
  204.                             </div>
  205.                         </div>
  206.                     </div>
  207.                 </div>
  208.                 {% endfor %}
  209.             </div>
  210.         </div>
  211.     </div>
  212. </section>
  213. <section class="parallax-section" data-scrollax-parent="true">
  214.     <div class="bg par-elem" {% if page.image2 %}data-bg="{{ asset('/uploads/files/about/' ~ page.image2) }}"{% endif %} data-scrollax="properties: { translateY: '30%' }"></div>
  215.     <div class="overlay"></div>
  216.     <div class="container">
  217.         <div class="intro-item fl-wrap">
  218.             <h2>{{ page.title2 }}</h2>
  219.             <h3>{{ page.subTitle2 }}</h3>
  220.             <a class="btn color-bg" href="{{ url('app_front_contact') }}">Entrer en contact <i class="fal fa-envelope"></i></a>
  221.         </div>
  222.     </div>
  223. </section>
  224. <section>
  225.     <div class="container">
  226.         <div class="section-title">
  227.             <h2>Témoignages</h2>
  228.             <span class="section-separator"></span>
  229.             <p>Lisez les témoignages de nos clients et découvrez comment Ryvup a surpassé leurs attentes avec un service de qualité</p>
  230.         </div>
  231.     </div>
  232.     <div class="clearfix"></div>
  233.     <div class="slider-carousel-wrap text-carousel-wrap fl-wrap">
  234.         <div class="swiper-button-prev sw-btn"><i class="fa fa-long-arrow-left"></i></div>
  235.         <div class="swiper-button-next sw-btn"><i class="fa fa-long-arrow-right"></i></div>
  236.         <div class="text-carousel single-carousel cur_carousel-slider-container fl-wrap">
  237.             <div class="slick-item">
  238.                 <div class="text-carousel-item">
  239.                     <div class="popup-avatar"><img src="{{ asset('front/images/avatar/1.jpg') }}" alt=""></div>
  240.                     <div class="listing-rating card-popup-rainingvis" data-starrating2="5"> </div>
  241.                     <div class="review-owner fl-wrap">Milka Antony  - <span>Happy Client</span></div>
  242.                     <p> "In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit, sed diam nonu mmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."</p>
  243.                     <a href="#" class="testim-link">Via Facebook</a>
  244.                 </div>
  245.             </div>
  246.             <div class="slick-item">
  247.                 <div class="text-carousel-item">
  248.                     <div class="popup-avatar"><img src="{{ asset('front/images/avatar/1.jpg') }}" alt=""></div>
  249.                     <div class="listing-rating card-popup-rainingvis" data-starrating2="4"> </div>
  250.                     <div class="review-owner fl-wrap">Milka Antony  - <span>Happy Client</span></div>
  251.                     <p> "In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit, sed diam nonu mmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."</p>
  252.                     <a href="#" class="testim-link">Via Facebook</a>
  253.                 </div>
  254.             </div>
  255.             <div class="slick-item">
  256.                 <div class="text-carousel-item">
  257.                     <div class="popup-avatar"><img src="{{ asset('front/images/avatar/1.jpg') }}" alt=""></div>
  258.                     <div class="listing-rating card-popup-rainingvis" data-starrating2="5"> </div>
  259.                     <div class="review-owner fl-wrap">Milka Antony  - <span>Happy Client</span></div>
  260.                     <p> "In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit, sed diam nonu mmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."</p>
  261.                     <a href="#" class="testim-link">Via Facebook</a>
  262.                 </div>
  263.             </div>
  264.             <div class="slick-item">
  265.                 <div class="text-carousel-item">
  266.                     <div class="popup-avatar"><img src="{{ asset('front/images/avatar/1.jpg') }}" alt=""></div>
  267.                     <div class="listing-rating card-popup-rainingvis" data-starrating2="5"> </div>
  268.                     <div class="review-owner fl-wrap">Milka Antony  - <span>Happy Client</span></div>
  269.                     <p> "In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit, sed diam nonu mmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."</p>
  270.                     <a href="#" class="testim-link">Via Facebook</a>
  271.                 </div>
  272.             </div>
  273.         </div>
  274.     </div>
  275.     <div class="section-decor"></div>
  276. </section>
  277. {% endblock %}