feat(cart, article, product): Introduce new Cart component, enhance Article and Product components with detail views, and update routing for improved navigation.
This commit is contained in:
Yoga Pangestu
parent
ffba4df0dc
commit
3916ef436e
@ -10,8 +10,24 @@
|
||||
])]
|
||||
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
17
app/Livewire/Home/Cart/Index.php
Normal 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');
|
||||
}
|
||||
}
|
||||
@ -10,8 +10,24 @@
|
||||
])]
|
||||
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'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,14 @@ public function boot(): void
|
||||
return;
|
||||
}
|
||||
|
||||
$priceRequestCount = PriceRequest::where('status', PriceRequestStatus::PENDING->value)->count();
|
||||
if (Schema::hasTable('price_requests') && Schema::hasColumn('price_requests', 'status')) {
|
||||
$priceRequestCount = PriceRequest::where(
|
||||
'status',
|
||||
PriceRequestStatus::PENDING->value
|
||||
)->count();
|
||||
} else {
|
||||
$priceRequestCount = 0;
|
||||
}
|
||||
|
||||
View::composer('*', function ($view) use ($priceRequestCount) {
|
||||
$sidebar = [
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
:root {
|
||||
--home-background: #E5F0FF;
|
||||
--home-accent: #D1E8FF;
|
||||
--home-background: #F5FEFF;
|
||||
--home-accent: #E2E8F0;
|
||||
--home-foreground: #000000;
|
||||
--home-primary: #CAE8FF;
|
||||
--home-primary: #0E2F76;
|
||||
--home-secondary: #AAC0E1;
|
||||
--home-surface: #C7B189;
|
||||
--home-neutral: #334155;
|
||||
}
|
||||
@theme {
|
||||
--font-sans: Inter, sans-serif;
|
||||
@ -18,6 +21,9 @@ @theme {
|
||||
--color-home-accent: var(--home-accent);
|
||||
--color-home-foreground: var(--home-foreground);
|
||||
--color-home-primary: var(--home-primary);
|
||||
--color-home-secondary: var(--home-secondary);
|
||||
--color-home-surface: var(--home-surface);
|
||||
--color-home-neutral: var(--home-neutral);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
@endpersist
|
||||
|
||||
{{ $slot }}
|
||||
@include('components.sections.ui.home._footer')
|
||||
|
||||
@fluxScripts
|
||||
|
||||
<script>
|
||||
@ -40,39 +42,39 @@
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
|
||||
function setIconsLight() {
|
||||
cartIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
cartIcon.classList.remove('bg-home-foreground', 'bg-gray-100');
|
||||
cartIcon.classList.add('bg-white');
|
||||
cartSvg.classList.remove('text-white', 'text-gray-800');
|
||||
cartSvg.classList.add('text-black');
|
||||
cartSvg.classList.remove('text-white', 'text-home-foreground');
|
||||
cartSvg.classList.add('text-home-foreground');
|
||||
|
||||
profileIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
profileIcon.classList.remove('bg-home-foreground', 'bg-gray-100');
|
||||
profileIcon.classList.add('bg-white');
|
||||
profileSvg.classList.remove('text-white', 'text-gray-800');
|
||||
profileSvg.classList.add('text-black');
|
||||
profileSvg.classList.remove('text-white', 'text-home-foreground');
|
||||
profileSvg.classList.add('text-home-foreground');
|
||||
}
|
||||
|
||||
function setIconsDark() {
|
||||
cartIcon.classList.add('bg-black');
|
||||
cartIcon.classList.add('bg-home-foreground');
|
||||
cartIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
cartSvg.classList.add('text-white');
|
||||
cartSvg.classList.remove('text-black', 'text-gray-800');
|
||||
cartSvg.classList.remove('text-home-foreground', 'text-home-foreground');
|
||||
|
||||
profileIcon.classList.add('bg-black');
|
||||
profileIcon.classList.add('bg-home-foreground');
|
||||
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
profileSvg.classList.add('text-white');
|
||||
profileSvg.classList.remove('text-black', 'text-gray-800');
|
||||
profileSvg.classList.remove('text-home-foreground', 'text-home-foreground');
|
||||
}
|
||||
|
||||
function setIconsScrolled() {
|
||||
cartIcon.classList.add('bg-gray-100');
|
||||
cartIcon.classList.remove('bg-black', 'bg-white');
|
||||
cartSvg.classList.add('text-gray-800');
|
||||
cartSvg.classList.remove('text-white', 'text-black');
|
||||
cartIcon.classList.remove('bg-home-foreground', 'bg-white');
|
||||
cartSvg.classList.add('text-home-foreground');
|
||||
cartSvg.classList.remove('text-white');
|
||||
|
||||
profileIcon.classList.add('bg-gray-100');
|
||||
profileIcon.classList.remove('bg-black', 'bg-white');
|
||||
profileSvg.classList.add('text-gray-800');
|
||||
profileSvg.classList.remove('text-white', 'text-black');
|
||||
profileIcon.classList.remove('bg-home-foreground', 'bg-white');
|
||||
profileSvg.classList.add('text-home-foreground');
|
||||
profileSvg.classList.remove('text-white');
|
||||
}
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
@ -131,18 +133,18 @@ function setIconsScrolled() {
|
||||
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-gray-200');
|
||||
navbar.classList.remove('bg-transparent');
|
||||
|
||||
navLinks.classList.add('bg-white', 'border-gray-300', 'text-black');
|
||||
navLinks.classList.remove('bg-transparent', 'border-black', 'text-black');
|
||||
navLinks.classList.add('bg-white', 'border-home-accent');
|
||||
navLinks.classList.remove('bg-transparent', 'border-home-foreground');
|
||||
|
||||
cart.classList.add('border-gray-300', 'bg-white');
|
||||
cart.classList.remove('border-black');
|
||||
cart.querySelector('span').classList.add('text-gray-800');
|
||||
cart.classList.add('border-home-accent', 'bg-white');
|
||||
cart.classList.remove('border-home-foreground');
|
||||
cart.querySelector('span').classList.add('text-home-foreground');
|
||||
|
||||
login.classList.add('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
login.classList.remove('border-black', 'text-black');
|
||||
login.classList.add('border-home-accent', 'text-home-foreground', 'bg-white');
|
||||
login.classList.remove('border-home-foreground');
|
||||
|
||||
profile.classList.add('border-gray-300');
|
||||
profile.classList.remove('border-black');
|
||||
profile.classList.add('border-home-accent');
|
||||
profile.classList.remove('border-home-foreground');
|
||||
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
@ -150,19 +152,20 @@ function setIconsScrolled() {
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b',
|
||||
'border-gray-200');
|
||||
|
||||
navLinks.classList.add('bg-transparent', 'border-black', 'text-black');
|
||||
navLinks.classList.remove('bg-white', 'border-gray-300');
|
||||
navLinks.classList.add('bg-transparent', 'border-home-foreground',
|
||||
'text-home-foreground');
|
||||
navLinks.classList.remove('bg-white', 'border-home-accent');
|
||||
|
||||
cart.classList.add('border-black');
|
||||
cart.classList.remove('border-gray-300', 'bg-white');
|
||||
cart.querySelector('span').classList.remove('text-gray-800');
|
||||
cart.querySelector('span').classList.add('text-black');
|
||||
cart.classList.add('border-home-foreground');
|
||||
cart.classList.remove('border-home-accent', 'bg-white');
|
||||
cart.querySelector('span').classList.remove('text-home-foreground');
|
||||
cart.querySelector('span').classList.add('text-home-foreground');
|
||||
|
||||
login.classList.add('border-black', 'text-black');
|
||||
login.classList.remove('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
login.classList.add('border-home-foreground', 'text-home-foreground');
|
||||
login.classList.remove('border-home-accent', 'bg-white');
|
||||
|
||||
profile.classList.add('border-black');
|
||||
profile.classList.remove('border-gray-300');
|
||||
profile.classList.add('border-home-foreground');
|
||||
profile.classList.remove('border-home-accent');
|
||||
|
||||
setIconsDark();
|
||||
}
|
||||
|
||||
@ -1,92 +1,104 @@
|
||||
<footer class="bg-gray-100 text-gray-700 py-12 px-6 lg:px-32 xl:px-48 font-sans">
|
||||
<div class="container mx-auto">
|
||||
<footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-8">
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
|
||||
<div class="md:col-span-4 flex flex-col gap-4">
|
||||
<div class="md:col-span-4 flex flex-col gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum"
|
||||
class="w-16 h-16 object-contain">
|
||||
<h2 class="text-2xl font-bold text-gray-800">Yadi Parfum</h2>
|
||||
class="w-10 h-10 object-contain brightness-0 invert">
|
||||
<h2 class="text-2xl font-bold tracking-wide text-white">Yadi Parfum</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-sm leading-relaxed text-justify">
|
||||
<p class="text-gray-400 text-sm leading-relaxed">
|
||||
Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga
|
||||
terjangkau. Temukan aroma khasmu di sini.
|
||||
terjangkau.
|
||||
</p>
|
||||
<div class="flex items-center gap-4 mt-2">
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-3 md:pl-8">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4 uppercase tracking-wider">Tautan Cepat</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Beranda</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Katalog Produk</a>
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Quick Links</h3>
|
||||
<ul class="space-y-4 text-sm text-gray-400">
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Beranda</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Tentang Kami</a>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Katalog
|
||||
Produk</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Tentang
|
||||
Kami</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Kontak</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Kontak</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT SIDE -->
|
||||
<div class="md:col-span-5 flex flex-col gap-4">
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-gray-700 text-lg leading-relaxed">
|
||||
Alamat
|
||||
</p>
|
||||
<p class="text-gray-500">
|
||||
{{ $outlet->note ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 mt-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<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="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>
|
||||
<span class="text-sm">{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm">{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
<div class="md:col-span-5 flex flex-col gap-6">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Contact Us</h3>
|
||||
<div class="space-y-5 text-sm text-gray-400">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1"><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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg></div>
|
||||
<span
|
||||
class="leading-relaxed">{{ $outlet->note ?? 'Jalan Wangi Semerbak No. 123, Kota Parfum, Indonesia' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><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="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>
|
||||
<span>{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg></div>
|
||||
<span>{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-300 my-8">
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
|
||||
<div class="text-sm text-gray-500 text-center md:text-left">
|
||||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="text-sm text-gray-500">
|
||||
© {{ date('Y') }} Yadi Parfum. All rights reserved.
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-pink-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-green-500 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M.057 24l1.687..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex gap-6 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<header id="navbar"
|
||||
class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200">
|
||||
class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200 bg-transparent">
|
||||
|
||||
<div class="flex lg:hidden items-center z-50">
|
||||
<button id="mobile-menu-btn" aria-label="Toggle Mobile Menu" aria-expanded="false" aria-controls="mobile-menu"
|
||||
class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group">
|
||||
|
||||
<svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 text-black transition-colors duration-300">
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 text-home-foreground transition-colors duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
|
||||
@ -20,11 +20,11 @@ class="size-6 text-white hidden transition-transform duration-300">
|
||||
|
||||
<a href="/" class="flex items-center ml-8 lg:ml-0 z-50">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
||||
class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-500">
|
||||
class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-200">
|
||||
</a>
|
||||
|
||||
<nav id="nav-links"
|
||||
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-500 border"
|
||||
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-200 border text-home-foreground"
|
||||
aria-label="Main Navigation">
|
||||
@foreach ($header as $item)
|
||||
@if ($item['type'] === 'link')
|
||||
@ -60,31 +60,31 @@ class="block px-4 py-2 hover:bg-gray-50 transition-colors">
|
||||
@endforeach
|
||||
</nav>
|
||||
|
||||
<section class="flex items-center lg:gap-3 z-50">
|
||||
<section class="flex items-center lg:gap-2 gap-1 z-50">
|
||||
<button id="cart"
|
||||
class="flex items-center rounded-full transition-all duration-500 border lg:p-0 lg:border-0 hover:scale-110">
|
||||
class="flex items-center rounded-full transition-all duration-200 border border-home-foreground lg:p-0 hover:scale-110">
|
||||
<div id="cart-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="cart-svg">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="cart-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ms-2 me-3 transition-all duration-500 hidden lg:block">Keranjang</span>
|
||||
<span class="ms-2 me-3 transition-all duration-200 hidden lg:block text-home-foreground">Keranjang</span>
|
||||
</button>
|
||||
|
||||
<button id="login"
|
||||
class="hidden lg:flex items-center border px-4 py-2 rounded-full ms-2 transition-all duration-500 hover:scale-105 font-medium">
|
||||
class="hidden lg:flex items-center border px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 font-medium border-home-foreground text-home-foreground">
|
||||
Masuk
|
||||
</button>
|
||||
|
||||
<button id="profile"
|
||||
class="flex items-center rounded-full transition-all duration-500 p-2 lg:p-0 lg:border-0 hover:scale-110">
|
||||
class="flex items-center rounded-full transition-all duration-200 lg:p-0 lg:border-0 hover:scale-110">
|
||||
<div id="profile-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="profile-svg">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="profile-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
@ -93,7 +93,7 @@ class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full tra
|
||||
</section>
|
||||
|
||||
<nav id="mobile-menu"
|
||||
class="fixed inset-0 h-screen w-screen bg-black/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-500 opacity-0"
|
||||
class="fixed inset-0 h-screen w-screen bg-home-foreground/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-200 opacity-0"
|
||||
aria-label="Mobile Navigation">
|
||||
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Beranda</a>
|
||||
@ -116,7 +116,7 @@ class="text-3xl font-bold text-white hover:text-gray-300 transition-colors curso
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">FAQ</a>
|
||||
|
||||
<button
|
||||
class="mt-8 px-8 py-3 bg-white text-black font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
||||
class="mt-8 px-8 py-3 bg-white text-home-foreground font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
||||
Get CV
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@ -1,205 +1,207 @@
|
||||
<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">Artikel</h1>
|
||||
<p class="text-home-foreground/60">Baca tips dan trik seputar perawatan wewangian dan lifestyle</p>
|
||||
<main class="px-6 lg:px-32 xl:px-48 pb-24 pt-36 bg-white min-h-screen font-sans">
|
||||
|
||||
<header class="mb-12">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Artikel Terbaru</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl">Baca tips profesional seputar perawatan wewangian, tren
|
||||
lifestyle, dan rekomendasi terbaik.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
|
||||
|
||||
<section class="lg:col-span-3">
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-10">
|
||||
<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">
|
||||
<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="search" placeholder="Cari artikel..." aria-label="Cari artikel"
|
||||
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">
|
||||
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>
|
||||
|
||||
<select aria-label="Urutkan artikel"
|
||||
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="name">Nama</option>
|
||||
<option value="views">Paling Dilihat</option>
|
||||
</select>
|
||||
<div class="relative">
|
||||
<select aria-label="Urutkan artikel"
|
||||
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="name">Nama</option>
|
||||
<option value="views">Terpopuler</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>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-8">
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Tips Memilih Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Tips+Parfum" alt="Tips Memilih Parfum"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Perawatan</span>
|
||||
<span class="text-xs text-home-foreground/60">5 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Perawatan</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
5 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Memilih parfum yang
|
||||
tepat bukan hanya tentang aroma yang disukai, tetapi juga tentang menemukan
|
||||
signature scent yang mencerminkan kepribadian Anda. Dalam artikel ini kami akan
|
||||
membahas cara memilih parfum yang paling sesuai...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Memilih parfum yang tepat bukan hanya tentang aroma yang disukai, tetapi juga
|
||||
tentang menemukan signature scent yang mencerminkan karakter...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Siti Rahma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Siti Rahma</p>
|
||||
<time datetime="2024-11-05" class="text-xs text-home-foreground/60">5 Nov
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Siti Rahma</p>
|
||||
<p class="text-xs text-home-foreground/50">5 Nov 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Cara Menyimpan Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Menyimpan+Parfum"
|
||||
alt="Cara Menyimpan Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Lifestyle</span>
|
||||
<span class="text-xs text-home-foreground/60">8 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Lifestyle</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
8 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum adalah
|
||||
investasi
|
||||
yang berharga, dan penyimpanan yang tepat adalah kunci untuk menjaga kualitas
|
||||
dan daya tahan aroma. Temukan tips profesional tentang suhu ideal, lokasi
|
||||
penyimpanan terbaik, dan cara menjaga botol parfum Anda...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Parfum adalah investasi yang berharga. Penyimpanan yang tepat adalah kunci untuk
|
||||
menjaga kualitas aroma agar tetap orisinil...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Ahmad Rizki"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Ahmad Rizki</p>
|
||||
<time datetime="2024-11-03" class="text-xs text-home-foreground/60">3 Nov
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Ahmad Rizki</p>
|
||||
<p class="text-xs text-home-foreground/50">3 Nov 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Musim Dingin" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Parfum+Unisex" alt="Parfum Unisex"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Tren</span>
|
||||
<span class="text-xs text-home-foreground/60">6 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Tren</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
7 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat yang Sempurna untuk Liburan</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Musim dingin
|
||||
membutuhkan aromaterapi yang berbeda. Kami merekomendasikan koleksi parfum
|
||||
dengan nada hangat seperti vanilla, kayu cedar, dan musk yang sempurna untuk
|
||||
menciptakan suasana nyaman di musim yang dingin...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Parfum unisex semakin populer karena fleksibilitas dan keunikannya. Kami
|
||||
mengumpulkan rekomendasi terbaik tahun ini...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Rina Kusuma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Rina Kusuma</p>
|
||||
<time datetime="2024-11-01" class="text-xs text-home-foreground/60">1 Nov
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Unisex" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Rekomendasi</span>
|
||||
<span class="text-xs text-home-foreground/60">7 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua Jenis Kelamin</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum unisex semakin
|
||||
populer karena fleksibilitas dan keunikannya. Kami telah mengumpulkan
|
||||
rekomendasi parfum unisex terbaik tahun ini yang dapat digunakan oleh siapa saja
|
||||
dan cocok untuk berbagai kesempatan...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Budi Santoso"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Budi Santoso</p>
|
||||
<time datetime="2024-10-28" class="text-xs text-home-foreground/60">28 Oct
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Budi Santoso</p>
|
||||
<p class="text-xs text-home-foreground/50">28 Oct 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,11 +209,12 @@ class="w-8 h-8 rounded-full">
|
||||
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center justify-center mt-12" aria-label="Pagination">
|
||||
<div class="flex items-center gap-2">
|
||||
<nav class="flex items-center justify-center mt-16" aria-label="Pagination">
|
||||
<div
|
||||
class="flex items-center gap-3 bg-white p-2 rounded-full shadow-sm border border-home-foreground/5">
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||||
disabled aria-label="Halaman sebelumnya">
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground/30 cursor-not-allowed hover:bg-gray-50 transition-colors"
|
||||
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"
|
||||
@ -222,17 +225,16 @@ class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foregroun
|
||||
@for ($page = 1; $page <= 3; $page++)
|
||||
@if ($page == 1)
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-home-primary text-white font-bold shadow-md shadow-home-primary/20"
|
||||
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>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/10 hover:text-home-primary 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">
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground hover:bg-home-primary/10 hover:text-home-primary hover:border-home-primary transition-all">
|
||||
<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"
|
||||
@ -244,68 +246,105 @@ class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foregroun
|
||||
</section>
|
||||
|
||||
<aside class="lg:col-span-1">
|
||||
<div class="sticky top-24 space-y-6">
|
||||
<div class="sticky top-32 space-y-8">
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="cat-heading">
|
||||
<h3 id="cat-heading" class="text-lg font-bold text-home-foreground mb-4">Kategori</h3>
|
||||
<div class="space-y-2">
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
||||
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
||||
Kategori</h3>
|
||||
<div class="space-y-1">
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Perawatan
|
||||
Parfum</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Perawatan Parfum
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Lifestyle</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Lifestyle
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tren
|
||||
Terkini</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Tren Terkini
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tips
|
||||
& Trik</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Review
|
||||
Produk</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Tips & Trik
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="pop-heading">
|
||||
<h3 id="pop-heading" class="text-lg font-bold text-home-foreground mb-4">Artikel Populer</h3>
|
||||
<div class="space-y-4">
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
||||
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
||||
Populer</h3>
|
||||
<div class="space-y-5">
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">2.5K views</p>
|
||||
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian
|
||||
</p>
|
||||
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
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>
|
||||
2.5K views
|
||||
</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<div class="border-t border-home-foreground/5"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.8K views</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.2K views</p>
|
||||
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
||||
Panduan Lengkap Cara Menyimpan Parfum
|
||||
</p>
|
||||
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
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>
|
||||
1.8K views
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="newsletter-heading">
|
||||
<h3 id="newsletter-heading" class="text-lg font-bold text-home-foreground mb-2">Newsletter
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">Dapatkan tips dan artikel terbaru langsung ke
|
||||
email Anda</p>
|
||||
<form onsubmit="event.preventDefault();">
|
||||
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
||||
class="w-full py-2 px-3 rounded-lg border border-home-foreground/20 text-home-foreground placeholder-home-foreground/50 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-home-foreground">
|
||||
<button type="submit"
|
||||
class="w-full bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity text-sm">Subscribe</button>
|
||||
</form>
|
||||
<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>
|
||||
|
||||
241
resources/views/livewire/home/article/show.blade.php
Normal file
241
resources/views/livewire/home/article/show.blade.php
Normal 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">•</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>•</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
259
resources/views/livewire/home/cart/index.blade.php
Normal 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>
|
||||
@ -1,62 +1,78 @@
|
||||
<div>
|
||||
<section class="px-6 md:px-12 lg:px-24 py-28 md:py-36 bg-white min-h-screen">
|
||||
<header class="mb-12 text-center md:text-left">
|
||||
<h1 class="text-4xl font-bold text-home-foreground mb-2">Frequently Asked Questions</h1>
|
||||
<p class="text-home-foreground/60 text-lg">
|
||||
Temukan jawaban untuk pertanyaan umum Anda tentang produk dan layanan kami
|
||||
<section class="px-6 lg:px-32 xl:px-48 py-36 bg-white min-h-screen">
|
||||
|
||||
<header class="mb-16 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl mx-auto">
|
||||
Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="columns-1 lg:columns-2 gap-6 space-y-6 lg:space-y-0">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
|
||||
|
||||
@foreach ([
|
||||
['id' => 1, 'q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
||||
['id' => 2, 'q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
||||
['id' => 3, 'q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
||||
['id' => 4, 'q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
||||
['id' => 5, 'q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
||||
['id' => 6, 'q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
||||
['q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
||||
['q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
||||
['q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
||||
['q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
||||
['q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
||||
['q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
||||
] as $index => $faq)
|
||||
<article x-data="{ open: null }"
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm">
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<button
|
||||
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
||||
class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none transition-colors"
|
||||
:class="activeAccordion === {{ $index }} ? 'bg-home-primary/5' :
|
||||
'bg-white hover:bg-home-foreground/5'">
|
||||
|
||||
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
||||
:aria-expanded="open === {{ $index }}"
|
||||
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors">
|
||||
|
||||
<h3 class="text-lg font-bold text-home-foreground text-left pr-4">
|
||||
<h3 class="text-lg font-bold pr-4 transition-colors"
|
||||
:class="activeAccordion === {{ $index }} ? 'text-home-primary' :
|
||||
'text-home-foreground group-hover:text-home-primary'">
|
||||
{{ $faq['q'] }}
|
||||
</h3>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-home-foreground transition-transform duration-300"
|
||||
:class="{ 'rotate-180': open === {{ $index }} }" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
|
||||
<span class="flex-shrink-0 ml-4 p-1 rounded-full transition-all duration-300"
|
||||
:class="activeAccordion === {{ $index }} ? 'bg-home-primary text-white rotate-180' :
|
||||
'bg-home-foreground/10 text-home-foreground group-hover:bg-home-primary group-hover:text-white'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open === {{ $index }}" x-collapse
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
class="px-6 pb-5 border-t border-home-foreground/10 text-home-foreground/70">
|
||||
<p class="leading-relaxed">
|
||||
{{ $faq['a'] }}
|
||||
</p>
|
||||
<div x-show="activeAccordion === {{ $index }}" x-collapse x-cloak
|
||||
class="px-6 pb-6 pt-2 bg-home-primary/5 border-t border-home-primary/10 text-home-foreground/70 leading-relaxed text-sm md:text-base">
|
||||
{{ $faq['a'] }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10 bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-8 text-center">
|
||||
<h3 class="text-2xl font-bold text-home-foreground mb-2">Masih ada pertanyaan?</h3>
|
||||
<p class="text-home-foreground/60 mb-6">Tim customer service kami siap membantu Anda 24/7</p>
|
||||
<button
|
||||
class="bg-home-foreground text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Hubungi Kami
|
||||
</button>
|
||||
<div
|
||||
class="mt-16 bg-home-primary rounded-2xl p-10 text-center relative overflow-hidden shadow-xl shadow-home-primary/20">
|
||||
<div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -mr-12 -mt-12"></div>
|
||||
<div class="absolute bottom-0 left-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -ml-8 -mb-8">
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Masih ada pertanyaan?</h3>
|
||||
<p class="text-white/80 mb-8 max-w-xl mx-auto">Jika Anda tidak menemukan jawaban yang dicari, tim
|
||||
customer service kami siap membantu Anda 24/7.</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button
|
||||
class="bg-white text-home-primary font-bold px-8 py-3 rounded-xl hover:bg-home-secondary hover:text-white transition-all shadow-lg">
|
||||
Chat WhatsApp
|
||||
</button>
|
||||
<button
|
||||
class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition-all">
|
||||
Kirim Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -12,14 +12,25 @@
|
||||
#brand-slider img {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
filter: grayscale(100%);
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#brand-slider img:hover {
|
||||
filter: grayscale(0%);
|
||||
/* filter: brightness(0) invert(1); */
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.cursor-grab {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cursor-grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.fade-enter {
|
||||
@ -38,7 +49,6 @@
|
||||
@script
|
||||
<script>
|
||||
document.addEventListener('livewire:navigated', () => {
|
||||
// brand slider
|
||||
const track = document.getElementById('brand-track');
|
||||
const originalChildren = Array.from(track.children);
|
||||
const originalHTML = track.innerHTML;
|
||||
@ -48,62 +58,98 @@
|
||||
const itemWidth = originalChildren[0].offsetWidth;
|
||||
const gapStyle = window.getComputedStyle(track).gap;
|
||||
const gap = parseFloat(gapStyle) || 0;
|
||||
|
||||
const singleSetWidth = (itemWidth + gap) * originalChildren.length;
|
||||
|
||||
let currentWidth = singleSetWidth;
|
||||
while (currentWidth < window.innerWidth + singleSetWidth * 2) {
|
||||
track.innerHTML += originalHTML;
|
||||
currentWidth
|
||||
+= singleSetWidth;
|
||||
currentWidth += singleSetWidth;
|
||||
}
|
||||
|
||||
let position = 0;
|
||||
const speed = 1;
|
||||
let isDown = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
let animationId;
|
||||
|
||||
track.addEventListener('mousedown', (e) => {
|
||||
isDown = true;
|
||||
track.classList.add('cursor-grabbing');
|
||||
track.classList.remove('cursor-grab');
|
||||
startX = e.pageX - track.offsetLeft;
|
||||
scrollLeft = position;
|
||||
e.preventDefault();
|
||||
|
||||
cancelAnimationFrame(animationId);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (!isDown) return;
|
||||
isDown = false;
|
||||
track.classList.remove('cursor-grabbing');
|
||||
track.classList.add('cursor-grab');
|
||||
animate();
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDown) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - track.offsetLeft;
|
||||
const walk = (x - startX) * 1;
|
||||
position = scrollLeft + walk;
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
});
|
||||
|
||||
function animate() {
|
||||
if (isDown) return;
|
||||
|
||||
position -= speed;
|
||||
if (Math.abs(position) >=
|
||||
singleSetWidth) {
|
||||
position = 0;
|
||||
|
||||
if (position <= -singleSetWidth) {
|
||||
position += singleSetWidth;
|
||||
} else if (position > 0) {
|
||||
position -= singleSetWidth;
|
||||
}
|
||||
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
requestAnimationFrame(animate);
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// category pagination
|
||||
const links = document.querySelectorAll('.pagination-link');
|
||||
const container = document.getElementById('category-container');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
if (links.length > 0 && container) {
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
links.forEach(l => l.classList.remove('bg-black'));
|
||||
links.forEach(l => l.classList.add('bg-gray-400'));
|
||||
links.forEach(l => l.classList.remove('bg-home-foreground'));
|
||||
links.forEach(l => l.classList.add('bg-gray-400'));
|
||||
|
||||
e.target.classList.remove('bg-gray-400');
|
||||
e.target.classList.add('bg-black');
|
||||
e.target.classList.remove('bg-gray-400');
|
||||
e.target.classList.add('bg-home-foreground');
|
||||
|
||||
fetch(link.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const newContent = doc.querySelector('#category-container')
|
||||
.innerHTML;
|
||||
fetch(link.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const newContent = doc.querySelector('#category-container')
|
||||
.innerHTML;
|
||||
|
||||
container.classList.add('fade-enter');
|
||||
setTimeout(() => {
|
||||
container.innerHTML = newContent;
|
||||
container.classList.remove('fade-enter');
|
||||
container.classList.add('fade-enter-active');
|
||||
}, 120);
|
||||
});
|
||||
container.classList.add('fade-enter');
|
||||
setTimeout(() => {
|
||||
container.innerHTML = newContent;
|
||||
container.classList.remove('fade-enter');
|
||||
container.classList.add('fade-enter-active');
|
||||
}, 120);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endscript
|
||||
|
||||
@ -1,3 +1,173 @@
|
||||
<div class="">
|
||||
Outlet
|
||||
<div>
|
||||
@php
|
||||
$outlets = [
|
||||
[
|
||||
'id' => 1,
|
||||
'name' => 'Yadi Parfum Central Park',
|
||||
'address' => 'Central Park Mall, Lt. LG, Unit 112, Jl. Letjen S. Parman No.28, Jakarta Barat',
|
||||
'city' => 'Jakarta Barat',
|
||||
'phone' => '+62 812-3456-7890',
|
||||
'hours' => '10:00 - 22:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Central+Park',
|
||||
'facilities' => ['Consultation', 'Refill Station', 'Engraving'],
|
||||
'status' => 'Buka',
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'name' => 'Yadi Parfum Senayan City',
|
||||
'address' => 'Senayan City, Lt. 1, Unit 45, Jl. Asia Afrika Lot 19, Jakarta Pusat',
|
||||
'city' => 'Jakarta Pusat',
|
||||
'phone' => '+62 812-9876-5432',
|
||||
'hours' => '10:00 - 22:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Senayan',
|
||||
'facilities' => ['VIP Lounge', 'Consultation'],
|
||||
'status' => 'Buka',
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'name' => 'Yadi Parfum Bandung',
|
||||
'address' => 'Paris Van Java, Resort Level, Jl. Sukajadi No.131-139, Bandung',
|
||||
'city' => 'Bandung',
|
||||
'phone' => '+62 822-1122-3344',
|
||||
'hours' => '10:00 - 21:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Bandung',
|
||||
'facilities' => ['Refill Station'],
|
||||
'status' => 'Tutup',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-white font-sans">
|
||||
|
||||
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
|
||||
|
||||
<header class="mb-16 text-center max-w-3xl mx-auto">
|
||||
<span class="text-home-primary font-bold tracking-widest text-xs uppercase mb-3 block">Lokasi
|
||||
Butik</span>
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-home-foreground mb-6">Temukan Butik Terdekat</h1>
|
||||
<p class="text-home-foreground/60 text-lg">
|
||||
Rasakan pengalaman langsung kemewahan aroma kami. Kunjungi butik kami untuk konsultasi personal dan
|
||||
layanan eksklusif.
|
||||
</p>
|
||||
|
||||
<div class="mt-10 relative max-w-xl mx-auto group">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/5 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
</div>
|
||||
<div
|
||||
class="relative flex items-center bg-white rounded-full shadow-lg border border-home-foreground/5 py-2 px-4">
|
||||
<div class="pl-4 text-home-foreground/40">
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" placeholder="Masukkan kota atau nama area..."
|
||||
class="flex-1 px-4 py-3 bg-transparent text-home-foreground placeholder-home-foreground/40 focus:outline-none">
|
||||
<button
|
||||
class="bg-home-primary text-white px-6 py-3 rounded-full font-bold text-sm hover:bg-home-primary transition-colors">
|
||||
Cari Lokasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-24">
|
||||
@foreach ($outlets as $outlet)
|
||||
<article
|
||||
class="group bg-white rounded-3xl border border-home-foreground/10 overflow-hidden hover:shadow-2xl hover:shadow-home-primary/10 hover:-translate-y-2 transition-all duration-500 flex flex-col h-full">
|
||||
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/10 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10">
|
||||
</div>
|
||||
<img src="{{ $outlet['image'] }}" alt="{{ $outlet['name'] }}"
|
||||
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||||
|
||||
<div class="absolute top-4 left-4 z-20">
|
||||
<span
|
||||
class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide backdrop-blur-md bg-white/90 shadow-sm
|
||||
{{ $outlet['status'] == 'Buka' ? 'text-green-700' : 'text-red-700' }}">
|
||||
{{ $outlet['status'] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 flex flex-col flex-grow">
|
||||
<div class="mb-4">
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-primary transition-colors">
|
||||
{{ $outlet['name'] }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 leading-relaxed">{{ $outlet['address'] }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
@foreach ($outlet['facilities'] as $facility)
|
||||
<span
|
||||
class="text-[10px] px-2 py-1 border border-home-foreground/10 rounded text-home-foreground/50">
|
||||
{{ $facility }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 text-xs text-home-foreground/70 mb-6 pt-4 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
{{ $outlet['hours'] }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
Call Store
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex gap-3">
|
||||
<button
|
||||
class="flex-1 py-3 rounded-xl bg-home-primary text-white text-sm font-bold hover:bg-home-secondary hover:text-home-primary transition-colors shadow-lg shadow-home-primary/20">
|
||||
Petunjuk Arah
|
||||
</button>
|
||||
<button
|
||||
class="w-12 h-12 rounded-xl border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:border-home-primary hover:text-home-primary 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="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>
|
||||
</article>
|
||||
@endforeach
|
||||
</section>
|
||||
|
||||
<section class="relative rounded-3xl overflow-hidden shadow-2xl border border-home-foreground/10 group">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-foreground/5 z-10 pointer-events-none group-hover:bg-transparent transition-colors duration-500">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute top-6 left-6 z-20 bg-white/90 backdrop-blur-md px-6 py-4 rounded-2xl shadow-lg border border-white/20 hidden md:block">
|
||||
<p class="text-xs text-home-foreground/50 font-bold uppercase tracking-wider mb-1">Cakupan Area</p>
|
||||
<h3 class="text-home-primary font-bold">Indonesia & Asia Tenggara</h3>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126920.28318625622!2d106.76457105!3d-6.229571199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta%2C%20Special%20Capital%20Region%20of%20Jakarta!5e0!3m2!1sen!2sid!4v1652756763428!5m2!1sen!2sid"
|
||||
width="100%" height="450" style="border:0; filter: grayscale(100%) contrast(1.2);"
|
||||
allowfullscreen="" loading="lazy" class="hover:filter-none transition-all duration-700">
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,42 +23,63 @@
|
||||
];
|
||||
@endphp
|
||||
|
||||
<section class="bg-white py-20 px-6 lg:px-48 font-sans text-home-foreground">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<figure class="w-full">
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
||||
class="w-full h-[500px] object-cover rounded-2xl shadow">
|
||||
</figure>
|
||||
<article class="space-y-4">
|
||||
<h2 class="text-4xl leading-tight mb-6">Keunggulan Produk Kami.</h2>
|
||||
<p class="text-gray-700 mb-8 max-w-3xl leading-relaxed">
|
||||
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik.
|
||||
</p>
|
||||
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 font-sans text-home-foreground overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<figure class="w-full relative order-2 lg:order-1">
|
||||
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform -rotate-2"></div>
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
||||
alt="Botol Parfum Elegan"
|
||||
class="w-full h-[400px] lg:h-[600px] object-cover rounded-2xl shadow-lg">
|
||||
</figure>
|
||||
|
||||
@foreach ($accordions as $index => $acc)
|
||||
<div x-data="{ open: null }" class="border-b border-gray-200 pb-4 accordion-item">
|
||||
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
||||
class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
|
||||
:aria-expanded="open === {{ $index }}">
|
||||
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
|
||||
{{ $acc['title'] }}
|
||||
</span>
|
||||
<article class="space-y-8 order-1 lg:order-2" x-data="{ activeAccordion: 0 }">
|
||||
|
||||
<header>
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-foreground leading-tight mb-6">
|
||||
Keunggulan Produk Kami.
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-home-foreground/70 leading-relaxed">
|
||||
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik dan pengalaman wangi yang tak terlupakan.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<span class="icon-plus text-xl font-light text-gray-400 transition-transform duration-300"
|
||||
:class="{ 'rotate-45': open === {{ $index }} }">
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
<div x-show="open === {{ $index }}" x-collapse
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
class="min-h-0 content overflow-hidden text-gray-700 text-sm leading-relaxed">
|
||||
<div class="pt-2 pb-2">
|
||||
{{ $acc['content'] }}
|
||||
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
|
||||
@foreach ($accordions as $index => $acc)
|
||||
<div class="border-b border-gray-100 last:border-0">
|
||||
<button
|
||||
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
||||
class="w-full flex justify-between items-center py-5 text-left group focus:outline-none transition-all duration-300"
|
||||
:aria-expanded="activeAccordion === {{ $index }}">
|
||||
|
||||
<span class="text-lg font-bold transition-colors duration-300"
|
||||
:class="activeAccordion === {{ $index }} ? 'text-home-primary' : 'text-home-foreground group-hover:text-home-primary'">
|
||||
{{ $acc['title'] }}
|
||||
</span>
|
||||
|
||||
<span class="ml-4 flex-shrink-0 transition-transform duration-300 w-8 h-8 flex items-center justify-center rounded-full"
|
||||
:class="activeAccordion === {{ $index }} ? 'rotate-180 bg-home-primary text-white' : 'bg-gray-100 text-gray-400 group-hover:bg-home-primary/10 group-hover:text-home-primary'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="activeAccordion === {{ $index }}"
|
||||
x-collapse
|
||||
x-cloak
|
||||
class="overflow-hidden text-home-foreground/70 text-base leading-relaxed">
|
||||
<div class="pb-5">
|
||||
{{ $acc['content'] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</article>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -33,65 +33,65 @@
|
||||
$totalPages = ceil($total / $perPage);
|
||||
@endphp
|
||||
|
||||
<section class="bg-gray-100 py-16 sm:py-20 px-6 sm:px-10 lg:px-48 relative overflow-hidden">
|
||||
<section class="bg-home-foreground py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 relative overflow-hidden">
|
||||
|
||||
<header class="text-center mb-12">
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Temukan Aroma yang <br class="hidden sm:block">
|
||||
Cocok dengan Kepribadianmu.
|
||||
</h2>
|
||||
</header>
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<div class="relative">
|
||||
<header class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-background leading-tight mb-4">
|
||||
Temukan Aroma yang <br class="hidden sm:block">
|
||||
Cocok dengan Kepribadianmu.
|
||||
</h2>
|
||||
<p class="text-gray-500 text-lg max-w-2xl mx-auto">
|
||||
Pilih kategori aroma yang paling menggambarkan dirimu dan ciptakan kesan tak terlupakan.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div id="category-container" class="fade-enter-active">
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-px bg-gray-300 overflow-hidden rounded-2xl">
|
||||
@foreach ($currentItems as $industry)
|
||||
<article
|
||||
class="flex flex-col items-center justify-center py-8 sm:py-10 px-4 bg-gray-100 group hover:bg-white transition duration-300 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-gray-600 mb-3 group-hover:text-black transition">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3
|
||||
class="text-[10px] sm:text-[11px] md:text-xs font-bold tracking-[0.15em] text-gray-500 uppercase group-hover:text-black transition">
|
||||
{{ $industry['name'] }}
|
||||
</h3>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
|
||||
<nav class="mt-10 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
|
||||
<div class="flex items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-2 h-6 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="text-[10px] font-bold tracking-widest text-gray-400">
|
||||
TAP TO EXPLORE
|
||||
</div>
|
||||
</nav>
|
||||
<div id="category-container" class="fade-enter-active">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
@foreach ($currentItems as $industry)
|
||||
<article
|
||||
class="group flex flex-col items-center justify-center py-10 px-4 bg-white rounded-2xl border border-gray-100 hover:border-home-primary hover:shadow-xl hover:shadow-home-primary/5 hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full">
|
||||
|
||||
<nav class="hidden lg:flex absolute top-0 right-[-40px] h-full items-start" aria-label="Pagination Desktop">
|
||||
<div class="flex items-center gap-4 sticky top-10">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-[3px] h-10 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="flex flex-col text-[10px] font-bold tracking-widest text-gray-400">
|
||||
@foreach (str_split('TAP TO EXPLORE') as $char)
|
||||
<span>{!! $char == ' ' ? ' ' : $char !!}</span>
|
||||
<div
|
||||
class="w-14 h-14 mb-4 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor"
|
||||
class="w-7 h-7 text-gray-400 group-hover:text-white transition-colors duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-[11px] md:text-xs font-bold tracking-widest text-gray-400 uppercase group-hover:text-home-primary transition-colors duration-300 text-center">
|
||||
{{ $industry['name'] }}
|
||||
</h3>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="mt-12 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
|
||||
<div class="flex items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-2 h-2 rounded-full transition-all duration-300 {{ $i == $page ? 'bg-home-primary w-8' : 'bg-gray-300 hover:bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="hidden lg:flex absolute top-0 -right-16 h-full items-center" aria-label="Pagination Desktop">
|
||||
<div class="flex flex-col gap-3">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-1 rounded-full transition-all duration-300 {{ $i == $page ? 'bg-home-primary h-12' : 'bg-gray-200 h-6 hover:bg-gray-300' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,47 +1,77 @@
|
||||
<section class="relative text-center md:text-left bg-black text-white py-16 px-6 md:px-12 mt-48 lg:mt-0">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">
|
||||
|
||||
<figure class="flex justify-center md:justify-start relative z-10">
|
||||
<img src="https://png.pngtree.com/png-vector/20230918/ourmid/pngtree-man-in-shirt-smiles-and-gives-thumbs-up-to-show-approval-png-image_10094392.png"
|
||||
alt="Testimoni Pelanggan yang Puas"
|
||||
class="w-full max-w-sm lg:max-w-md h-auto absolute bottom-0 md:-top-72 object-contain drop-shadow-2xl">
|
||||
</figure>
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
|
||||
|
||||
<div class="relative z-20">
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-home-background">
|
||||
Bergabung dengan Member Eksklusif.
|
||||
</h2>
|
||||
<p class="text-home-background/40 text-lg leading-relaxed max-w-md">
|
||||
Dapatkan akses awal ke koleksi terbaru, diskon member khusus, dan tips perawatan parfum langsung
|
||||
dari ahlinya.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center md:justify-start gap-1 mb-4" aria-label="Rating bintang 5 dari 5">
|
||||
@for ($i = 0; $i < 5; $i++)
|
||||
<span class="text-white text-xl" aria-hidden="true">★</span>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<blockquote
|
||||
class="text-gray-300 text-lg leading-relaxed mb-6 italic border-l-4 border-white/20 pl-4 md:border-none md:pl-0">
|
||||
"Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa,
|
||||
justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."
|
||||
</blockquote>
|
||||
|
||||
<figcaption>
|
||||
<cite class="not-italic font-bold text-white text-lg mb-1 block">
|
||||
Coriss Ambady
|
||||
</cite>
|
||||
<span class="text-gray-400 text-sm tracking-widest font-semibold block uppercase">
|
||||
Financial Analyst
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="mt-8 flex justify-center md:justify-start">
|
||||
<button
|
||||
class="border border-white py-2 px-6 bg-home-foreground rounded-full hover:bg-white hover:text-black transition-colors duration-300 font-medium">
|
||||
Gabung Member Sekarang
|
||||
<form onsubmit="event.preventDefault();" class="flex flex-col sm:flex-row gap-4 w-full">
|
||||
<button type="submit"
|
||||
class="px-8 py-4 rounded-xl bg-home-background text-home-foreground font-bold hover:bg-home-secondary hover:text-home-foreground transition-all duration-300 shadow-lg shadow-home-background/20 whitespace-nowrap">
|
||||
Gabung Sekarang
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-home-background/40">
|
||||
<div class="flex -space-x-2">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
</div>
|
||||
<p>Bergabung bersama <span class="text-home-background font-bold">2,000+</span> member lainnya.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative hidden lg:block">
|
||||
<div
|
||||
class="w-full h-full min-h-[300px] bg-gradient-to-tr from-home-secondary/30 to-home-primary/10 rounded-full blur-3xl absolute inset-0">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative bg-home-foreground text-white rounded-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-500 shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-home-primary rounded-full flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white">Member Card</h3>
|
||||
<p class="text-xs text-gray-400">Exclusive Access</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
||||
class="w-8 h-8 opacity-80 brightness-0 invert">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="h-2 w-2/3 bg-white/10 rounded-full"></div>
|
||||
<div class="h-2 w-1/2 bg-white/10 rounded-full"></div>
|
||||
</div>
|
||||
<div class="mt-8 flex justify-between items-end">
|
||||
<div class="text-xs text-gray-400">Valid thru<br><span class="text-white font-mono">12/28</span>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white tracking-widest">•••• 8892</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl pointer-events-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -1,4 +1,4 @@
|
||||
<main class="flex flex-col lg:flex-row justify-between min-h-screen w-full relative overflow-x-hidden">
|
||||
<main class="flex flex-col lg:flex-row justify-between lg:min-h-screen w-full relative overflow-x-hidden">
|
||||
@include('livewire.home.partials.jumbotron.left')
|
||||
@include('livewire.home.partials.jumbotron.right')
|
||||
</main>
|
||||
@ -1,5 +1,5 @@
|
||||
<section
|
||||
class="relative w-full lg:w-[35%] mt-24 lg:mt-0 p-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white lg:bg-transparent">
|
||||
class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white">
|
||||
|
||||
<header class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
@ -20,32 +20,33 @@ class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-ful
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="border border-black py-1 px-3 rounded-full text-sm lg:text-lg">
|
||||
Plus <span class="px-2 py-1 bg-black text-home-background rounded-full">25K</span> Trusted users!
|
||||
<div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
|
||||
Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1 class="text-black text-4xl lg:text-6xl leading-tight text-start font-bold">
|
||||
Discover your best<br><span class="italic font-serif font-light">perfume</span> at today
|
||||
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
|
||||
Temukan parfum terbaikmu<br>
|
||||
<span class="italic font-serif font-light text-home-primary">hari ini</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-gray-700">
|
||||
Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want
|
||||
to make.
|
||||
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
|
||||
Memilih parfum adalah perjalanan yang personal. Pertimbangkan gaya hidupmu, aroma favorit, dan kesan yang ingin
|
||||
kamu tinggalkan.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="bg-black text-home-background py-3 px-6 rounded-full hover:opacity-90 transition-opacity font-medium">
|
||||
Explore Shop
|
||||
class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
|
||||
Jelajahi Toko
|
||||
</button>
|
||||
<span class="w-8 h-[2px] bg-black"></span>
|
||||
<span class="w-8 h-[2px] bg-home-primary/20"></span>
|
||||
<button
|
||||
class="flex items-center justify-center w-12 h-12 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors group">
|
||||
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
|
||||
<div
|
||||
class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
||||
class="w-8 h-8 bg-home-primary flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 text-white">
|
||||
stroke="currentColor" class="size-4 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
</div>
|
||||
@ -53,67 +54,67 @@ class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hove
|
||||
</div>
|
||||
|
||||
<article
|
||||
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-white lg:bg-white/40 backdrop-blur-xl border border-home-foreground/5 rounded-2xl z-30 shadow-lg lg:shadow-none overflow-hidden">
|
||||
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden">
|
||||
|
||||
<div id="testimonial-track" class="relative w-full h-full p-6">
|
||||
<div id="testimonial-track" class="relative w-full h-full py-0 px-6">
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0 bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Sarah Jenkins</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Sarah Jenkins</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan tahan
|
||||
lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan
|
||||
tahan lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Michael Chen</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Michael Chen</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
||||
packaging aman. Wanginya persis seperti deskripsi di website."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Jessica Tan</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Jessica Tan</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah favorit
|
||||
saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah
|
||||
favorit saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
||||
<button id="prev-testi"
|
||||
class="w-10 h-10 rounded-full bg-white border border-gray-100 shadow-md hover:bg-gray-50 flex justify-center items-center transition-colors group">
|
||||
class="w-10 h-10 rounded-full bg-home-background/80 backdrop-blur border border-home-background shadow-sm hover:bg-home-background flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-black group-hover:scale-110 transition-transform" fill="none"
|
||||
class="w-4 h-4 text-home-primary group-hover:scale-110 transition-transform" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="next-testi"
|
||||
class="w-10 h-10 rounded-full bg-black shadow-md hover:bg-gray-800 flex justify-center items-center transition-colors group">
|
||||
class="w-10 h-10 rounded-full bg-home-primary shadow-md hover:bg-home-primary/80 flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-white group-hover:scale-110 transition-transform" fill="none"
|
||||
class="w-4 h-4 text-home-background group-hover:scale-110 transition-transform" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<section
|
||||
class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen flex flex-col lg:flex-row justify-end items-end pb-8 pr-0 lg:pr-10 z-10">
|
||||
class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen hidden lg:flex flex-col lg:flex-row justify-end items-end pb-8 pr-0 lg:pr-10 z-10">
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1595425959632-34f2822322ce?q=80&w=1098&auto=format&fit=crop')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-white/90 via-white/50 to-transparent lg:hidden"></div>
|
||||
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023-1ca6b0636780?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full px-6 lg:px-0 lg:w-[80%] grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
@ -25,13 +25,13 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-home-background transition-colors text-home-background">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
@ -41,7 +41,7 @@ class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
@ -57,13 +57,13 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-home-background transition-colors text-home-background">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<section class="overflow-hidden relative pt-4" id="brand-slider" aria-label="Brand Slider">
|
||||
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform" id="brand-track">
|
||||
<section class="overflow-hidden relative pt-4 bg-home-foreground" id="brand-slider" aria-label="Brand Slider">
|
||||
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform cursor-grab active:cursor-grabbing"
|
||||
id="brand-track" style="touch-action: pan-y;">
|
||||
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
||||
|
||||
@ -1,75 +1,100 @@
|
||||
<section class="bg-white py-12 md:py-20 lg:py-24 px-4 md:px-8 lg:px-48">
|
||||
<div class="space-y-8 md:space-y-12 lg:space-y-16">
|
||||
<header class="space-y-4 md:space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-black leading-tight">
|
||||
Temukan Parfum Favorit dengan Kualitas Terbaik
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-gray-700 leading-relaxed max-w-3xl">
|
||||
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
||||
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap tetesnya
|
||||
asli dan terpercaya.
|
||||
</p>
|
||||
</header>
|
||||
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Parfum berkualitas" class="rounded-2xl w-full h-64 md:h-96 lg:h-[550px] object-cover">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20">
|
||||
<div class="order-2 lg:order-1 space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
|
||||
Temukan Parfum Favorit dengan Kualitas Terbaik
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-gray-600 leading-relaxed">
|
||||
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
||||
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap
|
||||
tetesnya asli dan terpercaya.
|
||||
</p>
|
||||
<div class="pt-4">
|
||||
<button
|
||||
class="text-home-primary font-bold hover:opacity-80 transition-opacity flex items-center gap-2">
|
||||
Pelajari Selengkapnya
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
<div class="order-1 lg:order-2 relative">
|
||||
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform rotate-2"></div>
|
||||
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop"
|
||||
alt="Koleksi Parfum Eksklusif"
|
||||
class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
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" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@ -1,353 +1,352 @@
|
||||
<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">
|
||||
@php
|
||||
$products = [
|
||||
[
|
||||
'name' => 'Oud Royal Premium',
|
||||
'category' => 'Luxury',
|
||||
'price' => 1200000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Oud+Royal',
|
||||
'rating' => 5.0,
|
||||
'reviews' => 120,
|
||||
'is_new' => true,
|
||||
'colors' => ['#78350f', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Rose Velvet',
|
||||
'category' => 'Floral',
|
||||
'price' => 450000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Rose+Velvet',
|
||||
'rating' => 4.8,
|
||||
'reviews' => 85,
|
||||
'is_new' => false,
|
||||
'colors' => ['#be123c', '#fce7f3'],
|
||||
],
|
||||
[
|
||||
'name' => 'Ocean Breeze',
|
||||
'category' => 'Fresh',
|
||||
'price' => 320000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Ocean+Breeze',
|
||||
'rating' => 4.9,
|
||||
'reviews' => 200,
|
||||
'is_new' => false,
|
||||
'colors' => ['#0ea5e9', '#e0f2fe'],
|
||||
],
|
||||
[
|
||||
'name' => 'Vanilla Sky',
|
||||
'category' => 'Sweet',
|
||||
'price' => 350000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Vanilla+Sky',
|
||||
'rating' => 4.7,
|
||||
'reviews' => 150,
|
||||
'is_new' => true,
|
||||
'colors' => ['#d4d4d8', '#71717a'],
|
||||
],
|
||||
[
|
||||
'name' => 'Midnight Musk',
|
||||
'category' => 'Musky',
|
||||
'price' => 550000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Midnight+Musk',
|
||||
'rating' => 4.6,
|
||||
'reviews' => 90,
|
||||
'is_new' => false,
|
||||
'colors' => ['#1f2937', '#000000'],
|
||||
],
|
||||
[
|
||||
'name' => 'Citrus Energy',
|
||||
'category' => 'Fresh',
|
||||
'price' => 280000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Citrus+Energy',
|
||||
'rating' => 4.5,
|
||||
'reviews' => 60,
|
||||
'is_new' => false,
|
||||
'colors' => ['#eab308', '#fef08a'],
|
||||
],
|
||||
];
|
||||
|
||||
<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>
|
||||
$recommendations = [
|
||||
[
|
||||
'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
|
||||
|
||||
<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="flex flex-col min-h-screen bg-white font-sans">
|
||||
|
||||
<div class="border-t border-home-foreground/10 my-5"></div>
|
||||
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
|
||||
<header class="mb-12">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Koleksi Parfum</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl">Temukan aroma khas yang mencerminkan kepribadian dan
|
||||
gaya Anda.</p>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-24">
|
||||
|
||||
<aside class="hidden lg:block lg:col-span-1 space-y-8">
|
||||
<div class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm sticky top-32">
|
||||
<h3 class="font-bold text-home-primary mb-6 border-b border-home-foreground/10 pb-4">Kategori</h3>
|
||||
<div class="space-y-4">
|
||||
@foreach (['Pria', 'Wanita', 'Unisex', 'Luxury', 'Best Seller', 'New Arrival'] as $cat)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="checkbox"
|
||||
class="w-5 h-5 rounded border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
|
||||
<span
|
||||
class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $cat }}</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>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="border-t border-home-foreground/10 my-8"></div>
|
||||
|
||||
<h3 class="font-bold text-home-primary mb-6 border-b border-home-foreground/10 pb-4">Harga</h3>
|
||||
<div class="space-y-4">
|
||||
@foreach (['< 100k', '100k - 500k', '500k - 1jt', '> 1jt'] as $price)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="radio" name="price"
|
||||
class="w-5 h-5 border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
|
||||
<span
|
||||
class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $price }}</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>
|
||||
@endforeach
|
||||
</div>
|
||||
</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>
|
||||
<section class="lg:col-span-3">
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
||||
<div class="flex-1 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 produk..."
|
||||
class="w-full pl-11 pr-4 py-3 rounded-xl border border-home-foreground/10 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm placeholder-home-foreground/40 text-home-foreground bg-white">
|
||||
</div>
|
||||
<div class="relative min-w-[200px]">
|
||||
<select
|
||||
class="w-full 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 shadow-sm">
|
||||
<option>Urutkan: Terbaru</option>
|
||||
<option>Harga Terendah</option>
|
||||
<option>Harga Tertinggi</option>
|
||||
<option>Terpopuler</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>
|
||||
|
||||
<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)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach ($products as $item)
|
||||
<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>
|
||||
class="group 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 flex flex-col h-full relative">
|
||||
|
||||
@if ($item['is_new'])
|
||||
<span
|
||||
class="absolute top-4 left-4 bg-home-primary text-white text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full z-10 shadow-md">New</span>
|
||||
@endif
|
||||
|
||||
<div class="relative h-72 overflow-hidden bg-home-primary/5">
|
||||
<img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
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>
|
||||
</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">
|
||||
<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="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>
|
||||
<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">
|
||||
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span
|
||||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||||
class="text-[10px] font-bold tracking-widest text-home-primary uppercase bg-home-primary/10 px-2 py-1 rounded">{{ $item['category'] }}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3 text-yellow-400" 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="text-xs font-bold text-home-foreground">{{ $item['rating'] }}</span>
|
||||
<span class="text-xs text-home-foreground/40">({{ $item['reviews'] }})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-lg font-bold text-home-foreground group-hover:text-home-primary transition-colors mb-4 line-clamp-1">
|
||||
{{ $item['name'] }}</h3>
|
||||
|
||||
<div
|
||||
class="mt-auto pt-4 border-t border-home-foreground/5 flex items-center justify-between">
|
||||
<span class="text-xl font-bold text-home-primary">Rp
|
||||
{{ number_format($item['price'], 0, ',', '.') }}</span>
|
||||
<button
|
||||
class="w-10 h-10 rounded-lg bg-home-foreground text-white flex items-center justify-center hover:bg-home-primary transition-colors shadow-md">
|
||||
<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="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
<div class="mt-16 flex justify-center">
|
||||
<nav 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>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground/30 cursor-not-allowed hover:bg-transparent">
|
||||
<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>
|
||||
@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>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-home-primary text-white font-bold shadow-lg shadow-home-primary/20 transition-all">1</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/5 transition-all font-medium">2</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/5 transition-all font-medium">3</button>
|
||||
<span class="w-10 h-10 flex items-center justify-center text-home-foreground/40">...</span>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground hover:border-home-primary hover:text-home-primary 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>
|
||||
</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>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="mt-24 pt-16 border-t border-home-foreground/10">
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-home-primary">Mungkin Anda Suka</h2>
|
||||
<div class="flex gap-3">
|
||||
<button id="slideLeft"
|
||||
class="w-12 h-12 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white hover:border-home-primary transition-all shadow-sm">
|
||||
<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-12 h-12 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white hover:border-home-primary transition-all shadow-sm">
|
||||
<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 ($recommendations 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 track = document.getElementById("sliderTrack");
|
||||
const next = document.getElementById("nextBtn");
|
||||
const prev = document.getElementById("prevBtn");
|
||||
const slider = document.getElementById('productSlider');
|
||||
const leftBtn = document.getElementById('slideLeft');
|
||||
const rightBtn = document.getElementById('slideRight');
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
if (slider && leftBtn && rightBtn) {
|
||||
rightBtn.addEventListener('click', () => {
|
||||
slider.scrollBy({
|
||||
left: 320,
|
||||
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'
|
||||
});
|
||||
}
|
||||
leftBtn.addEventListener('click', () => {
|
||||
slider.scrollBy({
|
||||
left: -320,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
274
resources/views/livewire/home/product/show.blade.php
Normal file
274
resources/views/livewire/home/product/show.blade.php
Normal 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>
|
||||
@ -1,98 +1,160 @@
|
||||
<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>
|
||||
<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-8" aria-label="Pencarian dan Filter">
|
||||
<section class="flex flex-col lg:flex-row gap-4 mb-12" 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">
|
||||
<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 voucher..." aria-label="Cari voucher"
|
||||
<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-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">
|
||||
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>
|
||||
|
||||
<select wire:model.live="outlet_id" 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>
|
||||
@foreach ($outlets as $key => $value)
|
||||
<option value="{{ $key }}">{{ $value }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<select wire:model.live="sort" 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>
|
||||
<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-6">
|
||||
<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-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">
|
||||
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">
|
||||
<div class="relative z-10">
|
||||
<div
|
||||
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3">
|
||||
{{ $voucher->tags }}</div>
|
||||
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $voucher->name }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $voucher->summary }}</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>
|
||||
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>
|
||||
|
||||
<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_purchase_formatted }}</span>
|
||||
<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="flex justify-between">
|
||||
<span class="text-home-foreground/60">Berlaku s.d.:</span>
|
||||
<time datetime="{{ $voucher->end_date }}"
|
||||
class="font-semibold text-home-foreground">{{ $voucher->end_date }}</time>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Sisa Voucher:</span>
|
||||
<span class="font-semibold text-home-foreground">{{ $voucher->available_count }} /
|
||||
{{ $voucher->quota ?? '∞' }}</span>
|
||||
<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="p-6 flex gap-3">
|
||||
<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-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Klaim
|
||||
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-2 border-home-foreground text-home-foreground font-bold py-2.5 rounded-lg hover:bg-home-foreground/5 transition-colors">
|
||||
Detail
|
||||
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
|
||||
|
||||
<div class="mt-8 flex justify-center">
|
||||
{{ $vouchers->links() }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mt-auto flex justify-center w-full">
|
||||
{{ $vouchers->links() }}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Home\Article\Index as ArticleIndex;
|
||||
use App\Livewire\Home\Cart\Index as CartComponent;
|
||||
use App\Livewire\Home\Faq\Index as FaqComponent;
|
||||
use App\Livewire\Home\Index as HomeComponent;
|
||||
use App\Livewire\Home\Outlet as OutletComponent;
|
||||
@ -15,11 +16,8 @@
|
||||
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');
|
||||
@ -27,7 +25,10 @@
|
||||
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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user