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
170
resources/views/components/bento/pricing.blade.php
Normal file
170
resources/views/components/bento/pricing.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
<section id="pricing" class="py-24 relative overflow-hidden" x-data="{ yearly: false }">
|
||||
<!-- Background Accents -->
|
||||
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-pink-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
<div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-16 md:mb-20 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
|
||||
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Pricing</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Simple, <span class="text-emerald-500">transparent</span> pricing.
|
||||
</h2>
|
||||
<p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed mb-10">
|
||||
Choose the plan that fits your needs. No hidden fees, no complicated contracts.
|
||||
Switch or cancel anytime.
|
||||
</p>
|
||||
|
||||
<!-- Billing Toggle -->
|
||||
<div class="flex items-center gap-4 p-1 bg-zinc-900 border border-white/5 rounded-full">
|
||||
<button
|
||||
@click="yearly = false"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300"
|
||||
:class="!yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
@click="yearly = true"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 relative"
|
||||
:class="yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
|
||||
>
|
||||
Yearly
|
||||
<span class="absolute -top-6 -right-4 px-2 py-0.5 bg-emerald-500 text-[10px] font-bold text-black rounded-md rotate-12 animate-bounce">
|
||||
SAVE 20%
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Free Plan -->
|
||||
<div class="relative group">
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Free</h3>
|
||||
<p class="text-zinc-500 text-sm">Perfect for individuals starting out.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white">$0</span>
|
||||
<span class="text-zinc-500 text-sm">/mo</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Up to 5 active addresses
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
24h retention period
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Standard delivery speeds
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300/40">
|
||||
<svg class="w-5 h-5 text-zinc-800" 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>
|
||||
Custom domain support
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pro Plan (Most Popular) -->
|
||||
<div class="relative group md:scale-105 z-10">
|
||||
<!-- Glowing Border Effect (Balanced) -->
|
||||
<div class="absolute -inset-[1px] bg-gradient-to-b from-pink-500 via-pink-500/40 to-emerald-500/40 rounded-[25px] blur-[3px] opacity-40 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-900 border border-white/10 backdrop-blur-2xl flex flex-col relative transition-all duration-500 hover:translate-y-[-4px]">
|
||||
<div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-pink-500 text-[10px] font-black text-white uppercase tracking-tighter shadow-[0_0_15px_rgba(236,72,153,0.5)]">
|
||||
Most Popular
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Pro</h3>
|
||||
<p class="text-zinc-500 text-sm">Advanced privacy for power users.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white" x-text="yearly ? '$12' : '$15'">$15</span>
|
||||
<span class="text-zinc-500 text-sm" x-text="yearly ? '/mo (billed yearly)' : '/mo'">/mo</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Unlimited active addresses
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
7-day retention period
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Blazing fast SMTP delivery
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Custom domain support
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
API access for developers
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white text-black font-black text-sm transition-all hover:bg-zinc-200 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
|
||||
Upgrade to Pro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Plan -->
|
||||
<div class="relative group">
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
|
||||
<p class="text-zinc-500 text-sm">Custom solutions for organizations.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white">Custom</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Everything in Pro
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
SLA-backed uptime
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Dedicated support manager
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Custom security audits
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
|
||||
Contact Sales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user