templates/content/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'app/layout.html.twig' %}
  3. {% block content %}
  5.     {% include "app/partials/navigation/_breadcrumbs.html.twig" %}
  7.     <section class="bg-blue-200">
  8.         <div class="container grid grid-cols-12 gap-8 py-20">
  9.             <div class="col-span-12 lg:col-span-6 xl:pr-10">
  10.                 <h2 class="mb-3 text-4xl">
  11.                     {{ pimcore_input('contact-title', { placeholder: 'Kop' }) }}
  12.                 </h2>
  13.                 {% include 'areas/content-brick/partials/_wysiwyg.html.twig' %}
  14.             </div>
  15.             <div class="col-span-12 lg:col-span-6">
  16.                 <div class="grid grid-cols-12 gap-2 sm:gap-6">
  17.                     {% set buttonSlot %}
  18.                         <button
  19.                             @click="props.toggleModal"
  20.                             class="w-full h-full p-5 font-bold text-center bg-white rounded-md sm:px-4 sm:py-10 hover:drop-shadow-2xl hover:text-blue"
  21.                             data-track-button-id="conversion_requestquote"
  22.                         >
  23.                             <span class="block w-12 h-12 mx-auto sm:w-16 sm:h-16">
  24.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#0071BB" d="M32 0C14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0"/><path fill="#FEFEFE" d="M32 61.6C15.652 61.6 2.4 48.348 2.4 32S15.652 2.4 32 2.4 61.6 15.652 61.6 32 48.348 61.6 32 61.6"/><path fill="#0071BB" d="M40.702 13.52a3.202 3.202 0 0 1 3.198 3.198v3.646h4.102a3.202 3.202 0 0 1 3.198 3.198v15.513a3.202 3.202 0 0 1-3.198 3.198h-2.407v7.593l-7.593-7.593H23.296a.346.346 0 0 1-.067-.003l-.183-.006v-.025a.855.855 0 0 1-.623-.819c0-.385.261-.716.62-.819v-.037l.197.002a1.67 1.67 0 0 1 .08.003h15.388l5.182 5.182V40.57h4.112c.823 0 1.494-.67 1.494-1.494V23.562c0-.824-.67-1.494-1.494-1.494H43.9v10.163a3.202 3.202 0 0 1-3.198 3.199H25.998l-7.593 7.593V35.43h-2.407A3.202 3.202 0 0 1 12.8 32.23V16.718a3.202 3.202 0 0 1 3.198-3.198Zm0 1.704H15.998c-.823 0-1.494.67-1.494 1.494v15.513c0 .824.67 1.494 1.494 1.494h4.112v5.183l5.182-5.183h15.41c.823 0 1.493-.67 1.493-1.494V16.718c0-.823-.67-1.494-1.493-1.494Zm-2.08 12.965c.28 0 .507.228.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Zm0-4.642c.28 0 .507.228.507.508v.931c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.931c0-.28.227-.508.507-.508Zm0-4.641c.28 0 .507.227.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Z"/></g></svg>
  25.                             </span>
  26.                             <span class="inline-block mt-4">{{ 'Offerte aanvragen'|trans }}</span>
  27.                         </button>
  28.                     {% endset %}
  29.            
  30.                     {% include 'includes/partials/_rental-form.html.twig' with {
  31.                         classes: 'col-span-12 sm:col-span-6',
  32.                         buttonSlot: buttonSlot,
  33.                         requestUrl: request.url ?? null,
  34.                     } %}
  36.                     {# TODO is this e-mail string with trans the correct solution? #}
  37.                     <a href="mailto:{{ 'sales@coolworld-rentals.nl' | trans }}"
  38.                        target="_blank"
  39.                        class="block col-span-12 p-5 font-bold text-center bg-white rounded-md sm:col-span-6 sm:px-4 sm:py-10 hover:drop-shadow-2xl hover:text-blue">
  40.                         <span class="block w-12 h-12 mx-auto sm:w-16 sm:h-16">
  41.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#0071BB" d="M32 0C14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0"/><path fill="#FEFEFE" d="M32 61.6C15.652 61.6 2.4 48.348 2.4 32S15.652 2.4 32 2.4 61.6 15.652 61.6 32 48.348 61.6 32 61.6"/><path fill="#0071BB" d="M40.702 13.52a3.202 3.202 0 0 1 3.198 3.198v3.646h4.102a3.202 3.202 0 0 1 3.198 3.198v15.513a3.202 3.202 0 0 1-3.198 3.198h-2.407v7.593l-7.593-7.593H23.296a.346.346 0 0 1-.067-.003l-.183-.006v-.025a.855.855 0 0 1-.623-.819c0-.385.261-.716.62-.819v-.037l.197.002a1.67 1.67 0 0 1 .08.003h15.388l5.182 5.182V40.57h4.112c.823 0 1.494-.67 1.494-1.494V23.562c0-.824-.67-1.494-1.494-1.494H43.9v10.163a3.202 3.202 0 0 1-3.198 3.199H25.998l-7.593 7.593V35.43h-2.407A3.202 3.202 0 0 1 12.8 32.23V16.718a3.202 3.202 0 0 1 3.198-3.198Zm0 1.704H15.998c-.823 0-1.494.67-1.494 1.494v15.513c0 .824.67 1.494 1.494 1.494h4.112v5.183l5.182-5.183h15.41c.823 0 1.493-.67 1.493-1.494V16.718c0-.823-.67-1.494-1.493-1.494Zm-2.08 12.965c.28 0 .507.228.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Zm0-4.642c.28 0 .507.228.507.508v.931c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.931c0-.28.227-.508.507-.508Zm0-4.641c.28 0 .507.227.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Z"/></g></svg>
  42.                         </span>
  43.                         <span class="inline-block mt-4">{{ 'E-mail'|trans }}<br />{{ 'sales@coolworld-rentals.nl'|trans }}</span>
  44.                     </a>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </section>
  50.     {{ pimcore_area('contact-form', {
  51.         type: 'contact-form-brick',
  52.         params: {
  53.             'contact-form-brick': {
  54.                 requestUrl: request.url,
  55.             }
  56.         },
  57.     }) }}
  59.     <div class="py-10 md:py-20">
  60.         <div class="container">
  61.             <h2 class="text-4xl">{{ pimcore_input('locations-title', { placeholder: 'Titel' }) }}</h2>
  62.         </div>
  63.         
  64.         {{ pimcore_area('contact-business-card', {
  65.             type: 'contact-business-card-brick',
  66.             params: {
  67.                 'contact-business-card-brick': {
  68.                     brickBackgroundColor: 'bg-white',
  69.                 }
  70.             },
  71.         }) }}
  72.     </div>
  74.     <div class="pb-10 md:pb-20">
  75.         <div class="container">
  76.             <h3 class="mb-20 text-2xl font-normal">{{ pimcore_input('other-locations-title', { placeholder: 'Ondertitel' }) }}</h3>
  78.             {% set otherLocationsBlock = pimcore_block('other-locations', { manual: true }) %}
  79.             {% do otherLocationsBlock.start() %}
  80.                 <div class="grid items-stretch grid-cols-1 gap-8 sm:grid-cols-2">
  81.                     {% for i in otherLocationsBlock.iterator %}
  82.                         {% do otherLocationsBlock.blockConstruct() %}
  83.                             {% do otherLocationsBlock.blockStart() %}
  84.                                 {{ pimcore_area('other-location', {
  85.                                     type: 'contact-business-card-brick',
  86.                                     params: {
  87.                                         'contact-business-card-brick': {
  88.                                             sectionClass: 'h-full',
  89.                                             containerClass: 'h-full',
  90.                                             widthClass: 'h-full',
  91.                                             gridClass: 'h-full',
  92.                                             imageEnabled: false,
  93.                                         }
  94.                                     },
  95.                                 }) }}
  96.                             {% do otherLocationsBlock.blockEnd() %}
  97.                         {% do otherLocationsBlock.blockDestruct() %}
  98.                     {% endfor %}
  99.                 </div>
  100.             {% do otherLocationsBlock.end() %}
  101.         </div>
  102.     </div>
  104.     {{ pimcore_area('contact-people', {
  105.         type: 'contact-people-brick',
  106.         params: {
  107.             'contact-people-brick': {
  108.                 brickBackgroundColor: 'bg-blue-200',
  109.             }
  110.         }
  111.     }) }}
  113.     <section class="bg-blue-200">
  114.         <div class="container py-10 md:py-20">
  115.             <h2 class="mb-3 text-4xl">
  116.                 {% if editmode %}
  117.                     {{ pimcore_input('contact-links-title', { placeholder: 'Handige links' | trans }) }}
  118.                 {% else %}
  119.                     {{ pimcore_input('contact-links-title').data ?: ('Handige links' | trans) }}
  120.                 {% endif %}
  121.             </h2>
  122.             {% if editmode %}
  123.                 {% if not document.getProperty('customerserviceLink') %}
  124.                     {% embed 'app/editmodenotice.html.twig' %}
  125.                         {% block title %} Er is nog geen klantenservice link ingesteld. {% endblock %}
  126.                         {% block information %}
  127.                             Stel op de hoofdpagina van de huidige taal de 'customerserviceLink' property in.
  128.                         {% endblock %}
  129.                     {% endembed %}
  130.                 {% endif %}
  131.                 {% if not document.getProperty('calamitiesLink') %}
  132.                     {% embed 'app/editmodenotice.html.twig' %}
  133.                         {% block title %} Er is nog geen calamiteiten link ingesteld. {% endblock %}
  134.                         {% block information %}
  135.                             Stel op de hoofdpagina van de huidige taal de 'calamitiesLink' property in.
  136.                         {% endblock %}
  137.                     {% endembed %}
  138.                 {% endif %}
  140.                 {% if not document.getProperty('faqLink') %}
  141.                     {% embed 'app/editmodenotice.html.twig' %}
  142.                         {% block title %} Er is nog geen FAQ link ingesteld. {% endblock %}
  143.                         {% block information %}
  144.                             Stel op de hoofdpagina van de huidige taal de 'faqLink' property in.
  145.                         {% endblock %}
  146.                     {% endembed %}
  147.                 {% endif %}
  148.             {% endif %}
  149.             <div class="grid grid-cols-12 gap-2 mt-10 sm:gap-8">
  150.                 {% if document.getProperty('customerserviceLink') %}
  151.                     <a href="{{ document.getProperty('customerserviceLink').url | trimUrl }}" class="block col-span-6 p-5 font-bold text-center bg-white rounded-md sm:px-4 sm:py-10 sm:col-span-4 md:col-span-3 lg:col-span-2 hover:drop-shadow-2xl hover:text-blue">
  152.                         <span class="block w-12 h-12 mx-auto sm:w-16 sm:h-16">
  153.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#0071BB" d="M32 0C14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0"/><path fill="#FEFEFE" d="M32 61.6C15.652 61.6 2.4 48.348 2.4 32S15.652 2.4 32 2.4 61.6 15.652 61.6 32 48.348 61.6 32 61.6"/><path fill="#FFFFFE" d="M32.05 50.24c-8.07 0-14.672-6.603-14.672-14.673v-9.375c0-8.07 6.602-14.672 14.672-14.672s14.672 6.602 14.672 14.672v9.375c0 8.07-6.603 14.672-14.672 14.672"/><path fill="#0072BB" d="M25.95 31.475a2.15 2.15 0 1 0 0 4.298 2.15 2.15 0 0 0 0-4.298M35.97 33.624a2.15 2.15 0 1 0 4.3 0 2.15 2.15 0 0 0-4.3 0M32.035 45.817c.073.003.147.005.223.005 2.587 0 3.314-1.343 3.507-1.92.046-.09.066-.146.066-.146l-.02-.012c.015-.063.02-.1.02-.1s-1.117-.837-3.629-.837c-.057 0-.11.003-.167.004-.056 0-.11-.004-.168-.004-2.512 0-3.628.838-3.628.838s.005.036.02.099l-.02.012s.02.055.066.147c.193.576.92 1.919 3.507 1.919.076 0 .15-.002.223-.005M25.837 20.781c1.844 3.687 6.832 8.38 7.79 8.742 2.593.98 6.038 1.747 9.967 1.781v-5.762c0-6.101-4.964-11.065-11.065-11.065h-1.024c-4.866 0-9.005 3.159-10.483 7.532 1 1.077 3.29 3.233 7.135 5.195-1.25-3.509-1.309-3.39-2.32-6.423"/><path fill="#0072BB" d="M46.957 25.278h.056C46.804 17.48 40.4 11.2 32.554 11.2h-1.038c-7.847 0-14.25 6.28-14.459 14.078h.056a2.8 2.8 0 0 0-2.793 2.793v9.599a2.8 2.8 0 0 0 2.793 2.793h-.062c.008.49.04.974.096 1.451h1.923V25.848c0-7.16 5.805-12.965 12.965-12.965S45 18.688 45 25.848v12.02c-.361 2.811-.877 4.076-.877 4.076-2.252 5.08-6.748 6.8-8.304 7.254a2.538 2.538 0 0 0-4.845 1.062 2.54 2.54 0 0 0 5.08 0v-.007c6.552-1.22 9.1-5.895 9.998-8.339h.87c.056-.477.089-.961.097-1.451h-.062a2.8 2.8 0 0 0 2.793-2.793v-9.6a2.8 2.8 0 0 0-2.793-2.792"/></g></svg>
  154.                         </span>
  155.                         <span class="inline-block mt-4">{{ 'Klantenservice'|trans }}</span>
  156.                     </a>
  157.                 {% endif %}
  158.                 {% if document.getProperty('calamitiesLink') %}
  159.                     <a href="{{ document.getProperty('calamitiesLink').url | trimUrl }}" class="block col-span-6 p-5 font-bold text-center bg-white rounded-md sm:px-4 sm:py-10 sm:col-span-4 md:col-span-3 lg:col-span-2 hover:drop-shadow-2xl hover:text-blue">
  160.                         <span class="block w-12 h-12 mx-auto sm:w-16 sm:h-16">
  161.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 63"><g fill="none" fill-rule="evenodd"><path fill="#0070AD" d="M0 31.358c0 17.318 14.04 31.357 31.358 31.357s31.357-14.04 31.357-31.357C62.715 14.039 48.675 0 31.358 0 14.039 0 0 14.04 0 31.358Z"/><path fill="#FFFFFE" d="M31.358 60.363c-16.02 0-29.006-12.986-29.006-29.005 0-16.02 12.986-29.006 29.006-29.006s29.005 12.986 29.005 29.006c0 16.019-12.986 29.005-29.005 29.005"/><g><path fill="#0070AD" d="M8.63 39.052v-2.031l1.856-1.678c3.136-2.805 4.66-4.417 4.704-6.095 0-1.171-.707-2.099-2.363-2.099-1.237 0-2.319.619-3.07 1.193l-.95-2.407c1.083-.817 2.761-1.48 4.704-1.48 3.247 0 5.035 1.9 5.035 4.505 0 2.408-1.744 4.329-3.82 6.184L13.4 36.248v.044h5.41v2.76H8.631ZM26.828 33.112v-3.18c0-.861.044-1.744.11-2.672h-.088c-.464.928-.84 1.767-1.325 2.672l-1.921 3.136v.044h3.224Zm0 5.94V35.63h-6.36v-2.186l5.432-8.745h4.108v8.414h1.722v2.517h-1.722v3.423h-3.18ZM53.666 24.699v2.12l-5.918 12.234h-3.555l5.918-11.55v-.044h-6.58v-2.76z"/><path fill="#0070AD" d="M41.276 19.034a1.798 1.798 0 0 1-1.195-2.236l1.506-4.958a5.484 5.484 0 0 0-5.04 3.884 5.484 5.484 0 0 0 2.029 6.03l-5.634 18.55a5.484 5.484 0 0 0-5.04 3.883 5.484 5.484 0 0 0 2.029 6.031l1.505-4.957a1.798 1.798 0 0 1 2.237-1.194 1.798 1.798 0 0 1 1.194 2.236L33.36 51.26a5.484 5.484 0 0 0 5.04-3.884 5.484 5.484 0 0 0-2.029-6.03l5.634-18.55a5.484 5.484 0 0 0 5.04-3.883 5.484 5.484 0 0 0-2.029-6.03l-1.505 4.956a1.798 1.798 0 0 1-2.236 1.195"/><path fill="#FFFFFE" d="m64 30.463-3.881.053-3.392-10.365 3.881-1.27z"/><path fill="#0070AD" d="m52.686 17.45 6.692 3.925a.594.594 0 0 0 .583-.013.594.594 0 0 0 .317-.49l.173-7.756a.44.44 0 0 0-.257-.414.603.603 0 0 0-.546.032l-2.642 1.474a31.524 31.524 0 0 0-2.244-2.945l-1.383 1.236a29.692 29.692 0 0 1 2.002 2.616l-2.598 1.45a.603.603 0 0 0-.314.448c-.02.18.062.346.217.436"/><path fill="#0070AD" d="M51.183 52.902c-5.243 4.923-12.292 7.943-20.034 7.943-16.153 0-29.295-13.142-29.295-29.295 0-16.153 13.142-29.294 29.295-29.294 7.744 0 14.794 3.021 20.037 7.947l1.387-1.24C46.986 3.66 39.441.401 31.15.401 13.973.402 0 14.375 0 31.55 0 48.726 13.973 62.7 31.149 62.7c8.919 0 16.973-3.77 22.656-9.797h-2.622Z"/></g></g></svg>
  162.                         </span>
  163.                         <span class="inline-block mt-4">{{ 'Calamiteiten'|trans }}</span>
  164.                     </a>
  165.                 {% endif %}
  166.                 {% if document.getProperty('faqLink') %}
  167.                     <a href="{{ document.getProperty('faqLink').url | trimUrl }}" class="block col-span-6 p-5 font-bold text-center bg-white rounded-md sm:px-4 sm:py-10 sm:col-span-4 md:col-span-3 lg:col-span-2 hover:drop-shadow-2xl hover:text-blue">
  168.                         <span class="block w-12 h-12 mx-auto sm:w-16 sm:h-16">
  169.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#0071BB" d="M32 0C14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0"/><path fill="#FEFEFE" d="M32 61.6C15.652 61.6 2.4 48.348 2.4 32S15.652 2.4 32 2.4 61.6 15.652 61.6 32 48.348 61.6 32 61.6"/><path fill="#0071BB" d="M40.702 13.52a3.202 3.202 0 0 1 3.198 3.198v3.646h4.102a3.202 3.202 0 0 1 3.198 3.198v15.513a3.202 3.202 0 0 1-3.198 3.198h-2.407v7.593l-7.593-7.593H23.296a.346.346 0 0 1-.067-.003l-.183-.006v-.025a.855.855 0 0 1-.623-.819c0-.385.261-.716.62-.819v-.037l.197.002a1.67 1.67 0 0 1 .08.003h15.388l5.182 5.182V40.57h4.112c.823 0 1.494-.67 1.494-1.494V23.562c0-.824-.67-1.494-1.494-1.494H43.9v10.163a3.202 3.202 0 0 1-3.198 3.199H25.998l-7.593 7.593V35.43h-2.407A3.202 3.202 0 0 1 12.8 32.23V16.718a3.202 3.202 0 0 1 3.198-3.198Zm0 1.704H15.998c-.823 0-1.494.67-1.494 1.494v15.513c0 .824.67 1.494 1.494 1.494h4.112v5.183l5.182-5.183h15.41c.823 0 1.493-.67 1.493-1.494V16.718c0-.823-.67-1.494-1.493-1.494Zm-2.08 12.965c.28 0 .507.228.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Zm0-4.642c.28 0 .507.228.507.508v.931c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.931c0-.28.227-.508.507-.508Zm0-4.641c.28 0 .507.227.507.507v.932c0 .28-.228.507-.508.507H18.117a.508.508 0 0 1-.507-.507v-.932c0-.28.227-.507.507-.507Z"/></g></svg>
  170.                         </span>
  171.                         <span class="inline-block mt-4">{{ 'Veelgestelde vragen'|trans }}</span>
  172.                     </a>
  173.                 {% endif %}
  174.             </div>
  175.         </div>
  176.     </section>
  178.     {{ pimcore_area('contact-side-widget', {
  179.         type: 'contact-side-widget-brick'
  180.     }) }}
  182.     {#{{ pimcore_areablock('afterContentAreaBlock', {
  183.         'group' : brickGroups ?? [],
  184.         'params': areaBrickParams ?? []
  185.     }) }}#}
  187. {% endblock %}