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
85 lines
6.1 KiB
PHP
85 lines
6.1 KiB
PHP
<div class="fixed top-0 inset-x-0 z-50 w-full transition-all duration-300"
|
|
x-data="{ scrolled: false, mobileMenuOpen: false }"
|
|
@scroll.window="scrolled = (window.pageYOffset > 20)"
|
|
:class="scrolled ? 'bg-app-bg/80 backdrop-blur-xl border-b border-white/10 shadow-lg' : 'bg-app-bg/40 backdrop-blur-md border-b border-white/5'">
|
|
|
|
<nav class="container mx-auto px-4 lg:px-8 py-4 flex items-center justify-between max-w-7xl">
|
|
|
|
<!-- Left Side: Logo + Links -->
|
|
<div class="flex items-center gap-8">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-center gap-2 group z-50">
|
|
<svg class="w-6 h-6 text-white group-hover:text-pink-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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" />
|
|
</svg>
|
|
<span class="text-lg font-bold tracking-wide text-white">Imail</span>
|
|
</a>
|
|
|
|
<!-- Desktop Links -->
|
|
<div class="hidden md:flex items-center space-x-6">
|
|
<a href="#features" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Features</a>
|
|
<a href="#how-it-works" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">How it Works</a>
|
|
<a href="#reviews" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Reviews</a>
|
|
<a href="#pricing" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Pricing</a>
|
|
<a href="#faq" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">FAQ</a>
|
|
<a href="/api-docs" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">API</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: CTA + Mobile Toggle -->
|
|
<div class="flex items-center gap-4 z-50">
|
|
<!-- CTA Button (Desktop & Mobile) -->
|
|
<a href="#hero" class="relative inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-white bg-zinc-900 border border-zinc-700/80 rounded-full overflow-hidden transition-all group hover:border-pink-500 hover:shadow-[0_0_15px_rgba(236,72,153,0.4)]">
|
|
<span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out opacity-0 bg-gradient-to-r from-pink-500 to-purple-500 group-hover:opacity-20"></span>
|
|
<span class="relative flex items-center gap-2 text-zinc-100 group-hover:text-white group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
|
|
<span class="hidden sm:inline">Get Temporary Email</span>
|
|
<span class="sm:hidden">Get Email</span>
|
|
<svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 -mr-2 text-zinc-400 hover:text-white focus:outline-none transition-colors">
|
|
<svg x-show="!mobileMenuOpen" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg x-show="mobileMenuOpen" style="display: none;" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile Drawer -->
|
|
<div x-show="mobileMenuOpen"
|
|
style="display: none;"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-y-full"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-full"
|
|
class="absolute top-0 left-0 w-full h-screen bg-app-bg/95 backdrop-blur-2xl border-b border-white/10 pt-24 px-6 md:hidden">
|
|
|
|
<div class="flex flex-col space-y-6 text-center">
|
|
<a href="#features" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Features</a>
|
|
<a href="#how-it-works" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">How it Works</a>
|
|
<a href="#reviews" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Reviews</a>
|
|
<a href="#pricing" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Pricing</a>
|
|
<a href="#faq" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">FAQ</a>
|
|
<a href="/api-docs" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">API</a>
|
|
|
|
@if (Route::has('login'))
|
|
<div class="h-px w-12 bg-white/10 mx-auto my-4"></div>
|
|
@auth
|
|
<a href="{{ url('/dashboard') }}" @click="mobileMenuOpen = false" class="text-xl font-medium text-zinc-400 hover:text-white transition-colors">Dashboard</a>
|
|
@else
|
|
<a href="{{ route('login') }}" @click="mobileMenuOpen = false" class="text-xl font-medium text-zinc-400 hover:text-white transition-colors">Log in</a>
|
|
@endauth
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|