Загрузка...
Адаптивная секция "Hero" для финтех-сервиса с AI-помощником по бюджету. Отображает маркетинговый текст и CTA, график бюджета.
<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 rounded-full ring-emerald-500/30 ring-1 pt-1.5 pr-4 pb-1.5 pl-4">SMART AI FEATURE</span>
<h2 class="sm:text-5xl lg:text-6xl text-4xl font-light text-white tracking-tight font-geist mt-6">Meet Your AI Budget Assistant</h2>
<p class="mt-6 text-lg leading-8 font-geist text-neutral-300">
Plan smarter with predictive AI that tracks your spending, forecasts savings, and helps you make better
financial decisions effortlessly.
</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>
Predict Monthly Expenses
</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>
Optimize Saving Strategies
</li>
</ul>
<div class="mt-8">
<a href="#" class="inline-flex items-center justify-center rounded-full px-6 sm:px-8 py-3.5 text-sm sm:text-base font-medium tracking-tight ring-1 font-geist text-white ring-emerald-400/30" style="background: linear-gradient(135deg, rgb(16,185,129) 0%, rgb(5,150,105) 100%);">
Try It Now
</a>
</div>
</div>
<!-- Right: Chart Card -->
<div class="lg:col-span-6">
<div class="overflow-visible max-h-fit border rounded-2xl pt-4 pr-4 pb-8 pl-4 relative bg-black/40 border-white/10">
<h3 class="text-lg font-semibold tracking-tight mb-2 font-geist">AI Insights Dashboard</h3>
<p class="text-sm mb-4 font-geist text-gray-300">
Visualize your expenses, track habits, and uncover patterns that help improve your financial health.
</p>
<div class="relative rounded-xl border ring-1 overflow-hidden p-4 sm:p-6 bg-neutral-900/60 border-white/10 ring-white/5">
<!-- Connectors -->
<div class="sm:left-36 sm:right-36 z-0 flex flex-col gap-2 pointer-events-none absolute top-0 right-28 bottom-0 left-28 items-stretch justify-center">
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/80">
<div class="absolute inset-0 bg-gradient-to-r h-full animate-pulse from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite; transform: translateX(-100%);"></div>
</div>
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/60">
<div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.3s; transform: translateX(-100%);"></div>
</div>
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/40">
<div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.6s; transform: translateX(-100%);"></div>
</div>
</div>
<!-- Nodes -->
<div class="z-10 flex relative items-center justify-between">
<!-- Left: AI Core -->
<div class="flex flex-col items-center gap-2">
<div class="relative w-24 h-24 sm:w-28 sm:h-28 rounded-xl border ring-1 backdrop-blur-sm overflow-hidden border-white/10 bg-neutral-900/70 ring-white/10">
<div class="absolute -left-4 top-2 w-20 h-20 rounded-full bg-gradient-to-tr from-emerald-500/70 to-lime-500/40 blur-2xl">
</div>
<div class="absolute left-6 top-1/2 -translate-y-1/2 w-14 h-14 rounded-full bg-gradient-to-tr to-emerald-500/30 blur-xl from-lime-400/70">
</div>
<div class="absolute right-3 bottom-3 w-8 h-8 rounded-full bg-gradient-to-tr to-transparent blur-lg from-emerald-300/60">
</div>
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7cb11911-53c5-45cc-a756-9dbe2010e635_320w.jpg)] bg-cover ring-1 rounded-xl ring-white/5">
</div>
</div>
<span class="text-xs font-geist text-neutral-300">AI Core</span>
</div>
<!-- Animated Connectors -->
<div class="sm:left-36 sm:right-36 z-0 flex flex-col gap-2 pointer-events-none absolute top-0 right-28 bottom-0 left-28 items-stretch justify-center">
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/80">
<div class="absolute inset-0 bg-gradient-to-r h-full animate-pulse from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite; transform: translateX(-100%);"></div>
</div>
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/60">
<div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.3s; transform: translateX(-100%);"></div>
</div>
<div class="h-px bg-gradient-to-r from-transparent to-transparent relative overflow-hidden via-emerald-400/40">
<div class="absolute inset-0 bg-gradient-to-r h-full from-emerald-400 to-lime-400" style="animation: flowLeft 2s ease-in-out infinite 0.6s; transform: translateX(-100%);"></div>
</div>
</div>
<!-- Right: User Data -->
<div class="flex flex-col items-center gap-2">
<div class="relative w-24 h-24 sm:w-28 sm:h-28 rounded-xl border ring-1 backdrop-blur-sm overflow-hidden border-white/10 bg-neutral-900/70 ring-white/10">
<div class="absolute right-4 top-4 w-8 h-6 bg-gradient-to-br to-lime-500 from-emerald-400" style="clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);"></div>
<div class="absolute left-4 bottom-5 w-12 h-7 bg-gradient-to-br from-lime-500 to-emerald-500" style="clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);"></div>
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9f2ed82e-900a-4e17-843f-6340215c86a0_320w.jpg)] bg-cover ring-1 rounded-xl ring-white/5">
</div>
</div>
<span class="text-xs font-geist text-neutral-300">User Data</span>
</div>
<style>
@keyframes flowLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
</style>
</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>