templates/about/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %}About us{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     {{ encore_entry_link_tags('about') }}
  8. {% endblock %}
  10. {% block body %}
  11.     <div id="about-page-background">
  12.         <div class="container-fluid d-flex flex-column flex-xxl-row position-relative py-5 text-center text-xxl-start" id="about-intro-wrapper">
  13.             <div class="col-1 col-xl-2 p-0"></div>
  14.             <div class="col-xxl-5 col-12 col-xxxl-4 position-relative pb-5 text-white" id="about-intro">
  15.                 <h1 class="mb-4">About us<span class="yellow">.</span></h1>
  16.                 <p class="fs-5 max-width-650 mx-xxl-0 mx-auto mb-4">We specialise in designing and manufacturing professional lighting equipment. We currently employ over 800 people and although each company works autonomously, our skills and markets are complementary.</p>
  17.                 <p class="fs-5 max-width-650 mx-xxl-0 mx-auto mb-4">Our products are sold throughout the world. The Group management team is passionate about developing the business for the benefit of the shareholders, employees and customers. With the energy and ability of our staff we look forward to the future with enthusiasm. Our aim is to create shareholder value through market leadership in the design, manufacture and supply of professional lighting systems.</p>
  18.                 <p class="fs-5 max-width-650 mx-xxl-0 mx-auto mb-4">We focus on long-term growth and stability, achieved by delivering market-leading products, backed by excellent customer service.</p>
  19.                 <a class="position-absolute start-50 top-100 translate-middle yellow-down-arrow" href="{{ path('about_route') }}#who-are-we" rel="nofollow">
  20.                     <img src="{{ asset('build/images/yellow-down-arrow.svg') }}" alt="yellow down arrow" id="down-arrow">
  21.                 </a>
  22.             </div>
  23.             <div class="col-12 col-xxl-6 position-relative pt-7 pt-xxl-0" id="about-circles-wrapper">
  24.                 <div class="h-100 position-relative w-100">
  25.                     <div class="about-page-circle d-inline-block bg-dark-green m-xxl-0" id="revenue-circle">
  26.                         <div class="position-absolute top-50 start-50 text-center text-white translate-middle w-80">
  27.                             <p class="fs-1 m-0">£176.7m</p>
  28.                             <p>Revenue (2023)</p>
  29.                         </div>
  30.                     </div>
  31.                     <div class="about-page-circle d-inline-block bg-light-grey m-xxl-0" id="countries-circle">
  32.                         <div class="dark-green position-absolute top-50 start-50 text-center translate-middle w-80">
  33.                             <p class="fs-1 m-0">8</p>
  34.                             <p>Countries</p>
  35.                         </div>
  36.                     </div>
  37.                     <div class="about-page-circle d-inline-block bg-light-green m-xxl-0" id="employees-circle">
  38.                         <div class="position-absolute top-50 start-50 text-center text-white translate-middle w-80">
  39.                             <p class="fs-1 m-0">900+</p>
  40.                             <p>Employees</p>
  41.                         </div>
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.             <div class="col-lg-1 p-0"></div>
  46.         </div>
  47.         <div class="container-fluid d-flex flex-column flex-xl-row mt-xxl-5 py-6" id="who-are-we">
  48.             <div class="col-md-2 col-1"></div>
  49.             <div class="col-xl-3 col-12">
  50.                 <div class="about-page-large-circle bg-dark-green position-relative text-center">
  51.                     <div class="position-absolute top-50 start-50 text-center text-white translate-middle w-80">
  52.                         <h3 class="text-uppercase yellow">Who are we?</h3>
  53.                         <p class="fs-5 text-white">We specialise in designing and manufacturing professional lighting systems.</p>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.             <div class="col-1"></div>
  58.             <div class="about-media-box bg-light-grey col-md-5 col-12 mt-xl-0 mt-4 mx-auto overflow-hidden position-relative rounded-6" id="who-we-are-media">
  59.                 <div class="about-video-wrap position-absolute h-100">
  60.                     <div class="about-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  61.                         <iframe class="w-100 h-100 homepage-video position-absolute" src="https://player.vimeo.com/video/726750162?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay" rel="nofollow noopener"></iframe>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.             <div class="col-md-2 col-1"></div>
  66.         </div>
  67.         <div class="d-flex justify-content-center">
  68.             <div class="col-10 m-auto yellow-dotted-line"></div>
  69.         </div>
  70.         <div class="container-fluid d-flex flex-column-reverse flex-xl-row py-6" id="our-purpose">
  71.             <div class="col-1 col-xxl-2"></div>
  72.             <div class="about-media-box bg-light-grey col-md-5 col-12 mt-xl-0 mt-4 mx-auto mx-xl-0 overflow-hidden position-relative rounded-6" id="our-purpose-media">
  73.                 <div class="about-video-wrap position-absolute h-100">
  74.                     <div class="about-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  75.                         <iframe class="w-100 h-100 homepage-video position-absolute" src="https://player.vimeo.com/video/726750180?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay" rel="nofollow noopener"></iframe>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.             <div class="col-1"></div>
  80.             <div class="col-xl-3 col-12">
  81.                 <div class="about-page-large-circle bg-light-green position-relative text-center">
  82.                     <div class="position-absolute top-50 start-50 text-center text-white translate-middle w-80">
  83.                         <h3 class="text-uppercase yellow">Our Purpose</h3>
  84.                         <p class="fs-5 text-white">Provide technically advanced lighting solutions that deliver long-term lowest cost of ownership.</p>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.             <div class="col-md-2 col-1"></div>
  89.         </div>
  90.         <div class="d-flex justify-content-center">
  91.             <div class="col-10 m-auto yellow-dotted-line"></div>
  92.         </div>
  93.         <div class="container-fluid d-flex flex-column flex-xl-row py-6" id="our-vision">
  94.             <div class="col-md-2 col-1"></div>
  95.             <div class="col-xl-3 col-12">
  96.                 <div class="about-page-large-circle bg-mid-green position-relative text-center">
  97.                     <div class="position-absolute top-50 start-50 text-center text-white translate-middle w-80">
  98.                         <h3 class="text-uppercase yellow">Our Vision</h3>
  99.                         <p class="fs-5 text-white">Maintain a consistently respected and profitable organisation with an environmental conscience.</p>
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.             <div class="col-md-1 col-2"></div>
  104.             <div class="about-media-box bg-light-grey col-md-5 col-12 mt-xl-0 mt-4 mx-auto overflow-hidden position-relative rounded-6" id="our-vision-media">
  105.                 <div class="about-video-wrap position-absolute h-100">
  106.                     <div class="about-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  107.                         <iframe class="w-100 h-100 homepage-video position-absolute" src="https://player.vimeo.com/video/726750205?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay" rel="nofollow noopener"></iframe>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.             <div class="col-md-2 col-1"></div>
  112.         </div>
  113.     </div>
  114. {% endblock %}