Hotspots

<!-- Hotspots style 1 with popover on hover -->
<div class="hotspots" style="max-width: 650px;">

  <!-- Underlying image -->
  <img src="assets/img/landing/product/hotspots-image.png" class="d-block" alt="Image">

  <!-- Hotspot -->
  <div class="hotspot" style="top: 8%; right: 16%;" data-bs-toggle="popover" data-bs-trigger="hover" title="Memory foam ear pads" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>

  <!-- Hotspot -->
  <div class="hotspot" style="bottom: 9%; left: 48%;" data-bs-toggle="popover" data-bs-trigger="hover" title="Noise suppression" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>

  <!-- Hotspot -->
  <div class="hotspot" style="bottom: 36%; left: 6%;" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" title="Wireless Bluetooth" data-bs-content="Excepteur sint occaecat cupidatat non proident sunt culpa officia.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>
</div>

// Hotspots style 1 with popover on hover
.hotspots(style="max-width: 650px;")

  // Underlying image
  img(src="assets/img/landing/product/hotspots-image.png", alt="Image").d-block

  // Hotspot
  .hotspot(style="top: 8%; right: 16%;", data-bs-toggle="popover", data-bs-trigger="hover", title="Memory foam ear pads", data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.")
    .hotspot-inner
      i.ai-plus
  
  // Hotspot
  .hotspot(style="bottom: 9%; left: 48%;", data-bs-toggle="popover", data-bs-trigger="hover", title="Noise suppression", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare.")
    .hotspot-inner
      i.ai-plus

  // Hotspot
  .hotspot(style="bottom: 36%; left: 6%;", data-bs-toggle="popover", data-bs-trigger="hover", data-bs-placement="top", title="Wireless Bluetooth", data-bs-content="Excepteur sint occaecat cupidatat non proident sunt culpa officia.")
    .hotspot-inner
      i.ai-plus

<!-- Hotspots style 2 with popover on focus -->
<div class="hotspots hotspots-alt">

  <!-- Underlying image -->
  <img src="assets/img/landing/shop/gallery/01.jpg" class="d-block rounded-1" alt="Image">

  <!-- Hotspot -->
  <a class="hotspot" style="top: 20%; left: 27%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Bronze floor<br>led lamp</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$185.00</span>'></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="top: 14.7%; right: 32.7%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Photo frame<br>Defacto</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$21.00</span>'></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="bottom: 41%; left: 34.6%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Yellow satin<br>armchair</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$276.00</span>'></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="bottom: 24.3%; right: 27.5%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" data-bs-html='true' data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Gary concrete<br>table stand</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$35.00</span>'></div>
  </a>

</div>

// Hotspots style 2 with popover on focus
.hotspots.hotspots-alt

  // Underlying image
  img(src="assets/img/landing/shop/gallery/01.jpg", alt="Image").d-block.rounded-1

  // Hotspot
  a.hotspot(style="top: 20%; left: 27%;", tabindex="0", role="button", data-bs-toggle="popover", data-bs-trigger="focus", data-bs-placement="bottom", data-bs-html="true", data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Bronze floor<br>led lamp</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$185.00</span>')
    .hotspot-inner
  
  // Hotspot
  a.hotspot(style="top: 14.7%; right: 32.7%;", tabindex="0", role="button", data-bs-toggle="popover", data-bs-trigger="focus", data-bs-placement="bottom", data-bs-html="true", data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Photo frame<br>Defacto</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$21.00</span>')
    .hotspot-inner
  
  // Hotspot
  a.hotspot(style="bottom: 41%; left: 34.6%;", tabindex="0", role="button", data-bs-toggle="popover", data-bs-trigger="focus", data-bs-placement="top", data-bs-html="true", data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Yellow satin<br>armchair</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$276.00</span>')
    .hotspot-inner
  
  // Hotspot
  a.hotspot(style="bottom: 24.3%; right: 27.5%;", tabindex="0", role="button", data-bs-toggle="popover", data-bs-trigger="focus", data-bs-placement="top", data-bs-html="true", data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Gary concrete<br>table stand</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$35.00</span>')
    .hotspot-inner