feat/ui: cinematic landing page and dynamic devtool-friendly bento structures
- 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
This commit is contained in:
idevakk
83
resources/views/components/bento/cta.blade.php
Normal file
83
resources/views/components/bento/cta.blade.php
Normal file
@@ -0,0 +1,83 @@
|
||||
<section id="cta" class="pt-16 pb-12 relative overflow-hidden">
|
||||
<!-- Massive Cinematic Background Glows -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[600px] bg-gradient-to-r from-pink-500/10 to-emerald-500/10 rounded-full blur-[160px] -z-10"></div>
|
||||
<div class="absolute -bottom-24 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<div class="relative p-12 md:p-20 rounded-[40px] bg-zinc-900/40 border border-white/5 backdrop-blur-3xl overflow-hidden flex flex-col items-center text-center shadow-2xl">
|
||||
<!-- Decorative Inner Glow -->
|
||||
<div class="absolute -top-24 -left-24 w-48 h-48 bg-pink-500/10 rounded-full blur-[40px]"></div>
|
||||
<div class="absolute -bottom-24 -right-24 w-48 h-48 bg-emerald-500/10 rounded-full blur-[40px]"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-8">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1s_infinite]"></div>
|
||||
<span class="text-[10px] font-bold tracking-widest text-emerald-500 uppercase">Live Metrics</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl font-black tracking-tighter text-white mb-6 leading-tight">
|
||||
Ready to take back <br class="hidden md:block"> your <span class="bg-gradient-to-r from-pink-500 to-emerald-500 bg-clip-text text-transparent">privacy?</span>
|
||||
</h2>
|
||||
|
||||
<p class="text-zinc-400 text-lg md:text-xl max-w-xl mx-auto mb-12 leading-relaxed font-medium">
|
||||
Create your first disposable Gmail in seconds. <br class="hidden sm:block text-zinc-600">
|
||||
No credit card, no registration, no tracking.
|
||||
</p>
|
||||
|
||||
<!-- Live Counters -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] gap-6 md:gap-12 mb-12 max-w-2xl mx-auto items-center justify-center text-center"
|
||||
x-data="{
|
||||
mailboxes: 1248920,
|
||||
emails: 48291032,
|
||||
numberFormat(val) {
|
||||
return new Intl.NumberFormat().format(val);
|
||||
},
|
||||
init() {
|
||||
setInterval(() => {
|
||||
this.mailboxes += Math.floor(Math.random() * 3) + 1;
|
||||
this.emails += Math.floor(Math.random() * 12) + 2;
|
||||
}, 2000);
|
||||
}
|
||||
}">
|
||||
<!-- Counter 1: Mailboxes -->
|
||||
<div class="flex flex-col items-center sm:items-end">
|
||||
<div class="text-2xl md:text-4xl font-black text-white tabular-nums tracking-tighter" x-text="numberFormat(mailboxes)">1,248,920</div>
|
||||
<div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Mailboxes Created</div>
|
||||
</div>
|
||||
<!-- Divider -->
|
||||
<div class="hidden sm:block w-px h-12 bg-white/10"></div>
|
||||
<!-- Counter 2: Emails -->
|
||||
<div class="flex flex-col items-center sm:items-start">
|
||||
<div class="text-2xl md:text-4xl font-black text-emerald-500 tabular-nums tracking-tighter" x-text="numberFormat(emails)">48,291,032</div>
|
||||
<div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Email Received</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final CTA Button -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href="#hero" class="group relative px-10 py-5 bg-white text-black font-black text-lg rounded-2xl transition-all hover:scale-105 active:scale-95 shadow-[0_0_30px_rgba(255,255,255,0.2)]">
|
||||
<span class="relative z-10 flex items-center gap-2">
|
||||
Get Started for Free
|
||||
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 flex items-center justify-center gap-6 text-zinc-500">
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
|
||||
<svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||
No CC Required
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
|
||||
<svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||
100% Private
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user