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

feat(cart, article, product): Introduce new Cart component, enhance Article and Product components with detail views, and update routing for improved navigation.

Browse Source
This commit is contained in:
Yoga Pangestu 2025-12-14 12:40:54 +07:00
parent ffba4df0dc
commit 3916ef436e
26 changed files with 2252 additions and 990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,24 @@
])] ])]
class Index extends Component 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() public function render()
{ {
return view('livewire.home.article.index'); return view(
$this->isDetail
? 'livewire.home.article.show'
: 'livewire.home.article.index'
);
} }
} }

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

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

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

@ -10,8 +10,24 @@
])] ])]
class Index extends Component 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() public function render()
{ {
return view('livewire.home.product.index'); return view(
$this->isDetail
? 'livewire.home.product.show'
: 'livewire.home.product.index'
);
} }
} }

9
app/Providers/ViewServiceProvider.php
View File

@ -16,7 +16,14 @@ public function boot(): void
return; 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) { View::composer('*', function ($view) use ($priceRequestCount) {
$sidebar = [ $sidebar = [

12
resources/css/app.css
View File

@ -4,10 +4,13 @@
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
:root { :root {
--home-background: #E5F0FF; --home-background: #F5FEFF;
--home-accent: #D1E8FF; --home-accent: #E2E8F0;
--home-foreground: #000000; --home-foreground: #000000;
--home-primary: #CAE8FF; --home-primary: #0E2F76;
--home-secondary: #AAC0E1;
--home-surface: #C7B189;
--home-neutral: #334155;
} }
@theme { @theme {
--font-sans: Inter, sans-serif; --font-sans: Inter, sans-serif;
@ -18,6 +21,9 @@ @theme {
--color-home-accent: var(--home-accent); --color-home-accent: var(--home-accent);
--color-home-foreground: var(--home-foreground); --color-home-foreground: var(--home-foreground);
--color-home-primary: var(--home-primary); --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 { @layer theme {

73
resources/views/components/layouts/home.blade.php
View File

@ -20,6 +20,8 @@
@endpersist @endpersist
{{ $slot }} {{ $slot }}
@include('components.sections.ui.home._footer')
@fluxScripts @fluxScripts
<script> <script>
@ -40,39 +42,39 @@
const closeIcon = document.getElementById('close-icon'); const closeIcon = document.getElementById('close-icon');
function setIconsLight() { function setIconsLight() {
cartIcon.classList.remove('bg-black', 'bg-gray-100'); cartIcon.classList.remove('bg-home-foreground', 'bg-gray-100');
cartIcon.classList.add('bg-white'); cartIcon.classList.add('bg-white');
cartSvg.classList.remove('text-white', 'text-gray-800'); cartSvg.classList.remove('text-white', 'text-home-foreground');
cartSvg.classList.add('text-black'); 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'); profileIcon.classList.add('bg-white');
profileSvg.classList.remove('text-white', 'text-gray-800'); profileSvg.classList.remove('text-white', 'text-home-foreground');
profileSvg.classList.add('text-black'); profileSvg.classList.add('text-home-foreground');
} }
function setIconsDark() { function setIconsDark() {
cartIcon.classList.add('bg-black'); cartIcon.classList.add('bg-home-foreground');
cartIcon.classList.remove('bg-white', 'bg-gray-100'); cartIcon.classList.remove('bg-white', 'bg-gray-100');
cartSvg.classList.add('text-white'); 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'); profileIcon.classList.remove('bg-white', 'bg-gray-100');
profileSvg.classList.add('text-white'); profileSvg.classList.add('text-white');
profileSvg.classList.remove('text-black', 'text-gray-800'); profileSvg.classList.remove('text-home-foreground', 'text-home-foreground');
} }
function setIconsScrolled() { function setIconsScrolled() {
cartIcon.classList.add('bg-gray-100'); cartIcon.classList.add('bg-gray-100');
cartIcon.classList.remove('bg-black', 'bg-white'); cartIcon.classList.remove('bg-home-foreground', 'bg-white');
cartSvg.classList.add('text-gray-800'); cartSvg.classList.add('text-home-foreground');
cartSvg.classList.remove('text-white', 'text-black'); cartSvg.classList.remove('text-white');
profileIcon.classList.add('bg-gray-100'); profileIcon.classList.add('bg-gray-100');
profileIcon.classList.remove('bg-black', 'bg-white'); profileIcon.classList.remove('bg-home-foreground', 'bg-white');
profileSvg.classList.add('text-gray-800'); profileSvg.classList.add('text-home-foreground');
profileSvg.classList.remove('text-white', 'text-black'); profileSvg.classList.remove('text-white');
} }
mobileBtn.addEventListener('click', () => { 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.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-gray-200');
navbar.classList.remove('bg-transparent'); navbar.classList.remove('bg-transparent');
navLinks.classList.add('bg-white', 'border-gray-300', 'text-black'); navLinks.classList.add('bg-white', 'border-home-accent');
navLinks.classList.remove('bg-transparent', 'border-black', 'text-black'); navLinks.classList.remove('bg-transparent', 'border-home-foreground');
cart.classList.add('border-gray-300', 'bg-white'); cart.classList.add('border-home-accent', 'bg-white');
cart.classList.remove('border-black'); cart.classList.remove('border-home-foreground');
cart.querySelector('span').classList.add('text-gray-800'); cart.querySelector('span').classList.add('text-home-foreground');
login.classList.add('border-gray-300', 'text-gray-800', 'bg-white'); login.classList.add('border-home-accent', 'text-home-foreground', 'bg-white');
login.classList.remove('border-black', 'text-black'); login.classList.remove('border-home-foreground');
profile.classList.add('border-gray-300'); profile.classList.add('border-home-accent');
profile.classList.remove('border-black'); profile.classList.remove('border-home-foreground');
setIconsScrolled(); setIconsScrolled();
} else { } else {
@ -150,19 +152,20 @@ function setIconsScrolled() {
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b', navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b',
'border-gray-200'); 'border-gray-200');
navLinks.classList.add('bg-transparent', 'border-black', 'text-black'); navLinks.classList.add('bg-transparent', 'border-home-foreground',
navLinks.classList.remove('bg-white', 'border-gray-300'); 'text-home-foreground');
navLinks.classList.remove('bg-white', 'border-home-accent');
cart.classList.add('border-black'); cart.classList.add('border-home-foreground');
cart.classList.remove('border-gray-300', 'bg-white'); cart.classList.remove('border-home-accent', 'bg-white');
cart.querySelector('span').classList.remove('text-gray-800'); cart.querySelector('span').classList.remove('text-home-foreground');
cart.querySelector('span').classList.add('text-black'); cart.querySelector('span').classList.add('text-home-foreground');
login.classList.add('border-black', 'text-black'); login.classList.add('border-home-foreground', 'text-home-foreground');
login.classList.remove('border-gray-300', 'text-gray-800', 'bg-white'); login.classList.remove('border-home-accent', 'bg-white');
profile.classList.add('border-black'); profile.classList.add('border-home-foreground');
profile.classList.remove('border-gray-300'); profile.classList.remove('border-home-accent');
setIconsDark(); setIconsDark();
} }

162
resources/views/components/sections/ui/home/_footer.blade.php
View File

@ -1,93 +1,105 @@
<footer class="bg-gray-100 text-gray-700 py-12 px-6 lg:px-32 xl:px-48 font-sans"> <footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
<div class="container mx-auto">
<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"> <div class="flex items-center gap-3">
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum" <img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum"
class="w-16 h-16 object-contain"> class="w-10 h-10 object-contain brightness-0 invert">
<h2 class="text-2xl font-bold text-gray-800">Yadi Parfum</h2> <h2 class="text-2xl font-bold tracking-wide text-white">Yadi Parfum</h2>
</div> </div>
<p class="text-gray-400 text-sm leading-relaxed">
<p class="text-gray-600 text-sm leading-relaxed text-justify">
Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga
terjangkau. Temukan aroma khasmu di sini. terjangkau.
</p> </p>
</div> <div class="flex items-center gap-4 mt-2">
<a href="#"
<div class="md:col-span-3 md:pl-8"> 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">
<h3 class="text-lg font-bold text-gray-800 mb-4 uppercase tracking-wider">Tautan Cepat</h3> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<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>
</li>
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Tentang Kami</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>
</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">
&copy; {{ 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> <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg> </svg>
</a> </a>
<a href="#" class="text-gray-500 hover:text-pink-600 transition-colors"> <a href="#"
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> 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">
<path d="M12 2.163c3.204..."></path> <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> </svg>
</a> </a>
<a href="#" class="text-gray-500 hover:text-green-500 transition-colors"> <a href="#"
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> 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">
<path d="M.057 24l1.687..."></path> <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> </svg>
</a> </a>
</div> </div>
</div> </div>
<div class="md:col-span-3 md:pl-8">
<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-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>
</ul>
</div>
<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>
<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">
&copy; {{ date('Y') }} Yadi Parfum. All rights reserved.
</div>
<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> </div>
</footer> </footer>

34
resources/views/components/sections/ui/home/_header.blade.php
View File

@ -1,12 +1,12 @@
<header id="navbar" <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"> <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" <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"> 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" <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg> </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"> <a href="/" class="flex items-center ml-8 lg:ml-0 z-50">
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo" <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> </a>
<nav id="nav-links" <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"> aria-label="Main Navigation">
@foreach ($header as $item) @foreach ($header as $item)
@if ($item['type'] === 'link') @if ($item['type'] === 'link')
@ -60,31 +60,31 @@ class="block px-4 py-2 hover:bg-gray-50 transition-colors">
@endforeach @endforeach
</nav> </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" <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" <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"> 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="1.5" <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-500" id="cart-svg"> stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="cart-svg">
<path stroke-linecap="round" stroke-linejoin="round" <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" /> 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> </svg>
</div> </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>
<button id="login" <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 Masuk
</button> </button>
<button id="profile" <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" <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"> 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="1.5" <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-500" id="profile-svg"> stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="profile-svg">
<path stroke-linecap="round" stroke-linejoin="round" <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" /> 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> </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> </section>
<nav id="mobile-menu" <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"> aria-label="Mobile Navigation">
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Beranda</a> <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> <a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">FAQ</a>
<button <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 Get CV
</button> </button>
</nav> </nav>

407
resources/views/livewire/home/article/index.blade.php
View File

@ -1,217 +1,220 @@
<div> <div>
<main class="px-8 py-12 mt-24 bg-white min-h-screen"> <main class="px-6 lg:px-32 xl:px-48 pb-24 pt-36 bg-white min-h-screen font-sans">
<header class="mb-8">
<h1 class="text-3xl font-bold text-home-foreground mb-2">Artikel</h1> <header class="mb-12">
<p class="text-home-foreground/60">Baca tips dan trik seputar perawatan wewangian dan lifestyle</p> <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> </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"> <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="flex-1">
<div class="relative"> <div class="relative group">
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none" <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
stroke="currentColor" viewBox="0 0 24 24"> fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <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> d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg> </svg>
<input type="search" placeholder="Cari artikel..." aria-label="Cari artikel" <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>
</div> </div>
<div class="relative">
<select aria-label="Urutkan artikel" <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"> 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="">Urutkan</option>
<option value="latest">Terbaru</option> <option value="latest">Terbaru</option>
<option value="name">Nama</option> <option value="name">Nama</option>
<option value="views">Paling Dilihat</option> <option value="views">Terpopuler</option>
</select> </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>
<div class="space-y-6"> <div class="space-y-8">
<article <article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group"> 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"> <div class="flex flex-col sm:flex-row h-full">
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden"> <div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
<img src="https://placehold.co/500x300/png" alt="Tips Memilih Parfum" loading="lazy" <img src="https://placehold.co/600x400/png?text=Tips+Parfum" alt="Tips Memilih Parfum"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"> 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>
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
<div> <div>
<div class="flex gap-2 mb-3"> <div class="flex items-center gap-3 mb-4">
<span <span
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Perawatan</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/60">5 min read</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> </div>
<h3 <h3
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2"> 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> Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Memilih parfum yang </h3>
tepat bukan hanya tentang aroma yang disukai, tetapi juga tentang menemukan <p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
signature scent yang mencerminkan kepribadian Anda. Dalam artikel ini kami akan Memilih parfum yang tepat bukan hanya tentang aroma yang disukai, tetapi juga
membahas cara memilih parfum yang paling sesuai...</p> tentang menemukan signature scent yang mencerminkan karakter...
</p>
</div> </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"> <div class="flex items-center gap-3">
<img src="https://placehold.co/500x300/png" alt="Siti Rahma" <img src="https://placehold.co/100x100/png?text=User" alt="Author"
class="w-8 h-8 rounded-full"> class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
<div> <div>
<p class="text-sm font-semibold text-home-foreground">Siti Rahma</p> <p class="text-sm font-bold text-home-foreground">Siti Rahma</p>
<time datetime="2024-11-05" class="text-xs text-home-foreground/60">5 Nov <p class="text-xs text-home-foreground/50">5 Nov 2024</p>
2024</time>
</div> </div>
</div> </div>
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform" <div
fill="currentColor" viewBox="0 0 20 20"> 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">
<path fill-rule="evenodd" <svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
clip-rule="evenodd"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
</div>
</article> </article>
<article <article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group"> 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"> <div class="flex flex-col sm:flex-row h-full">
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden"> <div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
<img src="https://placehold.co/500x300/png" alt="Cara Menyimpan Parfum" loading="lazy" <img src="https://placehold.co/600x400/png?text=Menyimpan+Parfum"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"> alt="Cara Menyimpan Parfum" loading="lazy"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</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>
<div class="flex gap-2 mb-3"> <div class="flex items-center gap-3 mb-4">
<span <span
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Lifestyle</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/60">8 min read</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> </div>
<h3 <h3
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2"> 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> Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum adalah </h3>
investasi <p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
yang berharga, dan penyimpanan yang tepat adalah kunci untuk menjaga kualitas Parfum adalah investasi yang berharga. Penyimpanan yang tepat adalah kunci untuk
dan daya tahan aroma. Temukan tips profesional tentang suhu ideal, lokasi menjaga kualitas aroma agar tetap orisinil...
penyimpanan terbaik, dan cara menjaga botol parfum Anda...</p> </p>
</div> </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"> <div class="flex items-center gap-3">
<img src="https://placehold.co/500x300/png" alt="Ahmad Rizki" <img src="https://placehold.co/100x100/png?text=User" alt="Author"
class="w-8 h-8 rounded-full"> class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
<div> <div>
<p class="text-sm font-semibold text-home-foreground">Ahmad Rizki</p> <p class="text-sm font-bold text-home-foreground">Ahmad Rizki</p>
<time datetime="2024-11-03" class="text-xs text-home-foreground/60">3 Nov <p class="text-xs text-home-foreground/50">3 Nov 2024</p>
2024</time>
</div> </div>
</div> </div>
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform" <div
fill="currentColor" viewBox="0 0 20 20"> 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">
<path fill-rule="evenodd" <svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
clip-rule="evenodd"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
</div>
</article> </article>
<article <article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group"> 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"> <div class="flex flex-col sm:flex-row h-full">
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden"> <div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
<img src="https://placehold.co/500x300/png" alt="Parfum Musim Dingin" loading="lazy" <img src="https://placehold.co/600x400/png?text=Parfum+Unisex" alt="Parfum Unisex"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"> loading="lazy"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</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>
<div class="flex gap-2 mb-3"> <div class="flex items-center gap-3 mb-4">
<span <span
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Tren</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/60">6 min read</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> </div>
<h3 <h3
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2"> class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
Parfum Musim Dingin: Aroma Hangat yang Sempurna untuk Liburan</h3> Parfum Unisex Terbaik 2024: Pilihan Untuk Semua
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Musim dingin </h3>
membutuhkan aromaterapi yang berbeda. Kami merekomendasikan koleksi parfum <p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
dengan nada hangat seperti vanilla, kayu cedar, dan musk yang sempurna untuk Parfum unisex semakin populer karena fleksibilitas dan keunikannya. Kami
menciptakan suasana nyaman di musim yang dingin...</p> mengumpulkan rekomendasi terbaik tahun ini...
</p>
</div> </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 <div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
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 gap-3"> <div class="flex items-center gap-3">
<img src="https://placehold.co/500x300/png" alt="Budi Santoso" <img src="https://placehold.co/100x100/png?text=User" alt="Author"
class="w-8 h-8 rounded-full"> class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
<div> <div>
<p class="text-sm font-semibold text-home-foreground">Budi Santoso</p> <p class="text-sm font-bold text-home-foreground">Budi Santoso</p>
<time datetime="2024-10-28" class="text-xs text-home-foreground/60">28 Oct <p class="text-xs text-home-foreground/50">28 Oct 2024</p>
2024</time>
</div> </div>
</div> </div>
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform" <div
fill="currentColor" viewBox="0 0 20 20"> 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">
<path fill-rule="evenodd" <svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
clip-rule="evenodd"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
</div>
</article> </article>
</div> </div>
<nav class="flex items-center justify-center mt-12" aria-label="Pagination"> <nav class="flex items-center justify-center mt-16" aria-label="Pagination">
<div class="flex items-center gap-2"> <div
class="flex items-center gap-3 bg-white p-2 rounded-full shadow-sm border border-home-foreground/5">
<button <button
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed" 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 aria-label="Halaman sebelumnya"> disabled>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" <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" 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++) @for ($page = 1; $page <= 3; $page++)
@if ($page == 1) @if ($page == 1)
<button <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> aria-current="page">{{ $page }}</button>
@else @else
<button <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 @endif
@endfor @endfor
<button <button
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors" 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">
aria-label="Halaman selanjutnya">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" <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" 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> </section>
<aside class="lg:col-span-1"> <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" <nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
aria-labelledby="cat-heading"> <h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
<h3 id="cat-heading" class="text-lg font-bold text-home-foreground mb-4">Kategori</h3> Kategori</h3>
<div class="space-y-2"> <div class="space-y-1">
<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">Perawatan 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">
Parfum</button> 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 <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 <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 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">
Terkini</button> 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 <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 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">
& Trik</button> Tips & Trik
<button <span
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 class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
Produk</button> </button>
</div> </div>
</nav> </nav>
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6" <nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
aria-labelledby="pop-heading"> <h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
<h3 id="pop-heading" class="text-lg font-bold text-home-foreground mb-4">Artikel Populer</h3> Populer</h3>
<div class="space-y-4"> <div class="space-y-5">
<a href="#" class="block group"> <a href="#" class="block group">
<p <p
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2"> 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> Tips Memilih Parfum yang Tepat Sesuai Kepribadian
<p class="text-xs text-home-foreground/60 mt-1">2.5K views</p> </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> </a>
<div class="border-t border-home-foreground/10"></div> <div class="border-t border-home-foreground/5"></div>
<a href="#" class="block group"> <a href="#" class="block group">
<p <p
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2"> 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> Panduan Lengkap Cara Menyimpan Parfum
<p class="text-xs text-home-foreground/60 mt-1">1.8K views</p> </p>
</a> <p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
<div class="border-t border-home-foreground/10"></div> <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<a href="#" class="block group"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<p d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
Parfum Musim Dingin: Aroma Hangat</p> 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">
<p class="text-xs text-home-foreground/60 mt-1">1.2K views</p> </path>
</svg>
1.8K views
</p>
</a> </a>
</div> </div>
</nav> </nav>
<section class="bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-6" <section
aria-labelledby="newsletter-heading"> class="bg-home-primary rounded-2xl p-8 text-center relative overflow-hidden group shadow-lg shadow-home-primary/20">
<h3 id="newsletter-heading" class="text-lg font-bold text-home-foreground mb-2">Newsletter <div
</h3> class="absolute top-0 right-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -mr-10 -mt-10">
<p class="text-sm text-home-foreground/60 mb-4">Dapatkan tips dan artikel terbaru langsung ke </div>
email Anda</p>
<form onsubmit="event.preventDefault();"> <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" <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"> 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" <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> 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> </form>
</div>
</section> </section>
</div> </div>

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

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

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

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

92
resources/views/livewire/home/faq/index.blade.php
View File

@ -1,62 +1,78 @@
<div> <div>
<section class="px-6 md:px-12 lg:px-24 py-28 md:py-36 bg-white min-h-screen"> <section class="px-6 lg:px-32 xl:px-48 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> <header class="mb-16 text-center">
<p class="text-home-foreground/60 text-lg"> <h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
Temukan jawaban untuk pertanyaan umum Anda tentang produk dan layanan kami <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> </p>
</header> </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 ([ @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.'], ['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.'], ['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.'], ['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.'], ['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%.'], ['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 menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
] as $index => $faq) ] as $index => $faq)
<article x-data="{ open: null }" <article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm"> 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 }}" <h3 class="text-lg font-bold pr-4 transition-colors"
:aria-expanded="open === {{ $index }}" :class="activeAccordion === {{ $index }} ? 'text-home-primary' :
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors"> 'text-home-foreground group-hover:text-home-primary'">
<h3 class="text-lg font-bold text-home-foreground text-left pr-4">
{{ $faq['q'] }} {{ $faq['q'] }}
</h3> </h3>
<svg xmlns="http://www.w3.org/2000/svg" <span class="flex-shrink-0 ml-4 p-1 rounded-full transition-all duration-300"
class="w-6 h-6 text-home-foreground transition-transform duration-300" :class="activeAccordion === {{ $index }} ? 'bg-home-primary text-white rotate-180' :
:class="{ 'rotate-180': open === {{ $index }} }" fill="none" viewBox="0 0 24 24" 'bg-home-foreground/10 text-home-foreground group-hover:bg-home-primary group-hover:text-white'">
stroke-width="2" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /> stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg> </svg>
</span>
</button> </button>
<div x-show="open === {{ $index }}" x-collapse <div x-show="activeAccordion === {{ $index }}" x-collapse x-cloak
x-transition:enter="transition ease-out duration-300" 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">
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'] }} {{ $faq['a'] }}
</p>
</div> </div>
</article> </article>
@endforeach @endforeach
</div> </div>
<div class="mt-10 bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-8 text-center"> <div
<h3 class="text-2xl font-bold text-home-foreground mb-2">Masih ada pertanyaan?</h3> class="mt-16 bg-home-primary rounded-2xl p-10 text-center relative overflow-hidden shadow-xl shadow-home-primary/20">
<p class="text-home-foreground/60 mb-6">Tim customer service kami siap membantu Anda 24/7</p> <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 <button
class="bg-home-foreground text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"> 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">
Hubungi Kami 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> </button>
</div> </div>
</div>
</div>
</section> </section>
</div> </div>

72
resources/views/livewire/home/index.blade.php
View File

@ -12,14 +12,25 @@
#brand-slider img { #brand-slider img {
user-select: none; user-select: none;
-webkit-user-drag: none; -webkit-user-drag: none;
filter: grayscale(100%); filter: brightness(0) invert(1);
opacity: 0.6; opacity: 0.6;
transition: all 0.3s ease; transition: all 0.3s ease;
pointer-events: auto;
} }
#brand-slider img:hover { #brand-slider img:hover {
filter: grayscale(0%); /* filter: brightness(0) invert(1); */
filter: none;
opacity: 1; opacity: 1;
transform: scale(1.05);
}
.cursor-grab {
cursor: grab;
}
.cursor-grabbing {
cursor: grabbing;
} }
.fade-enter { .fade-enter {
@ -38,7 +49,6 @@
@script @script
<script> <script>
document.addEventListener('livewire:navigated', () => { document.addEventListener('livewire:navigated', () => {
// brand slider
const track = document.getElementById('brand-track'); const track = document.getElementById('brand-track');
const originalChildren = Array.from(track.children); const originalChildren = Array.from(track.children);
const originalHTML = track.innerHTML; const originalHTML = track.innerHTML;
@ -48,44 +58,79 @@
const itemWidth = originalChildren[0].offsetWidth; const itemWidth = originalChildren[0].offsetWidth;
const gapStyle = window.getComputedStyle(track).gap; const gapStyle = window.getComputedStyle(track).gap;
const gap = parseFloat(gapStyle) || 0; const gap = parseFloat(gapStyle) || 0;
const singleSetWidth = (itemWidth + gap) * originalChildren.length; const singleSetWidth = (itemWidth + gap) * originalChildren.length;
let currentWidth = singleSetWidth; let currentWidth = singleSetWidth;
while (currentWidth < window.innerWidth + singleSetWidth * 2) { while (currentWidth < window.innerWidth + singleSetWidth * 2) {
track.innerHTML += originalHTML; track.innerHTML += originalHTML;
currentWidth currentWidth += singleSetWidth;
+= singleSetWidth;
} }
let position = 0; let position = 0;
const speed = 1; 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() { function animate() {
if (isDown) return;
position -= speed; position -= speed;
if (Math.abs(position) >=
singleSetWidth) { if (position <= -singleSetWidth) {
position = 0; position += singleSetWidth;
} else if (position > 0) {
position -= singleSetWidth;
} }
track.style.transform = `translateX(${position}px)`; track.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
} }
animate(); animate();
// category pagination
const links = document.querySelectorAll('.pagination-link'); const links = document.querySelectorAll('.pagination-link');
const container = document.getElementById('category-container'); const container = document.getElementById('category-container');
if (links.length > 0 && container) {
links.forEach(link => { links.forEach(link => {
link.addEventListener('click', e => { link.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
links.forEach(l => l.classList.remove('bg-black')); links.forEach(l => l.classList.remove('bg-home-foreground'));
links.forEach(l => l.classList.add('bg-gray-400')); links.forEach(l => l.classList.add('bg-gray-400'));
e.target.classList.remove('bg-gray-400'); e.target.classList.remove('bg-gray-400');
e.target.classList.add('bg-black'); e.target.classList.add('bg-home-foreground');
fetch(link.href) fetch(link.href)
.then(res => res.text()) .then(res => res.text())
@ -104,6 +149,7 @@ function animate() {
}); });
}); });
}); });
}
}); });
</script> </script>
@endscript @endscript

174
resources/views/livewire/home/outlets.blade.php
View File

@ -1,3 +1,173 @@
<div class=""> <div>
Outlet @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> </div>

69
resources/views/livewire/home/partials/benefits.blade.php
View File

@ -23,42 +23,63 @@
]; ];
@endphp @endphp
<section class="bg-white py-20 px-6 lg:px-48 font-sans text-home-foreground"> <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="grid lg:grid-cols-2 gap-12 items-start"> <div class="max-w-7xl mx-auto">
<figure class="w-full"> <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<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>
<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>
<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>
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
@foreach ($accordions as $index => $acc) @foreach ($accordions as $index => $acc)
<div x-data="{ open: null }" class="border-b border-gray-200 pb-4 accordion-item"> <div class="border-b border-gray-100 last:border-0">
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}" <button
class="w-full flex justify-between items-center py-2 text-left group focus:outline-none" @click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
:aria-expanded="open === {{ $index }}"> class="w-full flex justify-between items-center py-5 text-left group focus:outline-none transition-all duration-300"
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition"> :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'] }} {{ $acc['title'] }}
</span> </span>
<span class="icon-plus text-xl font-light text-gray-400 transition-transform duration-300" <span class="ml-4 flex-shrink-0 transition-transform duration-300 w-8 h-8 flex items-center justify-center rounded-full"
:class="{ 'rotate-45': open === {{ $index }} }"> :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> </span>
</button> </button>
<div x-show="open === {{ $index }}" x-collapse
x-transition:enter="transition ease-out duration-300" <div x-show="activeAccordion === {{ $index }}"
x-transition:leave="transition ease-in duration-200" x-collapse
class="min-h-0 content overflow-hidden text-gray-700 text-sm leading-relaxed"> x-cloak
<div class="pt-2 pb-2"> class="overflow-hidden text-home-foreground/70 text-base leading-relaxed">
<div class="pb-5">
{{ $acc['content'] }} {{ $acc['content'] }}
</div> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
</div>
</article> </article>
</div>
</div> </div>
</section> </section>

50
resources/views/livewire/home/partials/categories.blade.php
View File

@ -33,31 +33,40 @@
$totalPages = ceil($total / $perPage); $totalPages = ceil($total / $perPage);
@endphp @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"> <div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
<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"> Temukan Aroma yang <br class="hidden sm:block">
Cocok dengan Kepribadianmu. Cocok dengan Kepribadianmu.
</h2> </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> </header>
<div class="relative"> <div class="relative">
<div id="category-container" class="fade-enter-active"> <div id="category-container" class="fade-enter-active">
<div <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
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) @foreach ($currentItems as $industry)
<article <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"> 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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" <div
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"> 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" <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" /> 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> </svg>
</div>
<h3 <h3
class="text-[10px] sm:text-[11px] md:text-xs font-bold tracking-[0.15em] text-gray-500 uppercase group-hover:text-black transition"> 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'] }} {{ $industry['name'] }}
</h3> </h3>
</article> </article>
@ -65,33 +74,24 @@ class="text-[10px] sm:text-[11px] md:text-xs font-bold tracking-[0.15em] text-gr
</div> </div>
</div> </div>
<nav class="mt-10 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile"> <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"> <div class="flex items-center gap-2">
@for ($i = 1; $i <= $totalPages; $i++) @for ($i = 1; $i <= $totalPages; $i++)
<a href="?page={{ $i }}" aria-label="Halaman {{ $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> 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 @endfor
</div> </div>
<div class="text-[10px] font-bold tracking-widest text-gray-400">
TAP TO EXPLORE
</div>
</nav> </nav>
<nav class="hidden lg:flex absolute top-0 right-[-40px] h-full items-start" aria-label="Pagination Desktop"> <nav class="hidden lg:flex absolute top-0 -right-16 h-full items-center" aria-label="Pagination Desktop">
<div class="flex items-center gap-4 sticky top-10"> <div class="flex flex-col gap-3">
<div class="flex flex-col items-center gap-2">
@for ($i = 1; $i <= $totalPages; $i++) @for ($i = 1; $i <= $totalPages; $i++)
<a href="?page={{ $i }}" aria-label="Halaman {{ $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> 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 @endfor
</div> </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 == ' ' ? '&nbsp;' : $char !!}</span>
@endforeach
</div>
</div>
</nav> </nav>
</div> </div>
</div>
</section> </section>

102
resources/views/livewire/home/partials/cta.blade.php
View File

@ -1,45 +1,75 @@
<section class="relative text-center md:text-left bg-black text-white py-16 px-6 md:px-12 mt-48 lg:mt-0"> <section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<figure class="flex justify-center md:justify-start relative z-10"> <div class="container mx-auto px-6 lg:px-32 xl:px-48 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" <div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
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="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"> <form onsubmit="event.preventDefault();" class="flex flex-col sm:flex-row gap-4 w-full">
@for ($i = 0; $i < 5; $i++) <button type="submit"
<span class="text-white text-xl" aria-hidden="true">★</span> 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">
@endfor Gabung Sekarang
</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
</button> </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>
<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> </div>

2
resources/views/livewire/home/partials/jumbotron.blade.php
View File

@ -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.left')
@include('livewire.home.partials.jumbotron.right') @include('livewire.home.partials.jumbotron.right')
</main> </main>

75
resources/views/livewire/home/partials/jumbotron/left.blade.php
View File

@ -1,5 +1,5 @@
<section <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"> <header class="flex flex-wrap items-center gap-4">
<div class="flex items-center"> <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> </figure>
</div> </div>
<div class="border border-black py-1 px-3 rounded-full text-sm lg:text-lg"> <div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
Plus <span class="px-2 py-1 bg-black text-home-background rounded-full">25K</span> Trusted users! Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
</div> </div>
</header> </header>
<h1 class="text-black text-4xl lg:text-6xl leading-tight text-start font-bold"> <h1 class="text-home-foreground 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 Temukan parfum terbaikmu<br>
<span class="italic font-serif font-light text-home-primary">hari ini</span>
</h1> </h1>
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-gray-700"> <p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want Memilih parfum adalah perjalanan yang personal. Pertimbangkan gaya hidupmu, aroma favorit, dan kesan yang ingin
to make. kamu tinggalkan.
</p> </p>
<div class="flex items-center"> <div class="flex items-center">
<button <button
class="bg-black text-home-background py-3 px-6 rounded-full hover:opacity-90 transition-opacity font-medium"> 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">
Explore Shop Jelajahi Toko
</button> </button>
<span class="w-8 h-[2px] bg-black"></span> <span class="w-8 h-[2px] bg-home-primary/20"></span>
<button <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 <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" <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg> </svg>
</div> </div>
@ -53,67 +54,67 @@ class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hove
</div> </div>
<article <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 <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"> <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" <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> <div>
<h4 class="font-bold text-black text-sm lg:text-base">Sarah Jenkins</h4> <h4 class="font-bold text-home-foreground text-sm lg:text-base">Sarah Jenkins</h4>
<div class="flex text-yellow-500 text-xs">★★★★★</div> <div class="flex text-home-primary text-xs">★★★★★</div>
</div> </div>
</div> </div>
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan tahan <p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan
lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p> tahan lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
</div> </div>
<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"> <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" <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> <div>
<h4 class="font-bold text-black text-sm lg:text-base">Michael Chen</h4> <h4 class="font-bold text-home-foreground text-sm lg:text-base">Michael Chen</h4>
<div class="flex text-yellow-500 text-xs">★★★★★</div> <div class="flex text-home-primary text-xs">★★★★★</div>
</div> </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> packaging aman. Wanginya persis seperti deskripsi di website."</p>
</div> </div>
<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"> <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" <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> <div>
<h4 class="font-bold text-black text-sm lg:text-base">Jessica Tan</h4> <h4 class="font-bold text-home-foreground text-sm lg:text-base">Jessica Tan</h4>
<div class="flex text-yellow-500 text-xs">★★★★★</div> <div class="flex text-home-primary text-xs">★★★★★</div>
</div> </div>
</div> </div>
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah favorit <p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah
saya! Sangat fresh dan tidak menyengat. Recommended!"</p> favorit saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
</div> </div>
</div> </div>
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30"> <div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
<button id="prev-testi" <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" <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"> viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
<button id="next-testi" <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" <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"> viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg> </svg>

22
resources/views/livewire/home/partials/jumbotron/right.blade.php
View File

@ -1,15 +1,15 @@
<section <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 <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"> 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-white/90 via-white/50 to-transparent lg:hidden"></div> <div class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden"></div>
</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"> <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 <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"> <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" <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"> <div class="flex items-center gap-2 mt-auto">
<button <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 Shop Now
</button> </button>
<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" <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" <path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /> d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg> </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>
<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"> <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" <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"> <div class="flex items-center gap-2 mt-auto">
<button <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 Shop Now
</button> </button>
<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" <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" <path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /> d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg> </svg>

5
resources/views/livewire/home/partials/partners.blade.php
View File

@ -1,5 +1,6 @@
<section class="overflow-hidden relative pt-4" id="brand-slider" aria-label="Brand Slider"> <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" id="brand-track"> <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" <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"> 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" <img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"

95
resources/views/livewire/home/partials/why.blade.php
View File

@ -1,75 +1,100 @@
<section class="bg-white py-12 md:py-20 lg:py-24 px-4 md:px-8 lg:px-48"> <section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 overflow-hidden">
<div class="space-y-8 md:space-y-12 lg:space-y-16"> <div class="max-w-7xl mx-auto">
<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"> <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 Temukan Parfum Favorit dengan Kualitas Terbaik
</h2> </h2>
<p class="text-base md:text-lg text-gray-700 leading-relaxed max-w-3xl"> <p class="text-base md:text-lg text-gray-600 leading-relaxed">
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma 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 dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap
asli dan terpercaya. tetesnya asli dan terpercaya.
</p> </p>
</header> <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>
<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" <div class="order-1 lg:order-2 relative">
alt="Parfum berkualitas" class="rounded-2xl w-full h-64 md:h-96 lg:h-[550px] object-cover"> <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-4 md:gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<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"> 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-4 md:mb-6"> <div
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none" 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">
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" <path stroke-linecap="round" stroke-linejoin="round"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
</div> </div>
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Keaslian 100%</h3> <h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
<p class="text-sm md:text-base text-gray-600 leading-relaxed"> <p class="text-sm text-gray-600 leading-relaxed">
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni. Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
</p> </p>
</article> </article>
<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"> 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-4 md:mb-6"> <div
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none" 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">
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg> </svg>
</div> </div>
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Pengiriman Cepat</h3> <h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
<p class="text-sm md:text-base text-gray-600 leading-relaxed"> <p class="text-sm text-gray-600 leading-relaxed">
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman. Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
</p> </p>
</article> </article>
<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"> 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-4 md:mb-6"> <div
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none" 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">
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" <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" /> 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> </svg>
</div> </div>
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Harga Bersahabat</h3> <h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
<p class="text-sm md:text-base text-gray-600 leading-relaxed"> <p class="text-sm text-gray-600 leading-relaxed">
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium. Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
</p> </p>
</article> </article>
<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"> 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-4 md:mb-6"> <div
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none" 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">
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" <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" /> 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> </svg>
</div> </div>
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Layanan Terbaik</h3> <h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
<p class="text-sm md:text-base text-gray-600 leading-relaxed"> <p class="text-sm text-gray-600 leading-relaxed">
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna. Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
</p> </p>
</article> </article>

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

@ -1,353 +1,352 @@
<div> @php
<main class="px-8 py-12 mt-24 bg-white min-h-screen"> $products = [
<div class="grid grid-cols-1 md:grid-cols-12 gap-6"> [
'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"> $recommendations = [
<div [
class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm hover:shadow-md transition-shadow sticky top-24"> 'name' => 'Golden Amber',
<h2 class="text-lg font-bold text-home-foreground mb-5">Kategori</h2> '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> <div class="flex flex-col min-h-screen bg-white font-sans">
<fieldset class="space-y-3">
<legend class="sr-only">Pilih Kategori</legend> <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
@foreach (['Pria', 'Wanita', 'Unisex', 'Aromatherapy', 'Luxury'] as $kategori) <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>
<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"> <label class="flex items-center cursor-pointer group">
<input type="checkbox" <input type="checkbox"
class="w-5 h-5 rounded border-gray-300 text-home-foreground cursor-pointer" class="w-5 h-5 rounded border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
value="{{ $kategori }}">
<span <span
class="ml-3 text-home-foreground group-hover:opacity-70 transition-opacity">{{ $kategori }}</span> class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $cat }}</span>
</label> </label>
@endforeach @endforeach
</fieldset> </div>
<div class="border-t border-home-foreground/10 my-5"></div> <div class="border-t border-home-foreground/10 my-8"></div>
<h3 class="text-sm font-semibold text-home-foreground mb-3">Rentang Harga</h3> <h3 class="font-bold text-home-primary mb-6 border-b border-home-foreground/10 pb-4">Harga</h3>
<fieldset class="space-y-3"> <div class="space-y-4">
<legend class="sr-only">Pilih Rentang Harga</legend> @foreach (['< 100k', '100k - 500k', '500k - 1jt', '> 1jt'] as $price)
<label class="flex items-center cursor-pointer"> <label class="flex items-center cursor-pointer group">
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground" <input type="radio" name="price"
value="all" checked> class="w-5 h-5 border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
<span class="ml-2 text-sm text-home-foreground">Semua Harga</span> <span
class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $price }}</span>
</label> </label>
<label class="flex items-center cursor-pointer"> @endforeach
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground" </div>
value="under-100k">
<span class="ml-2 text-sm text-home-foreground">Di bawah Rp100.000</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
value="100k-500k">
<span class="ml-2 text-sm text-home-foreground">Rp100.000 - Rp500.000</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
value="above-500k">
<span class="ml-2 text-sm text-home-foreground">Di atas Rp500.000</span>
</label>
</fieldset>
</form>
</div> </div>
</aside> </aside>
<section class="md:col-span-9"> <section class="lg:col-span-3">
<header class="flex flex-col sm:flex-row gap-4 mb-6">
<div class="flex-1"> <div class="flex flex-col sm:flex-row gap-4 mb-8">
<div class="relative"> <div class="flex-1 relative group">
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none" <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
stroke="currentColor" viewBox="0 0 24 24"> fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <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> d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg> </svg>
<input type="search" placeholder="Cari parfum favorit..." <input type="text" placeholder="Cari produk..."
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 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">
aria-label="Cari produk">
</div> </div>
</div> <div class="relative min-w-[200px]">
<select <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" 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">
aria-label="Urutkan produk"> <option>Urutkan: Terbaru</option>
<option value="">Urutkan</option> <option>Harga Terendah</option>
<option value="latest">Terbaru</option> <option>Harga Tertinggi</option>
<option value="popular">Terpopuler</option> <option>Terpopuler</option>
<option value="price_low">Harga Terendah</option>
<option value="price_high">Harga Tertinggi</option>
<option value="best_rating">Rating Terbaik</option>
</select> </select>
</header> <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">
<div class="bg-home-foreground/5 border border-home-foreground/10 rounded-lg p-4 mb-6" role="status"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
<p class="text-sm text-home-foreground">Menampilkan <span class="font-semibold">12</span> dari <span
class="font-semibold">48</span> koleksi parfum</p>
</div>
@php
$mainProducts = [
[
'name' => 'Aqua Di Luna',
'description' => 'Fresh aquatic fragrance',
'price' => 249000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#10b981', '#3b82f6', '#1f2937'],
],
[
'name' => 'Velvet Bloom',
'description' => 'Bunga merah jambu dengan musk',
'price' => 189000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#ec4899', '#f97316', '#6b7280'],
],
[
'name' => 'Santal Noir',
'description' => 'Sandalwood oriental elegance',
'price' => 350000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#8b4513', '#1f2937', '#f5f5f5'],
],
[
'name' => 'Citron Essence',
'description' => 'Lemon dan bergamot fresh',
'price' => 159000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#fbbf24', '#f59e0b', '#1f2937'],
],
[
'name' => 'Rose Garden',
'description' => 'Mawar klasik modern',
'price' => 199000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#ef4444', '#ec4899', '#6b7280'],
],
[
'name' => 'Lavender Dream',
'description' => 'Aromatherapy lavender murni',
'price' => 129000,
'image' => 'https://placehold.co/400x500/png',
'colors' => ['#a78bfa', '#7c3aed', '#1f2937'],
],
];
@endphp
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
@foreach ($mainProducts as $product)
<article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
loading="lazy">
<button
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
aria-label="Simpan ke favorit">
<svg class="w-5 h-5 text-home-foreground" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
</path> </path>
</svg> </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">
<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> </div>
<nav class="flex items-center justify-between bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm" <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
aria-label="Pagination"> @foreach ($products as $item)
<div class="text-sm text-home-foreground"> <article
Halaman <span class="font-bold">1</span> dari <span class="font-bold">4</span> 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">
</div>
<div class="flex items-center gap-2"> @if ($item['is_new'])
<button <span
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed" 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>
aria-label="Halaman sebelumnya" disabled>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
</button>
@for ($page = 1; $page <= 4; $page++)
@if ($page == 1)
<button
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
aria-current="page">{{ $page }}</button>
@else
<button
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
@endif @endif
@endfor
<button
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
aria-label="Halaman selanjutnya">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
</nav>
<section class="mt-12" aria-labelledby="related-products-heading"> <div class="relative h-72 overflow-hidden bg-home-primary/5">
<div class="flex items-center justify-between my-6"> <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
<h2 id="related-products-heading" class="text-2xl font-bold text-home-foreground">Produk class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
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" <div
class="flex gap-6 overflow-x-auto scroll-smooth pb-4 snap-x snap-mandatory hide-scrollbar" class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
style="scrollbar-width: none; -ms-overflow-style: none;"> <a href="#"
@php 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"
$otherProducts = [ title="Lihat Detail">
[ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
'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" <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"> 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> </path>
</svg> </svg>
</button> </button>
</div> </div>
<div class="p-5"> </div>
<div class="flex gap-2 mb-3">
@foreach ($product['colors'] as $color) <div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<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 <button
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer" 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">
style="background-color: {{ $color }}" <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
aria-label="Pilih warna"></button> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
</div>
</article>
@endforeach @endforeach
</div> </div>
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}
</h3> <div class="mt-16 flex justify-center">
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p> <nav class="flex items-center gap-2">
<div class="mb-4">
<span
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
</div>
<button <button
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add 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">
to Cart</button> <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
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>
</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> </div>
</article> </article>
@endforeach @endforeach
</div> </div>
</section> </section>
</section>
</div>
</main> </main>
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const track = document.getElementById("sliderTrack"); const slider = document.getElementById('productSlider');
const next = document.getElementById("nextBtn"); const leftBtn = document.getElementById('slideLeft');
const prev = document.getElementById("prevBtn"); const rightBtn = document.getElementById('slideRight');
if (track && next && prev) { if (slider && leftBtn && rightBtn) {
next.addEventListener("click", () => { rightBtn.addEventListener('click', () => {
const item = track.querySelector('.slider-item'); slider.scrollBy({
if (item) { left: 320,
const scrollAmount = item.getBoundingClientRect().width + 24;
track.scrollBy({
left: scrollAmount,
behavior: 'smooth' behavior: 'smooth'
}); });
}
}); });
prev.addEventListener("click", () => { leftBtn.addEventListener('click', () => {
const item = track.querySelector('.slider-item'); slider.scrollBy({
if (item) { left: -320,
const scrollAmount = item.getBoundingClientRect().width + 24;
track.scrollBy({
left: -scrollAmount,
behavior: 'smooth' behavior: 'smooth'
}); });
}
}); });
} }
}); });

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

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

176
resources/views/livewire/home/vouchers.blade.php
View File

@ -1,98 +1,160 @@
<div> <div class="flex flex-col min-h-screen bg-white">
<main class="px-8 py-12 mt-24 bg-white min-h-screen"> <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36 font-sans flex flex-col">
<header class="mb-8">
<h1 class="text-3xl font-bold text-home-foreground mb-2">Voucher</h1> <header class="mb-12">
<p class="text-home-foreground/60">Dapatkan diskon spesial dengan voucher eksklusif kami</p> <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> </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="flex-1">
<div class="relative"> <div class="relative group">
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none" <svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
stroke="currentColor" viewBox="0 0 24 24"> fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <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> d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg> </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" 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>
</div> </div>
<div class="flex flex-col sm:flex-row gap-4">
<div class="relative">
<select wire:model.live="outlet_id" aria-label="Filter Outlet" <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"> 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="">Filter Outlet</option> <option value="">Semua Outlet</option>
@foreach ($outlets as $key => $value) @foreach ($outlets as $key => $value)
<option value="{{ $key }}">{{ $value }}</option> <option value="{{ $key }}">{{ $value }}</option>
@endforeach @endforeach
</select> </select>
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
<select wire:model.live="sort" aria-label="Urutkan Voucher" fill="none" stroke="currentColor" viewBox="0 0 24 24">
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"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
<option value="">Urutkan</option> </svg>
<option value="latest">Terbaru</option>
<option value="biggest">Terbesar</option>
<option value="ending-soon">Berakhir Segera</option>
</select>
</section>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($vouchers as $voucher)
<article
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow">
<div class="bg-home-foreground/5 p-6 relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-home-foreground/5 rounded-full -mr-8 -mt-8">
</div> </div>
<div class="relative"> <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-8 mb-12">
@foreach ($vouchers as $voucher)
<article
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 <div
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3"> class="absolute top-0 right-0 w-24 h-24 bg-home-primary/10 rounded-full blur-2xl -mr-10 -mt-10">
{{ $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>
</div> </div>
<div class="space-y-2 text-sm mb-4"> <div class="relative z-10">
<div class="flex justify-between"> <div
<span class="text-home-foreground/60">Min. Pembelian:</span> 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 <span
class="font-semibold text-home-foreground">{{ $voucher->min_purchase_formatted }}</span> class="text-xs font-bold text-home-primary uppercase tracking-wider">{{ $voucher->tags }}</span>
</div> </div>
<div class="flex justify-between">
<span class="text-home-foreground/60">Berlaku s.d.:</span> <h3
<time datetime="{{ $voucher->end_date }}" class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-primary transition-colors line-clamp-2">
class="font-semibold text-home-foreground">{{ $voucher->end_date }}</time> {{ $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>
<div class="flex justify-between"> <div
<span class="text-home-foreground/60">Sisa Voucher:</span> class="w-8 h-8 rounded-full bg-home-primary/10 flex items-center justify-center text-home-primary">
<span class="font-semibold text-home-foreground">{{ $voucher->available_count }} / <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{{ $voucher->quota ?? '∞' }}</span> <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> </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 <button
class="flex-1 bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity"> 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 Klaim Voucher
</button> </button>
<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"> 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">
Detail Lihat Detail
</button> </button>
</div> </div>
</article> </article>
@endforeach @endforeach
</section>
<div class="mt-8 flex justify-center"> <div class="mt-auto flex justify-center w-full">
{{ $vouchers->links() }} {{ $vouchers->links() }}
</div> </div>
</section>
</main> </main>
</div> </div>

13
routes/pages/home.php
View File

@ -1,6 +1,7 @@
<?php <?php
use App\Livewire\Home\Article\Index as ArticleIndex; 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\Faq\Index as FaqComponent;
use App\Livewire\Home\Index as HomeComponent; use App\Livewire\Home\Index as HomeComponent;
use App\Livewire\Home\Outlet as OutletComponent; use App\Livewire\Home\Outlet as OutletComponent;
@ -15,11 +16,8 @@
Route::prefix('products') Route::prefix('products')
->name('product.') ->name('product.')
->group(function () { ->group(function () {
Route::prefix('perfumes') Route::get('perfumes/{slug?}', ProductComponent::class)
->name('perfume.') ->name('perfume');
->group(function () {
Route::get('/', ProductComponent::class)->name('index');
});
}); });
Route::get('/vouchers', VoucherComponent::class)->name('voucher'); Route::get('/vouchers', VoucherComponent::class)->name('voucher');
@ -27,7 +25,10 @@
Route::prefix('articles') Route::prefix('articles')
->name('article.') ->name('article.')
->group(function () { ->group(function () {
Route::get('/', ArticleIndex::class)->name('index'); Route::get('{slug?}', ArticleIndex::class)
->name('index');
}); });
Route::get('/faq', FaqComponent::class)->name('faq'); Route::get('/faq', FaqComponent::class)->name('faq');
Route::get('/cart', CartComponent::class)->name('cart');