From 6dd2b2ec7e00f76c625dd0e211755898945d7364 Mon Sep 17 00:00:00 2001
From: ifanprima130206 <fanproject13@gmail.com>
Date: Sun, 14 Dec 2025 12:39:05 +0700
Subject: [PATCH] refactor(home): extract testimonial partial and improve
 layout spacing

---
 .../partials/home/_footer.blade.php           |   2 +-
 .../livewire/home/partials/cta.blade.php      |   2 +-
 .../home/partials/jumbotron/left.blade.php    | 119 +-----------------
 .../home/partials/jumbotron/right.blade.php   |   4 +-
 .../partials/jumbotron/testimonial.blade.php  | 115 +++++++++++++++++
 5 files changed, 123 insertions(+), 119 deletions(-)
 create mode 100644 resources/views/livewire/home/partials/jumbotron/testimonial.blade.php

diff --git a/resources/views/components/partials/home/_footer.blade.php b/resources/views/components/partials/home/_footer.blade.php
index 9ea95a9..427bd00 100644
--- a/resources/views/components/partials/home/_footer.blade.php
+++ b/resources/views/components/partials/home/_footer.blade.php
@@ -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">
diff --git a/resources/views/livewire/home/partials/cta.blade.php b/resources/views/livewire/home/partials/cta.blade.php
index cec71e7..74a23cf 100644
--- a/resources/views/livewire/home/partials/cta.blade.php
+++ b/resources/views/livewire/home/partials/cta.blade.php
@@ -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">
diff --git a/resources/views/livewire/home/partials/jumbotron/left.blade.php b/resources/views/livewire/home/partials/jumbotron/left.blade.php
index beb8612..e534ca6 100644
--- a/resources/views/livewire/home/partials/jumbotron/left.blade.php
+++ b/resources/views/livewire/home/partials/jumbotron/left.blade.php
@@ -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>
diff --git a/resources/views/livewire/home/partials/jumbotron/right.blade.php b/resources/views/livewire/home/partials/jumbotron/right.blade.php
index aed4d20..d0f574c 100644
--- a/resources/views/livewire/home/partials/jumbotron/right.blade.php
+++ b/resources/views/livewire/home/partials/jumbotron/right.blade.php
@@ -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"
diff --git a/resources/views/livewire/home/partials/jumbotron/testimonial.blade.php b/resources/views/livewire/home/partials/jumbotron/testimonial.blade.php
new file mode 100644
index 0000000..a031f16
--- /dev/null
+++ b/resources/views/livewire/home/partials/jumbotron/testimonial.blade.php
@@ -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>