Загрузка...
Секция маркетинга с сеткой проблем (4 колонки) и логотипами. Выделяет болевые точки клиентов. Адаптивный дизайн Tailwind CSS.
<section class="overflow-hidden bg-white border-neutral-200 border-t pt-24 pb-24 relative">
<div class="bg-gradient-to-b from-neutral-50 via-white to-neutral-100 absolute top-0 right-0 bottom-0 left-0"></div>
<div class="container mx-auto px-6 lg:px-12 relative z-10">
<!-- Label -->
<div class="flex flex-col items-center mb-14">
<div class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white/80 px-4 py-1 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="solar:danger-circle-bold-duotone" data-width="18" data-height="18" class=""><path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10" opacity=".5" class=""></path><path fill="currentColor" d="M12 6.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2" class=""></path></svg>
<span class="text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500">
The bottleneck
</span>
</div>
<h2 class="mt-6 text-4xl lg:text-5xl font-medium tracking-tight text-neutral-900 text-center max-w-3xl leading-[1.05]">
Struggling with slow, expensive neural rollouts?
</h2>
<p class="mt-4 text-base text-neutral-500 text-center max-w-2xl">
Most teams waste months wiring infrastructure, approvals, and data pipelines before a single model reaches production.
</p>
</div>
<!-- Problem Grid -->
<div class="relative">
<!-- Soft grid background -->
<div class="pointer-events-none absolute inset-6 rounded-3xl bg-neutral-50">
</div>
<div class="relative grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6">
<!-- Column 1 -->
<div class="flex flex-col pt-10 gap-x-4 gap-y-4">
<div class="bg-white/60 h-20 border-neutral-100 border rounded-2xl"></div>
<div class="bg-white/40 h-20 border-neutral-100 border rounded-2xl backdrop-blur-lg"></div>
<div class="rounded-2xl bg-white border border-neutral-200 shadow-[0_18px_45px_-24px_rgba(15,23,42,0.35)] px-5 py-4 flex flex-col justify-between">
<div class="flex items-center gap-2 mb-3 text-[11px] font-medium text-neutral-400 uppercase tracking-[0.16em]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:hourglass-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" fill-rule="evenodd" d="M12 2C7.867 2 5.8 2 5.198 3.3a2.5 2.5 0 0 0-.13.346c-.41 1.387 1.052 2.995 3.974 6.21L11 12h2l1.958-2.143c2.922-3.216 4.383-4.824 3.974-6.21a2.5 2.5 0 0 0-.13-.348C18.2 2 16.133 2 12 2" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.198 20.7C5.8 22 7.867 22 12 22s6.2 0 6.802-1.3a2.5 2.5 0 0 0 .13-.346c.41-1.387-1.052-2.995-3.974-6.21L13 12h-2l-1.958 2.143c-2.922 3.216-4.383 4.824-3.974 6.21q.052.18.13.348" opacity=".5" class=""></path></svg>
<span>Time-to-value</span>
</div>
<p class="text-sm text-neutral-700 leading-relaxed">
“New clients expect their first neural pilot in under <span class="font-medium text-neutral-900">48 hours</span>, not next quarter.”
</p>
</div>
<div class="h-20 rounded-2xl bg-white/40 border border-neutral-100"></div>
</div>
<!-- Column 2 -->
<div class="flex flex-col gap-4">
<div class="bg-white/40 h-20 border-neutral-100 border rounded-2xl backdrop-blur-lg"></div>
<div class="rounded-2xl bg-white border border-neutral-200 shadow-[0_18px_45px_-24px_rgba(15,23,42,0.35)] px-5 py-4 flex flex-col justify-between">
<div class="flex items-center gap-2 mb-3 text-[11px] font-medium text-neutral-400 uppercase tracking-[0.16em]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:card-search-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" d="M10 20h3.627a5.25 5.25 0 1 1 8.369-6.34Q22 12.9 22 12c0-.442 0-1.608-.002-2H2.002C2 10.392 2 11.558 2 12c0 3.771 0 5.657 1.172 6.828S6.229 20 10 20" opacity=".5" class=""></path><path fill="currentColor" d="M5.25 16a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M17.75 14.5a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5M14 16.75a3.75 3.75 0 1 1 6.879 2.068l.901.902a.75.75 0 1 1-1.06 1.06l-.902-.901A3.75 3.75 0 0 1 14 16.75" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M9.995 4h4.01c3.781 0 5.672 0 6.846 1.116c.846.803 1.083 1.96 1.149 3.884v1H2V9c.066-1.925.303-3.08 1.149-3.884C4.323 4 6.214 4 9.995 4" class=""></path></svg>
<span class="">Service margin</span>
</div>
<p class="text-sm text-neutral-700 leading-relaxed">
“Our data science onboarding costs are crushing margin — we need at least a <span class="font-medium text-neutral-900">35%</span> efficiency gain.”
</p>
</div>
<div class="h-20 rounded-2xl bg-white/40 border border-neutral-100"></div>
<div class="bg-white/60 h-20 border-neutral-100 border rounded-2xl"></div>
</div>
<!-- Column 3 -->
<div class="flex flex-col gap-4 pt-4 md:pt-0">
<div class="bg-white/60 h-20 border-neutral-100 border rounded-2xl backdrop-blur-lg"></div>
<div class="rounded-2xl bg-white border border-neutral-200 shadow-[0_18px_45px_-24px_rgba(15,23,42,0.35)] px-5 py-4 flex flex-col justify-between">
<div class="flex items-center gap-2 mb-3 text-[11px] font-medium text-neutral-400 uppercase tracking-[0.16em]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:cpu-bolt-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" d="M9.18 9.18c.054-.052.149-.118.451-.159c.323-.043.761-.044 1.439-.044h1.86c.678 0 1.116.001 1.438.044c.303.041.398.107.45.16c.054.053.12.148.16.45c.044.323.045.761.045 1.439v1.86c0 .678-.001 1.116-.045 1.438c-.04.303-.106.398-.16.45c-.052.054-.147.12-.45.16c-.322.044-.76.045-1.438.045h-1.86c-.678 0-1.116-.001-1.439-.045c-.302-.04-.397-.106-.45-.16c-.053-.052-.119-.147-.16-.45c-.043-.322-.044-.76-.044-1.438v-1.86c0-.678.001-1.116.044-1.439c.041-.302.107-.397.16-.45" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12.698 2.698a.698.698 0 0 0-1.396 0v2.79q-.764 0-1.395.017V2.698a.698.698 0 0 0-1.395 0v2.79q0 .056.008.108c-.936.115-1.585.353-2.078.846s-.731 1.142-.846 2.078a1 1 0 0 0-.108-.008h-2.79a.698.698 0 0 0 0 1.395h2.807q-.016.63-.016 1.395H2.698a.698.698 0 0 0 0 1.396h2.79q0 .764.017 1.395H2.698a.698.698 0 0 0 0 1.395h2.79a1 1 0 0 0 .108-.008c.115.936.353 1.585.846 2.078s1.142.731 2.078.846a1 1 0 0 0-.008.108v2.79a.698.698 0 0 0 1.395 0v-2.807q.63.016 1.395.016v2.791a.698.698 0 0 0 1.396 0v-2.79q.764 0 1.395-.017v2.807a.698.698 0 0 0 1.395 0v-2.79a1 1 0 0 0-.008-.108c.936-.115 1.585-.353 2.078-.846s.731-1.142.846-2.078q.053.009.108.008h2.79a.698.698 0 0 0 0-1.395h-2.807q.016-.63.016-1.395h2.791a.698.698 0 0 0 0-1.396h-2.79q0-.764-.017-1.395h2.807a.698.698 0 0 0 0-1.395h-2.79a1 1 0 0 0-.108.008c-.115-.936-.353-1.585-.846-2.078s-1.142-.731-2.078-.846a1 1 0 0 0 .008-.108v-2.79a.698.698 0 0 0-1.395 0v2.807a56 56 0 0 0-1.395-.016zm-3.252 4.94c.426-.057.96-.057 1.578-.057h1.952c.619 0 1.151 0 1.578.058c.458.061.896.2 1.252.555c.355.356.494.794.555 1.252c.058.426.058.96.058 1.578v1.952c0 .619 0 1.151-.058 1.578c-.061.458-.2.896-.555 1.252c-.356.355-.794.494-1.252.555c-.427.058-.96.058-1.578.058h-1.952c-.619 0-1.152 0-1.578-.058c-.458-.061-.896-.2-1.252-.555c-.355-.356-.494-.794-.555-1.252c-.058-.427-.058-.96-.058-1.578v-1.952c0-.619 0-1.152.058-1.578c.061-.458.2-.896.555-1.252c.356-.355.794-.494 1.252-.555" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M12.966 10.545a.698.698 0 0 0-1.135-.811l-1.329 1.86a.698.698 0 0 0 .568 1.103h.505l-.541.758a.698.698 0 1 0 1.135.81l1.329-1.86a.698.698 0 0 0-.568-1.103h-.505z" class=""></path></svg>
<span class="">Demo velocity</span>
</div>
<p class="text-sm text-neutral-700 leading-relaxed">
“Prospects expect tailored neural sandboxes spun up in <span class="font-medium text-neutral-900">under 10 minutes</span> during live calls.”
</p>
</div>
<div class="h-20 rounded-2xl bg-white/40 border border-neutral-100"></div>
<div class="h-20 rounded-2xl bg-white/40 border border-neutral-100"></div>
</div>
<!-- Column 4 -->
<div class="flex flex-col gap-4 pt-6 md:pt-0">
<div class="bg-white/40 h-20 border-neutral-100 border rounded-2xl backdrop-blur-lg"></div>
<div class="rounded-2xl bg-white border border-neutral-200 shadow-[0_18px_45px_-24px_rgba(15,23,42,0.35)] px-5 py-4 flex flex-col justify-between">
<div class="flex items-center gap-2 mb-3 text-[11px] font-medium text-neutral-400 uppercase tracking-[0.16em]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:chart-square-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22" opacity=".5" class=""></path><path fill="currentColor" d="M12 5.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m-5 3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V9A.75.75 0 0 1 7 8.25m10 4a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75" class=""></path></svg>
<span class="">Implementation</span>
</div>
<p class="text-sm text-neutral-700 leading-relaxed">
“We have to cut neural implementation timelines by <span class="font-medium text-neutral-900">70%</span> while keeping compliance intact.”
</p>
</div>
<div class="bg-white/60 h-20 border-neutral-100 border rounded-2xl"></div>
<div class="h-20 rounded-2xl bg-white/40 border border-neutral-100"></div>
</div>
</div>
</div>
<!-- Logos Row -->
<div class="mt-14 flex flex-col items-center gap-5">
<p class="text-xs text-neutral-500 uppercase tracking-[0.2em]">
Trusted to accelerate onboarding by teams at
</p>
<div class="flex flex-wrap justify-center gap-6 lg:gap-10 opacity-70">
<span class="inline-flex items-center gap-2 text-xs font-medium text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="simple-icons:github" data-width="20" data-height="20" class=""><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" class=""></path></svg>
<span class="hidden sm:inline">GitHub Labs</span>
</span>
<span class="inline-flex items-center gap-2 text-xs font-medium text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="simple-icons:vercel" data-width="20" data-height="20" class=""><path fill="currentColor" d="m12 1.608l12 20.784H0Z" class=""></path></svg>
<span class="hidden sm:inline">VXR Compute</span>
</span>
<span class="inline-flex items-center gap-2 text-xs font-medium text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="simple-icons:stripe" data-width="20" data-height="20" class=""><path fill="currentColor" d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z" class=""></path></svg>
<span class="hidden sm:inline">Stripe Neural</span>
</span>
<span class="inline-flex items-center gap-2 text-xs font-medium text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="simple-icons:notion" data-width="20" data-height="20" class=""><path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514c-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233l4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632" class=""></path></svg>
<span class="hidden sm:inline">Notion Systems</span>
</span>
</div>
</div>
</div>
</section>