bdc1f299da
- Create highly responsive bento layouts (grid, card, pages) - Integrate Livewire with Alpine and complex GSAP animations. - Implement DevTool Dark theme values across Blade components. - Enhance interactive elements, micro-interactions, API snippets logic natively. - Apply semantic HTML and properly linked responsive Nav\/Footers sections structure
57 lines
2.4 KiB
PHP
57 lines
2.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark scroll-smooth">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ $title ?? 'Imail — Instant Disposable Gmail & Temporary Email' }}</title>
|
|
<link rel="icon" href="/favicon.ico" sizes="any">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700|jetbrains-mono:400,500" rel="stylesheet" />
|
|
|
|
<!-- Vite -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<!-- GSAP -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
// Clean-URL Smooth Scrolling
|
|
document.addEventListener('click', (e) => {
|
|
const anchor = e.target.closest('a[href^="#"]');
|
|
if (anchor && anchor.getAttribute('href') !== '#') {
|
|
e.preventDefault();
|
|
const targetId = anchor.getAttribute('href').substring(1);
|
|
const target = document.getElementById(targetId);
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* Hide scrollbar for bento grid if needed */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 min-h-screen flex flex-col" x-data>
|
|
<x-bento.nav />
|
|
{{ $slot }}
|
|
</body>
|
|
</html>
|