feat(outlets): Add outlets page and fix color and function
This commit is contained in:
ifanprima130206
parent
4078201b03
commit
a4418a500d
@ -16,7 +16,14 @@ public function boot(): void
|
||||
return;
|
||||
}
|
||||
|
||||
$priceRequestCount = PriceRequest::where('status', PriceRequestStatus::PENDING->value)->count();
|
||||
if (Schema::hasTable('price_requests') && Schema::hasColumn('price_requests', 'status')) {
|
||||
$priceRequestCount = PriceRequest::where(
|
||||
'status',
|
||||
PriceRequestStatus::PENDING->value
|
||||
)->count();
|
||||
} else {
|
||||
$priceRequestCount = 0;
|
||||
}
|
||||
|
||||
View::composer('*', function ($view) use ($priceRequestCount) {
|
||||
$sidebar = [
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
:root {
|
||||
--home-background: #E5F0FF;
|
||||
--home-accent: #D1E8FF;
|
||||
--home-background: #F5FEFF;
|
||||
--home-accent: #E2E8F0;
|
||||
--home-foreground: #000000;
|
||||
--home-primary: #CAE8FF;
|
||||
--home-primary: #0E2F76;
|
||||
--home-secondary: #AAC0E1;
|
||||
--home-surface: #C7B189;
|
||||
--home-neutral: #334155;
|
||||
}
|
||||
@theme {
|
||||
--font-sans: Inter, sans-serif;
|
||||
@ -18,6 +21,9 @@ @theme {
|
||||
--color-home-accent: var(--home-accent);
|
||||
--color-home-foreground: var(--home-foreground);
|
||||
--color-home-primary: var(--home-primary);
|
||||
--color-home-secondary: var(--home-secondary);
|
||||
--color-home-surface: var(--home-surface);
|
||||
--color-home-neutral: var(--home-neutral);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
|
||||
@ -1,175 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ $title }} | {{ config('app.name') }}</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@fluxAppearance
|
||||
<link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ $title }} | {{ config('app.name') }}</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@fluxAppearance
|
||||
<link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@include('components.partials.home._header')
|
||||
<body>
|
||||
@include('components.partials.home._header')
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast position="bottom end" class="ps-6" />
|
||||
@endpersist
|
||||
|
||||
{{ $slot }}
|
||||
@include('components.partials.home._footer')
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast position="bottom end" class="ps-6" />
|
||||
@endpersist
|
||||
@fluxScripts
|
||||
|
||||
{{ $slot }}
|
||||
@fluxScripts
|
||||
<script>
|
||||
document.addEventListener('livewire:navigated', () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
const navLinks = document.getElementById('nav-links');
|
||||
const cart = document.getElementById('cart');
|
||||
const login = document.getElementById('login');
|
||||
const profile = document.getElementById('profile');
|
||||
const cartIcon = document.getElementById('cart-icon');
|
||||
const cartSvg = document.getElementById('cart-svg');
|
||||
const profileIcon = document.getElementById('profile-icon');
|
||||
const profileSvg = document.getElementById('profile-svg');
|
||||
|
||||
<script>
|
||||
document.addEventListener('livewire:navigated', () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
const navLinks = document.getElementById('nav-links');
|
||||
const cart = document.getElementById('cart');
|
||||
const login = document.getElementById('login');
|
||||
const profile = document.getElementById('profile');
|
||||
const cartIcon = document.getElementById('cart-icon');
|
||||
const cartSvg = document.getElementById('cart-svg');
|
||||
const profileIcon = document.getElementById('profile-icon');
|
||||
const profileSvg = document.getElementById('profile-svg');
|
||||
const mobileBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const hamburgerIcon = document.getElementById('hamburger-icon');
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
|
||||
const mobileBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const hamburgerIcon = document.getElementById('hamburger-icon');
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
function setIconsLight() {
|
||||
cartIcon.classList.remove('bg-home-foreground', 'bg-gray-100');
|
||||
cartIcon.classList.add('bg-white');
|
||||
cartSvg.classList.remove('text-white', 'text-home-foreground');
|
||||
cartSvg.classList.add('text-home-foreground');
|
||||
|
||||
function setIconsLight() {
|
||||
cartIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
cartIcon.classList.add('bg-white');
|
||||
cartSvg.classList.remove('text-white', 'text-gray-800');
|
||||
cartSvg.classList.add('text-black');
|
||||
profileIcon.classList.remove('bg-home-foreground', 'bg-gray-100');
|
||||
profileIcon.classList.add('bg-white');
|
||||
profileSvg.classList.remove('text-white', 'text-home-foreground');
|
||||
profileSvg.classList.add('text-home-foreground');
|
||||
}
|
||||
|
||||
profileIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
profileIcon.classList.add('bg-white');
|
||||
profileSvg.classList.remove('text-white', 'text-gray-800');
|
||||
profileSvg.classList.add('text-black');
|
||||
}
|
||||
function setIconsDark() {
|
||||
cartIcon.classList.add('bg-home-foreground');
|
||||
cartIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
cartSvg.classList.add('text-white');
|
||||
cartSvg.classList.remove('text-home-foreground', 'text-home-foreground');
|
||||
|
||||
function setIconsDark() {
|
||||
cartIcon.classList.add('bg-black');
|
||||
cartIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
cartSvg.classList.add('text-white');
|
||||
cartSvg.classList.remove('text-black', 'text-gray-800');
|
||||
profileIcon.classList.add('bg-home-foreground');
|
||||
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
profileSvg.classList.add('text-white');
|
||||
profileSvg.classList.remove('text-home-foreground', 'text-home-foreground');
|
||||
}
|
||||
|
||||
profileIcon.classList.add('bg-black');
|
||||
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
profileSvg.classList.add('text-white');
|
||||
profileSvg.classList.remove('text-black', 'text-gray-800');
|
||||
}
|
||||
function setIconsScrolled() {
|
||||
cartIcon.classList.add('bg-gray-100');
|
||||
cartIcon.classList.remove('bg-home-foreground', 'bg-white');
|
||||
cartSvg.classList.add('text-home-foreground');
|
||||
cartSvg.classList.remove('text-white');
|
||||
|
||||
function setIconsScrolled() {
|
||||
cartIcon.classList.add('bg-gray-100');
|
||||
cartIcon.classList.remove('bg-black', 'bg-white');
|
||||
cartSvg.classList.add('text-gray-800');
|
||||
cartSvg.classList.remove('text-white', 'text-black');
|
||||
profileIcon.classList.add('bg-gray-100');
|
||||
profileIcon.classList.remove('bg-home-foreground', 'bg-white');
|
||||
profileSvg.classList.add('text-home-foreground');
|
||||
profileSvg.classList.remove('text-white');
|
||||
}
|
||||
|
||||
profileIcon.classList.add('bg-gray-100');
|
||||
profileIcon.classList.remove('bg-black', 'bg-white');
|
||||
profileSvg.classList.add('text-gray-800');
|
||||
profileSvg.classList.remove('text-white', 'text-black');
|
||||
}
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
const isClosed = mobileMenu.classList.contains('hidden');
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
const isClosed = mobileMenu.classList.contains('hidden');
|
||||
if (isClosed) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
void mobileMenu.offsetWidth;
|
||||
mobileMenu.classList.remove('opacity-0');
|
||||
mobileMenu.classList.add('opacity-100');
|
||||
|
||||
if (isClosed) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
void mobileMenu.offsetWidth;
|
||||
mobileMenu.classList.remove('opacity-0');
|
||||
mobileMenu.classList.add('opacity-100');
|
||||
hamburgerIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'true');
|
||||
|
||||
hamburgerIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'true');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.add('bg-transparent');
|
||||
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.add('bg-transparent');
|
||||
setIconsLight();
|
||||
|
||||
setIconsLight();
|
||||
} else {
|
||||
mobileMenu.classList.remove('opacity-100');
|
||||
mobileMenu.classList.add('opacity-0');
|
||||
|
||||
} else {
|
||||
mobileMenu.classList.remove('opacity-100');
|
||||
mobileMenu.classList.add('opacity-0');
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 500);
|
||||
|
||||
hamburgerIcon.classList.remove('hidden');
|
||||
closeIcon.classList.add('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
|
||||
const scrolled = window.scrollY > 10;
|
||||
if (scrolled) {
|
||||
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.remove('bg-transparent');
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
navbar.classList.add('bg-transparent');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
setIconsDark();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const isMenuOpen = !mobileMenu.classList.contains('hidden');
|
||||
if (isMenuOpen) return;
|
||||
hamburgerIcon.classList.remove('hidden');
|
||||
closeIcon.classList.add('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
|
||||
const scrolled = window.scrollY > 10;
|
||||
|
||||
if (scrolled) {
|
||||
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');
|
||||
|
||||
navLinks.classList.add('bg-white', 'border-gray-300', 'text-black');
|
||||
navLinks.classList.remove('bg-transparent', 'border-black', 'text-black');
|
||||
|
||||
cart.classList.add('border-gray-300', 'bg-white');
|
||||
cart.classList.remove('border-black');
|
||||
cart.querySelector('span').classList.add('text-gray-800');
|
||||
|
||||
login.classList.add('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
login.classList.remove('border-black', 'text-black');
|
||||
|
||||
profile.classList.add('border-gray-300');
|
||||
profile.classList.remove('border-black');
|
||||
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
navbar.classList.add('bg-transparent');
|
||||
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-gray-200');
|
||||
|
||||
navLinks.classList.add('bg-transparent', 'border-black', 'text-black');
|
||||
navLinks.classList.remove('bg-white', 'border-gray-300');
|
||||
|
||||
cart.classList.add('border-black');
|
||||
cart.classList.remove('border-gray-300', 'bg-white');
|
||||
cart.querySelector('span').classList.remove('text-gray-800');
|
||||
cart.querySelector('span').classList.add('text-black');
|
||||
|
||||
login.classList.add('border-black', 'text-black');
|
||||
login.classList.remove('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
|
||||
profile.classList.add('border-black');
|
||||
profile.classList.remove('border-gray-300');
|
||||
|
||||
setIconsDark();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
window.addEventListener('scroll', () => {
|
||||
const isMenuOpen = !mobileMenu.classList.contains('hidden');
|
||||
if (isMenuOpen) return;
|
||||
|
||||
const scrolled = window.scrollY > 10;
|
||||
|
||||
if (scrolled) {
|
||||
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-gray-200');
|
||||
navbar.classList.remove('bg-transparent');
|
||||
|
||||
navLinks.classList.add('bg-white', 'border-home-accent');
|
||||
navLinks.classList.remove('bg-transparent', 'border-home-foreground');
|
||||
|
||||
cart.classList.add('border-home-accent', 'bg-white');
|
||||
cart.classList.remove('border-home-foreground');
|
||||
cart.querySelector('span').classList.add('text-home-foreground');
|
||||
|
||||
login.classList.add('border-home-accent', 'text-home-foreground', 'bg-white');
|
||||
login.classList.remove('border-home-foreground');
|
||||
|
||||
profile.classList.add('border-home-accent');
|
||||
profile.classList.remove('border-home-foreground');
|
||||
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
navbar.classList.add('bg-transparent');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b',
|
||||
'border-gray-200');
|
||||
|
||||
navLinks.classList.add('bg-transparent', 'border-home-foreground', 'text-home-foreground');
|
||||
navLinks.classList.remove('bg-white', 'border-home-accent');
|
||||
|
||||
cart.classList.add('border-home-foreground');
|
||||
cart.classList.remove('border-home-accent', 'bg-white');
|
||||
cart.querySelector('span').classList.remove('text-home-foreground');
|
||||
cart.querySelector('span').classList.add('text-home-foreground');
|
||||
|
||||
login.classList.add('border-home-foreground', 'text-home-foreground');
|
||||
login.classList.remove('border-home-accent', 'bg-white');
|
||||
|
||||
profile.classList.add('border-home-foreground');
|
||||
profile.classList.remove('border-home-accent');
|
||||
|
||||
setIconsDark();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,92 +1,104 @@
|
||||
<footer class="bg-gray-100 text-gray-700 py-12 px-6 lg:px-32 xl:px-48 font-sans">
|
||||
<div class="container mx-auto">
|
||||
<footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-8">
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
|
||||
<div class="md:col-span-4 flex flex-col gap-4">
|
||||
<div class="md:col-span-4 flex flex-col gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum"
|
||||
class="w-16 h-16 object-contain">
|
||||
<h2 class="text-2xl font-bold text-gray-800">Yadi Parfum</h2>
|
||||
class="w-10 h-10 object-contain brightness-0 invert">
|
||||
<h2 class="text-2xl font-bold tracking-wide text-white">Yadi Parfum</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-sm leading-relaxed text-justify">
|
||||
<p class="text-gray-400 text-sm leading-relaxed">
|
||||
Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga
|
||||
terjangkau. Temukan aroma khasmu di sini.
|
||||
terjangkau.
|
||||
</p>
|
||||
<div class="flex items-center gap-4 mt-2">
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M.057 24l1.687..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-3 md:pl-8">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4 uppercase tracking-wider">Tautan Cepat</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Beranda</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Katalog Produk</a>
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Quick Links</h3>
|
||||
<ul class="space-y-4 text-sm text-gray-400">
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Beranda</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Tentang Kami</a>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Katalog
|
||||
Produk</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Tentang
|
||||
Kami</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Kontak</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Kontak</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT SIDE -->
|
||||
<div class="md:col-span-5 flex flex-col gap-4">
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-gray-700 text-lg leading-relaxed">
|
||||
Alamat
|
||||
</p>
|
||||
<p class="text-gray-500">
|
||||
{{ $outlet->note ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 mt-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm">{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm">{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
<div class="md:col-span-5 flex flex-col gap-6">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Contact Us</h3>
|
||||
<div class="space-y-5 text-sm text-gray-400">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1"><svg class="w-5 h-5 text-home-primary" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg></div>
|
||||
<span
|
||||
class="leading-relaxed">{{ $outlet->note ?? 'Jalan Wangi Semerbak No. 123, Kota Parfum, Indonesia' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg></div>
|
||||
<span>{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg></div>
|
||||
<span>{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-300 my-8">
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
|
||||
<div class="text-sm text-gray-500 text-center md:text-left">
|
||||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="text-sm text-gray-500">
|
||||
© {{ date('Y') }} Yadi Parfum. All rights reserved.
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-pink-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-green-500 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M.057 24l1.687..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex gap-6 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<header id="navbar"
|
||||
class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200">
|
||||
class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200 bg-transparent">
|
||||
|
||||
<div class="flex lg:hidden items-center z-50">
|
||||
<button id="mobile-menu-btn" aria-label="Toggle Mobile Menu" aria-expanded="false" aria-controls="mobile-menu"
|
||||
class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group">
|
||||
|
||||
<svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 text-black transition-colors duration-300">
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 text-home-foreground transition-colors duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
|
||||
@ -20,11 +20,11 @@ class="size-6 text-white hidden transition-transform duration-300">
|
||||
|
||||
<a href="/" class="flex items-center ml-8 lg:ml-0 z-50">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
||||
class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-500">
|
||||
class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-200">
|
||||
</a>
|
||||
|
||||
<nav id="nav-links"
|
||||
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-500 border"
|
||||
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-200 border text-home-foreground"
|
||||
aria-label="Main Navigation">
|
||||
@foreach ($header as $item)
|
||||
@if ($item['type'] === 'link')
|
||||
@ -60,31 +60,31 @@ class="block px-4 py-2 hover:bg-gray-50 transition-colors">
|
||||
@endforeach
|
||||
</nav>
|
||||
|
||||
<section class="flex items-center lg:gap-3 z-50">
|
||||
<section class="flex items-center lg:gap-2 gap-1 z-50">
|
||||
<button id="cart"
|
||||
class="flex items-center rounded-full transition-all duration-500 border lg:p-0 lg:border-0 hover:scale-110">
|
||||
class="flex items-center rounded-full transition-all duration-200 border border-home-foreground lg:p-0 hover:scale-110">
|
||||
<div id="cart-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="cart-svg">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="cart-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ms-2 me-3 transition-all duration-500 hidden lg:block">Keranjang</span>
|
||||
<span class="ms-2 me-3 transition-all duration-200 hidden lg:block text-home-foreground">Keranjang</span>
|
||||
</button>
|
||||
|
||||
<button id="login"
|
||||
class="hidden lg:flex items-center border px-4 py-2 rounded-full ms-2 transition-all duration-500 hover:scale-105 font-medium">
|
||||
class="hidden lg:flex items-center border px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 font-medium border-home-foreground text-home-foreground">
|
||||
Masuk
|
||||
</button>
|
||||
|
||||
<button id="profile"
|
||||
class="flex items-center rounded-full transition-all duration-500 p-2 lg:p-0 lg:border-0 hover:scale-110">
|
||||
class="flex items-center rounded-full transition-all duration-200 lg:p-0 lg:border-0 hover:scale-110">
|
||||
<div id="profile-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="profile-svg">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="profile-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
@ -93,7 +93,7 @@ class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full tra
|
||||
</section>
|
||||
|
||||
<nav id="mobile-menu"
|
||||
class="fixed inset-0 h-screen w-screen bg-black/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-500 opacity-0"
|
||||
class="fixed inset-0 h-screen w-screen bg-home-foreground/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-200 opacity-0"
|
||||
aria-label="Mobile Navigation">
|
||||
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Beranda</a>
|
||||
@ -116,7 +116,7 @@ class="text-3xl font-bold text-white hover:text-gray-300 transition-colors curso
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">FAQ</a>
|
||||
|
||||
<button
|
||||
class="mt-8 px-8 py-3 bg-white text-black font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
||||
class="mt-8 px-8 py-3 bg-white text-home-foreground font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
||||
Get CV
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@ -1,205 +1,207 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-home-foreground mb-2">Artikel</h1>
|
||||
<p class="text-home-foreground/60">Baca tips dan trik seputar perawatan wewangian dan lifestyle</p>
|
||||
<main class="px-6 lg:px-32 xl:px-48 pb-24 pt-36 bg-white min-h-screen font-sans">
|
||||
|
||||
<header class="mb-12">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Artikel Terbaru</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl">Baca tips profesional seputar perawatan wewangian, tren
|
||||
lifestyle, dan rekomendasi terbaik.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
|
||||
|
||||
<section class="lg:col-span-3">
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-10">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="relative group">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" placeholder="Cari artikel..." aria-label="Cari artikel"
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
||||
class="w-full py-3 pl-11 pr-4 rounded-xl border border-home-foreground/10 text-home-foreground placeholder-home-foreground/40 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select aria-label="Urutkan artikel"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="name">Nama</option>
|
||||
<option value="views">Paling Dilihat</option>
|
||||
</select>
|
||||
<div class="relative">
|
||||
<select aria-label="Urutkan artikel"
|
||||
class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[160px] shadow-sm">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="name">Nama</option>
|
||||
<option value="views">Terpopuler</option>
|
||||
</select>
|
||||
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-8">
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Tips Memilih Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Tips+Parfum" alt="Tips Memilih Parfum"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Perawatan</span>
|
||||
<span class="text-xs text-home-foreground/60">5 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Perawatan</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
5 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Memilih parfum yang
|
||||
tepat bukan hanya tentang aroma yang disukai, tetapi juga tentang menemukan
|
||||
signature scent yang mencerminkan kepribadian Anda. Dalam artikel ini kami akan
|
||||
membahas cara memilih parfum yang paling sesuai...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Memilih parfum yang tepat bukan hanya tentang aroma yang disukai, tetapi juga
|
||||
tentang menemukan signature scent yang mencerminkan karakter...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Siti Rahma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Siti Rahma</p>
|
||||
<time datetime="2024-11-05" class="text-xs text-home-foreground/60">5 Nov
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Siti Rahma</p>
|
||||
<p class="text-xs text-home-foreground/50">5 Nov 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Cara Menyimpan Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Menyimpan+Parfum"
|
||||
alt="Cara Menyimpan Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Lifestyle</span>
|
||||
<span class="text-xs text-home-foreground/60">8 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Lifestyle</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
8 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum adalah
|
||||
investasi
|
||||
yang berharga, dan penyimpanan yang tepat adalah kunci untuk menjaga kualitas
|
||||
dan daya tahan aroma. Temukan tips profesional tentang suhu ideal, lokasi
|
||||
penyimpanan terbaik, dan cara menjaga botol parfum Anda...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Parfum adalah investasi yang berharga. Penyimpanan yang tepat adalah kunci untuk
|
||||
menjaga kualitas aroma agar tetap orisinil...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Ahmad Rizki"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Ahmad Rizki</p>
|
||||
<time datetime="2024-11-03" class="text-xs text-home-foreground/60">3 Nov
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Ahmad Rizki</p>
|
||||
<p class="text-xs text-home-foreground/50">3 Nov 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Musim Dingin" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
||||
<div class="flex flex-col sm:flex-row h-full">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
||||
<img src="https://placehold.co/600x400/png?text=Parfum+Unisex" alt="Parfum Unisex"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Tren</span>
|
||||
<span class="text-xs text-home-foreground/60">6 min read</span>
|
||||
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Tren</span>
|
||||
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
7 min read
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat yang Sempurna untuk Liburan</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Musim dingin
|
||||
membutuhkan aromaterapi yang berbeda. Kami merekomendasikan koleksi parfum
|
||||
dengan nada hangat seperti vanilla, kayu cedar, dan musk yang sempurna untuk
|
||||
menciptakan suasana nyaman di musim yang dingin...</p>
|
||||
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
||||
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua
|
||||
</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
||||
Parfum unisex semakin populer karena fleksibilitas dan keunikannya. Kami
|
||||
mengumpulkan rekomendasi terbaik tahun ini...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Rina Kusuma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Rina Kusuma</p>
|
||||
<time datetime="2024-11-01" class="text-xs text-home-foreground/60">1 Nov
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Unisex" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Rekomendasi</span>
|
||||
<span class="text-xs text-home-foreground/60">7 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua Jenis Kelamin</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum unisex semakin
|
||||
populer karena fleksibilitas dan keunikannya. Kami telah mengumpulkan
|
||||
rekomendasi parfum unisex terbaik tahun ini yang dapat digunakan oleh siapa saja
|
||||
dan cocok untuk berbagai kesempatan...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Budi Santoso"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
||||
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Budi Santoso</p>
|
||||
<time datetime="2024-10-28" class="text-xs text-home-foreground/60">28 Oct
|
||||
2024</time>
|
||||
<p class="text-sm font-bold text-home-foreground">Budi Santoso</p>
|
||||
<p class="text-xs text-home-foreground/50">28 Oct 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,11 +209,12 @@ class="w-8 h-8 rounded-full">
|
||||
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center justify-center mt-12" aria-label="Pagination">
|
||||
<div class="flex items-center gap-2">
|
||||
<nav class="flex items-center justify-center mt-16" aria-label="Pagination">
|
||||
<div
|
||||
class="flex items-center gap-3 bg-white p-2 rounded-full shadow-sm border border-home-foreground/5">
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||||
disabled aria-label="Halaman sebelumnya">
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground/30 cursor-not-allowed hover:bg-gray-50 transition-colors"
|
||||
disabled>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
@ -222,17 +225,16 @@ class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foregroun
|
||||
@for ($page = 1; $page <= 3; $page++)
|
||||
@if ($page == 1)
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-home-primary text-white font-bold shadow-md shadow-home-primary/20"
|
||||
aria-current="page">{{ $page }}</button>
|
||||
@else
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/10 hover:text-home-primary transition-colors font-medium">{{ $page }}</button>
|
||||
@endif
|
||||
@endfor
|
||||
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
||||
aria-label="Halaman selanjutnya">
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground hover:bg-home-primary/10 hover:text-home-primary hover:border-home-primary transition-all">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
@ -244,68 +246,105 @@ class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foregroun
|
||||
</section>
|
||||
|
||||
<aside class="lg:col-span-1">
|
||||
<div class="sticky top-24 space-y-6">
|
||||
<div class="sticky top-32 space-y-8">
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="cat-heading">
|
||||
<h3 id="cat-heading" class="text-lg font-bold text-home-foreground mb-4">Kategori</h3>
|
||||
<div class="space-y-2">
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
||||
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
||||
Kategori</h3>
|
||||
<div class="space-y-1">
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Perawatan
|
||||
Parfum</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Perawatan Parfum
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Lifestyle</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Lifestyle
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tren
|
||||
Terkini</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Tren Terkini
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tips
|
||||
& Trik</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Review
|
||||
Produk</button>
|
||||
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
||||
Tips & Trik
|
||||
<span
|
||||
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="pop-heading">
|
||||
<h3 id="pop-heading" class="text-lg font-bold text-home-foreground mb-4">Artikel Populer</h3>
|
||||
<div class="space-y-4">
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
||||
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
||||
Populer</h3>
|
||||
<div class="space-y-5">
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">2.5K views</p>
|
||||
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian
|
||||
</p>
|
||||
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
||||
</path>
|
||||
</svg>
|
||||
2.5K views
|
||||
</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<div class="border-t border-home-foreground/5"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.8K views</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.2K views</p>
|
||||
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
||||
Panduan Lengkap Cara Menyimpan Parfum
|
||||
</p>
|
||||
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
||||
</path>
|
||||
</svg>
|
||||
1.8K views
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="newsletter-heading">
|
||||
<h3 id="newsletter-heading" class="text-lg font-bold text-home-foreground mb-2">Newsletter
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">Dapatkan tips dan artikel terbaru langsung ke
|
||||
email Anda</p>
|
||||
<form onsubmit="event.preventDefault();">
|
||||
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
||||
class="w-full py-2 px-3 rounded-lg border border-home-foreground/20 text-home-foreground placeholder-home-foreground/50 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-home-foreground">
|
||||
<button type="submit"
|
||||
class="w-full bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity text-sm">Subscribe</button>
|
||||
</form>
|
||||
<section
|
||||
class="bg-home-primary rounded-2xl p-8 text-center relative overflow-hidden group shadow-lg shadow-home-primary/20">
|
||||
<div
|
||||
class="absolute top-0 right-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -mr-10 -mt-10">
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div
|
||||
class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 text-white">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">Newsletter</h3>
|
||||
<p class="text-sm text-white/80 mb-6 leading-relaxed">Dapatkan tips eksklusif dan artikel
|
||||
terbaru langsung ke email Anda.</p>
|
||||
|
||||
<form onsubmit="event.preventDefault();" class="space-y-3">
|
||||
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
||||
class="w-full py-3 px-4 rounded-xl border border-white/20 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:bg-white/20 focus:border-home-secondary transition-all">
|
||||
<button type="submit"
|
||||
class="w-full bg-home-secondary text-home-primary font-bold py-3 rounded-xl hover:bg-white transition-all duration-300 text-sm shadow-lg">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,62 +1,78 @@
|
||||
<div>
|
||||
<section class="px-6 md:px-12 lg:px-24 py-28 md:py-36 bg-white min-h-screen">
|
||||
<header class="mb-12 text-center md:text-left">
|
||||
<h1 class="text-4xl font-bold text-home-foreground mb-2">Frequently Asked Questions</h1>
|
||||
<p class="text-home-foreground/60 text-lg">
|
||||
Temukan jawaban untuk pertanyaan umum Anda tentang produk dan layanan kami
|
||||
<section class="px-6 lg:px-32 xl:px-48 py-36 bg-white min-h-screen">
|
||||
|
||||
<header class="mb-16 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl mx-auto">
|
||||
Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="columns-1 lg:columns-2 gap-6 space-y-6 lg:space-y-0">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
|
||||
|
||||
@foreach ([
|
||||
['id' => 1, 'q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
||||
['id' => 2, 'q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
||||
['id' => 3, 'q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
||||
['id' => 4, 'q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
||||
['id' => 5, 'q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
||||
['id' => 6, 'q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
||||
['q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
||||
['q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
||||
['q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
||||
['q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
||||
['q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
||||
['q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
||||
] as $index => $faq)
|
||||
<article x-data="{ open: null }"
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm">
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<button
|
||||
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
||||
class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none transition-colors"
|
||||
:class="activeAccordion === {{ $index }} ? 'bg-home-primary/5' :
|
||||
'bg-white hover:bg-home-foreground/5'">
|
||||
|
||||
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
||||
:aria-expanded="open === {{ $index }}"
|
||||
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors">
|
||||
|
||||
<h3 class="text-lg font-bold text-home-foreground text-left pr-4">
|
||||
<h3 class="text-lg font-bold pr-4 transition-colors"
|
||||
:class="activeAccordion === {{ $index }} ? 'text-home-primary' :
|
||||
'text-home-foreground group-hover:text-home-primary'">
|
||||
{{ $faq['q'] }}
|
||||
</h3>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-home-foreground transition-transform duration-300"
|
||||
:class="{ 'rotate-180': open === {{ $index }} }" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
|
||||
<span class="flex-shrink-0 ml-4 p-1 rounded-full transition-all duration-300"
|
||||
:class="activeAccordion === {{ $index }} ? 'bg-home-primary text-white rotate-180' :
|
||||
'bg-home-foreground/10 text-home-foreground group-hover:bg-home-primary group-hover:text-white'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open === {{ $index }}" x-collapse
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
class="px-6 pb-5 border-t border-home-foreground/10 text-home-foreground/70">
|
||||
<p class="leading-relaxed">
|
||||
{{ $faq['a'] }}
|
||||
</p>
|
||||
<div x-show="activeAccordion === {{ $index }}" x-collapse x-cloak
|
||||
class="px-6 pb-6 pt-2 bg-home-primary/5 border-t border-home-primary/10 text-home-foreground/70 leading-relaxed text-sm md:text-base">
|
||||
{{ $faq['a'] }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10 bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-8 text-center">
|
||||
<h3 class="text-2xl font-bold text-home-foreground mb-2">Masih ada pertanyaan?</h3>
|
||||
<p class="text-home-foreground/60 mb-6">Tim customer service kami siap membantu Anda 24/7</p>
|
||||
<button
|
||||
class="bg-home-foreground text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Hubungi Kami
|
||||
</button>
|
||||
<div
|
||||
class="mt-16 bg-home-primary rounded-2xl p-10 text-center relative overflow-hidden shadow-xl shadow-home-primary/20">
|
||||
<div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -mr-12 -mt-12"></div>
|
||||
<div class="absolute bottom-0 left-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -ml-8 -mb-8">
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Masih ada pertanyaan?</h3>
|
||||
<p class="text-white/80 mb-8 max-w-xl mx-auto">Jika Anda tidak menemukan jawaban yang dicari, tim
|
||||
customer service kami siap membantu Anda 24/7.</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button
|
||||
class="bg-white text-home-primary font-bold px-8 py-3 rounded-xl hover:bg-home-secondary hover:text-white transition-all shadow-lg">
|
||||
Chat WhatsApp
|
||||
</button>
|
||||
<button
|
||||
class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition-all">
|
||||
Kirim Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -12,14 +12,25 @@
|
||||
#brand-slider img {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
filter: grayscale(100%);
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#brand-slider img:hover {
|
||||
filter: grayscale(0%);
|
||||
/* filter: brightness(0) invert(1); */
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.cursor-grab {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cursor-grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.fade-enter {
|
||||
@ -38,7 +49,6 @@
|
||||
@script
|
||||
<script>
|
||||
document.addEventListener('livewire:navigated', () => {
|
||||
// brand slider
|
||||
const track = document.getElementById('brand-track');
|
||||
const originalChildren = Array.from(track.children);
|
||||
const originalHTML = track.innerHTML;
|
||||
@ -48,62 +58,98 @@
|
||||
const itemWidth = originalChildren[0].offsetWidth;
|
||||
const gapStyle = window.getComputedStyle(track).gap;
|
||||
const gap = parseFloat(gapStyle) || 0;
|
||||
|
||||
const singleSetWidth = (itemWidth + gap) * originalChildren.length;
|
||||
|
||||
let currentWidth = singleSetWidth;
|
||||
while (currentWidth < window.innerWidth + singleSetWidth * 2) {
|
||||
track.innerHTML += originalHTML;
|
||||
currentWidth
|
||||
+= singleSetWidth;
|
||||
currentWidth += singleSetWidth;
|
||||
}
|
||||
|
||||
let position = 0;
|
||||
const speed = 1;
|
||||
let isDown = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
let animationId;
|
||||
|
||||
track.addEventListener('mousedown', (e) => {
|
||||
isDown = true;
|
||||
track.classList.add('cursor-grabbing');
|
||||
track.classList.remove('cursor-grab');
|
||||
startX = e.pageX - track.offsetLeft;
|
||||
scrollLeft = position;
|
||||
e.preventDefault();
|
||||
|
||||
cancelAnimationFrame(animationId);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (!isDown) return;
|
||||
isDown = false;
|
||||
track.classList.remove('cursor-grabbing');
|
||||
track.classList.add('cursor-grab');
|
||||
animate();
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDown) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - track.offsetLeft;
|
||||
const walk = (x - startX) * 1;
|
||||
position = scrollLeft + walk;
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
});
|
||||
|
||||
function animate() {
|
||||
if (isDown) return;
|
||||
|
||||
position -= speed;
|
||||
if (Math.abs(position) >=
|
||||
singleSetWidth) {
|
||||
position = 0;
|
||||
|
||||
if (position <= -singleSetWidth) {
|
||||
position += singleSetWidth;
|
||||
} else if (position > 0) {
|
||||
position -= singleSetWidth;
|
||||
}
|
||||
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
requestAnimationFrame(animate);
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// category pagination
|
||||
const links = document.querySelectorAll('.pagination-link');
|
||||
const container = document.getElementById('category-container');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
if (links.length > 0 && container) {
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
links.forEach(l => l.classList.remove('bg-black'));
|
||||
links.forEach(l => l.classList.add('bg-gray-400'));
|
||||
links.forEach(l => l.classList.remove('bg-home-foreground'));
|
||||
links.forEach(l => l.classList.add('bg-gray-400'));
|
||||
|
||||
e.target.classList.remove('bg-gray-400');
|
||||
e.target.classList.add('bg-black');
|
||||
e.target.classList.remove('bg-gray-400');
|
||||
e.target.classList.add('bg-home-foreground');
|
||||
|
||||
fetch(link.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const newContent = doc.querySelector('#category-container')
|
||||
.innerHTML;
|
||||
fetch(link.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const newContent = doc.querySelector('#category-container')
|
||||
.innerHTML;
|
||||
|
||||
container.classList.add('fade-enter');
|
||||
setTimeout(() => {
|
||||
container.innerHTML = newContent;
|
||||
container.classList.remove('fade-enter');
|
||||
container.classList.add('fade-enter-active');
|
||||
}, 120);
|
||||
});
|
||||
container.classList.add('fade-enter');
|
||||
setTimeout(() => {
|
||||
container.innerHTML = newContent;
|
||||
container.classList.remove('fade-enter');
|
||||
container.classList.add('fade-enter-active');
|
||||
}, 120);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endscript
|
||||
|
||||
@ -1,3 +1,173 @@
|
||||
<div class="">
|
||||
Outlet
|
||||
<div>
|
||||
@php
|
||||
$outlets = [
|
||||
[
|
||||
'id' => 1,
|
||||
'name' => 'Yadi Parfum Central Park',
|
||||
'address' => 'Central Park Mall, Lt. LG, Unit 112, Jl. Letjen S. Parman No.28, Jakarta Barat',
|
||||
'city' => 'Jakarta Barat',
|
||||
'phone' => '+62 812-3456-7890',
|
||||
'hours' => '10:00 - 22:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Central+Park',
|
||||
'facilities' => ['Consultation', 'Refill Station', 'Engraving'],
|
||||
'status' => 'Buka',
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'name' => 'Yadi Parfum Senayan City',
|
||||
'address' => 'Senayan City, Lt. 1, Unit 45, Jl. Asia Afrika Lot 19, Jakarta Pusat',
|
||||
'city' => 'Jakarta Pusat',
|
||||
'phone' => '+62 812-9876-5432',
|
||||
'hours' => '10:00 - 22:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Senayan',
|
||||
'facilities' => ['VIP Lounge', 'Consultation'],
|
||||
'status' => 'Buka',
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'name' => 'Yadi Parfum Bandung',
|
||||
'address' => 'Paris Van Java, Resort Level, Jl. Sukajadi No.131-139, Bandung',
|
||||
'city' => 'Bandung',
|
||||
'phone' => '+62 822-1122-3344',
|
||||
'hours' => '10:00 - 21:00 WIB',
|
||||
'image' => 'https://placehold.co/800x600/png?text=Boutique+Bandung',
|
||||
'facilities' => ['Refill Station'],
|
||||
'status' => 'Tutup',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-white font-sans">
|
||||
|
||||
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
|
||||
|
||||
<header class="mb-16 text-center max-w-3xl mx-auto">
|
||||
<span class="text-home-primary font-bold tracking-widest text-xs uppercase mb-3 block">Lokasi
|
||||
Butik</span>
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-home-foreground mb-6">Temukan Butik Terdekat</h1>
|
||||
<p class="text-home-foreground/60 text-lg">
|
||||
Rasakan pengalaman langsung kemewahan aroma kami. Kunjungi butik kami untuk konsultasi personal dan
|
||||
layanan eksklusif.
|
||||
</p>
|
||||
|
||||
<div class="mt-10 relative max-w-xl mx-auto group">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/5 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
</div>
|
||||
<div
|
||||
class="relative flex items-center bg-white rounded-full shadow-lg border border-home-foreground/5 py-2 px-4">
|
||||
<div class="pl-4 text-home-foreground/40">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" placeholder="Masukkan kota atau nama area..."
|
||||
class="flex-1 px-4 py-3 bg-transparent text-home-foreground placeholder-home-foreground/40 focus:outline-none">
|
||||
<button
|
||||
class="bg-home-primary text-white px-6 py-3 rounded-full font-bold text-sm hover:bg-home-primary transition-colors">
|
||||
Cari Lokasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-24">
|
||||
@foreach ($outlets as $outlet)
|
||||
<article
|
||||
class="group bg-white rounded-3xl border border-home-foreground/10 overflow-hidden hover:shadow-2xl hover:shadow-home-primary/10 hover:-translate-y-2 transition-all duration-500 flex flex-col h-full">
|
||||
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-primary/10 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10">
|
||||
</div>
|
||||
<img src="{{ $outlet['image'] }}" alt="{{ $outlet['name'] }}"
|
||||
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||||
|
||||
<div class="absolute top-4 left-4 z-20">
|
||||
<span
|
||||
class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide backdrop-blur-md bg-white/90 shadow-sm
|
||||
{{ $outlet['status'] == 'Buka' ? 'text-green-700' : 'text-red-700' }}">
|
||||
{{ $outlet['status'] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 flex flex-col flex-grow">
|
||||
<div class="mb-4">
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-primary transition-colors">
|
||||
{{ $outlet['name'] }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 leading-relaxed">{{ $outlet['address'] }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
@foreach ($outlet['facilities'] as $facility)
|
||||
<span
|
||||
class="text-[10px] px-2 py-1 border border-home-foreground/10 rounded text-home-foreground/50">
|
||||
{{ $facility }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 text-xs text-home-foreground/70 mb-6 pt-4 border-t border-home-foreground/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
{{ $outlet['hours'] }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
Call Store
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex gap-3">
|
||||
<button
|
||||
class="flex-1 py-3 rounded-xl bg-home-primary text-white text-sm font-bold hover:bg-home-secondary hover:text-home-primary transition-colors shadow-lg shadow-home-primary/20">
|
||||
Petunjuk Arah
|
||||
</button>
|
||||
<button
|
||||
class="w-12 h-12 rounded-xl border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:border-home-primary hover:text-home-primary transition-all">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</section>
|
||||
|
||||
<section class="relative rounded-3xl overflow-hidden shadow-2xl border border-home-foreground/10 group">
|
||||
<div
|
||||
class="absolute inset-0 bg-home-foreground/5 z-10 pointer-events-none group-hover:bg-transparent transition-colors duration-500">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute top-6 left-6 z-20 bg-white/90 backdrop-blur-md px-6 py-4 rounded-2xl shadow-lg border border-white/20 hidden md:block">
|
||||
<p class="text-xs text-home-foreground/50 font-bold uppercase tracking-wider mb-1">Cakupan Area</p>
|
||||
<h3 class="text-home-primary font-bold">Indonesia & Asia Tenggara</h3>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126920.28318625622!2d106.76457105!3d-6.229571199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta%2C%20Special%20Capital%20Region%20of%20Jakarta!5e0!3m2!1sen!2sid!4v1652756763428!5m2!1sen!2sid"
|
||||
width="100%" height="450" style="border:0; filter: grayscale(100%) contrast(1.2);"
|
||||
allowfullscreen="" loading="lazy" class="hover:filter-none transition-all duration-700">
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,42 +23,63 @@
|
||||
];
|
||||
@endphp
|
||||
|
||||
<section class="bg-white py-20 px-6 lg:px-48 font-sans text-home-foreground">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<figure class="w-full">
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
||||
class="w-full h-[500px] object-cover rounded-2xl shadow">
|
||||
</figure>
|
||||
<article class="space-y-4">
|
||||
<h2 class="text-4xl leading-tight mb-6">Keunggulan Produk Kami.</h2>
|
||||
<p class="text-gray-700 mb-8 max-w-3xl leading-relaxed">
|
||||
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik.
|
||||
</p>
|
||||
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 font-sans text-home-foreground overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<figure class="w-full relative order-2 lg:order-1">
|
||||
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform -rotate-2"></div>
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
||||
alt="Botol Parfum Elegan"
|
||||
class="w-full h-[400px] lg:h-[600px] object-cover rounded-2xl shadow-lg">
|
||||
</figure>
|
||||
|
||||
@foreach ($accordions as $index => $acc)
|
||||
<div x-data="{ open: null }" class="border-b border-gray-200 pb-4 accordion-item">
|
||||
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
||||
class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
|
||||
:aria-expanded="open === {{ $index }}">
|
||||
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
|
||||
{{ $acc['title'] }}
|
||||
</span>
|
||||
<article class="space-y-8 order-1 lg:order-2" x-data="{ activeAccordion: 0 }">
|
||||
|
||||
<header>
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-foreground leading-tight mb-6">
|
||||
Keunggulan Produk Kami.
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-home-foreground/70 leading-relaxed">
|
||||
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik dan pengalaman wangi yang tak terlupakan.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<span class="icon-plus text-xl font-light text-gray-400 transition-transform duration-300"
|
||||
:class="{ 'rotate-45': open === {{ $index }} }">
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
<div x-show="open === {{ $index }}" x-collapse
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
class="min-h-0 content overflow-hidden text-gray-700 text-sm leading-relaxed">
|
||||
<div class="pt-2 pb-2">
|
||||
{{ $acc['content'] }}
|
||||
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
|
||||
@foreach ($accordions as $index => $acc)
|
||||
<div class="border-b border-gray-100 last:border-0">
|
||||
<button
|
||||
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
||||
class="w-full flex justify-between items-center py-5 text-left group focus:outline-none transition-all duration-300"
|
||||
:aria-expanded="activeAccordion === {{ $index }}">
|
||||
|
||||
<span class="text-lg font-bold transition-colors duration-300"
|
||||
:class="activeAccordion === {{ $index }} ? 'text-home-primary' : 'text-home-foreground group-hover:text-home-primary'">
|
||||
{{ $acc['title'] }}
|
||||
</span>
|
||||
|
||||
<span class="ml-4 flex-shrink-0 transition-transform duration-300 w-8 h-8 flex items-center justify-center rounded-full"
|
||||
:class="activeAccordion === {{ $index }} ? 'rotate-180 bg-home-primary text-white' : 'bg-gray-100 text-gray-400 group-hover:bg-home-primary/10 group-hover:text-home-primary'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="activeAccordion === {{ $index }}"
|
||||
x-collapse
|
||||
x-cloak
|
||||
class="overflow-hidden text-home-foreground/70 text-base leading-relaxed">
|
||||
<div class="pb-5">
|
||||
{{ $acc['content'] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</article>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -33,65 +33,65 @@
|
||||
$totalPages = ceil($total / $perPage);
|
||||
@endphp
|
||||
|
||||
<section class="bg-gray-100 py-16 sm:py-20 px-6 sm:px-10 lg:px-48 relative overflow-hidden">
|
||||
<section class="bg-home-foreground py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 relative overflow-hidden">
|
||||
|
||||
<header class="text-center mb-12">
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Temukan Aroma yang <br class="hidden sm:block">
|
||||
Cocok dengan Kepribadianmu.
|
||||
</h2>
|
||||
</header>
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<div class="relative">
|
||||
<header class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-background leading-tight mb-4">
|
||||
Temukan Aroma yang <br class="hidden sm:block">
|
||||
Cocok dengan Kepribadianmu.
|
||||
</h2>
|
||||
<p class="text-gray-500 text-lg max-w-2xl mx-auto">
|
||||
Pilih kategori aroma yang paling menggambarkan dirimu dan ciptakan kesan tak terlupakan.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div id="category-container" class="fade-enter-active">
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-px bg-gray-300 overflow-hidden rounded-2xl">
|
||||
@foreach ($currentItems as $industry)
|
||||
<article
|
||||
class="flex flex-col items-center justify-center py-8 sm:py-10 px-4 bg-gray-100 group hover:bg-white transition duration-300 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-gray-600 mb-3 group-hover:text-black transition">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3
|
||||
class="text-[10px] sm:text-[11px] md:text-xs font-bold tracking-[0.15em] text-gray-500 uppercase group-hover:text-black transition">
|
||||
{{ $industry['name'] }}
|
||||
</h3>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
|
||||
<nav class="mt-10 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
|
||||
<div class="flex items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-2 h-6 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="text-[10px] font-bold tracking-widest text-gray-400">
|
||||
TAP TO EXPLORE
|
||||
</div>
|
||||
</nav>
|
||||
<div id="category-container" class="fade-enter-active">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
@foreach ($currentItems as $industry)
|
||||
<article
|
||||
class="group flex flex-col items-center justify-center py-10 px-4 bg-white rounded-2xl border border-gray-100 hover:border-home-primary hover:shadow-xl hover:shadow-home-primary/5 hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full">
|
||||
|
||||
<nav class="hidden lg:flex absolute top-0 right-[-40px] h-full items-start" aria-label="Pagination Desktop">
|
||||
<div class="flex items-center gap-4 sticky top-10">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-[3px] h-10 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="flex flex-col text-[10px] font-bold tracking-widest text-gray-400">
|
||||
@foreach (str_split('TAP TO EXPLORE') as $char)
|
||||
<span>{!! $char == ' ' ? ' ' : $char !!}</span>
|
||||
<div
|
||||
class="w-14 h-14 mb-4 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor"
|
||||
class="w-7 h-7 text-gray-400 group-hover:text-white transition-colors duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-[11px] md:text-xs font-bold tracking-widest text-gray-400 uppercase group-hover:text-home-primary transition-colors duration-300 text-center">
|
||||
{{ $industry['name'] }}
|
||||
</h3>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="mt-12 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
|
||||
<div class="flex items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-2 h-2 rounded-full transition-all duration-300 {{ $i == $page ? 'bg-home-primary w-8' : 'bg-gray-300 hover:bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="hidden lg:flex absolute top-0 -right-16 h-full items-center" aria-label="Pagination Desktop">
|
||||
<div class="flex flex-col gap-3">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-1 rounded-full transition-all duration-300 {{ $i == $page ? 'bg-home-primary h-12' : 'bg-gray-200 h-6 hover:bg-gray-300' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,47 +1,77 @@
|
||||
<section class="relative text-center md:text-left bg-black text-white py-16 px-6 md:px-12 mt-48 lg:mt-0">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">
|
||||
|
||||
<figure class="flex justify-center md:justify-start relative z-10">
|
||||
<img src="https://png.pngtree.com/png-vector/20230918/ourmid/pngtree-man-in-shirt-smiles-and-gives-thumbs-up-to-show-approval-png-image_10094392.png"
|
||||
alt="Testimoni Pelanggan yang Puas"
|
||||
class="w-full max-w-sm lg:max-w-md h-auto absolute bottom-0 md:-top-72 object-contain drop-shadow-2xl">
|
||||
</figure>
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
|
||||
|
||||
<div class="relative z-20">
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-home-background">
|
||||
Bergabung dengan Member Eksklusif.
|
||||
</h2>
|
||||
<p class="text-home-background/40 text-lg leading-relaxed max-w-md">
|
||||
Dapatkan akses awal ke koleksi terbaru, diskon member khusus, dan tips perawatan parfum langsung
|
||||
dari ahlinya.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center md:justify-start gap-1 mb-4" aria-label="Rating bintang 5 dari 5">
|
||||
@for ($i = 0; $i < 5; $i++)
|
||||
<span class="text-white text-xl" aria-hidden="true">★</span>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<blockquote
|
||||
class="text-gray-300 text-lg leading-relaxed mb-6 italic border-l-4 border-white/20 pl-4 md:border-none md:pl-0">
|
||||
"Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa,
|
||||
justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."
|
||||
</blockquote>
|
||||
|
||||
<figcaption>
|
||||
<cite class="not-italic font-bold text-white text-lg mb-1 block">
|
||||
Coriss Ambady
|
||||
</cite>
|
||||
<span class="text-gray-400 text-sm tracking-widest font-semibold block uppercase">
|
||||
Financial Analyst
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="mt-8 flex justify-center md:justify-start">
|
||||
<button
|
||||
class="border border-white py-2 px-6 bg-home-foreground rounded-full hover:bg-white hover:text-black transition-colors duration-300 font-medium">
|
||||
Gabung Member Sekarang
|
||||
<form onsubmit="event.preventDefault();" class="flex flex-col sm:flex-row gap-4 w-full">
|
||||
<button type="submit"
|
||||
class="px-8 py-4 rounded-xl bg-home-background text-home-foreground font-bold hover:bg-home-secondary hover:text-home-foreground transition-all duration-300 shadow-lg shadow-home-background/20 whitespace-nowrap">
|
||||
Gabung Sekarang
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-home-background/40">
|
||||
<div class="flex -space-x-2">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://placehold.co/100x100/png"
|
||||
alt="User">
|
||||
</div>
|
||||
<p>Bergabung bersama <span class="text-home-background font-bold">2,000+</span> member lainnya.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative hidden lg:block">
|
||||
<div
|
||||
class="w-full h-full min-h-[300px] bg-gradient-to-tr from-home-secondary/30 to-home-primary/10 rounded-full blur-3xl absolute inset-0">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative bg-home-foreground text-white rounded-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-500 shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-home-primary rounded-full flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white">Member Card</h3>
|
||||
<p class="text-xs text-gray-400">Exclusive Access</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
||||
class="w-8 h-8 opacity-80 brightness-0 invert">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="h-2 w-2/3 bg-white/10 rounded-full"></div>
|
||||
<div class="h-2 w-1/2 bg-white/10 rounded-full"></div>
|
||||
</div>
|
||||
<div class="mt-8 flex justify-between items-end">
|
||||
<div class="text-xs text-gray-400">Valid thru<br><span class="text-white font-mono">12/28</span>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white tracking-widest">•••• 8892</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl pointer-events-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -1,51 +1,49 @@
|
||||
<section
|
||||
class="relative w-full lg:w-[35%] mt-24 lg:mt-0 p-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white lg:bg-transparent">
|
||||
class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white">
|
||||
|
||||
<header class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<figure
|
||||
class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<figure class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 1" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
<figure
|
||||
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<figure class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 2" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
<figure
|
||||
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<figure class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 3" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="border border-black py-1 px-3 rounded-full text-sm lg:text-lg">
|
||||
Plus <span class="px-2 py-1 bg-black text-home-background rounded-full">25K</span> Trusted users!
|
||||
<div
|
||||
class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
|
||||
Plus <span class="text-home-primary font-bold">25K</span> Trusted users!
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1 class="text-black text-4xl lg:text-6xl leading-tight text-start font-bold">
|
||||
Discover your best<br><span class="italic font-serif font-light">perfume</span> at today
|
||||
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
|
||||
Discover your best<br><span class="italic font-serif font-light text-home-primary">perfume</span> at today
|
||||
</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
|
||||
to make.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="bg-black text-home-background py-3 px-6 rounded-full hover:opacity-90 transition-opacity font-medium">
|
||||
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
|
||||
</button>
|
||||
<span class="w-8 h-[2px] bg-black"></span>
|
||||
<span class="w-8 h-[2px] bg-home-primary/20"></span>
|
||||
<button
|
||||
class="flex items-center justify-center w-12 h-12 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors group">
|
||||
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
|
||||
<div
|
||||
class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
||||
class="w-8 h-8 bg-home-primary flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 text-white">
|
||||
stroke="currentColor" class="size-4 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
</div>
|
||||
@ -53,67 +51,67 @@ class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hove
|
||||
</div>
|
||||
|
||||
<article
|
||||
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-white lg:bg-white/40 backdrop-blur-xl border border-home-foreground/5 rounded-2xl z-30 shadow-lg lg:shadow-none overflow-hidden">
|
||||
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden">
|
||||
|
||||
<div id="testimonial-track" class="relative w-full h-full p-6">
|
||||
<div id="testimonial-track" class="relative w-full h-full py-0 px-6">
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0 bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Sarah Jenkins</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Sarah Jenkins</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan tahan
|
||||
lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan
|
||||
tahan lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Michael Chen</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Michael Chen</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
||||
packaging aman. Wanginya persis seperti deskripsi di website."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Jessica Tan</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
<h4 class="font-bold text-home-foreground text-sm lg:text-base">Jessica Tan</h4>
|
||||
<div class="flex text-home-primary text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah favorit
|
||||
saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
||||
<p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah
|
||||
favorit saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
||||
<button id="prev-testi"
|
||||
class="w-10 h-10 rounded-full bg-white border border-gray-100 shadow-md hover:bg-gray-50 flex justify-center items-center transition-colors group">
|
||||
class="w-10 h-10 rounded-full bg-home-background/80 backdrop-blur border border-home-background shadow-sm hover:bg-home-background flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-black group-hover:scale-110 transition-transform" fill="none"
|
||||
class="w-4 h-4 text-home-primary group-hover:scale-110 transition-transform" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="next-testi"
|
||||
class="w-10 h-10 rounded-full bg-black shadow-md hover:bg-gray-800 flex justify-center items-center transition-colors group">
|
||||
class="w-10 h-10 rounded-full bg-home-primary shadow-md hover:bg-home-primary/80 flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-white group-hover:scale-110 transition-transform" fill="none"
|
||||
class="w-4 h-4 text-home-background group-hover:scale-110 transition-transform" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
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">
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1595425959632-34f2822322ce?q=80&w=1098&auto=format&fit=crop')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-white/90 via-white/50 to-transparent lg:hidden"></div>
|
||||
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023-1ca6b0636780?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full px-6 lg:px-0 lg:w-[80%] grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
@ -25,13 +25,13 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-home-background transition-colors text-home-background">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
@ -41,7 +41,7 @@ class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
class="bg-home-background backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
@ -57,13 +57,13 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-home-background transition-colors text-home-background">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-home-background">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<section class="overflow-hidden relative pt-4" id="brand-slider" aria-label="Brand Slider">
|
||||
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform" id="brand-track">
|
||||
<section class="overflow-hidden relative pt-4 bg-home-foreground" id="brand-slider" aria-label="Brand Slider">
|
||||
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform cursor-grab active:cursor-grabbing"
|
||||
id="brand-track" style="touch-action: pan-y;">
|
||||
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
||||
|
||||
@ -1,75 +1,100 @@
|
||||
<section class="bg-white py-12 md:py-20 lg:py-24 px-4 md:px-8 lg:px-48">
|
||||
<div class="space-y-8 md:space-y-12 lg:space-y-16">
|
||||
<header class="space-y-4 md:space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-black leading-tight">
|
||||
Temukan Parfum Favorit dengan Kualitas Terbaik
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-gray-700 leading-relaxed max-w-3xl">
|
||||
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
||||
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap tetesnya
|
||||
asli dan terpercaya.
|
||||
</p>
|
||||
</header>
|
||||
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Parfum berkualitas" class="rounded-2xl w-full h-64 md:h-96 lg:h-[550px] object-cover">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20">
|
||||
<div class="order-2 lg:order-1 space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
|
||||
Temukan Parfum Favorit dengan Kualitas Terbaik
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-gray-600 leading-relaxed">
|
||||
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
||||
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap
|
||||
tetesnya asli dan terpercaya.
|
||||
</p>
|
||||
<div class="pt-4">
|
||||
<button
|
||||
class="text-home-primary font-bold hover:opacity-80 transition-opacity flex items-center gap-2">
|
||||
Pelajari Selengkapnya
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
<div class="order-1 lg:order-2 relative">
|
||||
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform rotate-2"></div>
|
||||
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop"
|
||||
alt="Koleksi Parfum Eksklusif"
|
||||
class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@ -1,353 +1,352 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
@php
|
||||
$products = [
|
||||
[
|
||||
'name' => 'Oud Royal Premium',
|
||||
'category' => 'Luxury',
|
||||
'price' => 1200000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Oud+Royal',
|
||||
'rating' => 5.0,
|
||||
'reviews' => 120,
|
||||
'is_new' => true,
|
||||
'colors' => ['#78350f', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Rose Velvet',
|
||||
'category' => 'Floral',
|
||||
'price' => 450000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Rose+Velvet',
|
||||
'rating' => 4.8,
|
||||
'reviews' => 85,
|
||||
'is_new' => false,
|
||||
'colors' => ['#be123c', '#fce7f3'],
|
||||
],
|
||||
[
|
||||
'name' => 'Ocean Breeze',
|
||||
'category' => 'Fresh',
|
||||
'price' => 320000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Ocean+Breeze',
|
||||
'rating' => 4.9,
|
||||
'reviews' => 200,
|
||||
'is_new' => false,
|
||||
'colors' => ['#0ea5e9', '#e0f2fe'],
|
||||
],
|
||||
[
|
||||
'name' => 'Vanilla Sky',
|
||||
'category' => 'Sweet',
|
||||
'price' => 350000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Vanilla+Sky',
|
||||
'rating' => 4.7,
|
||||
'reviews' => 150,
|
||||
'is_new' => true,
|
||||
'colors' => ['#d4d4d8', '#71717a'],
|
||||
],
|
||||
[
|
||||
'name' => 'Midnight Musk',
|
||||
'category' => 'Musky',
|
||||
'price' => 550000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Midnight+Musk',
|
||||
'rating' => 4.6,
|
||||
'reviews' => 90,
|
||||
'is_new' => false,
|
||||
'colors' => ['#1f2937', '#000000'],
|
||||
],
|
||||
[
|
||||
'name' => 'Citrus Energy',
|
||||
'category' => 'Fresh',
|
||||
'price' => 280000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Citrus+Energy',
|
||||
'rating' => 4.5,
|
||||
'reviews' => 60,
|
||||
'is_new' => false,
|
||||
'colors' => ['#eab308', '#fef08a'],
|
||||
],
|
||||
];
|
||||
|
||||
<aside class="md:col-span-3">
|
||||
<div
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm hover:shadow-md transition-shadow sticky top-24">
|
||||
<h2 class="text-lg font-bold text-home-foreground mb-5">Kategori</h2>
|
||||
$recommendations = [
|
||||
[
|
||||
'name' => 'Golden Amber',
|
||||
'category' => 'Oriental',
|
||||
'price' => 890000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Golden+Amber',
|
||||
'rating' => 4.9,
|
||||
],
|
||||
[
|
||||
'name' => 'Spring Blossom',
|
||||
'category' => 'Floral',
|
||||
'price' => 380000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Spring+Blossom',
|
||||
'rating' => 4.7,
|
||||
],
|
||||
[
|
||||
'name' => 'Woody Intense',
|
||||
'category' => 'Woody',
|
||||
'price' => 650000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Woody+Intense',
|
||||
'rating' => 4.8,
|
||||
],
|
||||
[
|
||||
'name' => 'Aqua Marine',
|
||||
'category' => 'Fresh',
|
||||
'price' => 420000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Aqua+Marine',
|
||||
'rating' => 4.6,
|
||||
],
|
||||
[
|
||||
'name' => 'Spicy Leather',
|
||||
'category' => 'Leather',
|
||||
'price' => 750000,
|
||||
'image' => 'https://placehold.co/400x500/png?text=Spicy+Leather',
|
||||
'rating' => 4.9,
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<form>
|
||||
<fieldset class="space-y-3">
|
||||
<legend class="sr-only">Pilih Kategori</legend>
|
||||
@foreach (['Pria', 'Wanita', 'Unisex', 'Aromatherapy', 'Luxury'] as $kategori)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="checkbox"
|
||||
class="w-5 h-5 rounded border-gray-300 text-home-foreground cursor-pointer"
|
||||
value="{{ $kategori }}">
|
||||
<span
|
||||
class="ml-3 text-home-foreground group-hover:opacity-70 transition-opacity">{{ $kategori }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<div class="flex flex-col min-h-screen bg-white font-sans">
|
||||
|
||||
<div class="border-t border-home-foreground/10 my-5"></div>
|
||||
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36">
|
||||
<header class="mb-12">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Koleksi Parfum</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl">Temukan aroma khas yang mencerminkan kepribadian dan
|
||||
gaya Anda.</p>
|
||||
</header>
|
||||
|
||||
<h3 class="text-sm font-semibold text-home-foreground mb-3">Rentang Harga</h3>
|
||||
<fieldset class="space-y-3">
|
||||
<legend class="sr-only">Pilih Rentang Harga</legend>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="all" checked>
|
||||
<span class="ml-2 text-sm text-home-foreground">Semua Harga</span>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-24">
|
||||
|
||||
<aside class="hidden lg:block lg:col-span-1 space-y-8">
|
||||
<div class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm sticky top-32">
|
||||
<h3 class="font-bold text-home-primary mb-6 border-b border-home-foreground/10 pb-4">Kategori</h3>
|
||||
<div class="space-y-4">
|
||||
@foreach (['Pria', 'Wanita', 'Unisex', 'Luxury', 'Best Seller', 'New Arrival'] as $cat)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="checkbox"
|
||||
class="w-5 h-5 rounded border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
|
||||
<span
|
||||
class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $cat }}</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="under-100k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Di bawah Rp100.000</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="border-t border-home-foreground/10 my-8"></div>
|
||||
|
||||
<h3 class="font-bold text-home-primary mb-6 border-b border-home-foreground/10 pb-4">Harga</h3>
|
||||
<div class="space-y-4">
|
||||
@foreach (['< 100k', '100k - 500k', '500k - 1jt', '> 1jt'] as $price)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="radio" name="price"
|
||||
class="w-5 h-5 border-home-foreground/20 text-home-primary focus:ring-home-primary cursor-pointer accent-home-primary">
|
||||
<span
|
||||
class="ml-3 text-home-foreground/70 group-hover:text-home-primary transition-colors text-sm font-medium">{{ $price }}</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="100k-500k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Rp100.000 - Rp500.000</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="above-500k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Di atas Rp500.000</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="md:col-span-9">
|
||||
<header class="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" placeholder="Cari parfum favorit..."
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition"
|
||||
aria-label="Cari produk">
|
||||
</div>
|
||||
<section class="lg:col-span-3">
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
||||
<div class="flex-1 relative group">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="text" placeholder="Cari produk..."
|
||||
class="w-full pl-11 pr-4 py-3 rounded-xl border border-home-foreground/10 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm placeholder-home-foreground/40 text-home-foreground bg-white">
|
||||
</div>
|
||||
<div class="relative min-w-[200px]">
|
||||
<select
|
||||
class="w-full appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer shadow-sm">
|
||||
<option>Urutkan: Terbaru</option>
|
||||
<option>Harga Terendah</option>
|
||||
<option>Harga Tertinggi</option>
|
||||
<option>Terpopuler</option>
|
||||
</select>
|
||||
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit"
|
||||
aria-label="Urutkan produk">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="popular">Terpopuler</option>
|
||||
<option value="price_low">Harga Terendah</option>
|
||||
<option value="price_high">Harga Tertinggi</option>
|
||||
<option value="best_rating">Rating Terbaik</option>
|
||||
</select>
|
||||
</header>
|
||||
|
||||
<div class="bg-home-foreground/5 border border-home-foreground/10 rounded-lg p-4 mb-6" role="status">
|
||||
<p class="text-sm text-home-foreground">Menampilkan <span class="font-semibold">12</span> dari <span
|
||||
class="font-semibold">48</span> koleksi parfum</p>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$mainProducts = [
|
||||
[
|
||||
'name' => 'Aqua Di Luna',
|
||||
'description' => 'Fresh aquatic fragrance',
|
||||
'price' => 249000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#10b981', '#3b82f6', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Velvet Bloom',
|
||||
'description' => 'Bunga merah jambu dengan musk',
|
||||
'price' => 189000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#ec4899', '#f97316', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Santal Noir',
|
||||
'description' => 'Sandalwood oriental elegance',
|
||||
'price' => 350000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#8b4513', '#1f2937', '#f5f5f5'],
|
||||
],
|
||||
[
|
||||
'name' => 'Citron Essence',
|
||||
'description' => 'Lemon dan bergamot fresh',
|
||||
'price' => 159000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#fbbf24', '#f59e0b', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Rose Garden',
|
||||
'description' => 'Mawar klasik modern',
|
||||
'price' => 199000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#ef4444', '#ec4899', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Lavender Dream',
|
||||
'description' => 'Aromatherapy lavender murni',
|
||||
'price' => 129000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#a78bfa', '#7c3aed', '#1f2937'],
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||||
@foreach ($mainProducts as $product)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach ($products as $item)
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy">
|
||||
<button
|
||||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||||
aria-label="Simpan ke favorit">
|
||||
<svg class="w-5 h-5 text-home-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
class="group bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/30 hover:-translate-y-1 transition-all duration-300 flex flex-col h-full relative">
|
||||
|
||||
@if ($item['is_new'])
|
||||
<span
|
||||
class="absolute top-4 left-4 bg-home-primary text-white text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full z-10 shadow-md">New</span>
|
||||
@endif
|
||||
|
||||
<div class="relative h-72 overflow-hidden bg-home-primary/5">
|
||||
<img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
|
||||
<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="Lihat Detail">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white transition-all shadow-lg transform hover:scale-110"
|
||||
title="Simpan ke Wishlist">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-2 mb-3">
|
||||
@foreach ($product['colors'] as $color)
|
||||
<button
|
||||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||||
style="background-color: {{ $color }}"
|
||||
aria-label="Pilih warna"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||||
<div class="mb-4">
|
||||
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span
|
||||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||||
class="text-[10px] font-bold tracking-widest text-home-primary uppercase bg-home-primary/10 px-2 py-1 rounded">{{ $item['category'] }}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground">{{ $item['rating'] }}</span>
|
||||
<span class="text-xs text-home-foreground/40">({{ $item['reviews'] }})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-lg font-bold text-home-foreground group-hover:text-home-primary transition-colors mb-4 line-clamp-1">
|
||||
{{ $item['name'] }}</h3>
|
||||
|
||||
<div
|
||||
class="mt-auto pt-4 border-t border-home-foreground/5 flex items-center justify-between">
|
||||
<span class="text-xl font-bold text-home-primary">Rp
|
||||
{{ number_format($item['price'], 0, ',', '.') }}</span>
|
||||
<button
|
||||
class="w-10 h-10 rounded-lg bg-home-foreground text-white flex items-center justify-center hover:bg-home-primary transition-colors shadow-md">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||||
to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center justify-between bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm"
|
||||
aria-label="Pagination">
|
||||
<div class="text-sm text-home-foreground">
|
||||
Halaman <span class="font-bold">1</span> dari <span class="font-bold">4</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="mt-16 flex justify-center">
|
||||
<nav class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||||
aria-label="Halaman sebelumnya" disabled>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground/30 cursor-not-allowed hover:bg-transparent">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@for ($page = 1; $page <= 4; $page++)
|
||||
@if ($page == 1)
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||||
aria-current="page">{{ $page }}</button>
|
||||
@else
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
||||
@endif
|
||||
@endfor
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
||||
aria-label="Halaman selanjutnya">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-home-primary text-white font-bold shadow-lg shadow-home-primary/20 transition-all">1</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/5 transition-all font-medium">2</button>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/5 transition-all font-medium">3</button>
|
||||
<span class="w-10 h-10 flex items-center justify-center text-home-foreground/40">...</span>
|
||||
<button
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground hover:border-home-primary hover:text-home-primary transition-all">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="mt-12" aria-labelledby="related-products-heading">
|
||||
<div class="flex items-center justify-between my-6">
|
||||
<h2 id="related-products-heading" class="text-2xl font-bold text-home-foreground">Produk
|
||||
Lainnya</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="prevBtn"
|
||||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||||
aria-label="Produk sebelumnya">‹</button>
|
||||
<button id="nextBtn"
|
||||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||||
aria-label="Produk selanjutnya">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sliderTrack"
|
||||
class="flex gap-6 overflow-x-auto scroll-smooth pb-4 snap-x snap-mandatory hide-scrollbar"
|
||||
style="scrollbar-width: none; -ms-overflow-style: none;">
|
||||
@php
|
||||
$otherProducts = [
|
||||
[
|
||||
'name' => 'Oud Royal',
|
||||
'description' => 'Oud premium luxury',
|
||||
'price' => 1200000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#78350f', '#1f2937', '#d1d5db'],
|
||||
],
|
||||
[
|
||||
'name' => 'Coconut Paradise',
|
||||
'description' => 'Tropical eksotis',
|
||||
'price' => 169000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#f4a460', '#d2691e', '#8b4513'],
|
||||
],
|
||||
[
|
||||
'name' => 'Musk Addiction',
|
||||
'description' => 'Musk manis tahan lama',
|
||||
'price' => 149000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#d4a373', '#a0826d', '#5a4a42'],
|
||||
],
|
||||
[
|
||||
'name' => 'Woody Spice',
|
||||
'description' => 'Kayu rempah maskulin',
|
||||
'price' => 229000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#92400e', '#1f2937', '#c2410c'],
|
||||
],
|
||||
[
|
||||
'name' => 'Jasmine Nights',
|
||||
'description' => 'Melati romantis malam',
|
||||
'price' => 269000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#be123c', '#e11d48', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Mint Fresh',
|
||||
'description' => 'Mint herbal menenangkan',
|
||||
'price' => 139000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#10b981', '#059669', '#047857'],
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach ($otherProducts as $product)
|
||||
<article
|
||||
class="slider-item flex-none w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] snap-start bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy">
|
||||
<button
|
||||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||||
aria-label="Simpan ke favorit">
|
||||
<svg class="w-5 h-5 text-home-foreground" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-2 mb-3">
|
||||
@foreach ($product['colors'] as $color)
|
||||
<button
|
||||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||||
style="background-color: {{ $color }}"
|
||||
aria-label="Pilih warna"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||||
<div class="mb-4">
|
||||
<span
|
||||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||||
to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="mt-24 pt-16 border-t border-home-foreground/10">
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-home-primary">Mungkin Anda Suka</h2>
|
||||
<div class="flex gap-3">
|
||||
<button id="slideLeft"
|
||||
class="w-12 h-12 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white hover:border-home-primary transition-all shadow-sm">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="slideRight"
|
||||
class="w-12 h-12 rounded-full border border-home-foreground/10 flex items-center justify-center text-home-foreground hover:bg-home-primary hover:text-white hover:border-home-primary transition-all shadow-sm">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="productSlider"
|
||||
class="flex gap-6 overflow-x-auto pb-12 snap-x snap-mandatory scroll-smooth hide-scrollbar"
|
||||
style="scrollbar-width: none; -ms-overflow-style: none;">
|
||||
@foreach ($recommendations as $rec)
|
||||
<article
|
||||
class="min-w-[280px] md:min-w-[300px] bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:border-home-primary/30 transition-all duration-300 snap-start group flex flex-col h-full">
|
||||
<div class="h-60 overflow-hidden relative bg-home-primary/5">
|
||||
<img src="{{ $rec['image'] }}" alt="{{ $rec['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<div class="text-[10px] font-bold tracking-widest text-home-primary uppercase mb-2">
|
||||
{{ $rec['category'] }}</div>
|
||||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $rec['name'] }}</h3>
|
||||
<div class="mt-auto pt-4 flex items-center justify-between">
|
||||
<span class="font-bold text-home-primary">Rp
|
||||
{{ number_format($rec['price'], 0, ',', '.') }}</span>
|
||||
<button
|
||||
class="w-8 h-8 rounded bg-home-foreground/5 text-home-foreground hover:bg-home-primary hover:text-white flex items-center justify-center transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const track = document.getElementById("sliderTrack");
|
||||
const next = document.getElementById("nextBtn");
|
||||
const prev = document.getElementById("prevBtn");
|
||||
const slider = document.getElementById('productSlider');
|
||||
const leftBtn = document.getElementById('slideLeft');
|
||||
const rightBtn = document.getElementById('slideRight');
|
||||
|
||||
if (track && next && prev) {
|
||||
next.addEventListener("click", () => {
|
||||
const item = track.querySelector('.slider-item');
|
||||
if (item) {
|
||||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||||
track.scrollBy({
|
||||
left: scrollAmount,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
if (slider && leftBtn && rightBtn) {
|
||||
rightBtn.addEventListener('click', () => {
|
||||
slider.scrollBy({
|
||||
left: 320,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
prev.addEventListener("click", () => {
|
||||
const item = track.querySelector('.slider-item');
|
||||
if (item) {
|
||||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||||
track.scrollBy({
|
||||
left: -scrollAmount,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
leftBtn.addEventListener('click', () => {
|
||||
slider.scrollBy({
|
||||
left: -320,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,98 +1,160 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-home-foreground mb-2">Voucher</h1>
|
||||
<p class="text-home-foreground/60">Dapatkan diskon spesial dengan voucher eksklusif kami</p>
|
||||
<div class="flex flex-col min-h-screen bg-white">
|
||||
<main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-36 font-sans flex flex-col">
|
||||
|
||||
<header class="mb-12">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-3">Voucher Eksklusif</h1>
|
||||
<p class="text-home-foreground/60 text-lg max-w-2xl">Nikmati potongan harga spesial untuk koleksi parfum
|
||||
favorit Anda.</p>
|
||||
</header>
|
||||
|
||||
<section class="flex flex-col lg:flex-row gap-4 mb-8" aria-label="Pencarian dan Filter">
|
||||
<section class="flex flex-col lg:flex-row gap-4 mb-12" aria-label="Pencarian dan Filter">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="relative group">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-primary/50 group-focus-within:text-home-primary transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="text" placeholder="Cari voucher..." aria-label="Cari voucher"
|
||||
<input type="text" placeholder="Cari kode voucher..." aria-label="Cari voucher"
|
||||
wire:model.live.debounce.500ms="search"
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
||||
class="w-full py-3 pl-11 pr-4 rounded-xl border border-home-foreground/10 text-home-foreground placeholder-home-foreground/40 focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select wire:model.live="outlet_id" aria-label="Filter Outlet"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Filter Outlet</option>
|
||||
@foreach ($outlets as $key => $value)
|
||||
<option value="{{ $key }}">{{ $value }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="relative">
|
||||
<select wire:model.live="outlet_id" aria-label="Filter Outlet"
|
||||
class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[180px] shadow-sm">
|
||||
<option value="">Semua Outlet</option>
|
||||
@foreach ($outlets as $key => $value)
|
||||
<option value="{{ $key }}">{{ $value }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<select wire:model.live="sort" aria-label="Urutkan Voucher"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="biggest">Terbesar</option>
|
||||
<option value="ending-soon">Berakhir Segera</option>
|
||||
</select>
|
||||
<div class="relative">
|
||||
<select wire:model.live="sort" aria-label="Urutkan Voucher"
|
||||
class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[160px] shadow-sm">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="biggest">Potongan Terbesar</option>
|
||||
<option value="ending-soon">Segera Berakhir</option>
|
||||
</select>
|
||||
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
@foreach ($vouchers as $voucher)
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow">
|
||||
<div class="bg-home-foreground/5 p-6 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-home-foreground/5 rounded-full -mr-8 -mt-8">
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/30 hover:-translate-y-1 transition-all duration-300 group flex flex-col h-full">
|
||||
|
||||
<div class="bg-home-primary/5 p-6 relative overflow-hidden flex-1">
|
||||
<div
|
||||
class="absolute top-0 right-0 w-24 h-24 bg-home-primary/10 rounded-full blur-2xl -mr-10 -mt-10">
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="relative z-10">
|
||||
<div
|
||||
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3">
|
||||
{{ $voucher->tags }}</div>
|
||||
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $voucher->name }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $voucher->summary }}</p>
|
||||
|
||||
<div class="bg-white rounded-lg p-3 mb-4 border border-home-foreground/20">
|
||||
<p class="text-xs text-home-foreground/60 mb-1">Kode Voucher:</p>
|
||||
<p class="text-lg font-bold text-home-foreground font-mono tracking-widest">
|
||||
{{ $voucher->code }}</p>
|
||||
class="inline-flex items-center gap-2 bg-white px-3 py-1 rounded-full border border-home-primary/10 shadow-sm mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-home-primary"></span>
|
||||
<span
|
||||
class="text-xs font-bold text-home-primary uppercase tracking-wider">{{ $voucher->tags }}</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm mb-4">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Min. Pembelian:</span>
|
||||
<span
|
||||
class="font-semibold text-home-foreground">{{ $voucher->min_purchase_formatted }}</span>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-primary transition-colors line-clamp-2">
|
||||
{{ $voucher->name }}
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-6 line-clamp-2 leading-relaxed">
|
||||
{{ $voucher->summary }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="bg-white rounded-xl p-4 border border-dashed border-home-primary/30 flex items-center justify-between group-hover:border-home-primary transition-colors">
|
||||
<div>
|
||||
<p
|
||||
class="text-[10px] text-home-foreground/50 uppercase tracking-widest font-bold mb-1">
|
||||
Kode Voucher</p>
|
||||
<p class="text-lg font-bold text-home-primary font-mono tracking-widest select-all">
|
||||
{{ $voucher->code }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Berlaku s.d.:</span>
|
||||
<time datetime="{{ $voucher->end_date }}"
|
||||
class="font-semibold text-home-foreground">{{ $voucher->end_date }}</time>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Sisa Voucher:</span>
|
||||
<span class="font-semibold text-home-foreground">{{ $voucher->available_count }} /
|
||||
{{ $voucher->quota ?? '∞' }}</span>
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-home-primary/10 flex items-center justify-center text-home-primary">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex gap-3">
|
||||
<div class="px-6 pt-4 pb-0 space-y-3">
|
||||
<div class="flex justify-between items-center text-sm border-b border-home-foreground/5 pb-3">
|
||||
<span class="text-home-foreground/50 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z">
|
||||
</path>
|
||||
</svg>
|
||||
Min. Pembelian
|
||||
</span>
|
||||
<span class="font-bold text-home-foreground">{{ $voucher->min_purchase_formatted }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm border-b border-home-foreground/5 pb-3">
|
||||
<span class="text-home-foreground/50 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
Berlaku Hingga
|
||||
</span>
|
||||
<time datetime="{{ $voucher->end_date }}"
|
||||
class="font-bold text-home-foreground">{{ $voucher->end_date }}</time>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-home-foreground/50 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 12H4"></path>
|
||||
</svg>
|
||||
Sisa Kuota
|
||||
</span>
|
||||
<span class="font-bold text-home-primary bg-home-primary/10 px-2 py-0.5 rounded text-xs">
|
||||
{{ $voucher->available_count }} / {{ $voucher->quota ?? '∞' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex gap-3 mt-auto">
|
||||
<button
|
||||
class="flex-1 bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Klaim
|
||||
class="flex-1 bg-home-primary text-white font-bold py-3 rounded-xl hover:bg-home-secondary hover:text-home-primary hover:shadow-lg hover:shadow-home-primary/20 transition-all duration-300 text-sm shadow-md shadow-home-primary/10">
|
||||
Klaim Voucher
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 border-2 border-home-foreground text-home-foreground font-bold py-2.5 rounded-lg hover:bg-home-foreground/5 transition-colors">
|
||||
Detail
|
||||
class="flex-1 border border-home-foreground/20 text-home-foreground font-bold py-3 rounded-xl hover:border-home-primary hover:text-home-primary hover:bg-home-primary/5 transition-all duration-300 text-sm">
|
||||
Lihat Detail
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
|
||||
<div class="mt-8 flex justify-center">
|
||||
{{ $vouchers->links() }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="mt-auto flex justify-center w-full">
|
||||
{{ $vouchers->links() }}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user