templates/pages/lis-homepage.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="{{ app.request.locale|split('_')[0] }}">
  3. <head>
  5.     {% block meta %}
  6.     
  7.         <meta charset="utf-8">
  8.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1">
  10.         {% include "@SuluWebsite/Extension/seo.html.twig" with {
  11.             "seo": extension.seo|default([]),
  12.             "content": content|default([]),
  13.             "localizations": localizations|default([]),
  14.             "shadowBaseLocale": shadowBaseLocale|default(),
  15.         } %}
  16.         <meta name="msapplication-TileColor" content="#da532c">
  17.         <meta name="theme-color" content="#ffffff">
  18.     
  19.     {% endblock %}
  21.     {% block style %}
  22.     
  23.         <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet" media="all" onload="this.media='all'">
  24.         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  25.         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  26.         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  27.         <link rel="manifest" href="/site.webmanifest">
  28.         <link rel="preconnect" href="https://fonts.googleapis.com">
  29.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  30.         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  32.         <link rel="stylesheet" href="/web/lis/css/main.css" media="all" onload="this.media='all'">
  33.         <style>
  34.             .dtpcnt{opacity: 0;}
  35.             .hero-image--main {
  36.                 background-image: url({{ content.heroImage.thumbnails['800x'] }});
  37.             }
  38.             .gradient-main {
  39.                 background: linear-gradient(317deg,#7673ff,rgba(75,73,212,0) 49.48%),{{ content.mainColor }};
  40.                 background: var(--blue-gradient-1,linear-gradient(317deg,#7673ff,rgba(75,73,212,0) 49.48%),{{ content.mainColor }})
  41.             }
  42.         </style>
  43.     
  44.     {% endblock %}
  46. </head>
  47. <body>
  48.     <div id="app" class="flex justify-between flex-col min-h-screen">
  49.         
  50.         <div class="cookiebar">
  51.             <div class="cookiebar__container">
  52.                 <p class="cookiebar__text">We use cookies to improve our site. By using our website you agree to their use.</p> 
  53.                 <span class="cookiebar__close"><span></span> <span></span></span>
  54.             </div>
  55.         </div>
  57.         {% block header %}
  58.         <header class="header absolute w-full">
  59.             
  60.             <div class="header__container md:px-6">
  61.                 <div class="header__left">
  62.                     <object type="image/svg+xml" data="{{ content.logoImage.thumbnails['300x'] }}" class="md:max-h-10 lg:max-h-12"></object>
  63.                 </div> 
  64.                 <div class="header__right font-primary text-sm">
  65.                     <a href="/life-insurance" class="sls__button--quote py-4 px-5 text-20 -md:px-7/8 -md:py-3 -md:text-18 md:shadow-none lg:text-20 lg:max-h-14 lg:min-h-0">Get A Quote</a>
  66.                 </div>
  67.             </div>
  68.         </header>
  69.         {% endblock %}
  71.         {% block hero %}
  72.         <section class="section-hero hero gradient-main overflow-hidden md:flex md:px-15 md:pb-10">
  73.             <div class="md:flex md:max-w-wrapper-664 md:mx-auto lg:max-w-wrapper-904 lg:gap-4 xl:max-w-wrapper-1000 xl:px-10 xl:gap-12">
  74.                 <div class="hero-description px-4 mt-4 mb-9 md:flex md:flex-col md:px-0 md:mb-4">
  75.                     <h1 class="text-32 leading-40 text-white text-center mb-3 md:text-40 md:leading-54 md:text-left md:mb-1 lg:text-54 lg:leading-64 lg:mb-4">
  76.                         {{ content.heroTitle | raw  }}
  77.                     </h1> 
  78.                     <p class="text-base leading-24 text-white text-center mb-5 md:text-18 md:leading-32 md:min-h-24 md:text-left lg:min-h-20 lg:text-20 lg:leading-32 lg:mb-3">
  79.                         {{ content.heroSubtitle | raw }}
  80.                     </p> 
  81.                     <a href="/life-insurance" class="sls__button--quote mx-auto md:ml-0 -md:max-w-50 -md:px-0">Get A Quote</a>
  82.                 </div> 
  83.                 <div class="hero-image mx-auto relative w-full h-47 md:min-w-71 md:w-71 md:h-60 md:mt-8 lg:min-w-98 lg:w-98 lg:h-87 lg:mt-9">
  84.                     <img src="/web/lis/images/hero/hero-vectors-left-desktop.svg" alt="" class="hero-image--left absolute left-0 top-0 hidden md:block -lg:max-w-23"> 
  85.                     <div class="hero-image--main h-full w-full -md:rounded-none md:min-w-58 md:w-58 md:h-58 md:ml-3 lg:w-77 lg:h-77 lg:ml-6 lg:mr-15"></div> 
  86.                     <img src="/web/lis/images/hero/hero-vectors-right-desktop.svg" alt="" class="hero-image--left absolute bottom-0 right-0 hidden md:block -lg:max-w-25 lg:mb-8">
  87.                 </div>
  88.             </div>
  89.         </section> 
  90.         {% endblock %}
  92.         {% block content %}
  93.         {% endblock %}
  95.         {% block contentBody %}
  96.             {% include 'includes/blocks.html.twig' %}
  97.         {% endblock %}
  99.     </main> 
  100.     
  101.     {% block footer %}
  103.         <footer class="footer bg-blue-500 px-4 py-6">
  104.             <div class="footer__container w-full max-w-wrapper-560 mx-auto flex flex-col gap-6 text-xs leading-18 text-white text-center">
  105.                 
  106.                 {{ content.footerMain | raw }}
  108.                 {% if content.footerLinks %}
  109.                 <span class="md:hidden">
  110.                     <div class="flex justify-center gap-4">
  111.                         {{ content.footerLinks | raw }}
  112.                     </div>
  113.                 </span> 
  114.                 {% endif %}
  116.                 <span class="md:flex md:gap-8 md:justify-center">
  117.                     Copyright © {{ 'now' | date('Y') }} life-insurance.representationmedia.co.uk
  118.                     
  119.                     {% if content.footerLinks %}
  120.                     <div class="hidden justify-center gap-4 md:flex">
  121.                         {{ content.footerLinks | raw }}
  122.                     </div>
  123.                     {% endif %}
  125.                 </span>
  126.             </div>
  127.         </footer>
  129.     {% endblock %}
  131.     </div>
  133.     {% block javascripts %}
  134.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  135.         <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" defer=""></script>
  136.         <script src="https://cdnjs.cloudflare.com/ajax/libs/detectizr/2.2.0/detectizr.min.js" defer=""></script>
  137.         <script>
  138.             if (!localStorage.getItem('lisconsentcookie')) {
  139.                 $('div.cookiebar').addClass('active');
  140.             } 
  142.             $('span.cookiebar__close').on('click',function() {
  143.                 localStorage.setItem('lisconsentcookie',true);
  144.                 $('div.cookiebar').removeClass('active');
  145.             })
  146.         </script>
  147.     {% endblock %}
  148. </body>
  149. </html>