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
78 lines
7.0 KiB
PHP
78 lines
7.0 KiB
PHP
<footer class="relative pb-20 pt-16 mt-12 overflow-hidden border-t border-white/5 bg-zinc-950">
|
|
<!-- Final Bottom Glow (Emerald Bookend) -->
|
|
<div class="absolute -bottom-48 -right-48 w-96 h-96 bg-emerald-500/10 rounded-full blur-[100px] pointer-events-none -z-10"></div>
|
|
|
|
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">
|
|
<!-- Brand & Status -->
|
|
<div class="col-span-1 md:col-span-5">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<h2 class="text-2xl font-black tracking-tighter text-white">Imail</h2>
|
|
<div class="flex items-center gap-2 px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1.5s_infinite]"></div>
|
|
<span class="text-[9px] font-bold text-emerald-500 uppercase tracking-widest">Systems Operational</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-zinc-400 max-w-sm mb-8 leading-relaxed">
|
|
High-performance disposable email infrastructure for modern developers.
|
|
Built for privacy, automation, and speed.
|
|
</p>
|
|
|
|
<!-- Social Links -->
|
|
<div class="flex items-center gap-4">
|
|
<a href="https://github.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="GitHub">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
|
</a>
|
|
<a href="https://twitter.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="X (Twitter)">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
|
|
</a>
|
|
<a href="https://discord.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="Discord">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.23 10.23 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links Grid -->
|
|
<div class="col-span-1 md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Product</h3>
|
|
<ul class="space-y-4">
|
|
<li><a href="#features" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Features</a></li>
|
|
<li><a href="#how-it-works" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">How it Works</a></li>
|
|
<li><a href="#reviews" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Reviews</a></li>
|
|
<li><a href="#pricing" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Resources</h3>
|
|
<ul class="space-y-4">
|
|
<li><a href="#faq" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">FAQ</a></li>
|
|
<li><a href="/api-docs" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">API Docs</a></li>
|
|
<li><a href="/blog" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">Privacy Blog</a></li>
|
|
<li><a href="mailto:support@imail.me" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">Help Center</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Legal</h3>
|
|
<ul class="space-y-4">
|
|
<li><a href="/privacy-policy" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Privacy Policy</a></li>
|
|
<li><a href="/terms" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Terms of Service</a></li>
|
|
<li><a href="/refund" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Refund Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<p class="text-zinc-600 text-[11px] font-bold tracking-widest uppercase">
|
|
© 2026 IMAIL. ALL RIGHTS RESERVED.
|
|
</p>
|
|
<div class="flex items-center gap-4 text-zinc-600 text-[10px] font-bold uppercase tracking-tight">
|
|
<span>V2.4.1</span>
|
|
<span class="w-1 h-1 rounded-full bg-zinc-800"></span>
|
|
<span>GLOBAL EDGE DEPLOYMENT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|