<div id="productTeaser" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="{{imageservice}}/visuals-marketing1.jpg?width=1110&height=500"
        alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="{{imageservice}}/visuals-marketing3.jpg?width=1110&height=500"
        alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="{{imageservice}}/visuals-marketing5.jpg?width=1110&height=500"
        alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#productTeaser" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#productTeaser" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-4">
      <h2>A/B Shop</h2>
      <p>The A/B Shop is an online store for luxury products.</p>
      <p><a class="btn btn-secondary" href="/static" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Why buy with us?</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
        condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
        Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="/static" role="button">View details &raquo;</a></p>
    </div>
    {{#if product}}
    <div class="col-md-4">
      <h2>Featured Product</h2>
      <p>
        <img class="img-thumbnail" style="width:200px; height:200px" src="{{imageservice}}/{{product.picture}}?width=200&height=200">
      </p>
      <p><a class="btn btn-secondary" href="/product/{{product.id}}" role="button">View details &raquo;</a></p>
    </div>
    {{else}}
    <div class="col-md-4">
      <h2>Brands</h2>
      <p>We offer many famous brands. Just browse around and buy what you like.</p>
      <p><a class="btn btn-secondary" href="/products" role="button">View details &raquo;</a></p>
    </div>
    {{/if}}
  </div>

  <hr>

</div>
<!-- /container -->