templates/group-companies/zemper.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Zemper{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     {{ encore_entry_link_tags('group-companies') }}
  8. {% endblock %}
  10. {% block javascripts %}
  11.     {{ parent() }}
  12.     {{ encore_entry_script_tags('vimeo') }}
  13. {% endblock %}
  15. {% block body %}
  16.     <div class="group-company-top-banner position-relative w-100" id="zemper-top-banner">
  17.         <div class="gc-banner-media-wrap w-100 h-100">
  18.             <iframe class="h-100 group-company-top-video position-absolute" src="https://player.vimeo.com/video/714386607?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay; fullscreen" rel="nofollow noopener"></iframe>
  19.         </div>
  20.         <div class="bg-white-90 inner-circle position-absolute start-50 translate-middle">
  21.             <img class="position-absolute start-50 top-50 translate-middle wider-gc-logo" src="{{ asset('build/images/group-logos/zemper-colour.svg') }}" alt="Zemper" title="Zemper">
  22.         </div>
  23.         <img class="bottom-0 d-xl-block d-none position-absolute start-0 w-100" id="white-curves" src="{{ asset('build/images/white-curves.svg') }}" alt="white curves">
  24.         <a href="#company-info" rel="nofollow"><img src="{{ asset('build/images/yellow-down-arrow.svg') }}" alt="Yellow arrow" class="bottom-0 position-absolute start-50 translate-middle yellow-down-arrow z-index-1"></a>
  25.     </div>
  26.     <div class="bg-white container-fluid d-flex flex-column-reverse flex-xl-row py-5 py-xl-7" id="company-info">
  27.         <div class="col-1"></div>
  28.         <div class="col-xl-3 col-10 px-sm-5 px-xl-0">
  29.             <ul class="list-unstyled pb-xl-5 pt-xl-0 py-5">
  30.                 <li>
  31.                     <h3 class="mid-green">Information</h3>
  32.                 </li>
  33.                 <li class="my-1">
  34.                     <img class="d-inline gc-info-icons me-2" src="{{ asset('build/images/group-companies/location.svg') }}" alt="Location Pin">
  35.                     <p class="d-inline dark-green fs-5">Ciudad Real, Spain</p>
  36.                 </li>
  37.                 <li class="my-1">
  38.                     <img class="d-inline gc-info-icons me-2" src="{{ asset('build/images/group-companies/web-icon.svg') }}" alt="Website Icon"><a href="https://zemper.com/" class="d-inline dark-green fs-5 hover-yellow ms-1 text-decoration-none" rel="noopener">www.zemper.com</a>
  39.                 </li>
  40.             </ul>
  41.             <h4 class="mid-green text-start">Market Sectors</h4>
  42.             <ul class="dark-green list-unstyled pb-5 text-start">
  43.                 <li class="my-1">
  44.                     <img class="d-inline gc-market-icons me-2" src="{{ asset('build/images/group-companies/commercial-icon.svg') }}" alt="Commercial icon">
  45.                     <p class="d-inline fs-5">Commercial</p>
  46.                 </li>
  47.                 <li class="my-1">
  48.                     <img class="d-inline gc-market-icons me-2" src="{{ asset('build/images/group-companies/infrastructure-icon.svg') }}" alt="Infrastructure icon">
  49.                     <p class="d-inline fs-5">Infrastructure</p>
  50.                 </li>
  51.                 <li class="my-1">
  52.                     <img class="d-inline gc-market-icons me-2" src="{{ asset('build/images/group-companies/industrial-icon.svg') }}" alt="Industrial icon">
  53.                     <p class="d-inline fs-5">Industrial</p>
  54.                 </li>
  55.             </ul>
  56.             <h4 class="mid-green text-start">Key Products</h4>
  57.             <ul class="dark-green ps-4 text-start">
  58.                 <li>
  59.                     <p class="fs-5">Emergency general illumination</p>
  60.                 </li>
  61.                 <li>
  62.                     <p class="fs-5">Emergency exit signage</p>
  63.                 </li>
  64.                 <li>
  65.                     <p class="fs-5">Emergency lighting systems</p>
  66.                 </li>
  67.             </ul>
  68.         </div>
  69.         <div class="col-xl-1 d-xl-none"></div>
  70.         <div class="col-xl-6 col-12 mid-green ms-xl-3 px-sm-5 px-xl-0">
  71.             <p class="fs-5">Zemper was established in 1967 and is a leading independent producer of emergency lighting. It uses highly automated manufacturing processes and through high levels of research and development, and extensive in-house and third-party testing, supplies market leading products including wired and wireless self-testing systems.</p>
  72.             <p class="fs-5">Based in Ciudad Real, Spain and with an additional sales and distribution facility in France, revenue is derived from Spain, France and Belgium as well as other overseas territories. Modern facilities encompass all areas of product manufacturing including electronics PCB assembly, injection moulding of parts, robotic assembly, and end of line testing.</p>
  73.             <p class="fs-5">The combination of many years of market knowledge and flexible production gives Zemper a strong market position in emergency lighting in commercial, infrastructure and industrial sectors, supported by fire and safety regulations and industry specific accreditations.</p>
  74.             <div class="py-5 video-wrapper w-100" title="Zemper Overview">
  75.                 <div class="mb-3 position-relative rounded-4 vimeo-box vimeo-overlay-video" data-autoplay="1" data-vimeo-uri="714386607">
  76.                     <img class="w-100" src="{{ vimeoThumbnail('714386607', true) }}" alt="Play">
  77.                 </div>
  78.                 <h4>Zemper Overview</h4>
  79.             </div>
  80.         </div>
  81.         <div class="col-xl-1"></div>
  82.     </div>
  83. {% endblock %}