refactor(home): extract testimonial partial and improve layout spacing
This commit is contained in:
ifanprima130206
parent
9cde05f5a2
commit
6dd2b2ec7e
@ -1,6 +1,6 @@
|
||||
<footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
|
||||
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 relative z-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
|
||||
<div class="md:col-span-4 flex flex-col gap-6">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">
|
||||
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
|
||||
|
||||
<div class="space-y-8">
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<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">
|
||||
class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:px-10 lg:pb-8 flex flex-col lg:min-h-screen lg:justify-between space-y-6 lg:space-y-0 z-20 bg-white">
|
||||
|
||||
<div class="flex flex-col justify-center flex-1 space-y-6 lg:pt-48">
|
||||
|
||||
<header class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
@ -50,119 +52,6 @@ class="w-8 h-8 bg-home-primary flex justify-center items-center rounded-full gro
|
||||
</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>
|
||||
@include('livewire.home.partials.jumbotron.testimonial')
|
||||
</section>
|
||||
|
||||
@ -9,7 +9,7 @@ class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023
|
||||
<div class="relative w-full px-6 lg:px-0 lg:w-[80%] grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
||||
|
||||
<article
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-white backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
@ -41,7 +41,7 @@ class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-white backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
|
||||
@ -0,0 +1,115 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user