yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Yoga Pangestu 2025-12-19 21:14:40 +07:00
parent de89ff5047
commit 26db5d34dc
5 changed files with 89 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/Livewire/Home/Index.php
View File

@ -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()

7
resources/views/components/sections/ui/home/_header.blade.php
View File

@ -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">
<svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-6 text-home-foreground transition-colors duration-300">
stroke-width="1.5" stroke="currentColor"
class="size-6 text-home-foreground transition-colors duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
@ -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')
<a href="{{ route($item['route']) }}" class="hover:opacity-80 transition-opacity" wire:navigate>
<a href="{{ route($item['route']) }}"
class="{{ request()->routeIs($item['route']) ? 'font-bold text-home-primary' : 'hover:opacity-80' }} transition-opacity"
wire:navigate>
{{ $item['title'] }}
</a>
@endif

2
resources/views/livewire/home/article/index.blade.php
View File

@ -30,7 +30,7 @@ class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full fl
</div>
</section>
<main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
<main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">k
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12">

38
resources/views/livewire/home/faq/index.blade.php
View File

@ -1,12 +1,36 @@
<div>
<section class="px-6 lg:px-32 xl:px-48 py-36 bg-white min-h-screen">
{{-- 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-16 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
<p class="text-home-foreground/60 text-lg max-w-2xl mx-auto">
Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami.
{{-- 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>
</header>
{{-- 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 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
@ -74,5 +98,5 @@ class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rou
</div>
</div>
</section>
</section>
</div>

76
resources/views/livewire/home/partials/jumbotron/left.blade.php
View File

@ -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
<div class="flex flex-col justify-center flex-1 space-y-6 lg:pt-48">
<header class="flex flex-wrap items-center gap-4">
@if ($totalMembersCount > 0)
<header class="flex flex-wrap items-center gap-4">
<div class="flex items-center">
@foreach ($latestMembers as $member)
<figure
class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm {{ !$loop->first ? '-ms-2' : '' }}">
<img src="https://ui-avatars.com/api/?name={{ urlencode($member->name) }}&background=random&color=fff"
alt="{{ $member->name }}" class="w-full h-full object-cover">
</figure>
@endforeach
</div>
<div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
Plus <span class="text-home-primary font-bold">{{ $totalMembersCount }}</span> Trusted users!
</div>
</header>
@endif
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
Discover your best<br><span class="italic font-serif font-light text-home-primary">perfume</span> at today
</h1>
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
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">
<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>
<button
class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
Explore Shop
</button>
<span class="w-8 h-[2px] bg-home-primary/20"></span>
<button
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
<div <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</div>
<div
class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
</div>
</header>
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
Discover your best<br><span class="italic font-serif font-light text-home-primary">perfume</span> at today
</h1>
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
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-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
Explore Shop
</button>
<span class="w-8 h-[2px] bg-home-primary/20"></span>
<button
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
<div
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</div>
</button>
</div>