reviews.component.html

<app-page-header
  title="Reviews"
  title1="Reviews"
  activeitem="Pages"
></app-page-header>

<!-- Start::container -->
<div class="mx-auto">
  <h2 class="text-xl text-center font-semibold my-6">Our Clients Reviews</h2>
  <!-- Start::row-1 -->
  <div class="grid sm:grid-cols-2 lg:!grid-cols-3 gap-x-6">
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          Synth chartreuse iPhone lomo cray raw denim brunch everyday carry
          neutra before they sold out fixie 90's microdosing. Tacos pinterest
          fanny pack venmo.
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/2.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Socrates Itumay</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore vel
          ut impedit. Sapiente id libero reprehenderit accusantium nisi. Dolorum
          hic voluptas quia id.
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/12.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Eos Tempor</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          There are many variations of passages of Lorem Ipsum available, but
          the majority have suffered by injected humour, or randomised words
          which don't look even slightly believable.
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/3.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Airi Satou</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          All the Lorem Ipsum generators on the Internet tend to repeat Various
          versions have evolved over the years, sometimes by accident, sometimes
          on purpose (injected humour and the like).
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/13.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Mc Greggor</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          If you are going to use a passage of Lorem Ipsum, you need to as
          necessary All the Lorem Ipsum generators on the Internet tend to
          repeat Various versions have evolved over the years, .
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/5.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Samantha Paul</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
    <div class="box">
      <div class="box-body">
        <div class="flex space-x-1 rtl:space-x-reverse">
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
          <div class="text-yellow-500 text-base hover:text-yellow-500">
            <i class="ri-star-fill"></i>
          </div>
        </div>
        <p class="mb-6">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa
          molestias, officia, inventore incidunt aliquid amet nihil
          exercitationem, modi possimus voluptate molestiae explicabo assumenda.
        </p>
        <a class="flex my-auto">
          <img
            alt="testimonial"
            src="./assets/img/users/15.jpg"
            class="avatar avatar-sm !rounded-full"
          />
          <div class="ltr:pl-4 rtl:pr-4 my-auto">
            <p class="font-medium text-base leading-none">Pope Johnson</p>
            <span class="dark:text-white/70 text-gray-500 text-xs"
              >UI DEVELOPER</span
            >
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- End::row-1 -->

  <h2 class="text-xl text-center font-semibold my-6">What Our Clients Say</h2>
  <!-- Start::row-2 -->
  <div class="box !bg-transparent border-0 shadow-none">
    <div class="box-body px-0">
        <owl-carousel-o  class="swiper about-swipe2 our-clients-says" [options]="customOptions">
          <ng-container class="swiper-wrapper" *ngFor="let slide of imageData">
            <ng-template  class="swiper-slide" carouselSlide >
          
                    <div class="box mb-0 text-start rtl:dir-rtl">
                      <div class="box-body">
                        <div class="flex space-x-1 rtl:space-x-reverse">
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                        </div>
                        <p class="mb-6">
                         {{slide.summary}}
                        </p>
                        <a class="flex my-auto">
                          <img  [src]="slide.src" class="avatar avatar-sm !rounded-full">
                          <div class="ltr:pl-4 rtl:pr-4 my-auto">
                            <p class="font-medium text-base leading-none">{{slide.name}}</p>
                            <span class="dark:text-white/70 text-gray-500 text-xs">{{slide.title}}</span>
                          </div>
                        </a>
                      </div>
                    </div>
                
              </ng-template>
              </ng-container>
              </owl-carousel-o>
    </div>
  </div>
  <!-- End::row-2 -->
</div>

<!-- End::container -->