161 lines
10 KiB
PHP
161 lines
10 KiB
PHP
<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">
|
|
|
|
<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>
|
|
|
|
<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">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="relative">
|
|
<select wire:model.live="outlet_id" aria-label="Filter Outlet"
|
|
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-[180px] shadow-sm">
|
|
<option value="">Semua Outlet</option>
|
|
@foreach ($outlets as $key => $value)
|
|
<option value="{{ $key }}">{{ $value }}</option>
|
|
@endforeach
|
|
</select>
|
|
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<select wire:model.live="sort" aria-label="Urutkan Voucher"
|
|
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>
|
|
<option value="latest">Terbaru</option>
|
|
<option value="biggest">Potongan Terbesar</option>
|
|
<option value="ending-soon">Segera Berakhir</option>
|
|
</select>
|
|
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
|
@foreach ($vouchers as $voucher)
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/30 hover:-translate-y-1 transition-all duration-300 group flex flex-col h-full">
|
|
|
|
<div class="bg-home-primary/5 p-6 relative overflow-hidden flex-1">
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-home-primary/10 rounded-full blur-2xl -mr-10 -mt-10">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div
|
|
class="inline-flex items-center gap-2 bg-white px-3 py-1 rounded-full border border-home-primary/10 shadow-sm mb-4">
|
|
<span class="w-2 h-2 rounded-full bg-home-primary"></span>
|
|
<span
|
|
class="text-xs font-bold text-home-primary uppercase tracking-wider">{{ $voucher->tags }}</span>
|
|
</div>
|
|
|
|
<h3
|
|
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-primary transition-colors line-clamp-2">
|
|
{{ $voucher->name }}
|
|
</h3>
|
|
<p class="text-sm text-home-foreground/60 mb-6 line-clamp-2 leading-relaxed">
|
|
{{ $voucher->summary }}
|
|
</p>
|
|
|
|
<div
|
|
class="bg-white rounded-xl p-4 border border-dashed border-home-primary/30 flex items-center justify-between group-hover:border-home-primary transition-colors">
|
|
<div>
|
|
<p
|
|
class="text-[10px] text-home-foreground/50 uppercase tracking-widest font-bold mb-1">
|
|
Kode Voucher</p>
|
|
<p class="text-lg font-bold text-home-primary font-mono tracking-widest select-all">
|
|
{{ $voucher->code }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="w-8 h-8 rounded-full bg-home-primary/10 flex items-center justify-center text-home-primary">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 pt-4 pb-0 space-y-3">
|
|
<div class="flex justify-between items-center text-sm border-b border-home-foreground/5 pb-3">
|
|
<span class="text-home-foreground/50 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z">
|
|
</path>
|
|
</svg>
|
|
Min. Pembelian
|
|
</span>
|
|
<span class="font-bold text-home-foreground">{{ $voucher->min_purchase_formatted }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm border-b border-home-foreground/5 pb-3">
|
|
<span class="text-home-foreground/50 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
Berlaku Hingga
|
|
</span>
|
|
<time datetime="{{ $voucher->end_date }}"
|
|
class="font-bold text-home-foreground">{{ $voucher->end_date }}</time>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-home-foreground/50 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20 12H4"></path>
|
|
</svg>
|
|
Sisa Kuota
|
|
</span>
|
|
<span class="font-bold text-home-primary bg-home-primary/10 px-2 py-0.5 rounded text-xs">
|
|
{{ $voucher->available_count }} / {{ $voucher->quota ?? '∞' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 flex gap-3 mt-auto">
|
|
<button
|
|
class="flex-1 bg-home-primary text-white font-bold py-3 rounded-xl hover:bg-home-secondary hover:text-home-primary hover:shadow-lg hover:shadow-home-primary/20 transition-all duration-300 text-sm shadow-md shadow-home-primary/10">
|
|
Klaim Voucher
|
|
</button>
|
|
<button
|
|
class="flex-1 border border-home-foreground/20 text-home-foreground font-bold py-3 rounded-xl hover:border-home-primary hover:text-home-primary hover:bg-home-primary/5 transition-all duration-300 text-sm">
|
|
Lihat Detail
|
|
</button>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</section>
|
|
|
|
<div class="mt-auto flex justify-center w-full">
|
|
{{ $vouchers->links() }}
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|