Загрузка...
Секция "Герой" для AI-продуктов: полноэкранный баннер с 3D фоном, анимированными карточками метрик и логотипами. Идеально для лендингов SaaS.
<section class="isolate overflow-hidden min-h-[1000px] md:h-screen relative"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(2)">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d953ad7f-2dd7-42f7-8f74-593d55181036_3840w.jpg" alt="Abstract 3D render background" class="pointer-events-none sm:max-h-full w-full h-full max-h-[600px] object-cover absolute top-0 right-0 bottom-0 left-0" style="mask-image: linear-gradient(to bottom, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);">
<div
class="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_20%,rgba(255,255,255,0.06),transparent),linear-gradient(to_top,rgba(0,0,0,0.85),rgba(0,0,0,0.35))]">
</div>
<div
class="z-10 flex flex-col md:px-8 h-full max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6 relative gap-x-10 gap-y-10 justify-center">
<div class="max-w-3xl">
<h2
class="sm:text-5xl lg:text-6xl animate-on-scroll text-4xl font-medium text-white tracking-tight font-manrope drop-shadow-xl"
style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
Intelligent systems. Proven results.
</h2>
<p class="sm:text-lg leading-relaxed animate-on-scroll text-base text-white/85 max-w-2xl mt-5"
style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
Deploy AI solutions with complete confidence through advanced monitoring, human oversight, and transparent
performance metrics—built for enterprise scale.
</p>
<style>
/* Default: paused */
.animate-on-scroll {
animation-play-state: paused !important;
}
/* Activated by JS */
.animate-on-scroll.animate {
animation-play-state: running !important;
}
</style>
<script>
// One shared observer; safe to call initInViewAnimations() multiple times
(function () {
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>
</div>
<div class="grid gap-6 lg:grid-cols-3 gap-x-6 gap-y-6 animate-on-scroll"
style="animation: fadeSlideIn 1.0s ease-out 0.6s both;">
<!-- Analytics Card -->
<div class="rounded-3xl border border-white/10 bg-black/60 p-6 backdrop-blur-xl">
<div class="flex items-center justify-between">
<span class="text-xs uppercase tracking-[0.18em] text-white/60">Performance metrics</span>
<span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2 py-1 text-[10px] text-white/70 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-3 w-3"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg> Active
</span>
</div>
<p class="mt-4 text-lg leading-relaxed text-white/90">
Enterprise AI adoption increased by <span class="text-emerald-400">84%</span> this year
</p>
<div class="mt-6">
<div class="relative h-24 w-full rounded-lg bg-gradient-to-b from-white/[0.03] to-transparent">
<div class="absolute inset-x-0 bottom-6 h-[2px] bg-white/10"></div>
<div
class="absolute left-1/2 bottom-6 h-2 w-2 -translate-x-1/2 rounded-full bg-sky-400 shadow-[0_0_0_4px_rgba(56,189,248,0.15)]">
</div>
<div class="absolute inset-x-0 top-4 flex justify-between px-2 text-[10px] text-white/50">
<span class="">2025</span><span>2024</span><span class="">2023</span><span class="">2022</span><span class="">2021</span>
</div>
</div>
<div class="mt-5">
<div class="text-4xl font-medium tracking-tight text-white">$45B</div>
<div class="text-sm text-white/60">Market Value</div>
</div>
</div>
</div>
<!-- Face Detection Card -->
<div class="rounded-3xl border border-white/10 bg-black/60 p-2 backdrop-blur-xl">
<div class="relative overflow-hidden rounded-2xl bg-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/993d5154-c104-4507-8c0a-55364d2a948c_800w.jpg" alt="Identity verification" class="h-56 w-full object-cover sm:h-64" style="">
<div class="absolute inset-0 bg-[radial-gradient(60%_30%_at_50%_55%,rgba(163,230,53,0.25),transparent)]">
</div>
<!-- Scan overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="h-1 w-3/4 rounded bg-lime-400 shadow-[0_0_30px_rgba(132,204,22,0.45)]"></div>
</div>
<!-- Grid lines -->
<div class="pointer-events-none absolute inset-0 grid grid-cols-6 grid-rows-6">
<div
class="col-span-6 row-span-6 [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px)] [background-size:16.666%_100%,100%_16.666%]">
</div>
</div>
<div
class="absolute left-4 top-4 rounded-md bg-black/60 px-2 py-1 text-xs text-white/85 ring-1 ring-white/10">
Match confirmed
</div>
<div class="p-4">
<div class="mt-2 text-base font-medium text-white/90">Smart Recognition</div>
<div class="text-sm text-white/60">Advanced Processing</div>
</div>
</div>
</div>
<!-- Success Metrics Card -->
<div class="rounded-3xl border border-white/10 bg-black/60 p-6 backdrop-blur-xl">
<p class="text-lg leading-relaxed text-white/90">
Achieving <span class="text-lime-400">92%</span> accuracy rate, our platform delivers consistent
enterprise-grade performance.
</p>
<div class="mt-6">
<div class="text-sm text-white/70">Performance Overview</div>
<div class="mt-4 space-y-4">
<!-- Succeed -->
<div class="">
<div class="flex items-baseline justify-between">
<span class="text-sm text-white/80">Completed</span>
<span class="text-base text-white/90">78%</span>
</div>
<div class="mt-2 h-3 w-full rounded-full bg-white/10">
<div class="h-3 w-[78%] rounded-full bg-gradient-to-r from-emerald-400 to-emerald-500"></div>
</div>
</div>
<!-- In Progress -->
<div class="">
<div class="flex items-baseline justify-between">
<span class="text-sm text-white/80">Processing</span>
<span class="text-base text-white/90">14%</span>
</div>
<div class="mt-2 h-3 w-full rounded-full bg-white/10">
<div class="h-3 w-[14%] rounded-full bg-gradient-to-r from-sky-400 to-blue-500"></div>
</div>
</div>
<!-- Failed -->
<div class="">
<div class="flex items-baseline justify-between">
<span class="text-sm text-white/80">Pending</span>
<span class="text-base text-white/90">8%</span>
</div>
<div class="mt-2 h-3 w-full rounded-full bg-white/10">
<div class="relative h-3 w-[8%] overflow-hidden rounded-full bg-white/10">
<div
class="absolute inset-0 bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.2)_0_6px,rgba(255,255,255,0.05)_6px_12px)]">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 flex items-center gap-3 text-xs text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4 text-white/70">
<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>
Quality-assured workflows
</div>
</div>
</div>
<!-- Logo row -->
<div class="flex flex-wrap text-white/50 mt-4 gap-x-8 gap-y-4 items-center animate-on-scroll"
style="animation: fadeSlideIn 1.0s ease-out 0.8s both;">
<span class="inline-flex items-center gap-2 text-sm">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="network" class="lucide lucide-network h-3.5 w-3.5"><rect x="16" y="16" width="6" height="6" rx="1" class=""></rect><rect x="2" y="16" width="6" height="6" rx="1" class=""></rect><rect x="9" y="2" width="6" height="6" rx="1" class=""></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" class=""></path><path d="M12 12V8" class=""></path></svg>
</span>
TechFlow
</span>
<span class="inline-flex items-center gap-2 text-sm">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="flame" class="lucide lucide-flame h-3.5 w-3.5"><path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" class=""></path></svg>
</span>
InnovateLab
</span>
<span class="inline-flex items-center gap-2 text-sm">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="diamond" class="lucide lucide-diamond h-3.5 w-3.5"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" class=""></path></svg>
</span>
DataCraft
</span>
<span class="inline-flex items-center gap-2 text-sm">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" class="lucide lucide-cpu h-3.5 w-3.5"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
</span>
CloudMind
</span>
<span class="inline-flex items-center gap-2 text-sm">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 h-3.5 w-3.5"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
</span>
DevCore
</span>
</div>
</div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black to-transparent"></div>
</section>