templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     {{ encore_entry_link_tags('home') }}
  6. {% endblock %}
  8. {% block javascripts %}
  9.     {{ parent() }}
  10.     {{ encore_entry_script_tags('homejs') }}
  11.     {{ encore_entry_script_tags('vimeo') }}
  12. {% endblock %}
  14. {% block body %}
  15.     <div id="carouselExampleIndicators" class="carousel slide carousel-fade"
  16.             data-bs-ride="carousel">
  17.         <div class="carousel-indicators">
  18.             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  19.             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  20.             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  21.         </div>
  22.         <div class="carousel-inner">
  23.             <div class="bg-mid-green carousel-item active" data-bs-interval="10000">
  24.                 <div class="carousel-content d-flex flex-column-reverse flex-xl-row position-relative pt-5 w-100 z-index-1" id="who-we-are-slide">
  25.                     <div class="col-xl-1"></div>
  26.                     <div class="col-xl-4 col-10 homepage-banner-text-container">
  27.                         <h2 class="fs-4 text-uppercase yellow">Who we are</h2>
  28.                         <p class="fw-light fs-1 lh-sm max-width-650 pb-4 text-white">We specialise in designing and manufacturing professional lighting systems<span class="yellow">.</span>
  29.                         </p>
  30.                         <a class="btn white-border" href="{{ path('about_route') }}#who-are-we" rel="nofollow">Learn more</a>
  31.                     </div>
  32.                     <div class="col-xl-1"></div>
  33.                     <div class="bg-white col-xl-5 col-10 homepage-media-frame mb-3 mb-xl-0 mt-xl-5 position-relative rounded-5">
  34.                         <div class="home-video-wrap position-absolute h-100">
  35.                             <div class="home-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  36.                                 <iframe class="w-100 h-100 about-video position-absolute" src="https://player.vimeo.com/video/726750162?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay; fullscreen" rel="nofollow noopener"></iframe>
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                     <div class="col-xl-1"></div>
  41.                 </div>
  42.                 <img src="{{ asset('build/images/home/dark-green-curve-l.svg') }}" alt="dark green curve" class="dark-green-curve-l">
  43.                 <img src="{{ asset('build/images/home/light-green-curve-r.svg') }}" alt="light green curve" class="light-green-curve-r">
  44.             </div>
  45.             <div class="bg-dark-green carousel-item" data-bs-interval="10000">
  46.                 <div class="carousel-content d-flex flex-column-reverse flex-xl-row position-relative pt-5 w-100 z-index-1" id="purpose-slide">
  47.                     <div class="col-xl-1"></div>
  48.                     <div class="col-xl-4 col-10 homepage-banner-text-container">
  49.                         <h2 class="fs-4 text-uppercase yellow">Our purpose</h2>
  50.                         <p class="fw-light fs-1 lh-sm max-width-650 pb-4 text-white">To provide technically advanced lighting solutions that deliver long-term lowest cost of ownership<span class="yellow">.</span>
  51.                         </p>
  52.                         <a class="btn white-border" href="{{ path('about_route') }}#our-purpose" rel="nofollow">Learn more</a>
  53.                     </div>
  54.                     <div class="col-xl-1"></div>
  55.                     <div class="bg-white col-xl-5 col-10 homepage-media-frame mb-3 mb-xl-0 mt-xl-5 position-relative rounded-5">
  56.                         <div class="home-video-wrap position-absolute h-100">
  57.                             <div class="home-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  58.                                 <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; fullscreen" rel="nofollow noopener"></iframe>
  59.                             </div>
  60.                         </div>
  61.                     </div>
  62.                     <div class="col-xl-1"></div>
  63.                 </div>
  64.                 <img src="{{ asset('build/images/home/mid-green-curve-l.svg') }}" alt="mid green curve" class="mid-green-curve-l">
  65.                 <img src="{{ asset('build/images/home/light-green-curve-r.svg') }}" alt="light green curve" class="light-green-curve-r">
  66.             </div>
  67.             <div class="bg-light-green carousel-item" data-bs-interval="10000">
  68.                 <div class="carousel-content d-flex flex-column-reverse flex-xl-row position-relative pt-5 w-100 z-index-1" id="vision-slide">
  69.                     <div class="col-xl-1"></div>
  70.                     <div class="col-xl-4 col-10 homepage-banner-text-container">
  71.                         <h2 class="fs-4 text-uppercase yellow">Our vision</h2>
  72.                         <p class="fw-light fs-1 lh-sm max-width-650 pb-4 text-white">To maintain a consistently respected and profitable organisation with an environmental conscience<span class="yellow">.</span>
  73.                         </p>
  74.                         <a class="btn white-border" href="{{ path('about_route') }}#our-vision" rel="nofollow">Learn more</a>
  75.                     </div>
  76.                     <div class="col-xl-1"></div>
  77.                     <div class="bg-white col-xl-5 col-10 homepage-media-frame mb-3 mb-xl-0 mt-xl-5 position-relative rounded-5">
  78.                         <div class="home-video-wrap position-absolute h-100">
  79.                             <div class="home-video-embed w-100 h-100 top-0 bottom-0 start-0 end-0">
  80.                                 <iframe class="w-100 h-100 homepage-video" src="https://player.vimeo.com/video/726750205?background=1&amp;controls=0&amp;quality=1080p" allow="autoplay; fullscreen" rel="nofollow noopener"></iframe>
  81.                             </div>
  82.                         </div>
  83.                     </div>
  84.                     <div class="col-xl-1"></div>
  85.                 </div>
  86.                 <img src="{{ asset('build/images/home/dark-green-curve-l.svg') }}" alt="dark green curve" class="dark-green-curve-l">
  87.                 <img src="{{ asset('build/images/home/mid-green-curve-r.svg') }}" alt="mid green curve" class="mid-green-curve-r">
  88.             </div>
  89.         </div>
  90.     </div>
  91.     <a href="{{ path('index_route') }}#global-presence" class="position-relative slide-in-up z-index-1" id="down-arrow-link" rel="nofollow"
  92.             data-toggle="animation"
  93.             data-animation-start="onScroll"
  94.             data-animation="slide-in-up"
  95.     > <img src="{{ asset('build/images/yellow-down-arrow.svg') }}" alt="yellow down arrow" class="yellow-down-arrow">
  96.     </a>
  97.     <div class="bg-white d-flex pt-7 w-100" id="global-presence">
  98.         <div class="col-1"></div>
  99.         <div class="col-10 pb-xl-5 pb-3">
  100.             <h2 class="dark-green mb-0 text-center">Global Locations<span class="yellow">.</span></h2>
  101.         </div>
  102.         <div class="col-1"></div>
  103.     </div>
  104.     <div class="bg-white container-fluid">
  105.         <div class="position-relative" id="map">
  106.             <div class="position-relative" id="map-wrapper">
  107.                 <img class="w-100" src="{{ asset('build/images/home/world-map.webp') }}" alt="Global Presence">
  108.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="uk-pin" alt="UK" title="UK">
  109.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="ie-pin" alt="Ireland" title="Ireland">
  110.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="fr-pin" alt="France" title="France">
  111.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="nl-pin" alt="Netherlands" title="Netherlands">
  112.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="de-pin" alt="Germany" title="Germany">
  113.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="es-pin" alt="Spain" title="Spain">
  114.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="uae-pin" alt="U.A.E." title="U.A.E.">
  115.                 <img src="{{ asset('build/images/home/location-pin.svg') }}" class="location-pin position-absolute" id="aus-pin" alt="Australia" title="Australia">
  116.             </div>
  117.             <div class="bg-white-70 location-list small-circle" id="aus-list">
  118.                 <div class="list-close position-absolute"></div>
  119.                 <div class="country-circle-content">
  120.                     <h3 class="country mid-green fs-2 text-center" id="aus-title">Australia</h3>
  121.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="aus-companies">
  122.                         <h4 class="company fs-5 my-0">
  123.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('thorlux_route') }}">Thorlux Lighting Australasia</a>
  124.                         </h4>
  125.                         <p class="mid-green fs-6 mb-2">Sydney</p>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.             <div class="bg-white-70 location-list small-circle" id="fr-list">
  130.                 <div class="list-close position-absolute"></div>
  131.                 <div class="country-circle-content">
  132.                     <h3 class="country mid-green fs-2 text-center" id="fr-title">France</h3>
  133.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="fr-companies">
  134.                         <h4 class="company fs-5 my-0">
  135.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('zemper_route') }}">Zemper</a>
  136.                         </h4>
  137.                         <p class="mid-green fs-6 mb-2">Charnay-lès-Mâcon</p>
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.             <div class="bg-white-70 location-list small-circle" id="de-list">
  142.                 <div class="list-close position-absolute"></div>
  143.                 <div class="country-circle-content">
  144.                     <h3 class="country mid-green fs-2 text-center" id="de-title">Germany</h3>
  145.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="de-companies">
  146.                         <h4 class="company fs-5 my-0">
  147.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('thorlux_route') }}">Thorlux Lighting</a>
  148.                         </h4>
  149.                         <p class="mid-green fs-6 mb-2">Moers</p>
  150.                         <h4 class="company fs-5 my-0">
  151.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('schahlled_route') }}">SchahlLED Lighting</a>
  152.                         </h4>
  153.                         <p class="mid-green fs-6 mb-2">Unterschleißheim</p>
  154.                     </div>
  155.                 </div>
  156.             </div>
  157.             <div class="bg-white-70 location-list small-circle" id="ie-list">
  158.                 <div class="list-close position-absolute"></div>
  159.                 <div class="country-circle-content">
  160.                     <h3 class="country mid-green fs-2 text-center" id="ie-title">Ireland</h3>
  161.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="ie-companies">
  162.                         <h4 class="company fs-5 my-0">
  163.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('thorlux_route') }}">Thorlux Lighting</a>
  164.                         </h4>
  165.                         <p class="mid-green fs-6 mb-2">Dublin</p>
  166.                     </div>
  167.                 </div>
  168.             </div>
  169.             <div class="bg-white-70 location-list small-circle" id="nl-list">
  170.                 <div class="list-close position-absolute"></div>
  171.                 <div class="country-circle-content">
  172.                     <h3 class="country mid-green fs-2 text-center" id="nl-title">Netherlands</h3>
  173.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="nl-companies">
  174.                         <h4 class="company fs-5 my-0">
  175.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('famostar_route') }}">Famostar</a>
  176.                         </h4>
  177.                         <p class="mid-green fs-6 mb-2">Velp</p>
  178.                         <h4 class="company fs-5 my-0">
  179.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('lightronics_route') }}">Lightronics</a>
  180.                         </h4>
  181.                         <p class="mid-green fs-6 mb-2">Waalwijk</p>
  182.                         <h4 class="company fs-5 my-0">
  183.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('ratio_route') }}">Ratio</a>
  184.                         </h4>
  185.                         <p class="mid-green fs-6 mb-2">Nijkerk</p>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.             <div class="bg-white-70 location-list small-circle" id="es-list">
  190.                 <div class="list-close position-absolute"></div>
  191.                 <div class="country-circle-content">
  192.                     <h3 class="country mid-green fs-2 text-center" id="es-title">Spain</h3>
  193.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="es-companies">
  194.                         <h4 class="company fs-5 my-0">
  195.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('zemper_route') }}">Zemper</a>
  196.                         </h4>
  197.                         <p class="mid-green fs-6 mb-2">Ciudad Real</p>
  198.                     </div>
  199.                 </div>
  200.             </div>
  201.             <div class="bg-white-70 location-list small-circle" id="uae-list">
  202.                 <div class="list-close position-absolute"></div>
  203.                 <div class="country-circle-content">
  204.                     <h3 class="country mid-green fs-2 text-center" id="uae-title">UAE</h3>
  205.                     <div class="companies mx-auto ps-xl-0 w-md-50" id="uae-companies">
  206.                         <h4 class="company fs-5 my-0">
  207.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('thorlux_route') }}">Thorlux Lighting</a>
  208.                         </h4>
  209.                         <p class="mid-green fs-6 mb-2">Abu Dhabi</p>
  210.                     </div>
  211.                 </div>
  212.             </div>
  213.             <div class="bg-white-70 location-list" id="uk-list">
  214.                 <div class="list-close"></div>
  215.                 <h3 class="col-12 country mid-green fs-2 text-center" id="uk-title">UK</h3>
  216.                 <div class="companies mx-auto ps-xl-0 w-md-50" id="uk-companies-list">
  217.                     <div>
  218.                         <h4 class="company fs-5 my-0">
  219.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('philip_payne_route') }}">Philip Payne</a>
  220.                         </h4>
  221.                         <p class="mid-green fs-6 mb-2">Solihull</p>
  222.                         <h4 class="company fs-5 my-0">
  223.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('portland_route') }}">Portland Lighting</a>
  224.                         </h4>
  225.                         <p class="mid-green fs-6 mb-2">Walsall</p>
  226.                         <h4 class="company fs-5 my-0">
  227.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('solite_route') }}">Solite Europe</a>
  228.                         </h4>
  229.                         <p class="mid-green fs-6 mb-2">Stockport</p>
  230.                     </div>
  231.                     <div>
  232.                         <h4 class="company fs-5 my-0">
  233.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('thorlux_route') }}">Thorlux Lighting</a>
  234.                         </h4>
  235.                         <p class="mid-green fs-6 mb-2">Redditch</p>
  236.                         <h4 class="company fs-5 my-0">
  237.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('trt_route') }}">TRT Lighting</a>
  238.                         </h4>
  239.                         <p class="mid-green fs-6 mb-2">Redditch</p>
  240.                         <h4 class="company fs-5 my-0">
  241.                             <a class="mid-green hover-yellow text-decoration-none" href="{{ path('ratio_route') }}">Ratio EV Charging</a>
  242.                         </h4>
  243.                         <p class="mid-green fs-6 mb-2">Redditch</p>
  244.                     </div>
  245.                 </div>
  246.             </div>
  247.         </div>
  248.     </div>
  249.     <div class="bg-white container-fluid d-flex py-5" id="latest-news">
  250.         <div class="col-1"></div>
  251.         <div class="col-10 py-5">
  252.             <h2 class="dark-green mb-0 pb-5 text-center">Latest news and updates<span class="yellow">.</span>
  253.             </h2>
  254.             <section>
  255.                 <div class="gx-lg-5 justify-content-center row">
  256.                     {% for news_article in latest_news %}
  257.                         <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
  258.                             <a class="dark-green text-decoration-none hover-light-green" href="{{ path('news_article_view_route', {'id': news_article.id}) }}">
  259.                                 <div class="bg-image hover-overlay news-thumbnail-container overflow-hidden ripple rounded-5 mb-4" data-mdb-ripple-color="light">
  260.                                     {% if news_article.thumbnailFilename %}
  261.                                         <img class="w-100" src="{{ path('news_article_thumbnail_route', {'size': 'original', 'filename': news_article.thumbnailFilename}) }}" alt="{{ news_article.title }}">
  262.                                     {% endif %}
  263.                                     <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
  264.                                 </div>
  265.                                 <div class="row mb-2">
  266.                                     <div class="col-12">
  267.                                         <p class="mid-grey m-0 small">{{ news_article.datePosted|format_date('full') }}</p>
  268.                                     </div>
  269.                                 </div>
  270.                                 <h3 class="fs-4 mb-2">{{ news_article.title }}</h3>
  271.                                 <p class="text-truncate">{{ news_article.content|u.truncate(100, '...', false) }}</p>
  272.                                 {% if isAdminUser is same as(true) %}
  273.                                     {% if news_article.published is same as(false) %}
  274.                                         <div style="color: red;">UNPUBLISHED</div>
  275.                                     {% endif %}
  276.                                 {% endif %}
  277.                             </a>
  278.                         </div>
  279.                     {% endfor %}
  280.                 </div>
  281.                 <div class="d-flex text-center justify-content-center">
  282.                     <a href="{{ path('news_route') }}" class="btn dark-green-border mt-5">View all news</a>
  283.                 </div>
  284.             </section>
  285.         </div>
  286.         <div class="col-1"></div>
  287.     </div>
  289. {% endblock %}