116 lines
5.9 KiB
PHP
116 lines
5.9 KiB
PHP
<article
|
|
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 id="testimonial-track" class="relative w-full h-full py-0 px-6">
|
|
|
|
<div
|
|
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0">
|
|
<div class="flex items-center gap-4 mb-3">
|
|
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100"
|
|
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">Sarah Jenkins</h4>
|
|
<div class="flex text-home-primary text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan
|
|
tahan lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
|
</div>
|
|
|
|
<div
|
|
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
|
<div class="flex items-center gap-4 mb-3">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=100"
|
|
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">Michael Chen</h4>
|
|
<div class="flex text-home-primary text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
|
packaging aman. Wanginya persis seperti deskripsi di website."</p>
|
|
</div>
|
|
|
|
<div
|
|
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
|
<div class="flex items-center gap-4 mb-3">
|
|
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=100"
|
|
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">Jessica Tan</h4>
|
|
<div class="flex text-home-primary text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah
|
|
favorit saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
|
<button id="prev-testi"
|
|
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 id="next-testi"
|
|
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>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const slides = document.querySelectorAll('.testimonial-slide');
|
|
const prevBtn = document.getElementById('prev-testi');
|
|
const nextBtn = document.getElementById('next-testi');
|
|
let currentIndex = 0;
|
|
|
|
function updateSlides() {
|
|
slides.forEach((slide, index) => {
|
|
if (index === currentIndex) {
|
|
slide.classList.remove('opacity-0', 'translate-x-full', '-translate-x-full', 'z-0');
|
|
slide.classList.add('opacity-100', 'translate-x-0', 'z-10');
|
|
} else {
|
|
slide.classList.remove('opacity-100', 'translate-x-0', 'z-10');
|
|
slide.classList.add('opacity-0', 'z-0');
|
|
|
|
if (index < currentIndex) {
|
|
slide.classList.add('-translate-x-full');
|
|
slide.classList.remove('translate-x-full');
|
|
} else {
|
|
slide.classList.add('translate-x-full');
|
|
slide.classList.remove('-translate-x-full');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (nextBtn && prevBtn) {
|
|
nextBtn.addEventListener('click', () => {
|
|
currentIndex = (currentIndex + 1) % slides.length;
|
|
updateSlides();
|
|
});
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
|
|
updateSlides();
|
|
});
|
|
}
|
|
|
|
setInterval(() => {
|
|
currentIndex = (currentIndex + 1) % slides.length;
|
|
updateSlides();
|
|
}, 6000);
|
|
});
|
|
</script>
|