templates/page/showcase.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block body_class 'showcase-page' %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <link rel="stylesheet" href="{{ absolute_url(asset('css/app.css')) }}">
  7. {% endblock %}
  9. {% block body %}
  10.     <header class="showcase-header py-5 py-sm-4 bg-primary-dark">
  11.         <div class="container">
  12.             <div class="row row-h justify-content-between align-items-center text-center">
  13.                 <div class="col-sm-auto">
  14.                     <a href="{{ path('home') }}">
  15.                         <img src="{{ asset('images/logo.png') }}" alt="" class="img-fluid" width="105" height="105">
  16.                     </a>
  17.                 </div>
  18.                 <div class="col-sm-auto">
  19.                     <a href="#contact" class="btn btn-outline-white">
  20.                         <i class="mai me-2">mail</i> Nous contacter
  21.                     </a>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </header>
  27.     <section class="home-banner">
  28.         <div class="container">
  29.             <div class="banner">
  30.                 <div class="banner-content">
  31.                     <div class="row align-items-center">
  32.                         <div class="col-lg-7">
  33.                             <h1 class="text-size-48px mb-4">Détours <span class="text-primary">Créatifs</span></h1>
  34.                             <h2 class="fw-semibold mb-0">Vous êtes jeune ou chômeur de longue durée&nbsp;?</h2>
  35.                             <h2 class="fw-semibold">Vous perdez confiance en vous&nbsp;? Vous avez besoin de construire un projet professionnel qui vous épanouisse&nbsp;?</h2>
  36.                             <h2 class="fw-semibold text-primary mb-0">Détours Créatifs est LA solution pour vous&nbsp;!</h2>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.     </section>
  44.     <section class="home-pictos pb-12">
  45.         <div class="container">
  46.             {{ include('partials/layout/_flash_messages.html.twig') }}
  47.             <h2 class="text-center text-size-30px mb-6">Détours Créatifs,<br class="d-md-none" /> vous aide à :</h2>
  49.             {% set pictos = [
  50.                 {
  51.                     'picto': asset('images/repair-tool.png'),
  52.                     'text': 'Identifier vos atouts en vous apprenant à les valoriser'
  53.                 },
  54.                 {
  55.                     'picto': asset('images/project.png'),
  56.                     'text': 'Définir un projet professionnel qui vous enthousiasme et déterminer les étapes à réaliser pour en faire un succès'
  57.                 },
  58.                 {
  59.                     'picto': asset('images/online-learning.png'),
  60.                     'text': 'Retrouver le chemin de l’emploi grâce à des missions temporaires (Intérim ou CDD alimentaires)'
  61.                 }
  62.             ] %}
  63.             <div class="row row-h">
  64.                 {% for item in pictos %}
  65.                     <div class="col-12 col-sm">
  66.                         <div class="picto text-center position-relative pt-8 h-100">
  67.                             <img src="{{ item.picto }}" alt="" width="125" class="rounded position-absolute l-50 t-0 trans-X-n50">
  68.                             <div class="block block-300-mw px-5 pt-10 pb-5 mb-0 h-100 shadow">
  69.                                 <div class="fs-sm fw-bold">{{ item.text }}</div>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  73.                 {% endfor %}
  74.             </div>
  75.         </div>
  76.     </section>
  78.     <section class="home-testimony">
  79.         <div class="block px-0 py-11 mb-0">
  80.             <div class="container">
  81.                 <h2 class="mb-8 text-center text-size-25px">Le tout, grâce à un accompagnement humain attentif à vos besoins, <br />mixant des temps d’ateliers collectifs et de coaching individuels. </h2>
  83.                 <div class="row row-h">
  84.                     {% set testimonials = [
  85.                         {
  86.                             'avatar': asset('images/avatars/showcase-neutral.png'),
  87.                             'testimonial': 'Détours Créatifs c’est une manière de se régénérer surtout pour les personnes qui n’ont pas travaillé depuis longtemps.',
  88.                             'name': 'Catherine',
  89.                             'location': 'Talent en Auvergne Rhône-Alpes'
  90.                         }, {
  91.                             'avatar': asset('images/avatars/showcase-male.png'),
  92.                             'testimonial': 'Ca m’a donné une impulsion pour sortir de mon confort.',
  93.                             'name': 'Jules',
  94.                             'location': 'Talent en Nouvelle-Aquitaine'
  95.                         }, {
  96.                             'avatar': asset('images/avatars/showcase-female.png'),
  97.                             'testimonial': 'On vous regarde en tant qu’humain et non pas en tant que bénéficiaire du RSA ou chômeur longue durée ou bénéficiaire des restos du cœur.',
  98.                             'name': 'Florence',
  99.                             'location': 'Accompagnante en Auvergne Rhône-Alpes'
  100.                         }
  101.                     ] %}
  103.                     {% for item in testimonials %}
  104.                         <div class="col-sm col-lg-4">
  105.                             <div class="block-300-mw">
  106.                                 <div class="row row-sm row-sm-h">
  107.                                     <div class="col-xl-auto text-center">
  108.                                         <img src="{{ item.avatar }}" width="130" alt="" />
  109.                                     </div>
  110.                                     <div class="col-xl text-center text-sm-start">
  111.                                         <div class="testimony">«&nbsp;{{ item.testimonial }}&nbsp;»</div>
  112.                                         <div class="testimony-name">
  113.                                             <strong>{{ item.name }}</strong> ({{ item.location }})
  114.                                         </div>
  115.                                     </div>
  116.                                 </div>
  117.                             </div>
  118.                         </div>
  119.                     {% endfor %}
  120.                 </div>
  121.             </div>
  122.         </div>
  123.     </section>
  125.     <section class="home-business-region">
  126.         <aside class="home-business d-lg-none">
  127.             <div class="container">{{ _self.business() }}</div>
  128.         </aside>
  129.         <div class="container">
  130.             <div class="row row-0">
  131.                 <div class="col-lg-4">
  132.                     <aside class="home-business d-none d-lg-block">
  133.                         {{ _self.business() }}
  134.                     </aside>
  135.                 </div>
  136.                 <div class="col-lg-8">
  137.                     <aside class="home-regions">
  138.                         <div class="row row-h">
  139.                             <div class="col-12 d-lg-none order-1">
  140.                                 {{ _self.titleRegions() }}
  141.                             </div>
  142.                             <div class="col-lg-5 order-3 order-lg-1">
  143.                                 <div class="d-none d-lg-block mb-3">
  144.                                     {{ _self.titleRegions() }}
  145.                                 </div>
  146.                                 <div class="mb-3">
  147.                                     <label for="showcase-select-region" class="form-label">Votre contact région :</label>
  148.                                     <select name="showcase-select-region" id="showcase-select-region" class="form-select">
  149.                                         <option value=""></option>
  150.                                         {% for key, region in regions %}
  151.                                             <option value="{{ key }}">{{ region[0].name }}</option>
  152.                                         {% endfor %}
  153.                                     </select>
  154.                                 </div>
  155.                                 <div class="region-informations js-block-response d-none"></div>
  156.                             </div>
  157.                             <div class="col-lg-7 order-2 text-center">
  158.                                 {{ asset('images/france-showcase.svg')|content|raw }}
  159.                             </div>
  160.                         </div>
  161.                     </aside>
  162.                 </div>
  163.             </div>
  164.         </div>
  165.     </section>
  166.     <section class="home-contact">
  167.         <div class="container">
  168.             <div class="row justify-content-center">
  169.                 <div class="col-lg-10 col-xxl-8">
  170.                     <div class="block py-lg-8 px-lg-6" id="contact">
  171.                         <h3 class="text-size-25px text-primary row row-sm row-sm-h align-items-center mb-3">
  172.                             <span class="col-sm-auto text-center">
  173.                                 <i class="icon icon-comments text-tertiary text-size-45px"></i>
  174.                             </span>
  175.                             <span class="col text-center text-sm-start">
  176.                                 Envie de rejoindre l’aventure&nbsp;? <br class="d-none d-xl-block" />Contactez-nous&nbsp;!
  177.                             </span>
  178.                         </h3>
  179.                         {{ form_start(form) }}
  180.                             {{ form_errors(form) }}
  181.                             <div class="row">
  182.                                 {% for keys, field in form.children %}
  183.                                     {{ form_row(field) }}
  184.                                 {% endfor %}
  185.                             </div>
  186.                             <div class="form-actions justify-content-center">
  187.                                 <div class="form-action">
  188.                                     <button type="submit" class="btn btn-primary">
  189.                                         Envoyer <i class="mai ms-2">arrow_forward</i>
  190.                                     </button>
  191.                                 </div>
  192.                             </div>
  193.                         {{ form_end(form) }}
  194.                     </div>
  196.                     <h3 class="text-white row row-sm row-sm-h align-items-center justify-content-center my-8 text-size-25px">
  197.                         <span class="col-auto">
  198.                             <i class="icon icon-speaker text-tertiary text-size-44px"></i>
  199.                         </span>
  200.                         <span class="col-auto mx-lg-4 text-center text-lg-start">Suivez-nous sur les réseaux</span>
  201.                         <span class="col-auto">
  202.                             <span class="row row-sm">
  203.                                 <span class="col-auto">
  204.                                     <a href="https://www.facebook.com/D%C3%A9tours-Cr%C3%A9atifs-101679435430858/" target="_blank" class="btn rounded-circle btn-secondary btn-icon btn-size-7">
  205.                                         <i class="icon icon-facebook text-primary text-size-23px"></i>
  206.                                     </a>
  207.                                 </span>
  208.                                 <span class="col-auto">
  209.                                     <a href="https://www.instagram.com/detours.creatifs/" target="_blank" class="btn rounded-circle btn-secondary btn-icon btn-size-7">
  210.                                         <i class="icon icon-instagram text-primary text-size-23px"></i>
  211.                                     </a>
  212.                                 </span>
  213.                             </span>
  214.                         </span>
  215.                     </h3>
  216.                 </div>
  217.             </div>
  218.         </div>
  219.     </section>
  221.     {% if block('footer') %}
  222.         <footer class="footer">
  223.             {% block footer %}
  224.                 {{ include('partials/layout/_large_footer.html.twig') }}
  225.             {% endblock %}
  226.         </footer>
  227.     {% endif %}
  228. {% endblock %}
  230. {% block javascripts %}
  231.     {{ parent() }}
  232.     <script>
  233.         window.showcase_regions = {{ regions|json_encode|raw }};
  234.     </script>
  235.     <script src="{{ absolute_url(asset('js/app.js')) }}"></script>
  236. {% endblock %}
  238. {% macro titleRegions() %}
  239.     <h3 class="text-size-25px row row-sm row-sm-h align-items-center align-items-lg-start mb-3">
  240.         <span class="col-sm-auto col-lg-12 col-xl-auto text-center">
  241.             <i class="icon icon-france text-tertiary text-size-44px"></i>
  242.         </span>
  243.         <span class="col text-center text-sm-start">Une couverture nationale</span>
  244.     </h3>
  245.     <p class="fs-md fw-bold text-main-gray">Un dispositif à la couverture nationale et intégralement pris en charge (rémunéré pour les moins de 30 ans). </p>
  246.     <p class="fs-md fw-bold text-primary">Et si Détours Créatifs était une vraie opportunité pour vous&nbsp;? Contactez-nous !</p>
  247. {% endmacro %}
  249. {% macro business() %}
  250.     <h3 class="text-white text-size-25px row row-sm row-sm-h align-items-center align-items-lg-start mb-3">
  251.         <span class="col-sm-auto col-lg-12 col-xl-auto text-center">
  252.             <i class="icon icon-book text-tertiary text-size-44px"></i>
  253.         </span>
  254.         <span class="col text-center text-sm-start">
  255.             Agences d’Intérim, entreprises, et fondations
  256.         </span>
  257.     </h3>
  258.     <p class="fs-sm fw-bold text-white mb-3">
  259.         Vous souhaitez être partenaire et vous investir dans ce dispositif ?
  260.     </p>
  261.     <a href="#contact" class="d-block link text-white"><i class="mai me-2">arrow_forward</i> Contactez-nous</a>
  262.     <div class="text-center py-5">
  263.         <a href="{{ asset('images/doc_detours_creatifs_dossier_de_presse.pdf') }}" target="_blank" class="d-block">
  264.             <img src="{{ asset('images/plaquette-infos.jpg') }}" alt="" width="200">
  265.         </a>
  266.         <a href="{{ asset('images/doc_detours_creatifs_dossier_de_presse.pdf') }}" target="_blank" class="btn btn-outline-white d-inline-block mt-5">Téléchargez notre plaquette <i class="mai ms-2">arrow_forward</i></a>
  267.     </div>
  268. {% endmacro %}