172 lines
9.3 KiB
PHP
172 lines
9.3 KiB
PHP
<section
|
|
class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white">
|
|
|
|
<header class="flex flex-wrap items-center gap-4">
|
|
<div class="flex items-center">
|
|
<figure
|
|
class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
|
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=100"
|
|
alt="User 1" class="w-full h-full object-cover">
|
|
</figure>
|
|
<figure
|
|
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
|
<img src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?auto=format&fit=crop&q=80&w=100"
|
|
alt="User 2" class="w-full h-full object-cover">
|
|
</figure>
|
|
<figure
|
|
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
|
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=100"
|
|
alt="User 3" class="w-full h-full object-cover">
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
|
|
Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
|
|
</div>
|
|
</header>
|
|
|
|
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
|
|
Temukan parfum terbaikmu<br>
|
|
<span class="italic font-serif font-light text-home-primary">hari ini</span>
|
|
</h1>
|
|
|
|
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
|
|
Memilih parfum adalah perjalanan yang personal. Pertimbangkan gaya hidupmu, aroma favorit, dan kesan yang ingin
|
|
kamu tinggalkan.
|
|
</p>
|
|
|
|
<div class="flex items-center">
|
|
<button
|
|
class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
|
|
Jelajahi Toko
|
|
</button>
|
|
<span class="w-8 h-[2px] bg-home-primary/20"></span>
|
|
<button
|
|
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
|
|
<div
|
|
class="w-8 h-8 bg-home-primary flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="size-4 text-home-background">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<article
|
|
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden">
|
|
|
|
<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>
|
|
</section>
|