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

refactor(home): unify hero sections and simplify page toolbars

Browse Source
This commit is contained in:
ifanprima130206 2025-12-14 15:19:04 +07:00
parent 6dd2b2ec7e
commit cfe3c5d288
4 changed files with 128 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

61
resources/views/livewire/home/outlets.blade.php
View File

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

50
resources/views/livewire/home/product/index.blade.php
View File

@ -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">

44
resources/views/livewire/home/vouchers.blade.php
View File

@ -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"