deonisii/workparking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
deonisii
2026-04-17 03:15:47 +03:00
commit d769ac602b
29 changed files with 8242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
app/page.tsx Normal file
View File

@@ -0,0 +1,333 @@
import Link from "next/link";
import {
ArrowRight,
Camera,
Fence,
Smartphone,
CheckCircle2,
ShieldCheck,
Server,
Building2,
CircleDollarSign,
BarChart3,
} from "lucide-react";
export default function Home() {
return (
<main>
<section className="hero-bg min-h-[calc(100vh-73px)] flex items-center">
<div className="max-w-7xl mx-auto w-full px-4 sm:px-6 py-14 sm:py-20">
<div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
<div>
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300 mb-6">
<span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
Апгрейд дворовых шлагбаумов в Москве
</div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
Умный въезд
<br />
для двора, ЖК и УК
</h1>
<p className="mt-5 text-base sm:text-lg lg:text-xl text-neutral-300 max-w-2xl leading-relaxed">
Распознавание номера автомобиля, автоматический въезд и выезд,
приложение для жителей, история проездов, фото с камеры и
аналитика по подписке.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<Link
href="/pricing"
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold hover:bg-emerald-500 transition-colors"
>
Посмотреть тарифы
<ArrowRight className="w-5 h-5" />
</Link>
<Link
href="/for-uk"
className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/20 px-6 py-4 text-base font-semibold hover:border-white/40 hover:bg-white/5 transition-colors"
>
Решение для УК
</Link>
</div>
<div className="mt-8 grid sm:grid-cols-3 gap-3 text-sm">
<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>
</div>
</div>
<div className="relative">
<div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-4 sm:p-6 shadow-2xl">
<img
src="https://images.unsplash.com/photo-1506521781263-d8422e82f27a?auto=format&fit=crop&w=1400&q=80"
alt="Дворовой въезд со шлагбаумом"
className="h-[260px] sm:h-[360px] lg:h-[460px] w-full rounded-[22px] object-cover"
/>
</div>
<div className="hidden sm:block absolute -left-6 bottom-6 z-20 rounded-2xl border border-white/10 bg-black/85 backdrop-blur px-4 py-4 shadow-xl">
<div className="flex items-start gap-3">
<Camera className="w-8 h-8 text-emerald-400 mt-1" />
<div>
<p className="text-sm text-neutral-400">Контроль доступа</p>
<p className="text-2xl font-bold">ANPR-камера</p>
<p className="text-sm text-neutral-400">
распознавание номера и фото проезда
</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="flex items-start gap-3">
<BarChart3 className="w-8 h-8 text-emerald-400 mt-1" />
<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="py-16 sm:py-20 bg-neutral-950">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="max-w-3xl mb-10 sm:mb-14">
<h2 className="text-3xl sm:text-4xl font-bold">
Что входит в апгрейд
</h2>
<p className="mt-4 text-neutral-400 text-base sm:text-lg">
Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
управляемую систему доступа для двора и управляющей компании.
</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 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">
Камера считывает номер авто и автоматически открывает въезд или
выезд по правилам доступа.
</p>
</div>
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
<Fence 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>
</div>
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 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>
</div>
</div>
</div>
</section>
<section className="py-16 sm:py-20 bg-neutral-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="max-w-3xl mb-10 sm:mb-14">
<h2 className="text-3xl sm:text-4xl font-bold">
Два формата подписки
</h2>
<p className="mt-4 text-neutral-400 text-base sm:text-lg">
Можно начать с базового тарифа и перейти на расширенный, когда
понадобится более глубокая история и аналитика.
</p>
</div>
<div className="grid lg:grid-cols-2 gap-6">
<div className="rounded-3xl border border-white/10 bg-black/30 p-6 sm:p-8">
<div className="flex items-center justify-between gap-4 mb-6">
<h3 className="text-2xl font-semibold">Базовая подписка</h3>
<span className="rounded-full bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 text-emerald-300 text-sm">
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-6 sm:p-8">
<div className="flex items-center justify-between gap-4 mb-6">
<h3 className="text-2xl font-semibold">Расширенная подписка</h3>
<span className="rounded-full bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 text-emerald-300 text-sm">
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="py-16 sm:py-20 bg-neutral-950">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="grid lg:grid-cols-2 gap-8 lg:gap-14 items-start">
<div>
<h2 className="text-3xl sm:text-4xl font-bold mb-6">
Что получает объект
</h2>
<div className="space-y-4">
{[
"Контроль въезда и выезда по номеру автомобиля",
"Историю всех событий проезда",
"Снижение ручной нагрузки на диспетчера и охрану",
"Удобный сценарий доступа для жителей и гостей",
"Основание для дальнейшей аналитики и масштабирования",
].map((item) => (
<div
key={item}
className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4"
>
<CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
<p className="text-neutral-200">{item}</p>
</div>
))}
</div>
</div>
<div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
<h3 className="text-2xl font-semibold mb-5">
Для кого подходит решение
</h3>
<div className="space-y-4 text-neutral-300">
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
Дворы многоквартирных домов
</div>
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
Жилые комплексы с закрытым въездом
</div>
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
Управляющие компании, ТСЖ и ТСН
</div>
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
Объекты, где нужен простой старт и платное расширение функций
</div>
</div>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<Link
href="/services"
className="inline-flex items-center justify-center rounded-2xl bg-white text-black px-6 py-4 font-semibold hover:bg-neutral-200 transition-colors"
>
Посмотреть услуги
</Link>
<Link
href="/pricing"
className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-6 py-4 font-semibold hover:border-white/40 hover:bg-white/5 transition-colors"
>
Смотреть тарифы
</Link>
</div>
</div>
</div>
</div>
</section>
<section className="py-16 sm:py-24 bg-gradient-to-b from-neutral-950 to-black">
<div className="max-w-4xl mx-auto px-4 sm:px-6">
<div className="rounded-[32px] border border-white/10 bg-neutral-900 p-6 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-4 text-neutral-400 text-base sm:text-lg">
На следующем этапе сюда можно подключить реальную форму и
отправку заявки в backend.
</p>
</div>
<form className="mt-8 grid gap-4 sm:gap-5">
<input
type="text"
placeholder="Название ЖК, ТСЖ или УК"
className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
/>
<input
type="tel"
placeholder="+7 (___) ___-__-__"
className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
/>
<textarea
placeholder="Опишите текущий шлагбаум и что хотите добавить: номерной доступ, приложение, история, аналитика"
className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
/>
<button
type="submit"
className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold hover:bg-emerald-500 transition-colors"
>
Отправить заявку
</button>
</form>
</div>
</div>
</section>
</main>
);
}