{{#extend "base" hybrisClass="hybris-class" pageClass="page_online-exclusive" title="Online ranges" hideBanner="true"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_online-exclusive.css">
{{/content}}
{{#content "body"}}
<main class="container online-exclusive">
  <div class="page-header">
    <h1 class="page-header__title">Online Exclusive</h1>
  </div>
  <a href="#online-ranges" class="online-exclusive__banner">
    <div class="online-exclusive__banner-info">
      Over 6000 new products online
    </div>
    <div class="online-exclusive__banner-subtext">
      You will be surprised by what you find
    </div>
    <a href="#" class="btn btn_full d-none">
      <span class="btn__text">
        Discover our ranges
        <span class="discover-button-arrow">
          <i class="fas fa-arrow-down"></i>
        </span>
      </span>
    </a>
  </a>

  {{> dpd-list rootList=online-ranges}}
  {{> range-component}}
  {{> other-range-component}}
  <div class="component card-block" id="customer-favorites">
    <h2 class="heading2">Our Customer Favourites</h2>

    <div class="customer-favourites-block">
      {{#each customer-favourites-product.products}}

      <div class="customer-favourites-block__item">
        <div class="customer-favourites-block__item-wrap">
          <div class="product-img">
            <img class="{{#if full-img}}full-width-img {{else}}full-height-img{{/if}}" src="{{product-src}}" alt="{{name}}">
          </div>
          <a href="{{ link }}" class="customer-favourites__shadow customer-favourites__shadow-link">
            <div class="customer-favourites__shadow-text">{{ name }}</div>
            <span href="{{ link }}" class="">Shop now <i class="fas fa-angle-right"></i></span>
          </a>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</main>
{{/content}}
{{#content "foot" mode="append"}}
<script defer src="./js/page/online-exclusive.js"></script>
{{/content}}
{{/extend}}
