171 lines
9.1 KiB
PHP
171 lines
9.1 KiB
PHP
<section
|
|
class="relative w-full lg:w-[35%] mt-24 lg:mt-0 p-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white lg:bg-transparent">
|
|
|
|
<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-black py-1 px-3 rounded-full text-sm lg:text-lg">
|
|
Plus <span class="px-2 py-1 bg-black text-home-background rounded-full">25K</span> Trusted users!
|
|
</div>
|
|
</header>
|
|
|
|
<h1 class="text-black text-4xl lg:text-6xl leading-tight text-start font-bold">
|
|
Discover your best<br><span class="italic font-serif font-light">perfume</span> at today
|
|
</h1>
|
|
|
|
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-gray-700">
|
|
Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want
|
|
to make.
|
|
</p>
|
|
|
|
<div class="flex items-center">
|
|
<button
|
|
class="bg-black text-home-background py-3 px-6 rounded-full hover:opacity-90 transition-opacity font-medium">
|
|
Explore Shop
|
|
</button>
|
|
<span class="w-8 h-[2px] bg-black"></span>
|
|
<button
|
|
class="flex items-center justify-center w-12 h-12 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors group">
|
|
<div
|
|
class="w-8 h-8 bg-black 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-white">
|
|
<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-white lg:bg-white/40 backdrop-blur-xl border border-home-foreground/5 rounded-2xl z-30 shadow-lg lg:shadow-none overflow-hidden">
|
|
|
|
<div id="testimonial-track" class="relative w-full h-full p-6">
|
|
|
|
<div
|
|
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0 bg-white lg:bg-transparent">
|
|
<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 shadow-sm">
|
|
<div>
|
|
<h4 class="font-bold text-black text-sm lg:text-base">Sarah Jenkins</h4>
|
|
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-800 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 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
|
<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 shadow-sm">
|
|
<div>
|
|
<h4 class="font-bold text-black text-sm lg:text-base">Michael Chen</h4>
|
|
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-800 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 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
|
<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 shadow-sm">
|
|
<div>
|
|
<h4 class="font-bold text-black text-sm lg:text-base">Jessica Tan</h4>
|
|
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-800 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-white border border-gray-100 shadow-md hover:bg-gray-50 flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-black 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-black shadow-md hover:bg-gray-800 flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-white 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>
|