From 26db5d34dca5fafdfdd3865551193b7251fc8b05 Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Fri, 19 Dec 2025 21:14:40 +0700 Subject: [PATCH] feat: Dynamically display recent members and total count in the home jumbotron, add active state styling to header navigation, and redesign the FAQ page hero section. --- app/Livewire/Home/Index.php | 20 ++++- .../sections/ui/home/_header.blade.php | 7 +- .../livewire/home/article/index.blade.php | 2 +- .../views/livewire/home/faq/index.blade.php | 38 ++++++++-- .../home/partials/jumbotron/left.blade.php | 76 +++++++++---------- 5 files changed, 89 insertions(+), 54 deletions(-) diff --git a/app/Livewire/Home/Index.php b/app/Livewire/Home/Index.php index 6dabc84..ab95398 100644 --- a/app/Livewire/Home/Index.php +++ b/app/Livewire/Home/Index.php @@ -4,6 +4,7 @@ use App\Models\Brand; use App\Models\ChooseUs; +use App\Models\Customer; use App\Models\Faq; use App\Models\PerfumeFeature; use Illuminate\Support\Facades\Storage; @@ -23,11 +24,15 @@ class Index extends Component public array $whyChooseUs = []; + public int $totalMembersCount = 0; + + public $latestMembers = []; + public function mount() { $this->brands = Brand::orderBy('sort_order') ->get() - ->map(fn (Brand $brand) => [ + ->map(fn(Brand $brand) => [ 'name' => $brand->name, 'image' => $brand->getFirstMediaUrl('image') ? Storage::url($brand->getFirstMediaUrl('image')) : asset('assets/images/logo.png'), ]) @@ -35,7 +40,7 @@ public function mount() $this->perfumeFeatures = PerfumeFeature::orderBy('sort_order') ->get() - ->map(fn (PerfumeFeature $perfumeFeature) => [ + ->map(fn(PerfumeFeature $perfumeFeature) => [ 'name' => $perfumeFeature->name, 'description' => $perfumeFeature->description, ]) @@ -43,7 +48,7 @@ public function mount() $this->faqs = Faq::orderBy('sort_order') ->get() - ->map(fn (Faq $faq) => [ + ->map(fn(Faq $faq) => [ 'question' => $faq->question, 'answer' => $faq->answer, ]) @@ -51,11 +56,18 @@ public function mount() $this->whyChooseUs = ChooseUs::orderBy('sort_order') ->get() - ->map(fn (ChooseUs $chooseUs) => [ + ->map(fn(ChooseUs $chooseUs) => [ 'name' => $chooseUs->name, 'description' => $chooseUs->description, ]) ->toArray(); + + $this->totalMembersCount = Customer::whereNotNull('user_id')->count(); + + $this->latestMembers = Customer::whereNotNull('user_id') + ->inRandomOrder() + ->take(3) + ->get(); } public function render() diff --git a/resources/views/components/sections/ui/home/_header.blade.php b/resources/views/components/sections/ui/home/_header.blade.php index 727b10c..6672dc0 100644 --- a/resources/views/components/sections/ui/home/_header.blade.php +++ b/resources/views/components/sections/ui/home/_header.blade.php @@ -6,7 +6,8 @@ class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group"> + stroke-width="1.5" stroke="currentColor" + class="size-6 text-home-foreground transition-colors duration-300"> @@ -28,7 +29,9 @@ class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full tran aria-label="Main Navigation"> @foreach ($header as $item) @if ($item['type'] === 'link') - + {{ $item['title'] }} @endif diff --git a/resources/views/livewire/home/article/index.blade.php b/resources/views/livewire/home/article/index.blade.php index aec40b8..ecf78dc 100644 --- a/resources/views/livewire/home/article/index.blade.php +++ b/resources/views/livewire/home/article/index.blade.php @@ -30,7 +30,7 @@ class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full fl -
+
k
diff --git a/resources/views/livewire/home/faq/index.blade.php b/resources/views/livewire/home/faq/index.blade.php index 26c4de3..49966a5 100644 --- a/resources/views/livewire/home/faq/index.blade.php +++ b/resources/views/livewire/home/faq/index.blade.php @@ -1,12 +1,36 @@
-
+ {{-- Hero Section --}} +
+ {{-- Background Image --}} +
+ Perfume Background +
+
-
-

Frequently Asked Questions

-

- Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami. + {{-- Content --}} +

+

Artikel Terbaru

+

+ Baca tips profesional seputar perawatan wewangian, tren lifestyle, dan rekomendasi terbaik.

-
+ + {{-- Search Bar --}} +
+ + +
+
+ + +
@@ -74,5 +98,5 @@ class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rou
- + diff --git a/resources/views/livewire/home/partials/jumbotron/left.blade.php b/resources/views/livewire/home/partials/jumbotron/left.blade.php index a9f020b..56508d7 100644 --- a/resources/views/livewire/home/partials/jumbotron/left.blade.php +++ b/resources/views/livewire/home/partials/jumbotron/left.blade.php @@ -3,48 +3,44 @@ class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:px-10 lg:pb-8 flex
-
+ @if ($totalMembersCount > 0) +
+
+ @foreach ($latestMembers as $member) +
+ {{ $member->name }} +
+ @endforeach +
+ +
+ Plus {{ $totalMembersCount }} Trusted users! +
+
+ @endif + +

+ Discover your best
perfume at today +

+ +

+ Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you + want + to make. +

+
-
- User 1 -
-
- User 2 -
-
- User 3 -
+ + +
- -

- Discover your best
perfume at today -

- -

- Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want - to make. -

- -
- - -