Загрузка...
Адаптивный Hero-блок для финтех/SaaS лендингов на Tailwind. Заголовок с градиентом, форма захвата email, CTA, список фич, анимированные мокапы телефона.
<section
class="sm:px-6 lg:px-8 sm:py-12 lg:py-20 grid lg:grid-cols-2 lg:gap-12 max-w-7xl mr-auto ml-auto pt-8 pr-4 pb-8 pl-4 gap-x-8 gap-y-8 items-center"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(1)">
<!-- Copy -->
<div class="relative">
<div
class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 bg-white/5 text-xs font-medium text-slate-300 font-sans border-gradient [animation:fadeSlideIn_1s_ease-out_0.1s_both] animate-on-scroll animate">
<span class="inline-flex h-2.5 w-2.5 rounded-full bg-gradient-to-r from-indigo-400 to-fuchsia-400"></span>
Introducing: Advanced rewards and intelligent spending tools
</div>
<h1
class="leading-tight md:text-5xl sm:text-5xl lg:text-7xl [animation:fadeSlideIn_1s_ease-out_0.2s_both] animate-on-scroll animate text-3xl font-medium text-white tracking-tighter mt-5">
Transform your financial future today
</h1>
<p
class="sm:mt-5 sm:text-base lg:text-lg [animation:fadeSlideIn_1s_ease-out_0.3s_both] animate-on-scroll animate text-sm font-normal text-slate-300 mt-5">
Experience seamless banking with unified card management, instant notifications, and intelligent automation.
Build wealth with zero hidden charges and premium financial tools designed for modern life.
</p>
<div
class="mt-6 sm:mt-8 flex flex-col sm:flex-row gap-3 [animation:fadeSlideIn_1s_ease-out_0.4s_both] animate-on-scroll animate">
<div class="flex-1 sm:min-w-[260px]">
<label for="email" class="sr-only font-sans">Email address</label>
<div class="relative">
<input id="email" type="email" placeholder="Enter your work email" class="w-full placeholder-slate-400 text-white bg-white/5 focus:ring-2 focus:ring-indigo-400/60 focus:outline-none px-4 h-11 sm:h-12 rounded-xl font-normal text-sm border-gradient">
<div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail"
class="lucide lucide-mail h-4 w-4">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
<rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
</svg>
</div>
</div>
</div>
<button class="inline-flex sm:h-12 shadow-indigo-500/30 hover:opacity-90 transition border-gradient text-sm font-semibold text-white tracking-tight bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-500 h-11 rounded-xl pr-5 pl-5 shadow-lg items-center justify-center">
Start free trial
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
<div
class="mt-5 sm:mt-6 flex flex-wrap items-center gap-4 sm:gap-5 text-xs sm:text-sm [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll animate">
<div class="inline-flex items-center gap-2 text-slate-300 font-sans">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</span>
Military‑grade security
</div>
<div class="inline-flex items-center gap-2 text-slate-300 font-sans">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
</span>
Up to 5% rewards
</div>
<div class="inline-flex items-center gap-2 text-slate-300 font-sans">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-4 w-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
</span>
Lightning‑fast payments
</div>
</div>
<div
class="sm:mt-8 flex flex-wrap gap-3 [animation:fadeSlideIn_1s_ease-out_0.6s_both] animate-on-scroll mt-8 gap-x-3 gap-y-3 items-center">
<div class="inline-block group relative">
<div class="inline-block group text-sm rounded-full relative">
<button class="group inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white border-gradient before:rounded-full text-xs font-semibold text-white/70 tracking-tight bg-white/5 rounded-full pt-[12px] pr-[17px] pb-[12px] pl-[17px] relative backdrop-blur-xl items-center justify-center">
<span class="z-10 text-sm font-medium rounded-full mr-2 relative">Schedule a demo</span>
<span aria-hidden="true" class="-translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 text-xs opacity-20 w-[70%] h-[1px] rounded-full absolute bottom-0 left-1/2" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right lucide-play w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(241, 245, 249);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-full text-sm" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 rounded-full opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>
<a href="#"
class="inline-flex items-center gap-2 hover:bg-white/10 transition border-gradient text-sm font-medium text-white/70 bg-white/5 h-10 rounded-full pr-4 pl-4">
App Store
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play"
class="lucide lucide-play w-[16px] h-[16px]" data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(241, 245, 249);">
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path>
</svg>
</a>
</div>
</div>
<!-- Phones showcase -->
<div class="lg:mt-0 animate mt-0 relative">
<div
class="absolute -top-10 -right-10 h-64 w-64 bg-gradient-to-br from-indigo-500/20 to-fuchsia-500/20 blur-2xl rounded-full">
</div>
<div
class="relative mx-auto max-w-[280px] sm:max-w-[360px] md:max-w-[440px] lg:max-w-[520px] h-[480px] sm:h-[520px] lg:h-[560px]">
<!-- Left phone -->
<div class="sm:top-16 lg:top-12 sm:-left-4 absolute top-12 left-0 -rotate-6">
<div
class="sm:w-52 lg:w-64 sm:rounded-[24px] lg:rounded-[28px] shadow-indigo-950/60 sm:p-2 border-gradient before:rounded-[22px] sm:before:rounded-[24px] lg:before:rounded-[28px] [animation:fadeSlideIn_1s_ease-out_0.7s_both] animate-on-scroll bg-gradient-to-b from-gray-900 to-gray-950 w-44 rounded-[22px] pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow-2xl">
<div
class="rounded-[18px] sm:rounded-[20px] lg:rounded-[22px] bg-gradient-to-b from-violet-700/30 to-indigo-900/30 p-3 sm:p-3.5 lg:p-4 border-gradient before:rounded-[18px] sm:before:rounded-[20px] lg:before:rounded-[22px]">
<div class="flex items-center justify-between">
<div class="h-2 w-10 sm:w-12 rounded-full bg-white/10"></div>
<div class="h-2 w-5 sm:w-6 rounded-full bg-white/10"></div>
</div>
<div class="mt-8 sm:mt-10 lg:mt-12">
<p class="text-base sm:text-lg lg:text-xl leading-tight font-sans font-medium tracking-tighter">Transform
your</p>
<p class="text-base sm:text-lg lg:text-xl leading-tight font-sans font-medium tracking-tighter">financial
future</p>
<p class="text-base sm:text-lg lg:text-xl leading-tight font-sans font-medium tracking-tighter">today</p>
</div>
<div class="mt-6 sm:mt-7 lg:mt-8 grid grid-cols-2 gap-2">
<button class="h-8 sm:h-9 rounded-xl bg-white/10 text-[10px] sm:text-xs font-medium font-sans border-gradient">Start free trial</button>
<button class="h-8 sm:h-9 rounded-xl bg-white/5 text-[10px] sm:text-xs font-medium font-sans border-gradient">Sign in</button>
</div>
<div class="mt-6 sm:mt-7 lg:mt-8">
<div class="rounded-xl bg-white/5 p-2 sm:p-2.5 border-gradient">
<div class="flex items-center gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-white/10 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-3 w-3 sm:h-3.5 sm:w-3.5 text-yellow-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
</span>
<div class="flex-1 min-w-0">
<p class="text-[10px] sm:text-[11px] font-medium text-white truncate font-sans">Lightning payments
</p>
<p class="text-[9px] sm:text-[10px] text-slate-400 truncate font-sans">Move funds in seconds</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Center phone -->
<div class="-translate-x-1/2 z-10 absolute left-1/2">
<div
class="sm:w-64 lg:w-72 sm:rounded-[28px] lg:rounded-[32px] shadow-indigo-950/60 sm:p-2 border-gradient before:rounded-[24px] sm:before:rounded-[28px] lg:before:rounded-[32px] [animation:fadeSlideIn_1s_ease-out_0.6s_both] animate-on-scroll bg-gray-950 w-56 rounded-[24px] pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow-2xl">
<div
class="rounded-[20px] sm:rounded-[24px] lg:rounded-[26px] bg-gradient-to-b from-gray-900 to-gray-950 p-2.5 sm:p-3 border-gradient before:rounded-[20px] sm:before:rounded-[24px] lg:before:rounded-[26px]">
<!-- Header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/10 border-gradient"></span>
<span class="text-[10px] sm:text-xs font-medium text-slate-300">Sarah Mitchell</span>
</div>
<button class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell h-3 w-3 sm:h-3.5 sm:w-3.5 text-slate-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
</button>
</div>
<!-- Search -->
<div
class="mt-2.5 sm:mt-3 h-8 sm:h-9 rounded-xl bg-white/5 px-2.5 sm:px-3 flex items-center gap-2 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="search" class="lucide lucide-search h-3 w-3 sm:h-3.5 sm:w-3.5 text-slate-400">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
<span class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Search payments, people or services</span>
</div>
<!-- Balance + card -->
<div class="mt-3 sm:mt-4">
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Premier Account</p>
<p class="mt-0.5 sm:mt-1 text-xl sm:text-2xl font-sans font-medium tracking-tighter">$283 940.00</p>
<div
class="sm:mt-3 sm:p-3 shadow-fuchsia-900/30 bg-gradient-to-br from-rose-500 via-indigo-500 to-fuchsia-500 rounded-2xl mt-3 pt-2.5 pr-2.5 pb-2.5 pl-2.5 shadow-lg border-gradient before:rounded-2xl">
<div class="flex items-center justify-between text-white">
<span class="text-[10px] sm:text-xs font-medium font-sans">Premium card</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="wifi" class="lucide lucide-wifi h-3.5 w-3.5 sm:h-4 sm:w-4">
<path d="M12 20h.01" class=""></path>
<path d="M2 8.82a15 15 0 0 1 20 0" class=""></path>
<path d="M5 12.859a10 10 0 0 1 14 0" class=""></path>
<path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path>
</svg>
</div>
<div class="mt-4 sm:mt-6 text-base sm:text-lg font-semibold tracking-tight font-sans">**** 9284</div>
<div class="sm:mt-1 text-[9px] sm:text-[10px] text-white/80 mt-1 font-sans">Expires 12/27</div>
</div>
</div>
<!-- Spendings list -->
<div class="mt-3 sm:mt-4">
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Recent activity this month</p>
<div class="mt-1.5 sm:mt-2 space-y-1.5 sm:space-y-2">
<div
class="flex items-center justify-between rounded-xl bg-white/5 px-2.5 sm:px-3 py-1.5 sm:py-2 border-gradient">
<div class="flex items-center gap-1.5 sm:gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-blue-500/20 flex items-center justify-center flex-shrink-0 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag h-3 w-3 sm:h-3.5 sm:w-3.5 text-blue-300"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
</span>
<div class="min-w-0">
<p class="text-[10px] sm:text-[11px] font-medium text-white truncate font-sans">Netflix
Subscription
</p>
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Today, 11:42 AM</p>
</div>
</div>
<span class="text-[10px] sm:text-[11px] text-red-300 flex-shrink-0 ml-2 font-sans">- $17.99</span>
</div>
<div
class="flex items-center justify-between rounded-xl bg-white/5 px-2.5 sm:px-3 py-1.5 sm:py-2 border-gradient">
<div class="flex items-center gap-1.5 sm:gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-emerald-500/20 flex items-center justify-center flex-shrink-0 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user h-3 w-3 sm:h-3.5 sm:w-3.5 text-emerald-300"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
</span>
<div class="min-w-0">
<p class="text-[10px] sm:text-[11px] font-medium text-white truncate font-sans">Marcus Thompson
</p>
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Yesterday, 4:18 PM</p>
</div>
</div>
<span class="text-[10px] sm:text-[11px] text-emerald-300 flex-shrink-0 ml-2 font-sans">+ $285.00</span>
</div>
<div
class="flex items-center justify-between rounded-xl bg-white/5 px-2.5 sm:px-3 py-1.5 sm:py-2 border-gradient">
<div class="flex items-center gap-1.5 sm:gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-green-500/20 flex items-center justify-center flex-shrink-0 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="store" class="lucide lucide-store h-3 w-3 sm:h-3.5 sm:w-3.5 text-green-300"><path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5" class=""></path><path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244" class=""></path><path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05" class=""></path></svg>
</span>
<div class="min-w-0">
<p class="text-[10px] sm:text-[11px] font-medium text-white truncate font-sans">Amazon Prime</p>
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">May 28, 6:32 PM</p>
</div>
</div>
<span class="text-[10px] sm:text-[11px] text-red-300 flex-shrink-0 ml-2 font-sans">- $89.00</span>
</div>
</div>
</div>
<!-- Tabs -->
<div class="mt-2.5 sm:mt-3 grid grid-cols-4 gap-1.5 sm:gap-2">
<div class="h-7 sm:h-8 rounded-lg bg-white/10 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="home" class="lucide lucide-home h-3 w-3 sm:h-3.5 sm:w-3.5">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
class=""></path>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="credit-card" class="lucide lucide-credit-card h-3 w-3 sm:h-3.5 sm:w-3.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="pie-chart" class="lucide lucide-pie-chart h-3 w-3 sm:h-3.5 sm:w-3.5">
<path
d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
class=""></path>
<path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="settings" class="lucide lucide-settings h-3 w-3 sm:h-3.5 sm:w-3.5">
<path
d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- Right phone -->
<div class="absolute right-0 top-8 sm:top-6 lg:top-8 rotate-6 sm:-right-2">
<div
class="sm:w-52 lg:w-64 sm:rounded-[24px] lg:rounded-[28px] shadow-indigo-950/60 sm:p-2 border-gradient before:rounded-[22px] sm:before:rounded-[24px] lg:before:rounded-[28px] [animation:fadeSlideIn_1s_ease-out_0.8s_both] animate-on-scroll bg-gray-950 w-44 rounded-[22px] pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow-2xl">
<div
class="rounded-[18px] sm:rounded-[20px] lg:rounded-[22px] bg-gradient-to-b from-gray-900 to-gray-950 p-2.5 sm:p-3 border-gradient before:rounded-[18px] sm:before:rounded-[20px] lg:before:rounded-[22px]">
<div class="flex items-center justify-between">
<button class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-left" class="lucide lucide-chevron-left h-3 w-3 sm:h-3.5 sm:w-3.5"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<span class="text-[10px] sm:text-xs font-medium text-slate-300 font-sans">Wallet</span>
<button class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-3 w-3 sm:h-3.5 sm:w-3.5"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
<div class="mt-3 sm:mt-4 grid grid-cols-2 gap-1.5 sm:gap-2">
<div class="rounded-xl p-2 sm:p-3 bg-gradient-to-b from-indigo-600/30 to-indigo-900/30 border-gradient">
<p class="text-[9px] sm:text-[10px] text-slate-300 font-sans">Recurring income</p>
<p class="mt-1.5 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight font-sans">+$6 240.00</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="wallet"
class="lucide lucide-wallet mt-1.5 sm:mt-2 h-3.5 w-3.5 sm:h-4 sm:w-4 text-indigo-300">
<path
d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
</svg>
</div>
<div class="rounded-xl p-2 sm:p-3 bg-gradient-to-b from-fuchsia-600/30 to-fuchsia-900/30 border-gradient">
<p class="text-[9px] sm:text-[10px] text-slate-300 font-sans">Coverage plan</p>
<p class="mt-1.5 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight font-sans">+$1 550.00</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield"
class="lucide lucide-shield mt-1.5 sm:mt-2 h-3.5 w-3.5 sm:h-4 sm:w-4 text-fuchsia-300">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
</svg>
</div>
</div>
<div class="mt-2.5 sm:mt-3">
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Quick transfer to</p>
<div class="mt-1.5 sm:mt-2 flex -space-x-1.5 sm:-space-x-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/10 ring-2 ring-gray-900"></span>
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/10 ring-2 ring-gray-900"></span>
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/10 ring-2 ring-gray-900"></span>
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/10 ring-2 ring-gray-900"></span>
<button class="h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-3 w-3 sm:h-3.5 sm:w-3.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
</div>
<div
class="mt-2.5 sm:mt-3 rounded-xl p-2 sm:p-3 bg-gradient-to-r from-indigo-600/20 to-fuchsia-600/20 border-gradient">
<div class="flex items-center gap-1.5 sm:gap-2">
<span class="h-6 w-6 sm:h-7 sm:w-7 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0 border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check h-3 w-3 sm:h-3.5 sm:w-3.5 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</span>
<div class="min-w-0">
<p class="text-[10px] sm:text-[11px] font-medium text-white truncate font-sans">Secure your wealth</p>
<p class="text-[9px] sm:text-[10px] text-slate-400 truncate font-sans">Premium protection</p>
</div>
</div>
</div>
<div class="mt-2.5 sm:mt-3">
<p class="text-[9px] sm:text-[10px] text-slate-400 font-sans">Financial overview</p>
<div class="mt-1.5 sm:mt-2 rounded-xl bg-white/5 p-2 sm:p-3 border-gradient">
<div class="flex items-center justify-between">
<span class="text-[10px] sm:text-[11px] font-medium text-white font-sans">Total revenue</span>
<span class="text-[10px] sm:text-[11px] text-slate-300 font-sans">$ 8 720.00</span>
</div>
<div class="mt-1.5 sm:mt-2 h-1.5 sm:h-2 w-full rounded-full bg-white/10">
<div class="h-1.5 sm:h-2 w-3/4 rounded-full bg-gradient-to-r from-indigo-500 to-fuchsia-500"></div>
</div>
</div>
</div>
<div class="mt-2.5 sm:mt-3 grid grid-cols-4 gap-1.5 sm:gap-2">
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="home" class="lucide lucide-home h-3 w-3 sm:h-3.5 sm:w-3.5">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
class=""></path>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/10 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="credit-card" class="lucide lucide-credit-card h-3 w-3 sm:h-3.5 sm:w-3.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-3 w-3 sm:h-3.5 sm:w-3.5">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M18 17V9" class=""></path>
<path d="M13 17V5" class=""></path>
<path d="M8 17v-3" class=""></path>
</svg>
</div>
<div class="h-7 sm:h-8 rounded-lg bg-white/5 flex items-center justify-center border-gradient">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="cog" class="lucide lucide-cog h-3 w-3 sm:h-3.5 sm:w-3.5">
<path d="M11 10.27 7 3.34" class=""></path>
<path d="m11 13.73-4 6.93" class=""></path>
<path d="M12 22v-2" class=""></path>
<path d="M12 2v2" class=""></path>
<path d="M14 12h8" class=""></path>
<path d="m17 20.66-1-1.73" class=""></path>
<path d="m17 3.34-1 1.73" class=""></path>
<path d="M2 12h2" class=""></path>
<path d="m20.66 17-1.73-1" class=""></path>
<path d="m20.66 7-1.73 1" class=""></path>
<path d="m3.34 17 1.73-1" class=""></path>
<path d="m3.34 7 1.73 1" class=""></path>
<circle cx="12" cy="12" r="2" class=""></circle>
<circle cx="12" cy="12" r="8" class=""></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.border-gradient {
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: linear-gradient(225deg,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.0) 100%);
pointer-events: none;
}
</style>
<style>
@keyframes fadeSlideIn {
0% {
opacity: 0;
transform: translateY(30px);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
}
</style>
<script>
(function () {
// Inject CSS for paused/running states
const style = document.createElement("style");
style.textContent = `
/* Default: paused */
.animate-on-scroll { animation-play-state: paused !important; }
/* Activated by JS */
.animate-on-scroll.animate { animation-play-state: running !important; }
`;
document.head.appendChild(style);
const once = true;
if (!window.__inViewIO) {
window.__inViewIO = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
if (once) window.__inViewIO.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
}
window.initInViewAnimations = function (selector = ".animate-on-scroll") {
document.querySelectorAll(selector).forEach((el) => {
window.__inViewIO.observe(el); // observing twice is a no-op
});
};
document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
})();
</script>
</section>