86 lines
5.1 KiB
HTML
86 lines
5.1 KiB
HTML
<div>
|
|
<div *ngIf="type.toLowerCase() === 'creative-agency'; else elseBlock">
|
|
<swiper class="mt-12" [config]="config1">
|
|
<ng-template swiperSlide *ngFor="let feedback of feedbacks">
|
|
<div class="border-2 border-gray/10 bg-gray/[0.06] p-[30px]">
|
|
<p class="font-semibold leading-7">{{ feedback.message }}</p>
|
|
<div class="mt-12 flex items-center gap-2.5">
|
|
<div>
|
|
<img [src]="feedback.thumbnail" alt="" />
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
|
|
<p class="mt-[2px] text-sm font-bold italic">{{ feedback.role }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</swiper>
|
|
<div class="mt-5 flex items-center justify-end gap-2.5">
|
|
<button
|
|
type="button"
|
|
class="client-swiper-button-prev flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
|
|
>
|
|
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 2L2 8L8 14" stroke="white" stroke-width="2" stroke-linecap="square" />
|
|
<path d="M18 8H4" stroke="white" stroke-width="2" stroke-linecap="square" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="client-swiper-button-next flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
|
|
>
|
|
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11 2L17 8L11 14" stroke="white" stroke-width="2" stroke-linecap="square" />
|
|
<path d="M1 8H15" stroke="white" stroke-width="2" stroke-linecap="square" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ng-template #elseBlock>
|
|
<swiper [config]="config2">
|
|
<ng-template swiperSlide *ngFor="let feedback of feedbacks">
|
|
<div class="flex justify-between gap-7 p-7">
|
|
<div class="flex items-center gap-2.5">
|
|
<div
|
|
class="flex h-14 w-14 items-end justify-center overflow-hidden rounded-full border border-[rgba(125,132,150,0.2)] bg-gradient-to-t from-[rgba(125,132,150,0.1)] to-[125,132,150]"
|
|
>
|
|
<img [src]="feedback.thumbnail" alt="" class="h-full w-full object-cover" />
|
|
</div>
|
|
<div>
|
|
<h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
|
|
<p class="text-sm font-bold italic">{{ feedback.role }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border border-gray/10"></div>
|
|
<div class="p-7">
|
|
<h3 class="text-lg font-bold italic text-black dark:text-white">new bungalow house</h3>
|
|
<p class="mt-4 text-base font-semibold leading-7">{{ feedback.message }}</p>
|
|
<div class="text-right">
|
|
<p class="mt-7 inline-flex bg-[rgba(8,17,31,0.06)] p-2 text-sm font-semibold text-black dark:text-white">San Diego, California</p>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</swiper>
|
|
<div class="absolute top-7 z-10 flex gap-2.5 ltr:right-7 rtl:left-7">
|
|
<a
|
|
href="javascript:"
|
|
class="feedback-slider-button-prev flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
|
|
>
|
|
<svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
|
|
<path d="M7 16L1 9L2.5 7.25M7 2L5 4.33333" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="javascript:"
|
|
class="feedback-slider-button-next flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
|
|
>
|
|
<svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
|
|
<path d="M2 2L4 4.33333M2 16L8 9L6.5 7.25" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|