{{#extend "base" pageClass="home-page" title="Home VAT" hideBreadcrumbs=true hideBanner="true" pageHome="true" globalSearchV2="true" homePageFooter="true" switch-vat=true}}
{{#content "head" mode="append" pageHome="true"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_home.css">
<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
<style>
    .hero {
        position: relative;
        height: 400px;
        overflow: hidden;
        max-width: 1397px;
        margin: 0 auto;
    }

    @media screen and (max-width: 992px) {
        .hero {
            height: 290px;
        }
    }

    @media screen and (max-width: 600px) {
        .hero {
            height: 500px;
        }
    }

    .hero__image-container .hero__image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    @media screen and (max-width: 768px) {
        .hero__image-container {
            height: 290px;
            overflow: hidden;
            position: relative;
        }
    }

    @media screen and (max-width: 600px) {
        .hero__image-container {
            height: 290px;
            overflow: hidden;
            position: relative;
        }
    }

    .hero__banner {
        position: absolute;
        width: 380px;
        top: 0;
        left: 10%;
        margin: 0 auto;
        height: 100%;
    }

    @media screen and (max-width: 900px) {
        .hero__banner {
            max-width: 240px;
        }
    }

    @media screen and (max-width: 600px) {
        .hero__banner {
            max-width: 100%;
            width: 100%;
            position: relative;
            left: 0;
        }
    }

    .hero__banner .banner-info_large {
        position: relative;
    }
    .hero__banner .banner-info__offer {
        font-size: 3rem;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }
</style>
{{/content}}
{{#content "body"}}
<div class="modal modal-box modal-box_full" id="modal-newsletter-signup" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-box__container" role="document">
    <div class="modal-box__row justify-content-center">
      <div class="modal-box__columns">
        <div class="modal-content modal-box__content">
          <div class="modal-header modal-box__header">
            <div class="justify-content-center">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    <h3 class="modal-title modal-box__title">Sign up for regular news and offers direct to your inbox</h3>
                  </div>
                </div>
              </div>
            </div>
            <button class="close modal-box__btn-close d-print-none" type="button" data-dismiss="modal"
                    aria-label="Close">
              <span class="icon" aria-hidden="true"><span class="far fa-times"></span></span>
            </button>
          </div>
          <div class="modal-body modal-box__body popup-content">
            <div class="component container">
              <div class="row">
                <div class="col-12">
                  <p class="email-title"><strong>Enter your email address</strong></p>
                  <form class="mb-3" action="#">
                    <div class="form-row__field newsletter-email">
                      <input type="email" class="tbx " value="" id="postcode" name="postcode">
                    </div>
                    <div class="form-row__col-btn">
                      <button class="btn green-btn btn-primary btn_full">
                        <span class="btn__text">Submit</span>
                      </button>
                    </div>
                  </form>
                  <p class="mb-0">By signing up you accept our <a href="./termsAndconditions">Terms &amp; Conditions</a> including our <a href="./privacy">Privacy Policy</a></p>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body modal-box__body popup-content popup-content__thank_you_message">
            <div class="component container">
              <div class="row">
                <div class="col-10">
                  <div class="sign-up-popup__thank-you-msg">
                    <span class="fas fa-check" aria-hidden="true"></span>
                    Thank you for signing up for emails
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<main class="banner-inside">
  {{>offer-banner}}
  <div class="hero">
    <img class="hero__image" src="./img/placeholders/hero.jpg" alt="hero">
  </div>

  <div class="proposition">
    <div class="proposition__inner">
      <a href="#" class="proposition__link  proposition__link_click-collect">
                <span class="proposition__icon  proposition__icon_click-collect"><i
                  class="fas fa-mouse-pointer icon"></i></span>
        FREE Click &amp; Collect<span
        class="proposition__link_click-collect-short-text"> from store in 1 hour</span>
      </a>
      <a href="#" class="proposition__link  proposition__link_delivery">
        <span class="proposition__icon  proposition__icon_delivery"><i class="fas fa-truck icon"></i></span>FREE
        delivery *
      </a>
      <a href="#" class="proposition__link  proposition__link_returns">
        <span class="proposition__icon  proposition__icon_returns"><i class="fas fa-reply-all icon"></i></span>FREE
        returns
      </a>
      <a href="#" class="proposition__link  proposition__link_price-promise">
        <span class="proposition__icon  proposition__icon_price-promise"><i class="fas fa-pound-sign icon"></i></span>Price
        match promise
      </a>
    </div>
  </div>

  {{> home-offers }}
  {{> popular-categories }}
</main>
{{#content "foot" mode="append"}}
<script defer src="./js/global-search.min.js"></script>
{{/content}}
{{/content}}
{{/extend}}