427 lines
20 KiB
TypeScript
427 lines
20 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import LeadForm from "@/components/lead-form";
|
||
import BarrierIcon from "@/components/barrier-icon";
|
||
import {
|
||
ArrowRight,
|
||
Camera,
|
||
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 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/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="max-w-4xl text-4xl font-bold leading-[0.98] tracking-[-0.06em] sm:text-5xl lg:text-7xl">
|
||
Умный въезд
|
||
<br />
|
||
для двора
|
||
</h1>
|
||
|
||
<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="/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="h-5 w-5" />
|
||
</Link>
|
||
|
||
<Link
|
||
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">
|
||
{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-[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="Дворовой въезд со шлагбаумом"
|
||
fill
|
||
priority
|
||
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/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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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="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>
|
||
<p className="text-sm text-neutral-400">
|
||
история, фильтры и отчёты по проездам
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-neutral-950 py-12 sm:py-16">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||
<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-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">
|
||
{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="grid gap-4 sm:grid-cols-2">
|
||
{trustCards.map((item) => {
|
||
const Icon = item.icon;
|
||
|
||
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-[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="grid items-start gap-8 lg:grid-cols-[1.02fr_0.98fr] lg:gap-12">
|
||
<div>
|
||
<h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
|
||
Не просто шлагбаум,
|
||
<br />
|
||
а понятный сервис доступа
|
||
</h2>
|
||
|
||
<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/65 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
|
||
>
|
||
<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-[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="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-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"
|
||
>
|
||
Посмотреть услуги
|
||
</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"
|
||
>
|
||
Смотреть тарифы
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
</main>
|
||
);
|
||
}
|