274 lines
19 KiB
PHP
274 lines
19 KiB
PHP
@php
|
|
$product = (object) [
|
|
'name' => 'Oud Royal Premium',
|
|
'category' => 'Luxury Collection',
|
|
'price' => 1200000,
|
|
'original_price' => 1500000,
|
|
'rating' => 4.9,
|
|
'reviews_count' => 128,
|
|
'description' => 'Oud Royal adalah wewangian oriental yang memikat, menggabungkan kemewahan kayu gaharu (oud) dengan kelembutan mawar Bulgaria dan sentuhan rempah eksotis. Dirancang untuk pria dan wanita yang menginginkan aroma elegan dan tahan lama hingga 12 jam.',
|
|
'stock' => 15,
|
|
'sizes' => ['30ml', '50ml', '100ml'],
|
|
'images' => [
|
|
'https://placehold.co/600x600/png?text=Oud+Royal+1',
|
|
'https://placehold.co/600x600/png?text=Oud+Royal+2',
|
|
'https://placehold.co/600x600/png?text=Oud+Royal+3',
|
|
'https://placehold.co/600x600/png?text=Oud+Royal+4',
|
|
],
|
|
'notes' => [
|
|
'top' => 'Bergamot, Lemon, Pink Pepper',
|
|
'middle' => 'Bulgarian Rose, Saffron, Jasmine',
|
|
'base' => 'Agarwood (Oud), Amber, Musk, Vanilla'
|
|
]
|
|
];
|
|
|
|
$relatedProducts = [
|
|
[
|
|
'name' => 'Golden Amber',
|
|
'category' => 'Oriental',
|
|
'price' => 890000,
|
|
'image' => 'https://placehold.co/400x500/png?text=Golden+Amber',
|
|
'rating' => 4.9,
|
|
],
|
|
[
|
|
'name' => 'Spring Blossom',
|
|
'category' => 'Floral',
|
|
'price' => 380000,
|
|
'image' => 'https://placehold.co/400x500/png?text=Spring+Blossom',
|
|
'rating' => 4.7,
|
|
],
|
|
[
|
|
'name' => 'Woody Intense',
|
|
'category' => 'Woody',
|
|
'price' => 650000,
|
|
'image' => 'https://placehold.co/400x500/png?text=Woody+Intense',
|
|
'rating' => 4.8,
|
|
],
|
|
[
|
|
'name' => 'Aqua Marine',
|
|
'category' => 'Fresh',
|
|
'price' => 420000,
|
|
'image' => 'https://placehold.co/400x500/png?text=Aqua+Marine',
|
|
'rating' => 4.6,
|
|
],
|
|
[
|
|
'name' => 'Spicy Leather',
|
|
'category' => 'Leather',
|
|
'price' => 750000,
|
|
'image' => 'https://placehold.co/400x500/png?text=Spicy+Leather',
|
|
'rating' => 4.9,
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<div class="flex flex-col min-h-screen bg-home-background font-sans text-home-foreground" x-data="{
|
|
selectedSize: '50ml',
|
|
mainImage: '{{ $product->images[0] }}',
|
|
qty: 1
|
|
}">
|
|
|
|
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-32">
|
|
|
|
<nav class="flex items-center text-sm text-home-foreground/50 mb-8 overflow-x-auto whitespace-nowrap">
|
|
<a href="#" class="hover:text-home-primary transition-colors">Beranda</a>
|
|
<svg class="w-3 h-3 mx-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
<a href="#" class="hover:text-home-primary transition-colors">Produk</a>
|
|
<svg class="w-3 h-3 mx-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
<a href="#" class="hover:text-home-primary transition-colors">{{ $product->category }}</a>
|
|
<svg class="w-3 h-3 mx-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
<span class="text-home-primary font-medium">{{ $product->name }}</span>
|
|
</nav>
|
|
|
|
<section class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 mb-24">
|
|
|
|
<div class="lg:col-span-7">
|
|
<div class="sticky top-32 space-y-6">
|
|
<div class="aspect-square bg-home-primary/5 rounded-3xl overflow-hidden border border-home-foreground/5 relative group">
|
|
<img :src="mainImage" alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-6 left-6">
|
|
<span class="bg-home-primary text-white text-xs font-bold px-3 py-1.5 rounded-full uppercase tracking-wider shadow-lg">Best Seller</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-4">
|
|
@foreach($product->images as $img)
|
|
<button @click="mainImage = '{{ $img }}'"
|
|
class="aspect-square rounded-xl overflow-hidden border-2 transition-all duration-300"
|
|
:class="mainImage === '{{ $img }}' ? 'border-home-primary ring-2 ring-home-primary/20' : 'border-transparent hover:border-home-foreground/20'">
|
|
<img src="{{ $img }}" class="w-full h-full object-cover">
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-5 flex flex-col h-full">
|
|
<div class="mb-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm font-bold tracking-widest text-home-primary uppercase bg-home-primary/10 px-3 py-1 rounded">{{ $product->category }}</span>
|
|
<div class="flex items-center gap-1 text-yellow-500 text-sm">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<span class="font-bold text-home-foreground">{{ $product->rating }}</span>
|
|
<span class="text-home-foreground/40 underline decoration-home-foreground/20 cursor-pointer">({{ $product->reviews_count }} Ulasan)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl md:text-4xl font-bold text-home-foreground mb-4 leading-tight">{{ $product->name }}</h1>
|
|
|
|
<div class="flex items-end gap-3 mb-8 border-b border-home-foreground/10 pb-8">
|
|
<span class="text-3xl font-bold text-home-primary">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
|
|
<span class="text-lg text-home-foreground/40 line-through mb-1">Rp {{ number_format($product->original_price, 0, ',', '.') }}</span>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<p class="text-home-foreground/70 leading-relaxed text-lg">
|
|
{{ $product->description }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-home-foreground/5 rounded-2xl p-6 mb-8 border border-home-foreground/5">
|
|
<h3 class="font-bold text-home-foreground mb-4 flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
|
|
Fragrance Notes
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex">
|
|
<span class="w-24 text-sm font-bold text-home-foreground/50">Top Notes</span>
|
|
<span class="text-sm font-medium text-home-foreground">{{ $product->notes['top'] }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-24 text-sm font-bold text-home-foreground/50">Middle</span>
|
|
<span class="text-sm font-medium text-home-foreground">{{ $product->notes['middle'] }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-24 text-sm font-bold text-home-foreground/50">Base Notes</span>
|
|
<span class="text-sm font-medium text-home-foreground">{{ $product->notes['base'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<label class="block text-sm font-bold text-home-foreground mb-3">Pilih Ukuran</label>
|
|
<div class="flex flex-wrap gap-3">
|
|
@foreach($product->sizes as $size)
|
|
<button @click="selectedSize = '{{ $size }}'"
|
|
class="px-6 py-3 rounded-xl border-2 font-bold transition-all duration-200"
|
|
:class="selectedSize === '{{ $size }}'
|
|
? 'border-home-primary bg-home-primary text-white shadow-lg shadow-home-primary/20'
|
|
: 'border-home-foreground/10 text-home-foreground hover:border-home-primary/50'">
|
|
{{ $size }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="flex items-center border-2 border-home-foreground/10 rounded-xl px-4 w-full sm:w-auto">
|
|
<button @click="qty > 1 ? qty-- : null" class="w-8 h-8 flex items-center justify-center text-home-foreground/50 hover:text-home-primary transition-colors font-bold text-xl">-</button>
|
|
<input type="text" x-model="qty" readonly class="w-12 text-center bg-transparent font-bold text-home-foreground border-none focus:ring-0">
|
|
<button @click="qty++" class="w-8 h-8 flex items-center justify-center text-home-foreground/50 hover:text-home-primary transition-colors font-bold text-xl">+</button>
|
|
</div>
|
|
<button class="flex-1 bg-home-primary text-white font-bold py-4 rounded-xl hover:bg-home-secondary hover:text-home-primary transition-all duration-300 shadow-xl shadow-home-primary/20 flex items-center justify-center gap-2">
|
|
<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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
|
Tambah ke Keranjang
|
|
</button>
|
|
<button class="w-14 h-full border-2 border-home-foreground/10 rounded-xl flex items-center justify-center text-home-foreground/50 hover:text-red-500 hover:border-red-200 hover:bg-red-50 transition-all">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 flex gap-6 text-xs font-bold text-home-foreground/60 uppercase tracking-widest">
|
|
<span class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 100% Original</span>
|
|
<span class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> Garansi Pengiriman</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-24">
|
|
<div class="border-b border-home-foreground/10 mb-8">
|
|
<div class="flex gap-8 overflow-x-auto">
|
|
<button class="pb-4 border-b-2 border-home-primary text-home-primary font-bold text-lg whitespace-nowrap">Detail Produk</button>
|
|
<button class="pb-4 border-b-2 border-transparent text-home-foreground/50 font-medium text-lg hover:text-home-foreground transition-colors whitespace-nowrap">Cara Penggunaan</button>
|
|
<button class="pb-4 border-b-2 border-transparent text-home-foreground/50 font-medium text-lg hover:text-home-foreground transition-colors whitespace-nowrap">Ulasan (128)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 text-home-foreground/70 leading-relaxed">
|
|
<div class="lg:col-span-2 space-y-4">
|
|
<p>Oud Royal Premium adalah mahakarya wewangian yang diciptakan untuk mereka yang menghargai kualitas tanpa kompromi. Menggunakan minyak gaharu (oud) langka dari Kalimantan yang difermentasi selama 5 tahun, dipadukan dengan kesegaran Bergamot Italia di top notes.</p>
|
|
<p>Jantung aromanya mekar dengan mawar Bulgaria yang dipetik saat fajar, memberikan nuansa floral yang mewah namun tidak berlebihan. Base notes yang hangat dari Amber dan Musk memastikan aroma ini menempel di kulit Anda, menciptakan jejak aroma (sillage) yang tak terlupakan.</p>
|
|
<ul class="list-disc pl-5 space-y-2 mt-4">
|
|
<li>Konsentrasi: Eau de Parfum (EDP)</li>
|
|
<li>Longevity: 8-12 Jam</li>
|
|
<li>Projection: 2-3 Meter</li>
|
|
<li>Gender: Unisex (Condong ke Maskulin)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-home-foreground/5 p-8 rounded-2xl border border-home-foreground/5 h-fit">
|
|
<h4 class="font-bold text-home-foreground mb-4">Pengiriman & Pengembalian</h4>
|
|
<p class="text-sm mb-4">Pesanan sebelum jam 14.00 dikirim hari yang sama. Pengiriman aman dengan bubble wrap tebal dan box eksklusif.</p>
|
|
<p class="text-sm">Garansi uang kembali 100% jika produk pecah atau tidak original (wajib video unboxing).</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="border-t border-home-foreground/10 pt-16 mb-16">
|
|
<div class="flex items-center justify-between mb-10">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-home-primary">Anda Mungkin Juga Suka</h2>
|
|
<div class="flex gap-2">
|
|
<button id="slideLeft" class="w-10 h-10 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white transition-all"><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="M15 19l-7-7 7-7"></path></svg></button>
|
|
<button id="slideRight" class="w-10 h-10 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white transition-all"><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="M9 5l7 7-7 7"></path></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="productSlider"
|
|
class="flex gap-6 overflow-x-auto pb-12 snap-x snap-mandatory scroll-smooth hide-scrollbar"
|
|
style="scrollbar-width: none; -ms-overflow-style: none;">
|
|
@foreach ($relatedProducts as $rec)
|
|
<article
|
|
class="min-w-[280px] md:min-w-[300px] bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:border-home-primary/30 transition-all duration-300 snap-start group flex flex-col h-full">
|
|
<div class="h-60 overflow-hidden relative bg-home-primary/5">
|
|
<img src="{{ $rec['image'] }}" alt="{{ $rec['name'] }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
<div class="p-5 flex flex-col flex-grow">
|
|
<div class="text-[10px] font-bold tracking-widest text-home-primary uppercase mb-2">
|
|
{{ $rec['category'] }}</div>
|
|
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $rec['name'] }}</h3>
|
|
<div class="mt-auto pt-4 flex items-center justify-between">
|
|
<span class="font-bold text-home-primary">Rp
|
|
{{ number_format($rec['price'], 0, ',', '.') }}</span>
|
|
<button
|
|
class="w-8 h-8 rounded bg-home-foreground/5 text-home-foreground hover:bg-home-primary hover:text-white flex items-center justify-center transition-colors">
|
|
<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 4v16m8-8H4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const slider = document.getElementById('productSlider');
|
|
const leftBtn = document.getElementById('slideLeft');
|
|
const rightBtn = document.getElementById('slideRight');
|
|
|
|
if (slider && leftBtn && rightBtn) {
|
|
rightBtn.addEventListener('click', () => {
|
|
slider.scrollBy({ left: 320, behavior: 'smooth' });
|
|
});
|
|
leftBtn.addEventListener('click', () => {
|
|
slider.scrollBy({ left: -320, behavior: 'smooth' });
|
|
});
|
|
}
|
|
});
|
|
</script> |