Внесение изменений в дизайн главной страницы, добавление блоков и более четкая и понятная структура сайта, улучшенная форма заявки

app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
               <span className="text-lg font-semibold tracking-[-0.03em] sm:text-2xl">
                 WorkParking
               </span>
-              <span className="mt-1 hidden text-[11px] uppercase tracking-[0.24em] text-neutral-500 sm:block">
+              <span className="mt-1 text-[9px] uppercase tracking-[0.2em] text-neutral-500 sm:text-[11px] sm:tracking-[0.24em]">
                 Smart entry systems
               </span>
             </Link>

app/page.tsx

@@ -8,65 +8,163 @@ import {
   Smartphone,
   CheckCircle2,
   BarChart3,
+  Building2,
+  ShieldCheck,
+  Clock3,
+  BadgeCheck,
+  ChevronRight,
 } from "lucide-react";
 
+const trustFacts = [
+  "Без замены всего въезда",
+  "Интеграция с текущим шлагбаумом",
+  "Подходит для ЖК, ТСЖ и УК",
+];
+
+const proofStats = [
+  {
+    value: "1 система",
+    label: "вместо разрозненных сценариев въезда, звонков и ручного контроля",
+  },
+  {
+    value: "3 шага",
+    label: "до понятного сценария внедрения: аудит, настройка, запуск",
+  },
+  {
+    value: "2 модели",
+    label: "подключения: покупка оборудования или сервисный формат",
+  },
+];
+
+const capabilities = [
+  {
+    icon: Camera,
+    title: "Распознавание номера",
+    text: "Камера считывает номер авто и автоматически открывает въезд или выезд по заданным правилам.",
+  },
+  {
+    icon: BarrierIcon,
+    title: "Интеграция со шлагбаумом",
+    text: "Дорабатываем существующую точку контроля без ощущения, что нужно переделывать объект с нуля.",
+  },
+  {
+    icon: Smartphone,
+    title: "Приложение для жителей",
+    text: "Жители и сотрудники получают понятный сценарий доступа со смартфона и без лишних звонков.",
+  },
+];
+
+const rolloutSteps = [
+  {
+    number: "01",
+    title: "Разбираем текущий въезд",
+    text: "Смотрим, какой шлагбаум уже стоит, где нужна камера, что критично для охраны, диспетчера и жителей.",
+  },
+  {
+    number: "02",
+    title: "Собираем рабочую конфигурацию",
+    text: "Предлагаем понятный сценарий: оборудование, логика доступа, история событий, приложение и тариф.",
+  },
+  {
+    number: "03",
+    title: "Запускаем и сопровождаем",
+    text: "Настраиваем доступ, проверяем сценарии въезда и выезда, обучаем и оставляем систему в понятной эксплуатации.",
+  },
+];
+
+const objectBenefits = [
+  "Контроль въезда и выезда по номеру автомобиля",
+  "История всех событий и удобный поиск по проездам",
+  "Меньше ручной нагрузки на охрану и диспетчера",
+  "Понятный доступ для жителей, гостей и служебного транспорта",
+];
+
+const trustCards = [
+  {
+    icon: ShieldCheck,
+    title: "Надёжная логика доступа",
+    text: "Система не выглядит экспериментом: сценарии доступа, история событий и контроль статусов собраны в одном контуре.",
+  },
+  {
+    icon: Clock3,
+    title: "Спокойное внедрение",
+    text: "Мы не продаём хаос из интеграций. Сначала разбираем объект, затем предлагаем понятный путь запуска.",
+  },
+  {
+    icon: Building2,
+    title: "Фокус на реальных объектах",
+    text: "Сайт и продукт говорят на языке дворов, ЖК, ТСЖ и управляющих компаний, а не абстрактного IT-сервиса.",
+  },
+  {
+    icon: BadgeCheck,
+    title: "Сервисная модель роста",
+    text: "Можно начать с базового сценария доступа и расширять функции, когда объект к этому готов.",
+  },
+];
+
+const audiences = [
+  "Дворы многоквартирных домов",
+  "Жилые комплексы с закрытым въездом",
+  "ТСЖ, ТСН и управляющие компании",
+  "Объекты, где нужен аккуратный старт без полной замены инфраструктуры",
+];
+
 export default function Home() {
   return (
     <main>
-      <section className="hero-bg flex min-h-[calc(100vh-65px)] items-center">
-        <div className="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 sm:py-20">
-          <div className="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
+      <section className="hero-bg relative overflow-hidden">
+        <div className="relative mx-auto flex min-h-[calc(100vh-65px)] w-full max-w-7xl items-center px-4 py-6 sm:px-6 sm:py-12">
+          <div className="grid w-full items-center gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
             <div>
-              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs text-emerald-300 sm:px-4 sm:py-2 sm:text-sm">
+              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-emerald-500/25 bg-emerald-500/10 px-3 py-1.5 text-xs text-emerald-300 shadow-[0_0_0_1px_rgba(16,185,129,0.05)] sm:px-4 sm:py-2 sm:text-sm">
                 <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
                 Апгрейд дворовых шлагбаумов в Москве
               </div>
 
-              <h1 className="text-4xl font-bold leading-[0.98] tracking-[-0.05em] sm:text-5xl lg:text-6xl">
+              <h1 className="max-w-4xl text-4xl font-bold leading-[0.98] tracking-[-0.06em] sm:text-5xl lg:text-7xl">
                 Умный въезд
                 <br />
                 для двора
               </h1>
 
-              <p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-neutral-300 sm:mt-5 sm:text-lg lg:text-xl">
-                Распознавание номера автомобиля, автоматический въезд и выезд,
-                приложение для жителей, история проездов и удобный контроль
-                доступа для двора, ЖК, ТСЖ и управляющей компании.
+              <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-neutral-300 sm:text-lg lg:text-xl">
+                Технологичная система доступа для дворов, ЖК и управляющих
+                компаний: въезд по номеру, история проездов, приложение для
+                жителей и спокойное внедрение без лишней сложности.
               </p>
 
               <div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
                 <Link
-                  href="/pricing"
-                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold transition-colors hover:bg-emerald-500 sm:px-6 sm:py-4 sm:text-base"
+                  href="/contacts#lead-form"
+                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-500 sm:px-6 sm:py-4 sm:text-base"
                 >
-                  Посмотреть тарифы
-                  <ArrowRight className="w-5 h-5" />
+                  Получить консультацию
+                  <ArrowRight className="h-5 w-5" />
                 </Link>
 
                 <Link
-                  href="/for-uk"
-                  className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/20 px-5 py-3.5 text-sm font-semibold transition-colors hover:border-white/40 hover:bg-white/5 sm:px-6 sm:py-4 sm:text-base"
+                  href="/pricing"
+                  className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/[0.02] px-5 py-3.5 text-sm font-semibold transition-colors hover:border-white/30 hover:bg-white/5 sm:px-6 sm:py-4 sm:text-base"
                 >
-                  Решение для УК
+                  Посмотреть тарифы
                 </Link>
               </div>
 
               <div className="mt-6 grid gap-3 text-sm sm:mt-8 sm:grid-cols-3">
-                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
-                  Въезд и выезд по номеру автомобиля
-                </div>
-                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
-                  Приложение для жителей
-                </div>
-                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
-                  Подписка с аналитикой
-                </div>
+                {trustFacts.map((fact) => (
+                  <div
+                    key={fact}
+                    className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-neutral-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+                  >
+                    {fact}
+                  </div>
+                ))}
               </div>
             </div>
 
             <div className="relative">
-              <div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-3 shadow-2xl sm:p-6">
-                <div className="relative h-[250px] w-full overflow-hidden rounded-[22px] sm:h-[360px] lg:h-[460px]">
+              <div className="rounded-[30px] border border-white/10 bg-neutral-900/75 p-3 shadow-[0_36px_120px_rgba(0,0,0,0.4)] sm:p-6">
+                <div className="relative h-[270px] w-full overflow-hidden rounded-[24px] sm:h-[380px] lg:h-[500px]">
                   <Image
                     src="/images/barrier.jpg"
                     alt="Дворовой въезд со шлагбаумом"
@@ -75,25 +173,31 @@ export default function Home() {
                     className="object-cover"
                     sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 700px"
                   />
+
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                 </div>
               </div>
 
-              <div className="absolute inset-x-3 bottom-3 z-20 rounded-2xl border border-white/10 bg-black/85 px-4 py-3 shadow-xl backdrop-blur sm:inset-x-auto sm:-left-6 sm:bottom-6 sm:block">
+              <div className="absolute inset-x-3 bottom-3 z-20 rounded-2xl border border-white/10 bg-black/80 px-4 py-3 shadow-xl backdrop-blur sm:inset-x-auto sm:-left-6 sm:bottom-6">
                 <div className="flex items-start gap-3">
                   <Camera className="mt-1 h-7 w-7 text-emerald-400 sm:h-8 sm:w-8" />
                   <div>
-                    <p className="text-xs text-neutral-400 sm:text-sm">Контроль доступа</p>
-                    <p className="text-lg font-bold sm:text-2xl">ANPR-камера</p>
                     <p className="text-xs text-neutral-400 sm:text-sm">
-                      распознавание номера и фото проезда
+                      Контроль доступа
+                    </p>
+                    <p className="text-lg font-bold sm:text-2xl">
+                      ANPR-камера
+                    </p>
+                    <p className="text-xs text-neutral-400 sm:text-sm">
+                      распознавание номера и фото события
                     </p>
                   </div>
                 </div>
               </div>
 
-              <div className="hidden lg:block absolute -right-6 top-10 z-20 rounded-2xl border border-white/10 bg-black/85 backdrop-blur px-4 py-4 shadow-xl">
+              <div className="absolute -right-4 top-8 hidden rounded-2xl border border-white/10 bg-black/80 px-4 py-4 shadow-xl backdrop-blur lg:block">
                 <div className="flex items-start gap-3">
-                  <BarChart3 className="w-8 h-8 text-emerald-400 mt-1" />
+                  <BarChart3 className="mt-1 h-8 w-8 text-emerald-400" />
                   <div>
                     <p className="text-sm text-neutral-400">Расширенный тариф</p>
                     <p className="text-2xl font-bold">Аналитика</p>
@@ -108,182 +212,168 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="bg-neutral-950 py-12 sm:py-20">
+      <section className="bg-neutral-950 py-12 sm:py-16">
         <div className="mx-auto max-w-7xl px-4 sm:px-6">
-          <div className="mb-8 max-w-3xl sm:mb-14">
-            <h2 className="text-3xl sm:text-4xl font-bold">
-              Что входит в апгрейд
+          <div className="grid gap-4 lg:grid-cols-3">
+            {proofStats.map((item) => (
+              <div
+                key={item.value}
+                className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] px-5 py-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:px-6 sm:py-6"
+              >
+                <div className="text-2xl font-semibold tracking-[-0.05em] sm:text-3xl">
+                  {item.value}
+                </div>
+                <p className="mt-3 max-w-sm text-sm leading-relaxed text-neutral-400 sm:text-base">
+                  {item.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-[linear-gradient(180deg,#0a0a0a_0%,#0d1411_100%)] py-14 sm:py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6">
+          <div className="mb-8 max-w-3xl sm:mb-12">
+            <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
+              Технологичная система доступа,
+              <br />
+              а не просто камера на въезде
             </h2>
-            <p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
-              Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
-              управляемую систему доступа для двора и управляющей компании.
+            <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
+              Мы превращаем обычный въезд в аккуратный цифровой сервис с понятной
+              логикой для объекта, жителей и управляющей компании.
             </p>
           </div>
 
           <div className="grid gap-4 md:grid-cols-3 md:gap-6">
-            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-5 sm:p-8">
-              <Camera className="w-11 h-11 text-emerald-500 mb-5" />
-              <h3 className="text-xl font-semibold mb-3">Распознавание номера</h3>
-              <p className="text-neutral-400 leading-relaxed">
-                Камера считывает номер авто и автоматически открывает въезд или
-                выезд по правилам доступа.
+            {capabilities.map((item) => {
+              const Icon = item.icon;
+
+              return (
+                <div
+                  key={item.title}
+                  className="rounded-[30px] border border-white/10 bg-black/30 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform duration-200 hover:-translate-y-0.5 sm:p-8"
+                >
+                  <Icon className="mb-5 h-11 w-11 text-emerald-500" />
+                  <h3 className="text-xl font-semibold tracking-[-0.03em]">
+                    {item.title}
+                  </h3>
+                  <p className="mt-3 leading-relaxed text-neutral-400">
+                    {item.text}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-neutral-950 py-14 sm:py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6">
+          <div className="grid items-start gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:gap-10">
+            <div className="rounded-[32px] border border-white/10 bg-neutral-900/80 p-6 shadow-[0_32px_90px_rgba(0,0,0,0.28)] sm:p-8">
+              <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
+                Внедрение, которое выглядит спокойно и профессионально
+              </h2>
+              <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
+                Мы не перегружаем объект сложной терминологией и хаотичными
+                интеграциями. Сначала понимаем сценарий въезда, затем собираем
+                понятную систему под реальную эксплуатацию.
               </p>
+
+              <div className="mt-8 space-y-3">
+                {rolloutSteps.map((step) => (
+                  <div
+                    key={step.number}
+                    className="rounded-2xl border border-white/10 bg-black/25 px-4 py-4"
+                  >
+                    <div className="text-xs uppercase tracking-[0.2em] text-emerald-300/80">
+                      Этап {step.number}
+                    </div>
+                    <div className="mt-2 text-lg font-semibold">{step.title}</div>
+                    <p className="mt-2 text-sm leading-relaxed text-neutral-400 sm:text-base">
+                      {step.text}
+                    </p>
+                  </div>
+                ))}
+              </div>
             </div>
 
-            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-5 sm:p-8">
-              <BarrierIcon className="mb-5 h-11 w-11 text-emerald-500" />
-              <h3 className="text-xl font-semibold mb-3">
-                Управление шлагбаумом
-              </h3>
-              <p className="text-neutral-400 leading-relaxed">
-                Сохраняется удобный сценарий для резидентов, гостей и служебного
-                транспорта без ручного режима.
-              </p>
-            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              {trustCards.map((item) => {
+                const Icon = item.icon;
 
-            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-5 sm:p-8">
-              <Smartphone className="w-11 h-11 text-emerald-500 mb-5" />
-              <h3 className="text-xl font-semibold mb-3">
-                Приложение и личный доступ
-              </h3>
-              <p className="text-neutral-400 leading-relaxed">
-                Жители получают управление доступом со смартфона, а УК — единый
-                инструмент контроля.
-              </p>
+                return (
+                  <div
+                    key={item.title}
+                    className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(13,20,17,0.95),rgba(10,10,10,0.95))] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-6"
+                  >
+                    <Icon className="h-10 w-10 text-emerald-400" />
+                    <h3 className="mt-5 text-xl font-semibold tracking-[-0.03em]">
+                      {item.title}
+                    </h3>
+                    <p className="mt-3 leading-relaxed text-neutral-400">
+                      {item.text}
+                    </p>
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>
       </section>
 
-      <section className="bg-neutral-900 py-12 sm:py-20">
+      <section className="bg-[linear-gradient(180deg,#0c1310_0%,#090909_100%)] py-14 sm:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6">
-          <div className="mb-8 max-w-3xl sm:mb-14">
-            <h2 className="text-3xl sm:text-4xl font-bold">
-              Два формата подписки
-            </h2>
-            <p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
-              Можно начать с базового тарифа и перейти на расширенный, когда
-              понадобится более глубокая история и аналитика.
-            </p>
-          </div>
-
-          <div className="grid gap-4 lg:grid-cols-2 lg:gap-6">
-            <div className="rounded-3xl border border-white/10 bg-black/30 p-5 sm:p-8">
-              <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <h3 className="text-2xl font-semibold">Базовая подписка</h3>
-                <span className="w-fit rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300">
-                  10 000 ₽ / мес
-                </span>
-              </div>
-
-              <div className="space-y-4 text-neutral-300">
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
-                  Въезд и выезд по номеру автомобиля
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
-                  Приложение и базовые функции для жителей
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
-                  Базовая история проездов
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
-                  Управление доступом для двора
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-3xl border border-emerald-500/30 bg-emerald-500/5 p-5 sm:p-8">
-              <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <h3 className="text-2xl font-semibold">Расширенная подписка</h3>
-                <span className="w-fit rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300">
-                  15 000 ₽ / мес
-                </span>
-              </div>
-
-              <div className="space-y-4 text-neutral-200">
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
-                  Всё из базового тарифа
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
-                  Фото автомобиля в истории проездов
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
-                  Фильтры по событиям и автомобилям
-                </div>
-                <div className="flex gap-3">
-                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
-                  Более подробная аналитика и отчёты
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="bg-neutral-950 py-12 sm:py-20">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6">
-          <div className="grid items-start gap-6 lg:grid-cols-2 lg:gap-14">
+          <div className="grid items-start gap-8 lg:grid-cols-[1.02fr_0.98fr] lg:gap-12">
             <div>
-              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
-                Что получает объект
+              <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
+                Не просто шлагбаум,
+                <br />
+                а понятный сервис доступа
               </h2>
 
-              <div className="space-y-3 sm:space-y-4">
-                {[
-                  "Контроль въезда и выезда по номеру автомобиля",
-                  "Историю всех событий проезда",
-                  "Снижение ручной нагрузки на диспетчера и охрану",
-                  "Удобный сценарий доступа для жителей и гостей",
-                  "Основание для дальнейшей аналитики и масштабирования",
-                ].map((item) => (
+              <div className="mt-8 space-y-3 sm:space-y-4">
+                {objectBenefits.map((item) => (
                   <div
                     key={item}
-                    className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900 px-4 py-3.5 sm:py-4"
+                    className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900/65 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
                   >
-                    <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
+                    <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
                     <p className="text-neutral-200">{item}</p>
                   </div>
                 ))}
               </div>
             </div>
 
-            <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-5 sm:p-8">
-              <h3 className="text-2xl font-semibold mb-5">
+            <div className="rounded-[32px] border border-white/10 bg-black/25 p-5 shadow-[0_28px_80px_rgba(0,0,0,0.26)] sm:p-8">
+              <h3 className="text-2xl font-semibold tracking-[-0.03em]">
                 Для кого подходит решение
               </h3>
 
-              <div className="space-y-4 text-neutral-300">
-                <div className="rounded-2xl border border-white/10 bg-black/30 p-4">
-                  Дворы многоквартирных домов
-                </div>
-                <div className="rounded-2xl border border-white/10 bg-black/30 p-4">
-                  Жилые комплексы с закрытым въездом
-                </div>
-                <div className="rounded-2xl border border-white/10 bg-black/30 p-4">
-                  Управляющие компании, ТСЖ и ТСН
-                </div>
-                <div className="rounded-2xl border border-white/10 bg-black/30 p-4">
-                  Объекты, где нужен простой старт и платное расширение функций
-                </div>
+              <div className="mt-5 space-y-3 text-neutral-300">
+                {audiences.map((item) => (
+                  <div
+                    key={item}
+                    className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4"
+                  >
+                    <span>{item}</span>
+                    <ChevronRight className="h-5 w-5 shrink-0 text-neutral-500" />
+                  </div>
+                ))}
               </div>
 
-              <div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
+              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                 <Link
                   href="/services"
-                  className="inline-flex items-center justify-center rounded-2xl bg-white px-5 py-3.5 font-semibold text-black transition-colors hover:bg-neutral-200 sm:px-6 sm:py-4"
+                  className="inline-flex items-center justify-center rounded-2xl bg-white px-5 py-3.5 font-semibold text-black transition-colors hover:bg-neutral-200"
                 >
                   Посмотреть услуги
                 </Link>
                 <Link
                   href="/pricing"
-                  className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-5 py-3.5 font-semibold transition-colors hover:border-white/40 hover:bg-white/5 sm:px-6 sm:py-4"
+                  className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-5 py-3.5 font-semibold transition-colors hover:border-white/40 hover:bg-white/5"
                 >
                   Смотреть тарифы
                 </Link>
@@ -293,20 +383,41 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="bg-gradient-to-b from-neutral-950 to-black py-12 sm:py-24">
-        <div className="mx-auto max-w-4xl px-4 sm:px-6">
-          <div className="rounded-[32px] border border-white/10 bg-neutral-900 p-5 sm:p-10">
-            <div className="max-w-2xl mx-auto text-center">
-              <h2 className="text-3xl sm:text-4xl font-bold">
-                Обсудим апгрейд вашего шлагбаума
-              </h2>
-              <p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
-                Оставьте контакты и коротко опишите объект. Мы предложим
-                подходящий сценарий внедрения и тариф.
-              </p>
-            </div>
+      <section className="bg-gradient-to-b from-neutral-950 to-black py-14 sm:py-24">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="rounded-[34px] border border-white/10 bg-[linear-gradient(135deg,rgba(16,185,129,0.09),rgba(10,10,10,0.96)_38%,rgba(10,10,10,0.98)_100%)] p-5 shadow-[0_36px_120px_rgba(0,0,0,0.42)] sm:p-10">
+            <div className="grid gap-8 lg:grid-cols-[0.86fr_1.14fr] lg:gap-12">
+              <div>
+                <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
+                  Обсудим ваш объект и предложим аккуратный сценарий запуска
+                </h2>
+                <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
+                  Оставьте контакты, и мы поможем понять, как модернизировать
+                  существующий въезд без лишней сложности и с понятной экономикой.
+                </p>
 
-            <LeadForm />
+                <div className="mt-8 space-y-4">
+                  {[
+                    "Поймём, можно ли дооснастить текущий шлагбаум",
+                    "Подскажем, какой формат подключения подойдёт объекту",
+                    "Объясним, что получит управляющая компания и жители",
+                  ].map((item) => (
+                    <div key={item} className="flex items-start gap-3">
+                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
+                      <p className="text-neutral-300">{item}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="rounded-[28px] border border-white/10 bg-black/25 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-6">
+                <LeadForm
+                  title="Оставить заявку"
+                  description="Ответим, уточним сценарий подключения и предложим вариант под ваш объект."
+                  compact
+                />
+              </div>
+            </div>
           </div>
         </div>
       </section>