355 lines
21 KiB
PHP
355 lines
21 KiB
PHP
<div>
|
||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||
|
||
<aside class="md:col-span-3">
|
||
<div
|
||
class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm hover:shadow-md transition-shadow sticky top-24">
|
||
<h2 class="text-lg font-bold text-home-foreground mb-5">Kategori</h2>
|
||
|
||
<form>
|
||
<fieldset class="space-y-3">
|
||
<legend class="sr-only">Pilih Kategori</legend>
|
||
@foreach (['Pria', 'Wanita', 'Unisex', 'Aromatherapy', 'Luxury'] as $kategori)
|
||
<label class="flex items-center cursor-pointer group">
|
||
<input type="checkbox"
|
||
class="w-5 h-5 rounded border-gray-300 text-home-foreground cursor-pointer"
|
||
value="{{ $kategori }}">
|
||
<span
|
||
class="ml-3 text-home-foreground group-hover:opacity-70 transition-opacity">{{ $kategori }}</span>
|
||
</label>
|
||
@endforeach
|
||
</fieldset>
|
||
|
||
<div class="border-t border-home-foreground/10 my-5"></div>
|
||
|
||
<h3 class="text-sm font-semibold text-home-foreground mb-3">Rentang Harga</h3>
|
||
<fieldset class="space-y-3">
|
||
<legend class="sr-only">Pilih Rentang Harga</legend>
|
||
<label class="flex items-center cursor-pointer">
|
||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||
value="all" checked>
|
||
<span class="ml-2 text-sm text-home-foreground">Semua Harga</span>
|
||
</label>
|
||
<label class="flex items-center cursor-pointer">
|
||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||
value="under-100k">
|
||
<span class="ml-2 text-sm text-home-foreground">Di bawah Rp100.000</span>
|
||
</label>
|
||
<label class="flex items-center cursor-pointer">
|
||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||
value="100k-500k">
|
||
<span class="ml-2 text-sm text-home-foreground">Rp100.000 - Rp500.000</span>
|
||
</label>
|
||
<label class="flex items-center cursor-pointer">
|
||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||
value="above-500k">
|
||
<span class="ml-2 text-sm text-home-foreground">Di atas Rp500.000</span>
|
||
</label>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="md:col-span-9">
|
||
<header class="flex flex-col sm:flex-row gap-4 mb-6">
|
||
<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="search" placeholder="Cari parfum favorit..."
|
||
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"
|
||
aria-label="Cari produk">
|
||
</div>
|
||
</div>
|
||
|
||
<select
|
||
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"
|
||
aria-label="Urutkan produk">
|
||
<option value="">Urutkan</option>
|
||
<option value="latest">Terbaru</option>
|
||
<option value="popular">Terpopuler</option>
|
||
<option value="price_low">Harga Terendah</option>
|
||
<option value="price_high">Harga Tertinggi</option>
|
||
<option value="best_rating">Rating Terbaik</option>
|
||
</select>
|
||
</header>
|
||
|
||
<div class="bg-home-foreground/5 border border-home-foreground/10 rounded-lg p-4 mb-6" role="status">
|
||
<p class="text-sm text-home-foreground">Menampilkan <span class="font-semibold">12</span> dari <span
|
||
class="font-semibold">48</span> koleksi parfum</p>
|
||
</div>
|
||
|
||
@php
|
||
$mainProducts = [
|
||
[
|
||
'name' => 'Aqua Di Luna',
|
||
'description' => 'Fresh aquatic fragrance',
|
||
'price' => 249000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#10b981', '#3b82f6', '#1f2937'],
|
||
],
|
||
[
|
||
'name' => 'Velvet Bloom',
|
||
'description' => 'Bunga merah jambu dengan musk',
|
||
'price' => 189000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#ec4899', '#f97316', '#6b7280'],
|
||
],
|
||
[
|
||
'name' => 'Santal Noir',
|
||
'description' => 'Sandalwood oriental elegance',
|
||
'price' => 350000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#8b4513', '#1f2937', '#f5f5f5'],
|
||
],
|
||
[
|
||
'name' => 'Citron Essence',
|
||
'description' => 'Lemon dan bergamot fresh',
|
||
'price' => 159000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#fbbf24', '#f59e0b', '#1f2937'],
|
||
],
|
||
[
|
||
'name' => 'Rose Garden',
|
||
'description' => 'Mawar klasik modern',
|
||
'price' => 199000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#ef4444', '#ec4899', '#6b7280'],
|
||
],
|
||
[
|
||
'name' => 'Lavender Dream',
|
||
'description' => 'Aromatherapy lavender murni',
|
||
'price' => 129000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#a78bfa', '#7c3aed', '#1f2937'],
|
||
],
|
||
];
|
||
@endphp
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||
@foreach ($mainProducts as $product)
|
||
<article
|
||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
loading="lazy">
|
||
<button
|
||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||
aria-label="Simpan ke favorit">
|
||
<svg class="w-5 h-5 text-home-foreground" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex gap-2 mb-3">
|
||
@foreach ($product['colors'] as $color)
|
||
<button
|
||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||
style="background-color: {{ $color }}"
|
||
aria-label="Pilih warna"></button>
|
||
@endforeach
|
||
</div>
|
||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}</h3>
|
||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||
<div class="mb-4">
|
||
<span
|
||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||
</div>
|
||
<button
|
||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||
to Cart</button>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
</div>
|
||
|
||
<nav class="flex items-center justify-between bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm"
|
||
aria-label="Pagination">
|
||
<div class="text-sm text-home-foreground">
|
||
Halaman <span class="font-bold">1</span> dari <span class="font-bold">4</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||
aria-label="Halaman sebelumnya" disabled>
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
@for ($page = 1; $page <= 4; $page++)
|
||
@if ($page == 1)
|
||
<button
|
||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||
aria-current="page">{{ $page }}</button>
|
||
@else
|
||
<button
|
||
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
||
@endif
|
||
@endfor
|
||
<button
|
||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
||
aria-label="Halaman selanjutnya">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="mt-12" aria-labelledby="related-products-heading">
|
||
<div class="flex items-center justify-between my-6">
|
||
<h2 id="related-products-heading" class="text-2xl font-bold text-home-foreground">Produk
|
||
Lainnya</h2>
|
||
<div class="flex items-center gap-3">
|
||
<button id="prevBtn"
|
||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||
aria-label="Produk sebelumnya">‹</button>
|
||
<button id="nextBtn"
|
||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||
aria-label="Produk selanjutnya">›</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="sliderTrack"
|
||
class="flex gap-6 overflow-x-auto scroll-smooth pb-4 snap-x snap-mandatory hide-scrollbar"
|
||
style="scrollbar-width: none; -ms-overflow-style: none;">
|
||
@php
|
||
$otherProducts = [
|
||
[
|
||
'name' => 'Oud Royal',
|
||
'description' => 'Oud premium luxury',
|
||
'price' => 1200000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#78350f', '#1f2937', '#d1d5db'],
|
||
],
|
||
[
|
||
'name' => 'Coconut Paradise',
|
||
'description' => 'Tropical eksotis',
|
||
'price' => 169000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#f4a460', '#d2691e', '#8b4513'],
|
||
],
|
||
[
|
||
'name' => 'Musk Addiction',
|
||
'description' => 'Musk manis tahan lama',
|
||
'price' => 149000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#d4a373', '#a0826d', '#5a4a42'],
|
||
],
|
||
[
|
||
'name' => 'Woody Spice',
|
||
'description' => 'Kayu rempah maskulin',
|
||
'price' => 229000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#92400e', '#1f2937', '#c2410c'],
|
||
],
|
||
[
|
||
'name' => 'Jasmine Nights',
|
||
'description' => 'Melati romantis malam',
|
||
'price' => 269000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#be123c', '#e11d48', '#6b7280'],
|
||
],
|
||
[
|
||
'name' => 'Mint Fresh',
|
||
'description' => 'Mint herbal menenangkan',
|
||
'price' => 139000,
|
||
'image' => 'https://placehold.co/400x500/png',
|
||
'colors' => ['#10b981', '#059669', '#047857'],
|
||
],
|
||
];
|
||
@endphp
|
||
|
||
@foreach ($otherProducts as $product)
|
||
<article
|
||
class="slider-item flex-none w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] snap-start bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
loading="lazy">
|
||
<button
|
||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||
aria-label="Simpan ke favorit">
|
||
<svg class="w-5 h-5 text-home-foreground" fill="none"
|
||
stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex gap-2 mb-3">
|
||
@foreach ($product['colors'] as $color)
|
||
<button
|
||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||
style="background-color: {{ $color }}"
|
||
aria-label="Pilih warna"></button>
|
||
@endforeach
|
||
</div>
|
||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}
|
||
</h3>
|
||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||
<div class="mb-4">
|
||
<span
|
||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||
</div>
|
||
<button
|
||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||
to Cart</button>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
</div>
|
||
</section>
|
||
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const track = document.getElementById("sliderTrack");
|
||
const next = document.getElementById("nextBtn");
|
||
const prev = document.getElementById("prevBtn");
|
||
|
||
if (track && next && prev) {
|
||
next.addEventListener("click", () => {
|
||
const item = track.querySelector('.slider-item');
|
||
if (item) {
|
||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||
track.scrollBy({
|
||
left: scrollAmount,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
|
||
prev.addEventListener("click", () => {
|
||
const item = track.querySelector('.slider-item');
|
||
if (item) {
|
||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||
track.scrollBy({
|
||
left: -scrollAmount,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|