86 lines
4.6 KiB
PHP
86 lines
4.6 KiB
PHP
<div class="mb-5 lg:mb-0">
|
|
@if (!empty($testimonials))
|
|
<article x-data="{
|
|
current: 0,
|
|
total: {{ count($testimonials) }},
|
|
timer: null,
|
|
start() {
|
|
this.timer = setInterval(() => this.next(), 6000);
|
|
},
|
|
stop() {
|
|
clearInterval(this.timer);
|
|
},
|
|
next() {
|
|
this.current = (this.current + 1) % this.total;
|
|
this.stop();
|
|
this.start();
|
|
},
|
|
prev() {
|
|
this.current = (this.current - 1 + this.total) % this.total;
|
|
this.stop();
|
|
this.start();
|
|
},
|
|
getClass(index) {
|
|
const isCurrent = this.current === index;
|
|
let isBefore = index < this.current;
|
|
|
|
if (this.current === 0 && index === this.total - 1) isBefore = true;
|
|
if (this.current === this.total - 1 && index === 0) isBefore = false;
|
|
|
|
return {
|
|
'opacity-100 z-10 translate-x-0': isCurrent,
|
|
'opacity-0 z-0': !isCurrent,
|
|
'-translate-x-full': !isCurrent && isBefore,
|
|
'translate-x-full': !isCurrent && !isBefore
|
|
};
|
|
}
|
|
}" x-init="start()"
|
|
class="relative w-full mt-auto h-[300px] lg:h-[250px] bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden transition-all duration-300">
|
|
|
|
<div class="relative w-full h-full py-0 px-6">
|
|
@foreach ($testimonials as $index => $testimonial)
|
|
<div class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out {{ $index === 0 ? 'opacity-100 z-10 translate-x-0' : 'opacity-0 z-0 translate-x-full' }}"
|
|
:class="getClass({{ $index }})">
|
|
<div class="flex items-center gap-4 mb-3">
|
|
<img src="https://ui-avatars.com/api/?name={{ urlencode($testimonial['user']['customer']['name'] ?? 'User') }}&background=random&color=fff"
|
|
alt="{{ $testimonial['user']['customer']['name'] ?? 'User' }}"
|
|
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
|
<div>
|
|
<h4 class="font-bold text-home-foreground text-sm lg:text-base">
|
|
{{ $testimonial['user']['customer']['name'] ?? 'User' }}</h4>
|
|
<div class="flex text-home-primary text-xs">
|
|
@for ($i = 0; $i < $testimonial['rating']; $i++)
|
|
★
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">
|
|
"{{ $testimonial['content'] }}"
|
|
</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
|
<button @click="prev()"
|
|
class="w-10 h-10 rounded-full bg-home-background/80 backdrop-blur border border-home-background shadow-sm hover:bg-home-background flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-home-primary group-hover:scale-110 transition-transform" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<button @click="next()"
|
|
class="w-10 h-10 rounded-full bg-home-primary shadow-md hover:bg-home-primary/80 flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-home-background group-hover:scale-110 transition-transform" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
@endif
|
|
</div>
|