refactor: move home page header and footer components to new UI sections and update related routes and Livewire components.
This commit is contained in:
Yoga Pangestu
parent
4f71bbc68d
commit
de89ff5047
@ -11,6 +11,7 @@
|
||||
class Index extends Component
|
||||
{
|
||||
public bool $isDetail = false;
|
||||
|
||||
public ?string $slug = null;
|
||||
|
||||
public function mount(?string $slug = null)
|
||||
@ -20,6 +21,7 @@ public function mount(?string $slug = null)
|
||||
$this->slug = $slug;
|
||||
}
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view(
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
class Index extends Component
|
||||
{
|
||||
public bool $isDetail = false;
|
||||
|
||||
public ?string $slug = null;
|
||||
|
||||
public function mount(?string $slug = null)
|
||||
|
||||
@ -1,177 +1,178 @@
|
||||
<!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')
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast position="bottom end" class="ps-6" />
|
||||
@endpersist
|
||||
|
||||
{{ $slot }}
|
||||
@include('components.partials.home._footer')
|
||||
<body>
|
||||
@include('components.sections.ui.home._header')
|
||||
|
||||
@fluxScripts
|
||||
@persist('toast')
|
||||
<flux:toast position="bottom end" class="ps-6" />
|
||||
@endpersist
|
||||
|
||||
<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');
|
||||
{{ $slot }}
|
||||
@include('components.sections.ui.home._footer')
|
||||
|
||||
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');
|
||||
@fluxScripts
|
||||
|
||||
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');
|
||||
<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');
|
||||
|
||||
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');
|
||||
}
|
||||
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 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 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');
|
||||
|
||||
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.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');
|
||||
}
|
||||
|
||||
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 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');
|
||||
|
||||
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-home-foreground');
|
||||
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
profileSvg.classList.add('text-white');
|
||||
profileSvg.classList.remove('text-home-foreground', 'text-home-foreground');
|
||||
}
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
const isClosed = mobileMenu.classList.contains('hidden');
|
||||
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');
|
||||
|
||||
if (isClosed) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
void mobileMenu.offsetWidth;
|
||||
mobileMenu.classList.remove('opacity-0');
|
||||
mobileMenu.classList.add('opacity-100');
|
||||
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');
|
||||
}
|
||||
|
||||
hamburgerIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'true');
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
const isClosed = mobileMenu.classList.contains('hidden');
|
||||
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.add('bg-transparent');
|
||||
if (isClosed) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
void mobileMenu.offsetWidth;
|
||||
mobileMenu.classList.remove('opacity-0');
|
||||
mobileMenu.classList.add('opacity-100');
|
||||
|
||||
setIconsLight();
|
||||
hamburgerIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'true');
|
||||
|
||||
} else {
|
||||
mobileMenu.classList.remove('opacity-100');
|
||||
mobileMenu.classList.add('opacity-0');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.add('bg-transparent');
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 500);
|
||||
setIconsLight();
|
||||
|
||||
hamburgerIcon.classList.remove('hidden');
|
||||
closeIcon.classList.add('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
mobileMenu.classList.remove('opacity-100');
|
||||
mobileMenu.classList.add('opacity-0');
|
||||
|
||||
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;
|
||||
|
||||
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-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',
|
||||
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>
|
||||
|
||||
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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
<footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
|
||||
|
||||
<div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 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-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum"
|
||||
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-400 text-sm leading-relaxed">
|
||||
Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga
|
||||
terjangkau.
|
||||
</p>
|
||||
<div class="flex items-center gap-4 mt-2">
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-3 md:pl-8">
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Quick Links</h3>
|
||||
<ul class="space-y-4 text-sm text-gray-400">
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Beranda</a>
|
||||
</li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Katalog
|
||||
Produk</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Tentang
|
||||
Kami</a></li>
|
||||
<li><a href="#"
|
||||
class="hover:text-home-secondary transition-colors duration-300 flex items-center gap-2">Kontak</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-5 flex flex-col gap-6">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-6 text-sm uppercase tracking-wider">Contact Us</h3>
|
||||
<div class="space-y-5 text-sm text-gray-400">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1"><svg class="w-5 h-5 text-home-primary" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg></div>
|
||||
<span
|
||||
class="leading-relaxed">{{ $outlet->note ?? 'Jalan Wangi Semerbak No. 123, Kota Parfum, Indonesia' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg></div>
|
||||
<span>{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div><svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg></div>
|
||||
<span>{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="text-sm text-gray-500">
|
||||
© {{ date('Y') }} Yadi Parfum. All rights reserved.
|
||||
</div>
|
||||
<div class="flex gap-6 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,6 +1,6 @@
|
||||
<footer class="bg-home-foreground text-white font-sans pt-16 pb-12 relative">
|
||||
|
||||
<div class="container mx-auto px-6 lg:px-32 xl:px-48 relative z-10">
|
||||
<div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 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-6">
|
||||
@ -23,13 +23,17 @@ class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-g
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
|
||||
<path
|
||||
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-home-foreground transition-all duration-300">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"></path>
|
||||
<path
|
||||
d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
->name('perfume');
|
||||
});
|
||||
|
||||
|
||||
Route::get('/vouchers', VoucherComponent::class)->name('voucher');
|
||||
|
||||
Route::prefix('articles')
|
||||
@ -30,7 +29,6 @@
|
||||
->name('index');
|
||||
});
|
||||
|
||||
|
||||
Route::get('/faq', FaqComponent::class)->name('faq');
|
||||
|
||||
Route::get('/cart', CartComponent::class)->name('cart');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user