| <!DOCTYPE html> |
| <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="csrf-token" content="{{ csrf_token() }}"> |
|
|
| <title>{{ config('app.name', 'Laravel') }}</title> |
|
|
| <!-- Fonts --> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| |
| <!-- Icons --> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
| <!-- Scripts --> |
| @vite(['resources/css/app.css', 'resources/js/app.js']) |
| |
| <style> |
| |
| .search-container input { |
| pointer-events: auto !important; |
| z-index: 999 !important; |
| position: relative !important; |
| } |
| |
| .search-container { |
| pointer-events: auto !important; |
| z-index: 999 !important; |
| } |
| |
| |
| .search-container::before, |
| .search-container::after { |
| pointer-events: none !important; |
| } |
| </style> |
| |
| <style> |
| body { font-family: 'Inter', sans-serif; } |
| </style> |
| </head> |
| <body class="font-sans antialiased"> |
| <!-- Loading Screen --> |
| <x-loading-screen /> |
| |
| <!-- Background Blobs --> |
| <div class="bg-blob bg-blob-1"></div> |
| <div class="bg-blob bg-blob-2"></div> |
| <div class="bg-blob bg-blob-3"></div> |
| <div class="min-h-screen"> |
| @include('layouts.navigation') |
| |
| <!-- Global Search Shortcut Handler --> |
| <script> |
| document.addEventListener('keydown', function(e) { |
| |
| if ((e.ctrlKey && e.key === '`') || (e.ctrlKey && e.key === 'k')) { |
| e.preventDefault(); |
| const searchInput = document.querySelector('input[placeholder*="Search"]'); |
| if (searchInput) { |
| searchInput.focus(); |
| searchInput.select(); |
| } |
| } |
| }); |
| </script> |
|
|
| <!-- Page Heading --> |
| @isset($header) |
| <header class="bg-black/20 backdrop-blur-xl border-b border-white/10"> |
| <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> |
| {{ $header }} |
| </div> |
| </header> |
| @endisset |
|
|
| <!-- Page Content --> |
| <main class="pb-12 bg-transparent"> |
| @yield('content') |
| {{ $slot ?? '' }} |
| </main> |
| |
| <!-- Footer --> |
| <footer class="bg-gray-900 text-white py-12 mt-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="col-span-1 md:col-span-2"> |
| <h3 class="text-2xl font-bold mb-4">{{ config('app.name', 'Laravel') }}</h3> |
| <p class="text-gray-400 mb-4">Your premium gaming store for the best digital products and services.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="{{ route('categories') }}" class="hover:text-white transition-colors">Store</a></li> |
| <li><a href="{{ route('cart.index') }}" class="hover:text-white transition-colors">Cart</a></li> |
| <li><a href=" |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><i class="fas fa-envelope mr-2"></i>support@example.com</li> |
| <li><i class="fas fa-phone mr-2"></i>+66 123 456 789</li> |
| <li><i class="fas fa-map-marker-alt mr-2"></i>Bangkok, Thailand</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© {{ date('Y') }} {{ config('app.name', 'Laravel') }}. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
| |
| @stack('scripts') |
| </body> |
| </html> |
|
|
