<div [appBodyClass]="'font-f-4'">

<app-breadcrumb [Title]="'Shop Details'" [subTitle]="'Shop Details'" />

<div class="shop-details-page sp3">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="shop-detials-img">
          <div class="shop-details-img">
            <img src="assets/img/shop/shop-details-img1.png" alt="" />
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="shop-details-hadding">
          <div class="page-hadding">
            <h2>Pattern Included Men’s</h2>
          </div>
          <div class="space12"></div>
          <div class="shop-page-hadding">
            <h4><a [routerLink]="[]">$2020</a></h4>
          </div>
          <div class="space12"></div>
          <div class="shop-review">
            <ul>
              <li><i class="fa-solid fa-star"></i></li>
              <li><i class="fa-solid fa-star"></i></li>
              <li><i class="fa-solid fa-star"></i></li>
              <li><i class="fa-solid fa-star"></i></li>
              <li class="black-star"><i class="fa-solid fa-star"></i></li>
            </ul>
          </div>
          <div class="space6"></div>
          <div class="shop-box-border"></div>
          <div class="space6"></div>

          <div class="shop-details-border"></div>
          <div class="page-hadding">
            <p>
              Without discrediting or enlarging yourselves, but on the contrary,
              rejoice the achievements of your colleagues. Respect,
              self-respect, and love others must be cultivated within the
              organization Remember.
            </p>
          </div>
          <div class="space30"></div>
          <div class="shop-details-menus _relative">
            <div>
              <div class="number shop-details">
                <span class="plus plus2" (click)="increment()"
                  ><i class="fa-solid fa-caret-up"></i
                ></span>
                <input type="text" [value]="quantity" readonly />
                <span
                  class="minus minus2"
                  (click)="decrement()"
                  [class.disabled]="quantity <= 1"
                  ><i class="fa-solid fa-caret-down"></i
                ></span>
              </div>
              <div
                class="cart-input-btn2 header-btn-1 button btn-after home1-button"
              >
                <button class="comon-button">Update Cart</button>
              </div>
            </div>
          </div>
          <div class="space30"></div>

          <div class="shop-details-list">
            <ul>
              <li>SKU: <span>12</span></li>
              <li>Category: <span>Chair, Pillow</span></li>
              <li>Tag: <span>Comfortable</span></li>
            </ul>
          </div>
          <div class="space30"></div>

          <div class="blog-details-icons">
            <div class="hadding2">
              <h4>Share :</h4>
            </div>
            <div class="social1-blog">
              <ul>
                @for(item of socialIcon;track $index){
                <li>
                  <a [routerLink]="[]"><i [class]="item"></i></a>
                </li>
                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sp5">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="comments-review margin-b60">
          <ul
            ngbNav
            #nav="ngbNav"
            class="nav nav-pills mb-3"
            id="pills-tab"
            role="tablist"
          >
            <li ngbNavItem role="presentation">
              <button
                ngbNavLink
                class="nav-link active"
                id="pills-home-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-home"
                type="button"
                role="tab"
                aria-controls="pills-home"
                aria-selected="true"
                class="font-22 lineh-30 font-cm color-11 weight-600"
              >
                Description
              </button>
              <ng-template ngbNavContent>
                <div
                  class="tab-pane fade show active page-hadding"
                  id="pills-home"
                  role="tabpanel"
                  aria-labelledby="pills-home-tab"
                >
                  <div class="space20"></div>
                  <p>
                    When you give us the keys to your property, we give you
                    peace of mind. We have some of the best rated landlord and
                    tenant feedback in the region in the because we take care of
                    our clients and their tenants.Our formula makes it easy to
                    invest with confidence. We’ve successfully overseen hundreds
                    of couse commercial and multi-family projects for our
                    clients using our process.Our strong community ties and
                    relationships help foster our client-driven approachol to
                    business. Caton Commercial offers a full range of commercial
                    real estate brokerage services, including property
                    disposition, investment sales, leasing, tenant
                    representation.
                  </p>
                  <div class="space20"></div>

                  <p>
                    We are a family-founded regional commercial real estate firm
                    that uses its corporate experience and professional networks
                    in local, national, and global the real estate markets to
                    find innovative solutions and opportunities that position
                    our clients for success. As trusted advisors, offering
                    intelligent solutions,ass the Caton team strives for
                    excellence for every client, every time.
                  </p>
                </div>
              </ng-template>
            </li>
            <li ngbNavItem role="presentation">
              <button
                ngbNavLink
                class="nav-link"
                id="pills-profile-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-profile"
                type="button"
                role="tab"
                aria-controls="pills-profile"
                aria-selected="false"
                class="font-22 lineh-30 font-cm color-11 weight-600"
              >
                Review
              </button>
              <ng-template ngbNavContent>
                <div
                  id="pills-profile"
                  role="tabpanel"
                  aria-labelledby="pills-profile-tab"
                >
                  <div class="space20"></div>
                  <div class="row">
                    <div class="col-lg-8">
                      <div class="replly-box">
                        <div class="">
                          <div class="replly-img border50">
                            <img src="assets/img/image/replly-img.png" alt="" />
                          </div>
                        </div>
                        <div class="replly-p">
                          <div class="replly-hadding">
                            <h6><a [routerLink]="[]">Moris Jhonson</a></h6>
                            <p>April 12, 2023</p>
                          </div>
                          <div class="space14"></div>
                          <p>
                            Working with Advisr Consulting transformed our HR
                            function. Their expertise in talent acquisition and
                            development helped us attract top talent and build a
                            high-performance culture. Professional,
                            knowledgeable, and results-driven. HR Consulting
                            guided us through a complex.
                          </p>
                        </div>
                        <a [routerLink]="[]" class="replly-button">Reply</a>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-template>
            </li>
            <li class="nav-item" role="presentation"></li>
          </ul>

          <div class="shop-box-border"></div>

          <div [ngbNavOutlet]="nav"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sp5">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 page-hadding">
        <div class="page-hadding">
          <h2>Write a Review</h2>
          <div class="space12"></div>
          <ul class="sta-reiew">
            <p>Your Rating*</p>
            <div class="space8"></div>
            <li><i class="fa-regular fa-star"></i></li>
            <li><i class="fa-regular fa-star"></i></li>
            <li><i class="fa-regular fa-star"></i></li>
            <li><i class="fa-regular fa-star"></i></li>
            <li><i class="fa-regular fa-star"></i></li>
          </ul>
        </div>
        <div class="space20"></div>
        <p>Your Review*</p>
        <div class="space5"></div>
        <div class="text-area-review">
          <textarea cols="30" rows="10" placeholder="" class="w-100"></textarea>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="review-input">
              <p>Name*</p>
              <div class="space5"></div>
              <input type="text" class="w-100" />
            </div>
          </div>
          <div class="col-lg-6">
            <div class="review-input">
              <p>Email*</p>
              <div class="space5"></div>
              <input type="Email" class="w-100" />
            </div>
          </div>
        </div>
        <div class="space40"></div>
        <a class="comon-button" [routerLink]="[]">Submit</a>
      </div>
    </div>
  </div>
</div>

<app-products/>

</div>