All Prompts
All Prompts
hero sectiontailwindglassmorphismlanding pagefintechresponsiveanimationchart.jscta
Smart Card Landing Hero with Glassmorphic Card Stack
Адаптивный Hero-раздел для финтех лендингов с AI-карточками. Стекинг, стекломорфизм, анимация, график. Tailwind CSS.
Prompt
<section class="sm:px-8 sm:mt-32 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate max-w-7xl mt-32 mr-auto ml-auto pr-6 pl-6">
<div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-16 bg-gradient-to-br from-gray-500/10 via-gray-500/0 to-gray-500/10 rounded-3xl pt-8 pr-8 pb-8 pl-8 gap-x-y-12 gap-y-12 items-center" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<!-- Left: Content -->
<div class="lg:col-span-6">
<span class="inline-flex items-center gap-2 text-xs font-medium text-emerald-300 tracking-tight font-geist bg-emerald-600/10 ring-emerald-500/30 ring-1 rounded-full pt-1.5 pr-4 pb-1.5 pl-4">SMART CARDS</span>
<h2 class="mt-6 text-4xl sm:text-5xl lg:text-6xl font-geist font-light tracking-tight text-white">
Spend smarter with
<span class="block font-light tracking-tight font-geist">AI-powered cards</span>
</h2>
<p class="mt-6 text-lg leading-8 font-geist text-neutral-300">
Create virtual cards with smart limits, real-time alerts, and auto-categorization. Keep control of
subscriptions and day-to-day spending without the spreadsheets.
</p>
<ul class="mt-6 space-y-4">
<li class="flex items-center gap-3 text-base sm:text-lg font-geist text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="shrink-0 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Auto-categorize every purchase
</li>
<li class="flex items-center gap-3 text-base sm:text-lg font-geist text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="shrink-0 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Set limits, freeze, and get instant alerts
</li>
</ul>
<div class="mt-8">
<a href="#" class="inline-flex items-center justify-center sm:px-8 sm:text-base text-sm font-medium tracking-tight font-geist ring-1 rounded-full pt-3.5 pr-6 pb-3.5 pl-6 text-white ring-emerald-400/30" style="background: linear-gradient(135deg, rgb(16,185,129) 0%, rgb(5,150,105) 100%)">
Create a Smart Card
</a>
</div>
</div>
<!-- Right: Chart Card -->
<div class="lg:col-span-6">
<div class="w-full max-w-3xl relative grid lg:[grid-template-areas:'stack'] lg:place-items-center lg:aspect-[4/3] sm:aspect-auto">
<!-- Back glass (violet tint) -->
<div class="w-full max-w-[340px] mx-auto mb-6 lg:mb-0 lg:absolute lg:left-6 lg:top-6 lg:w-[320px] lg:-translate-x-16 lg:-translate-y-16 rounded-3xl ring-1 shadow-2xl backdrop-blur-xl lg:[grid-area:stack] ring-white/15 text-white bg-white/10">
<div class="absolute inset-0 rounded-3xl pointer-events-none">
<div class="absolute inset-0 rounded-3xl" style="background: radial-gradient(80% 90% at 70% 40%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 45%, rgba(0,0,0,.20) 65%, rgba(0,0,0,0) 78%);">
</div>
<div class="absolute inset-0 rounded-3xl mix-blend-soft-light" style="background: linear-gradient(135deg, rgba(184,141,255,.30), rgba(157,133,255,.20));"></div>
</div>
<div class="relative p-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-medium font-geist bg-white/90 text-neutral-900">B</span>
<span class="text-sm font-medium tracking-tight font-geist text-white/90">Budgetly.</span>
</div>
<svg width="28" height="18" viewBox="0 0 28 18" class="opacity-70">
<circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.35)" class=""></circle>
<circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.2)" class=""></circle>
</svg>
</div>
<div class="mt-6">
<div class="text-xl sm:text-2xl font-geist font-light tracking-tight text-white/95">
4521 9083 7610 <span class="font-geist font-light tracking-tight text-white/70">XXXX</span>
</div>
</div>
<div class="mt-6 flex items-end justify-between">
<div>
<div class="text-[11px] font-geist text-white/60">CARD HOLDER</div>
<div class="text-sm tracking-tight font-geist text-white/90">Eva Kim</div>
</div>
<div class="text-right">
<div class="text-[11px] font-geist text-white/60">VALID THRU</div>
<div class="text-sm tracking-tight font-geist text-white/90">09/27</div>
</div>
</div>
</div>
</div>
<!-- Middle glass (lime tint) -->
<div class="w-full max-w-[340px] mx-auto mb-6 lg:mb-0 lg:absolute lg:left-16 lg:top-20 lg:w-[380px] lg:-translate-y-2 lg:z-20 rounded-3xl ring-1 shadow-2xl backdrop-blur-xl lg:[grid-area:stack] ring-white/15 text-white bg-white/10">
<div class="absolute inset-0 rounded-3xl pointer-events-none">
<div class="absolute inset-0 rounded-3xl" style="background: radial-gradient(85% 95% at 50% 48%, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 75%);">
</div>
<div class="absolute inset-0 rounded-3xl mix-blend-soft-light" style="background: linear-gradient(135deg, rgba(231,255,140,.35), rgba(183,255,158,.25));"></div>
</div>
<div class="relative p-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg width="30" height="20" viewBox="0 0 28 18" class="opacity-80 w-[30px] h-[20px]" stroke-width="2" style="width: 30px; height: 20px; color: rgb(255, 255, 255);">
<circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.45)" class=""></circle>
<circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.25)" class=""></circle>
</svg>
<span class="text-sm font-medium tracking-tight font-geist text-white/95">Budgetly.</span>
</div>
<svg width="30" height="20" viewBox="0 0 28 18" class="opacity-80 w-[30px] h-[20px]" stroke-width="2" style="width: 30px; height: 20px; color: rgb(255, 255, 255)">
<circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.45)" class=""></circle>
<circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.25)" class=""></circle>
</svg>
</div>
<div class="mt-7">
<div class="text-2xl sm:text-3xl font-geist font-light tracking-tight text-white">
5249 3820 1145 <span class="font-geist font-light tracking-tight text-white/70">XXXX</span>
</div>
</div>
<div class="mt-7 flex items-end justify-between">
<div>
<div class="text-[11px] font-geist text-white/70">CARD HOLDER</div>
<div class="text-base tracking-tight font-geist text-white/95">Daniel Park</div>
</div>
<div class="text-right">
<div class="text-[11px] font-geist text-white/70">VALID THRU</div>
<div class="text-base tracking-tight font-geist text-white/95">03/29</div>
</div>
</div>
</div>
</div>
<!-- Soft glow (hidden on mobile) -->
<div class="hidden lg:block lg:absolute lg:left-16 lg:top-20 lg:w-[380px] lg:h-[230px] lg:z-10 pointer-events-none rounded-3xl lg:[grid-area:stack]" style="filter: blur(18px); background: radial-gradient(50% 60% at 55% 50%, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 70%);">
</div>
<!-- Bottom glass (dark tint) -->
<div class="w-full max-w-[340px] mx-auto lg:absolute lg:right-6 lg:bottom-2 lg:w-[330px] lg:-translate-x-6 lg:translate-y-12 rounded-3xl ring-1 shadow-2xl backdrop-blur-lg lg:[grid-area:stack] ring-white/10 text-white/85 bg-white/5">
<div class="absolute inset-0 rounded-3xl pointer-events-none">
<div class="absolute inset-0 rounded-3xl" style="background: radial-gradient(90% 100% at 60% 45%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 40%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 80%);">
</div>
<div class="absolute inset-0 rounded-3xl mix-blend-multiply" style="background: linear-gradient(135deg, rgba(15,23,42,.65), rgba(31,41,55,.55));"></div>
</div>
<div class="relative p-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-medium font-geist bg-white/80 text-neutral-900">B</span>
<span class="text-sm font-medium tracking-tight font-geist text-white/90">Budgetly.</span>
</div>
<svg width="28" height="18" viewBox="0 0 28 18" class="opacity-50">
<circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.25)" class=""></circle>
<circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.15)" class=""></circle>
</svg>
</div>
<div class="mt-6">
<div class="text-xl sm:text-2xl font-geist font-light tracking-tight text-white/85">
6019 7321 8550 <span class="font-geist font-light tracking-tight text-white/50">XXXX</span>
</div>
</div>
<div class="mt-6 flex items-end justify-between">
<div>
<div class="text-[11px] font-geist text-white/55">CARD HOLDER</div>
<div class="text-sm tracking-tight font-geist text-white/85">Lena Tran</div>
</div>
<div class="text-right">
<div class="text-[11px] font-geist text-white/55">VALID THRU</div>
<div class="text-sm tracking-tight font-geist text-white/85">11/26</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" class=""></script>
<script class="">
(function () {
const el = document.getElementById('aura-growth-chart');
if (!el) return;
const ctx = el.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, el.height);
gradient.addColorStop(0, 'rgba(139, 92, 246, 0.35)');
gradient.addColorStop(1, 'rgba(139, 92, 246, 0.00)');
const grid = 'rgba(148,163,184,0.15)';
const label = 'rgba(226,232,240,0.8)';
new Chart(el, {
type: 'line',
data: {
labels: ['','10','20','30','40','50','60','Yesterday',''],
datasets: [
{
label: 'Primary',
data: [12,14,13,20,38,62,48,54,56],
borderColor: '#7c3aed',
backgroundColor: gradient,
fill: true,
borderWidth: 2.5,
pointRadius: 0,
tension: 0.35
},
{
label: 'Secondary',
data: [10,11,15,16,18,22,30,44,40],
borderColor: 'rgba(255,255,255,0.85)',
borderWidth: 2,
pointRadius: 0,
tension: 0.35
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
enabled: true,
backgroundColor: 'rgba(17,24,39,0.95)',
titleColor: '#fff',
bodyColor: '#e5e7eb',
displayColors: false,
padding: 10
}
},
scales: {
x: {
grid: { color: grid, drawBorder: false },
ticks: { color: label, maxTicksLimit: 8 }
},
y: {
grid: { color: grid, drawBorder: false },
ticks: { color: label, maxTicksLimit: 6 }
}
}
}
});
})();
</script>
</section>