From cfe3c5d288064fc8173614eadd756f6413ab22b6 Mon Sep 17 00:00:00 2001
From: ifanprima130206 <fanproject13@gmail.com>
Date: Sun, 14 Dec 2025 15:19:04 +0700
Subject: [PATCH] refactor(home): unify hero sections and simplify page
 toolbars

---
 .../livewire/home/article/index.blade.php     | 54 ++++++++++------
 .../views/livewire/home/outlets.blade.php     | 61 ++++++++++---------
 .../livewire/home/product/index.blade.php     | 50 ++++++++++-----
 .../views/livewire/home/vouchers.blade.php    | 44 ++++++++-----
 4 files changed, 128 insertions(+), 81 deletions(-)

diff --git a/resources/views/livewire/home/article/index.blade.php b/resources/views/livewire/home/article/index.blade.php
index bef114e..aec40b8 100644
--- a/resources/views/livewire/home/article/index.blade.php
+++ b/resources/views/livewire/home/article/index.blade.php
@@ -1,30 +1,44 @@
 <div>
-    <main class="px-6 lg:px-32 xl:px-48 pb-24 pt-36 bg-white min-h-screen font-sans">
+    {{-- Hero Section --}}
+    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
+        {{-- Background Image --}}
+        <div class="absolute inset-0 z-0">
+            <img src="https://images.unsplash.com/photo-1752042143353-e6dcc822a023?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Perfume Background" class="w-full h-full object-cover">
+            <div class="absolute inset-0 bg-black/40"></div>
+        </div>
 
-        <header class="mb-12">
-            <h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Artikel Terbaru</h1>
-            <p class="text-home-foreground/60 text-lg max-w-2xl">Baca tips profesional seputar perawatan wewangian, tren
-                lifestyle, dan rekomendasi terbaik.</p>
-        </header>
+        {{-- Content --}}
+        <div class="relative z-10 container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Artikel Terbaru</h1>
+            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                Baca tips profesional seputar perawatan wewangian, tren lifestyle, dan rekomendasi terbaik.
+            </p>
+
+            {{-- Search Bar --}}
+            <div class="max-w-xl mx-auto relative group">
+                <input type="search" placeholder="Cari artikel menarik..." aria-label="Cari artikel"
+                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
+                <button
+                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
 
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
 
             <section class="lg:col-span-3">
 
-                <div class="flex flex-col sm:flex-row gap-4 mb-10">
-                    <div class="flex-1">
-                        <div class="relative group">
-                            <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
-                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                            </svg>
-                            <input type="search" placeholder="Cari artikel..." aria-label="Cari artikel"
-                                class="w-full py-3 pl-11 pr-4 rounded-xl border border-home-foreground/10 text-home-foreground placeholder-home-foreground/40 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm">
-                        </div>
-                    </div>
-
-                    <div class="relative">
+                {{-- Toolbar (Sort Only) --}}
+                <div class="flex justify-start mb-10">
+                    <div class="relative w-full md:w-auto">
                         <select aria-label="Urutkan artikel"
                             class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[160px] shadow-sm">
                             <option value="">Urutkan</option>
diff --git a/resources/views/livewire/home/outlets.blade.php b/resources/views/livewire/home/outlets.blade.php
index 6ff2cf3..093a586 100644
--- a/resources/views/livewire/home/outlets.blade.php
+++ b/resources/views/livewire/home/outlets.blade.php
@@ -39,38 +39,39 @@
 
     <div class="flex flex-col min-h-screen bg-white font-sans">
 
-        <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
+        {{-- Hero Section --}}
+    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
+        {{-- Background Image --}}
+        <div class="absolute inset-0 z-0">
+            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=1469&auto=format&fit=crop"
+                alt="Outlet Background" class="w-full h-full object-cover">
+            <div class="absolute inset-0 bg-black/50"></div>
+        </div>
 
-            <header class="mb-16 text-center max-w-3xl mx-auto">
-                <span class="text-home-primary font-bold tracking-widest text-xs uppercase mb-3 block">Lokasi
-                    Butik</span>
-                <h1 class="text-4xl md:text-5xl font-bold text-home-foreground mb-6">Temukan Butik Terdekat</h1>
-                <p class="text-home-foreground/60 text-lg">
-                    Rasakan pengalaman langsung kemewahan aroma kami. Kunjungi butik kami untuk konsultasi personal dan
-                    layanan eksklusif.
-                </p>
+        {{-- Content --}}
+        <div class="relative z-10 container mx-auto px-6 text-center">
+            <span class="text-home-primary font-bold tracking-widest text-xs uppercase mb-3 block">Lokasi Butik</span>
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Temukan Butik Terdekat</h1>
+            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                Rasakan pengalaman langsung kemewahan aroma kami. Kunjungi butik kami untuk konsultasi personal.
+            </p>
 
-                <div class="mt-10 relative max-w-xl mx-auto group">
-                    <div
-                        class="absolute inset-0 bg-home-primary/5 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                    </div>
-                    <div
-                        class="relative flex items-center bg-white rounded-full shadow-lg border border-home-foreground/5 py-2 px-4">
-                        <div class="pl-4 text-home-foreground/40">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                            </svg>
-                        </div>
-                        <input type="text" placeholder="Masukkan kota atau nama area..."
-                            class="flex-1 px-4 py-3 bg-transparent text-home-foreground placeholder-home-foreground/40 focus:outline-none">
-                        <button
-                            class="bg-home-primary text-white px-6 py-3 rounded-full font-bold text-sm hover:bg-home-primary transition-colors">
-                            Cari Lokasi
-                        </button>
-                    </div>
-                </div>
-            </header>
+            {{-- Search Bar --}}
+            <div class="max-w-xl mx-auto relative group">
+                <input type="text" placeholder="Masukkan kota atau nama area..."
+                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
+                <button
+                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <main class="flex-grow px-6 lg:px-32 xl:px-48 py-24">
 
             <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-24">
                 @foreach ($outlets as $outlet)
diff --git a/resources/views/livewire/home/product/index.blade.php b/resources/views/livewire/home/product/index.blade.php
index d90a87d..ea0d0cb 100644
--- a/resources/views/livewire/home/product/index.blade.php
+++ b/resources/views/livewire/home/product/index.blade.php
@@ -103,12 +103,38 @@
 
 <div class="flex flex-col min-h-screen bg-white font-sans">
 
-    <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
-        <header class="mb-12">
-            <h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Koleksi Parfum</h1>
-            <p class="text-home-foreground/60 text-lg max-w-2xl">Temukan aroma khas yang mencerminkan kepribadian dan
-                gaya Anda.</p>
-        </header>
+    {{-- Hero Section --}}
+    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
+        {{-- Background Image --}}
+        <div class="absolute inset-0 z-0">
+            <img src="https://images.unsplash.com/photo-1651737232278-3875f741de86?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Perfume Collection Background" class="w-full h-full object-cover">
+            <div class="absolute inset-0 bg-black/50"></div>
+        </div>
+
+        {{-- Content --}}
+        <div class="relative z-10 container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Koleksi Parfum</h1>
+            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                Temukan aroma khas yang mencerminkan kepribadian dan gaya Anda.
+            </p>
+
+            {{-- Search Bar --}}
+            <div class="max-w-xl mx-auto relative group">
+                <input type="text" placeholder="Cari produk..."
+                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
+                <button
+                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <main class="flex-grow px-6 lg:px-32 xl:px-48 py-24">
 
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-24">
 
@@ -144,16 +170,8 @@ class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-col
 
             <section class="lg:col-span-3">
 
-                <div class="flex flex-col sm:flex-row gap-4 mb-8">
-                    <div class="flex-1 relative group">
-                        <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
-                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                        </svg>
-                        <input type="text" placeholder="Cari produk..."
-                            class="w-full pl-11 pr-4 py-3 rounded-xl border border-home-foreground/10 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm placeholder-home-foreground/40 text-home-foreground bg-white">
-                    </div>
+                {{-- Toolbar (Sort Only) --}}
+                <div class="flex justify-end mb-8">
                     <div class="relative min-w-[200px]">
                         <select
                             class="w-full appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer shadow-sm">
diff --git a/resources/views/livewire/home/vouchers.blade.php b/resources/views/livewire/home/vouchers.blade.php
index 2fee8fb..25e0094 100644
--- a/resources/views/livewire/home/vouchers.blade.php
+++ b/resources/views/livewire/home/vouchers.blade.php
@@ -1,26 +1,40 @@
 <div class="flex flex-col min-h-screen bg-white">
-    <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36 font-sans flex flex-col">
+    {{-- Hero Section --}}
+    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
+        {{-- Background Image --}}
+        <div class="absolute inset-0 z-0">
+            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=1469&auto=format&fit=crop"
+                alt="Voucher Background" class="w-full h-full object-cover">
+            <div class="absolute inset-0 bg-black/50"></div>
+        </div>
 
-        <header class="mb-12">
-            <h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Voucher Eksklusif</h1>
-            <p class="text-home-foreground/60 text-lg max-w-2xl">Nikmati potongan harga spesial untuk koleksi parfum
-                favorit Anda.</p>
-        </header>
+        {{-- Content --}}
+        <div class="relative z-10 container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Voucher Eksklusif</h1>
+            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+                Nikmati potongan harga spesial untuk koleksi parfum favorit Anda.
+            </p>
 
-        <section class="flex flex-col lg:flex-row gap-4 mb-12" aria-label="Pencarian dan Filter">
-            <div class="flex-1">
-                <div class="relative group">
-                    <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
-                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            {{-- Search Bar --}}
+            <div class="max-w-xl mx-auto relative group">
+                <input type="text" placeholder="Cari kode voucher..." aria-label="Cari voucher"
+                    wire:model.live.debounce.500ms="search"
+                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
+                <button
+                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                     </svg>
-                    <input type="text" placeholder="Cari kode voucher..." aria-label="Cari voucher"
-                        wire:model.live.debounce.500ms="search"
-                        class="w-full py-3 pl-11 pr-4 rounded-xl border border-home-foreground/10 text-home-foreground placeholder-home-foreground/40 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm">
-                </div>
+                </button>
             </div>
+        </div>
+    </section>
 
+    <main class="flex-grow px-6 lg:px-32 xl:px-48 py-24 font-sans flex flex-col">
+
+        <section class="flex flex-col lg:flex-row justify-center gap-4 mb-12" aria-label="Filter">
+            
             <div class="flex flex-col sm:flex-row gap-4">
                 <div class="relative">
                     <select wire:model.live="outlet_id" aria-label="Filter Outlet"