کامپوننت های فروشگاه

<!-- Product Card -->
  <div class="product-card mx-auto">
    <div class="product-head d-flex justify-content-between align-items-center">
      <span class="badge badge-danger">Sale</span>
      <div class="rating-stars">
        <i class="fe-icon-star active"></i>
        <i class="fe-icon-star active"></i>
        <i class="fe-icon-star active"></i>
        <i class="fe-icon-star active"></i>
        <i class="fe-icon-star"></i>
      </div>
    </div>
    <a class="product-thumb" href="#">
      <img src="path-to-image" alt="Product Thumbnail"/>
    </a>
    <div class="product-card-body">
      <a class="product-meta" href="#">Smart home</a>
      <h5 class="product-title">
        <a href="#">Amazon Echo Dot (2nd Generation)</a>
      </h5>
      <span class="product-price">
        <del>$62.00</del>$49.99
      </span>
    </div>
    <div class="product-buttons-wrap">
      <div class="product-buttons">
        <div class="product-button">
          <a href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to your wishlist!">
            <i class="fe-icon-heart"></i>
          </a>
        </div>
        <div class="product-button">
          <a href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to comparison table!">
            <i class="fe-icon-repeat"></i>
          </a>
        </div>
        <div class="product-button">
          <a href="#" data-toast data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Product" data-toast-message="added to cart successfuly!">
            <i class="fe-icon-shopping-cart"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

<!-- Product Category Card -->
  <a class="product-category-card mx-auto" href="#">
    <div class="product-category-card-thumb">
      <div class="main-img">
        <img src="path-to-image" alt="Shop Category"/>
      </div>
      <div class="thumblist">
        <img src="path-to-image" alt="Shop Category"/>
        <img src="path-to-image" alt="Shop Category"/>
      </div>
    </div>
    <div class="product-category-card-body">
      <div class="product-category-card-meta">Starting from $127.00</div>
      <h5 class="product-category-card-title">TV, Video &amp; Audio</h5>
    </div>
  </a>

<!-- Promo Banner -->
  <a class="alert alert-secondary alert-dismissible fade show" href="#" style="background-image: url(path-to-background-image);">
    <span class="alert-close" data-dismiss="alert"></span>
    <div class="d-flex flex-wrap flex-md-nowrap justify-content-between align-items-center overflow-hidden">
      <div class="mx-auto mx-md-0 px-3 pb-2 text-center text-md-left text-sm-nowrap">
        <span class="d-block text-lg text-thin mb-2">Limited Time Deals</span>
        <h4 class="text-gray-dark pb-1">Surface Pro 4</h4>
        <div class="countdown countdown-style-1 text-lg mb-1" data-date-time="10/10/2020 12:00" data-labels=&'{"label-day": "Days", "label-hour": "Hours", "label-minute": "Mins", "label-second": "Secs"}'></div>
        <p class="d-inline-block bg-gradient text-white px-2 py-1">Shop Now&nbsp;<i class="fe-icon-chevron-right d-inline-block align-middle"></i></p>
      </div>
      <img class="d-block mx-auto mx-md-0" alt="Surface Pro 4" src="path-to-image">
    </div>
  </a>