161 lines
8.4 KiB
PHP
161 lines
8.4 KiB
PHP
<div>
|
|
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl font-bold text-home-foreground mb-2">Voucher</h1>
|
|
<p class="text-home-foreground/60">Dapatkan diskon spesial dengan voucher eksklusif kami</p>
|
|
</header>
|
|
|
|
<section class="flex flex-col lg:flex-row gap-4 mb-8" aria-label="Pencarian dan Filter">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" 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 kode voucher"
|
|
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
|
</div>
|
|
</div>
|
|
|
|
<select aria-label="Filter Outlet"
|
|
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
|
<option value="">Filter Outlet</option>
|
|
<option value="jakarta">Jakarta</option>
|
|
<option value="bandung">Bandung</option>
|
|
<option value="surabaya">Surabaya</option>
|
|
<option value="medan">Medan</option>
|
|
</select>
|
|
|
|
<select aria-label="Urutkan Voucher"
|
|
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
|
<option value="">Urutkan</option>
|
|
<option value="latest">Terbaru</option>
|
|
<option value="biggest">Terbesar</option>
|
|
<option value="ending-soon">Berakhir Segera</option>
|
|
</select>
|
|
</section>
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
@php
|
|
$vouchers = [
|
|
[
|
|
'tag' => 'DISKON 30%',
|
|
'title' => 'Diskon Member Premium',
|
|
'desc' => 'Hemat hingga Rp150.000 untuk pembelian',
|
|
'code' => 'PREMIUM30',
|
|
'min' => 'Rp500.000',
|
|
'valid' => '15 Des 2024',
|
|
'date_iso' => '2024-12-15',
|
|
'quota' => '245/500',
|
|
],
|
|
[
|
|
'tag' => 'GRATIS ONGKIR',
|
|
'title' => 'Gratis Ongkir ke Seluruh Indonesia',
|
|
'desc' => 'Tanpa minimum pembelian untuk wilayah tertentu',
|
|
'code' => 'GRATIS500',
|
|
'min' => 'Rp100.000',
|
|
'valid' => '20 Des 2024',
|
|
'date_iso' => '2024-12-20',
|
|
'quota' => '189/300',
|
|
],
|
|
[
|
|
'tag' => 'CASHBACK 20%',
|
|
'title' => 'Cashback Pembelian Parfum',
|
|
'desc' => 'Dapatkan kembali 20% untuk setiap pembelian',
|
|
'code' => 'CASHBACK20',
|
|
'min' => 'Rp200.000',
|
|
'valid' => '25 Des 2024',
|
|
'date_iso' => '2024-12-25',
|
|
'quota' => '412/600',
|
|
],
|
|
[
|
|
'tag' => 'DISKON 25%',
|
|
'title' => 'Flash Sale Parfum Pria',
|
|
'desc' => 'Hemat untuk koleksi parfum pria pilihan',
|
|
'code' => 'FLASHPRIA',
|
|
'min' => 'Rp300.000',
|
|
'valid' => '18 Des 2024',
|
|
'date_iso' => '2024-12-18',
|
|
'quota' => '67/200',
|
|
],
|
|
[
|
|
'tag' => 'DISKON 20%',
|
|
'title' => 'Flash Sale Parfum Wanita',
|
|
'desc' => 'Hemat untuk koleksi parfum wanita favorit',
|
|
'code' => 'FLASHWOM',
|
|
'min' => 'Rp250.000',
|
|
'valid' => '22 Des 2024',
|
|
'date_iso' => '2024-12-22',
|
|
'quota' => '328/450',
|
|
],
|
|
[
|
|
'tag' => 'BELI 2 GRATIS 1',
|
|
'title' => 'Beli 2 Gratis 1 Aromatherapy',
|
|
'desc' => 'Promo spesial untuk produk aromatherapy',
|
|
'code' => 'BELI2GRAT',
|
|
'min' => 'Rp150.000',
|
|
'valid' => '28 Des 2024',
|
|
'date_iso' => '2024-12-28',
|
|
'quota' => '156/300',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($vouchers as $voucher)
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow">
|
|
<div class="bg-home-foreground/5 p-6 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-24 h-24 bg-home-foreground/5 rounded-full -mr-8 -mt-8">
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div
|
|
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3">
|
|
{{ $voucher['tag'] }}</div>
|
|
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $voucher['title'] }}</h3>
|
|
<p class="text-sm text-home-foreground/60 mb-4">{{ $voucher['desc'] }}</p>
|
|
|
|
<div class="bg-white rounded-lg p-3 mb-4 border border-home-foreground/20">
|
|
<p class="text-xs text-home-foreground/60 mb-1">Kode Voucher:</p>
|
|
<p class="text-lg font-bold text-home-foreground font-mono tracking-widest">
|
|
{{ $voucher['code'] }}</p>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-sm mb-4">
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Min. Pembelian:</span>
|
|
<span class="font-semibold text-home-foreground">{{ $voucher['min'] }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Berlaku:</span>
|
|
<time datetime="{{ $voucher['date_iso'] }}"
|
|
class="font-semibold text-home-foreground">{{ $voucher['valid'] }}</time>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Sisa Voucher:</span>
|
|
<span class="font-semibold text-home-foreground">{{ $voucher['quota'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 flex gap-3">
|
|
<button
|
|
class="flex-1 bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity">
|
|
Klaim
|
|
</button>
|
|
<button
|
|
class="flex-1 border-2 border-home-foreground text-home-foreground font-bold py-2.5 rounded-lg hover:bg-home-foreground/5 transition-colors">
|
|
Detail
|
|
</button>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|