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

feat(show-page): Add show product and article details page

Browse Source
This commit is contained in:
ifanprima130206 2025-12-13 21:40:47 +07:00
parent a4418a500d
commit 6b005ba109
8 changed files with 834 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/Livewire/Home/Article/Index.php
View File

@ -10,8 +10,22 @@
])]
class Index extends Component
{
public bool $isDetail = false;
public ?string $slug = null;
public function mount(?string $slug = null)
{
if ($slug) {
$this->isDetail = true;
$this->slug = $slug;
}
}
public function render()
{
return view('livewire.home.article.index');
return view(
$this->isDetail
? 'livewire.home.article.show'
: 'livewire.home.article.index'
);
}
}

17
app/Livewire/Home/Cart/Index.php Normal file
View File

@ -0,0 +1,17 @@
<?php
namespace App\Livewire\Home\Cart;
use Livewire\Attributes\Layout;
use Livewire\Component;
#[Layout('components.layouts.home', [
'title' => 'FAQ',
])]
class Index extends Component
{
public function render()
{
return view('livewire.home.cart.index');
}
}

17
app/Livewire/Home/Product/Index.php
View File

@ -10,8 +10,23 @@
])]
class Index extends Component
{
public bool $isDetail = false;
public ?string $slug = null;
public function mount(?string $slug = null)
{
if ($slug) {
$this->isDetail = true;
$this->slug = $slug;
}
}
public function render()
{
return view('livewire.home.product.index');
return view(
$this->isDetail
? 'livewire.home.product.show'
: 'livewire.home.product.index'
);
}
}

241
resources/views/livewire/home/article/show.blade.php Normal file
View File

@ -0,0 +1,241 @@
@php
$article = (object) [
'title' => 'Meluncurkan "Oud Royal": Mahakarya Aroma Eksotis dari Timur Tengah',
'slug' => 'meluncurkan-oud-royal',
'category' => 'Event & Peluncuran',
'author' => 'Tim Editorial',
'date' => '12 Desember 2025',
'read_time' => '5 menit baca',
'image' => 'https://cdn.mos.cms.futurecdn.net/VzUqgr8pfbNcfXrpzeVBPE-1920-80.jpg',
'content_intro' =>
'Setelah penantian panjang dan riset mendalam selama dua tahun di jantung Kalimantan dan Dubai, kami dengan bangga mempersembahkan koleksi terbaru kami: Oud Royal. Ini bukan sekadar parfum, melainkan sebuah perjalanan aroma yang melintasi batas budaya.',
'tags' => ['Luxury', 'Oud', 'New Arrival', 'Event'],
];
$relatedArticles = [
[
'title' => 'Cara Membedakan Parfum Original dan Palsu',
'date' => '10 Des 2025',
'image' => 'https://placehold.co/400x300/png?text=Tips+Parfum',
],
[
'title' => 'Tren Wewangian Musk di Tahun 2026',
'date' => '08 Des 2025',
'image' => 'https://placehold.co/400x300/png?text=Tren+Musk',
],
[
'title' => 'Kenapa Parfum Tidak Tahan Lama di Kulit Kering?',
'date' => '05 Des 2025',
'image' => 'https://placehold.co/400x300/png?text=Kulit+Kering',
],
];
@endphp
<div class="flex flex-col min-h-screen bg-home-background font-sans">
<div class="fixed top-0 left-0 h-1 bg-home-primary z-50 transition-all duration-100" id="progressBar"
style="width: 0%"></div>
<main class="flex-grow pb-24 pt-36">
<header class="px-6 lg:px-32 xl:px-48 mb-12 text-center max-w-6xl mx-auto">
<div class="flex items-center justify-center gap-3 mb-6 text-sm font-bold tracking-widest uppercase">
<span class="text-home-primary bg-home-primary/10 px-3 py-1 rounded-full">{{ $article->category }}</span>
<span class="text-home-foreground/40">&bull;</span>
<span class="text-home-foreground/60">{{ $article->date }}</span>
</div>
<h1 class="text-3xl md:text-5xl font-bold text-home-foreground mb-6 leading-tight">
{{ $article->title }}
</h1>
<div class="flex items-center justify-center gap-4 text-sm text-home-foreground/60">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-home-foreground/10 overflow-hidden">
<img src="https://placehold.co/100x100/png?text=A" alt="Author"
class="w-full h-full object-cover">
</div>
<span>Oleh <strong class="text-home-foreground">{{ $article->author }}</strong></span>
</div>
<span>&bull;</span>
<span>{{ $article->read_time }}</span>
</div>
</header>
<div class="px-6 lg:px-32 xl:px-48 mb-16">
<div class="aspect-video w-full rounded-xl overflow-hidden shadow-2xl">
<img src="{{ $article->image }}" alt="{{ $article->title }}" class="w-full h-full object-cover">
</div>
</div>
<div class="px-6 lg:px-32 xl:px-48 grid grid-cols-1 lg:grid-cols-12 gap-12">
<article class="lg:col-span-8">
<div class="flex items-center gap-4 mb-8 pb-8 border-b border-home-foreground/10 lg:hidden">
<span class="text-sm font-bold text-home-foreground">Bagikan:</span>
<button
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-colors"><svg
class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg></button>
<button
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-colors"><svg
class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
</svg></button>
<button
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-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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z">
</path>
</svg></button>
</div>
<div class="prose prose-lg max-w-none text-home-foreground/80 leading-relaxed">
<p
class="first-letter:text-6xl first-letter:font-bold first-letter:text-home-primary first-letter:float-left first-letter:mr-3 first-letter:mt-[-10px] mb-8 text-xl text-home-foreground font-medium">
{{ $article->content_intro }}
</p>
<p class="mb-6">
Dalam dunia wewangian, Oud (Gaharu) sering disebut sebagai "emas cair". Harganya yang fantastis
dan aromanya yang kompleks menjadikannya bahan primadona di kalangan kolektor parfum luxury.
Yadi Parfum mengambil langkah berani dengan menghadirkan interpretasi Oud yang lebih modern,
namun tetap menghormati tradisi Timur Tengah.
</p>
<h3 class="text-2xl font-bold text-home-foreground mt-10 mb-4">Filosofi di Balik Botol</h3>
<p class="mb-6">
"Kami ingin menciptakan sesuatu yang abadi," ujar Yadi, Founder dari Yadi Parfum. "Botol Oud
Royal didesain dengan kaca kristal berat dan tutup magnetik berlapis emas, merefleksikan
kualitas cairan di dalamnya."
</p>
<blockquote
class="border-l-4 border-home-primary pl-6 py-2 my-10 italic text-xl text-home-foreground font-serif bg-home-primary/5 rounded-r-lg">
"Parfum adalah seni yang tidak terlihat, puisi yang dihirup, dan kenangan yang tak terhapuskan."
</blockquote>
<p class="mb-6">
Peluncuran yang diadakan di Grand Ballroom Ritz Carlton Jakarta dihadiri oleh lebih dari 200
tamu undangan, termasuk selebriti, influencer kecantikan, dan kolektor parfum ternama. Acara ini
dimeriahkan dengan instalasi seni aroma interaktif.
</p>
<div class="my-10 rounded-2xl overflow-hidden shadow-lg">
<img src="https://placehold.co/800x400/png?text=Suasana+Event+Peluncuran" alt="Event"
class="w-full">
<p class="text-sm text-center text-home-foreground/50 py-3 italic bg-gray-50">Suasana peluncuran
Oud Royal di Jakarta.</p>
</div>
<h3 class="text-2xl font-bold text-home-foreground mt-10 mb-4">Ketersediaan</h3>
<p class="mb-6">
Oud Royal kini tersedia secara eksklusif di website resmi Yadi Parfum dan butik flagship kami di
Central Park Mall. Mengingat kelangkaan bahan bakunya, produksi batch pertama sangat terbatas.
</p>
</div>
<div class="mt-12 pt-8 border-t border-home-foreground/10">
<div class="flex flex-wrap gap-2">
@foreach ($article->tags as $tag)
<a href="#"
class="px-4 py-2 bg-home-foreground/5 text-home-foreground/70 rounded-lg text-sm font-bold hover:bg-home-primary hover:text-white transition-all">#{{ $tag }}</a>
@endforeach
</div>
</div>
<div class="grid grid-cols-2 gap-6 mt-12">
<a href="#"
class="group block p-6 border border-home-foreground/10 rounded-2xl hover:border-home-primary/30 transition-all">
<span
class="text-xs text-home-foreground/40 font-bold uppercase mb-1 block group-hover:text-home-primary">Sebelumnya</span>
<h4
class="font-bold text-home-foreground line-clamp-2 group-hover:text-home-primary transition-colors">
Review Jujur: Koleksi Floral Series 2024</h4>
</a>
<a href="#"
class="group block p-6 border border-home-foreground/10 rounded-2xl text-right hover:border-home-primary/30 transition-all">
<span
class="text-xs text-home-foreground/40 font-bold uppercase mb-1 block group-hover:text-home-primary">Selanjutnya</span>
<h4
class="font-bold text-home-foreground line-clamp-2 group-hover:text-home-primary transition-colors">
Tips Menyimpan Parfum Agar Awet Bertahun-tahun</h4>
</a>
</div>
</article>
<aside class="lg:col-span-4 pl-0 lg:pl-8 border-l-0 lg:border-l border-home-foreground/5">
<div class="sticky top-32 space-y-10">
<div>
<h3 class="text-lg font-bold text-home-primary mb-6 flex items-center gap-2">
<span class="w-1 h-6 bg-home-primary rounded-full"></span>
Populer Minggu Ini
</h3>
<div class="space-y-6">
@foreach ($relatedArticles as $index => $item)
<a href="#" class="flex gap-4 group">
<div class="w-20 h-20 flex-shrink-0 rounded-xl overflow-hidden">
<img src="{{ $item['image'] }}"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div>
<span
class="text-xs text-home-foreground/40 font-bold">{{ sprintf('%02d', $index + 1) }}</span>
<h4
class="font-bold text-home-foreground text-sm leading-snug group-hover:text-home-primary transition-colors mt-1">
{{ $item['title'] }}</h4>
<span
class="text-xs text-home-foreground/50 mt-2 block">{{ $item['date'] }}</span>
</div>
</a>
@endforeach
</div>
</div>
<section
class="bg-home-primary rounded-2xl p-8 text-center relative overflow-hidden group shadow-lg shadow-home-primary/20">
<div
class="absolute top-0 right-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -mr-10 -mt-10">
</div>
<div class="relative z-10">
<div
class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 text-white">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
</path>
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-2">Newsletter</h3>
<p class="text-sm text-white/80 mb-6 leading-relaxed">Dapatkan tips eksklusif dan artikel
terbaru langsung ke email Anda.</p>
<form onsubmit="event.preventDefault();" class="space-y-3">
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
class="w-full py-3 px-4 rounded-xl border border-white/20 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:bg-white/20 focus:border-home-secondary transition-all">
<button type="submit"
class="w-full bg-home-secondary text-home-primary font-bold py-3 rounded-xl hover:bg-white transition-all duration-300 text-sm shadow-lg">Subscribe</button>
</form>
</div>
</section>
</div>
</aside>
</div>
</main>
</div>
<script>
window.onscroll = function() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("progressBar").style.width = scrolled + "%";
};
</script>

259
resources/views/livewire/home/cart/index.blade.php Normal file
View File

@ -0,0 +1,259 @@
@php
$cartItems = [
[
'id' => 1,
'name' => 'Oud Royal Premium',
'category' => 'Luxury Collection',
'size' => '50ml',
'price' => 1200000,
'image' => 'https://placehold.co/200x200/png?text=Oud+Royal',
'quantity' => 1,
],
[
'name' => 'Rose Velvet',
'category' => 'Floral Series',
'size' => '30ml',
'price' => 450000,
'image' => 'https://placehold.co/200x200/png?text=Rose+Velvet',
'quantity' => 2,
],
[
'name' => 'Ocean Breeze',
'category' => 'Fresh Collection',
'size' => '100ml',
'price' => 320000,
'image' => 'https://placehold.co/200x200/png?text=Ocean+Breeze',
'quantity' => 1,
],
];
@endphp
<div class="flex flex-col min-h-screen bg-white font-sans text-home-foreground">
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-32">
<div class="flex items-center justify-center mb-16">
<div class="flex items-center">
<div class="flex flex-col items-center gap-2">
<div
class="w-10 h-10 rounded-full bg-home-primary text-white flex items-center justify-center font-bold shadow-lg shadow-home-primary/30">
1</div>
<span class="text-sm font-bold text-home-primary">Keranjang</span>
</div>
<div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
<div class="flex flex-col items-center gap-2 opacity-50">
<div
class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
2</div>
<span class="text-sm font-medium">Pengiriman</span>
</div>
<div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
<div class="flex flex-col items-center gap-2 opacity-50">
<div
class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
3</div>
<span class="text-sm font-medium">Pembayaran</span>
</div>
</div>
</div>
<h1 class="text-3xl font-bold text-home-primary mb-8">Keranjang Belanja <span
class="text-lg font-normal text-home-foreground/50 ml-2">(3 Item)</span></h1>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
<section class="lg:col-span-8 space-y-6">
<div
class="bg-home-foreground/5 rounded-xl p-4 flex items-center gap-3 text-sm text-home-foreground/80 border border-home-foreground/10">
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p>Pembelian di atas <strong>Rp 500.000</strong> berhak mendapatkan <span
class="font-bold text-home-primary">Gratis Ongkir</span>.</p>
</div>
<div class="space-y-6">
@foreach ($cartItems as $index => $item)
<article
class="cart-item bg-white rounded-2xl border border-home-foreground/10 p-6 flex flex-col sm:flex-row gap-6 hover:shadow-lg transition-shadow duration-300"
data-price="{{ $item['price'] }}">
<div class="w-full sm:w-32 h-32 bg-home-primary/5 rounded-xl overflow-hidden flex-shrink-0">
<img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
class="w-full h-full object-cover">
</div>
<div class="flex-1 flex flex-col justify-between">
<div class="flex justify-between items-start">
<div>
<p class="text-xs font-bold text-home-primary uppercase tracking-wider mb-1">
{{ $item['category'] }}</p>
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $item['name'] }}</h3>
<p class="text-sm text-home-foreground/50">Ukuran: {{ $item['size'] }}</p>
</div>
<button class="text-home-foreground/40 hover:text-red-500 transition-colors p-2"
aria-label="Hapus item">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
</path>
</svg>
</button>
</div>
<div
class="flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4 mt-4">
<div class="flex items-center border border-home-foreground/20 rounded-lg">
<button
class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
data-action="decrease">-</button>
<input type="text" value="{{ $item['quantity'] }}" readonly
class="qty-input w-10 text-center text-sm font-bold border-none focus:ring-0 text-home-foreground p-0">
<button
class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
data-action="increase">+</button>
</div>
<div class="text-right">
<p class="text-lg font-bold text-home-primary item-total">Rp
{{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}</p>
</div>
</div>
</div>
</article>
@endforeach
</div>
<div class="mt-8 pt-8 border-t border-home-foreground/10">
<h3 class="text-xl font-bold text-home-foreground mb-6">Mungkin Anda Suka</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
@for ($i = 1; $i <= 4; $i++)
<div class="group cursor-pointer">
<div class="aspect-[4/5] bg-home-primary/5 rounded-xl overflow-hidden mb-3 relative">
<img src="https://placehold.co/300x400/png?text=Produk+{{ $i }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<button
class="absolute bottom-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm text-home-primary hover:bg-home-primary hover:text-white 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>
<h4 class="font-bold text-sm text-home-foreground line-clamp-1">Parfum Rekomendasi
{{ $i }}</h4>
<p class="text-xs text-home-primary font-bold">Rp 299.000</p>
</div>
@endfor
</div>
</div>
</section>
<aside class="lg:col-span-4 relative">
<div
class="sticky top-32 bg-white rounded-3xl border border-home-foreground/10 p-8 shadow-xl shadow-home-foreground/5">
<h2 class="text-xl font-bold text-home-foreground mb-6">Ringkasan Pesanan</h2>
<div class="space-y-4 mb-6">
<div class="flex justify-between text-home-foreground/70">
<span>Subtotal</span>
<span id="summary-subtotal" class="font-medium text-home-foreground">Rp 0</span>
</div>
<div class="flex justify-between text-home-foreground/70">
<span>Estimasi Pajak (11%)</span>
<span id="summary-tax" class="font-medium text-home-foreground">Rp 0</span>
</div>
<div class="flex justify-between text-green-600">
<span>Diskon</span>
<span class="font-medium">- Rp 0</span>
</div>
</div>
<div class="mb-6">
<label
class="block text-xs font-bold text-home-foreground/50 uppercase tracking-wider mb-2">Kode
Voucher</label>
<div class="flex gap-2">
<input type="text" placeholder="Masukkan kode"
class="flex-1 px-4 py-2 rounded-lg border border-home-foreground/20 text-sm focus:outline-none focus:border-home-primary transition-colors">
<button
class="bg-home-foreground text-white px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 transition-opacity">Gunakan</button>
</div>
</div>
<div class="border-t border-home-foreground/10 pt-4 mb-8">
<div class="flex justify-between items-end">
<span class="text-lg font-bold text-home-foreground">Total</span>
<span id="summary-total" class="text-2xl font-bold text-home-primary">Rp 0</span>
</div>
<p class="text-xs text-home-foreground/40 mt-1 text-right">Belum termasuk ongkos kirim</p>
</div>
<button
class="w-full bg-home-primary text-white font-bold py-4 rounded-xl hover:bg-home-secondary hover:text-home-primary transition-all duration-300 shadow-lg shadow-home-primary/20 flex items-center justify-center gap-2 group">
Checkout Sekarang
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</button>
</div>
</aside>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cartItems = document.querySelectorAll('.cart-item');
const subtotalEl = document.getElementById('summary-subtotal');
const taxEl = document.getElementById('summary-tax');
const totalEl = document.getElementById('summary-total');
const formatRupiah = (number) => {
return 'Rp ' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
};
const updateSummary = () => {
let subtotal = 0;
document.querySelectorAll('.cart-item').forEach(item => {
const price = parseFloat(item.dataset.price);
const qty = parseInt(item.querySelector('.qty-input').value);
subtotal += price * qty;
});
const tax = subtotal * 0.11;
const total = subtotal + tax;
if (subtotalEl) subtotalEl.textContent = formatRupiah(subtotal);
if (taxEl) taxEl.textContent = formatRupiah(Math.round(tax));
if (totalEl) totalEl.textContent = formatRupiah(Math.round(total));
};
cartItems.forEach(item => {
const price = parseFloat(item.dataset.price);
const input = item.querySelector('.qty-input');
const totalDisplay = item.querySelector('.item-total');
const btns = item.querySelectorAll('.qty-btn');
btns.forEach(btn => {
btn.addEventListener('click', () => {
let val = parseInt(input.value);
if (btn.dataset.action === 'increase') {
val++;
} else if (btn.dataset.action === 'decrease' && val > 1) {
val--;
}
input.value = val;
totalDisplay.textContent = formatRupiah(price * val);
updateSummary();
});
});
});
updateSummary();
});
</script>

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

@ -186,7 +186,7 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
<div
class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
<button
<a href="#"
class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white transition-all shadow-lg transform hover:scale-110"
title="Lihat Detail">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -196,7 +196,7 @@ class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-hom
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
</path>
</svg>
</button>
</a>
<button
class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white transition-all shadow-lg transform hover:scale-110"
title="Simpan ke Wishlist">

274
resources/views/livewire/home/product/show.blade.php Normal file
View File

@ -0,0 +1,274 @@
@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>

16
routes/pages/home.php
View File

@ -2,6 +2,7 @@
use App\Livewire\Home\Article\Index as ArticleIndex;
use App\Livewire\Home\Faq\Index as FaqComponent;
use App\Livewire\Home\Cart\Index as CartComponent;
use App\Livewire\Home\Index as HomeComponent;
use App\Livewire\Home\Outlet as OutletComponent;
use App\Livewire\Home\Product\Index as ProductComponent;
@ -15,19 +16,22 @@
Route::prefix('products')
->name('product.')
->group(function () {
Route::prefix('perfumes')
->name('perfume.')
->group(function () {
Route::get('/', ProductComponent::class)->name('index');
});
Route::get('perfumes/{slug?}', ProductComponent::class)
->name('perfume');
});
Route::get('/vouchers', VoucherComponent::class)->name('voucher');
Route::prefix('articles')
->name('article.')
->group(function () {
Route::get('/', ArticleIndex::class)->name('index');
Route::get('{slug?}', ArticleIndex::class)
->name('index');
});
Route::get('/faq', FaqComponent::class)->name('faq');
Route::get('/cart', CartComponent::class)->name('cart');