init

app/about/page.tsx

@@ -0,0 +1,73 @@
+export default function AboutPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-4xl">
+            <p className="text-emerald-300 text-sm mb-4">О компании</p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              WorkParking — решения
+              <br />
+              для умного дворового въезда
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Мы занимаемся апгрейдом дворовых шлагбаумов и внедрением систем
+              доступа для жилых комплексов, дворов, ТСЖ, ТСН и управляющих
+              компаний в Москве.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+          <div className="grid gap-6">
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+              <h2 className="text-2xl font-semibold mb-4">Чем мы занимаемся</h2>
+              <p className="text-neutral-300 leading-relaxed">
+                WorkParking помогает превратить обычный дворовый шлагбаум в
+                современную систему контроля доступа. Мы внедряем въезд и выезд
+                по номеру автомобиля, подключаем приложение для жителей,
+                настраиваем гостевые сценарии, историю проездов, фото с камеры и
+                аналитику по подписке.
+              </p>
+            </div>
+
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+              <h2 className="text-2xl font-semibold mb-4">Наш подход</h2>
+              <p className="text-neutral-300 leading-relaxed">
+                Мы делаем упор не только на оборудование, но и на удобство
+                эксплуатации. Для нас важно, чтобы система была понятной для
+                жителей, полезной для управляющей компании и устойчивой в
+                ежедневной работе. Поэтому мы строим решения, которые можно
+                запускать поэтапно: от базового доступа по номеру до расширенной
+                аналитики и сервисных функций.
+              </p>
+            </div>
+
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+              <h2 className="text-2xl font-semibold mb-4">Для кого мы работаем</h2>
+              <p className="text-neutral-300 leading-relaxed">
+                Наши решения подходят для дворов многоквартирных домов, жилых
+                комплексов, ТСЖ, ТСН и управляющих компаний, которым нужен
+                современный и понятный инструмент управления въездом. Мы можем
+                модернизировать существующий шлагбаум или предложить модель
+                подключения с сервисным оборудованием.
+              </p>
+            </div>
+
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+              <h2 className="text-2xl font-semibold mb-4">Юридическая информация</h2>
+              <div className="space-y-2 text-neutral-300">
+                <div>Компания: ООО «Пракфлоу»</div>
+                <div>ИНН: 7777773333</div>
+                <div>Телефон: +7 (999) 969-81-49</div>
+                <div>Email: sale@parkflow.ru, info@parkflow.ru</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/cases/page.tsx

@@ -0,0 +1,71 @@
+export default function CasesPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-3xl">
+            <p className="text-emerald-300 text-sm mb-4">Кейсы и объекты</p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              Как будут выглядеть кейсы
+              <br />
+              после наполнения
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Пока здесь демо-контент. Позже заменишь его на реальные адреса,
+              фото объектов, конфигурации и результаты внедрения.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 grid md:grid-cols-2 xl:grid-cols-3 gap-6">
+          <article className="rounded-3xl overflow-hidden border border-white/10 bg-neutral-900">
+            <img
+              src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?auto=format&fit=crop&w=1200&q=80"
+              alt="Жилой комплекс"
+              className="h-56 w-full object-cover"
+            />
+            <div className="p-6">
+              <h2 className="text-2xl font-semibold mb-2">ЖК на 2 въезда</h2>
+              <p className="text-neutral-400">
+                Автоматизация въезда и выезда по номеру, приложение и базовая
+                история событий.
+              </p>
+            </div>
+          </article>
+
+          <article className="rounded-3xl overflow-hidden border border-white/10 bg-neutral-900">
+            <img
+              src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1200&q=80"
+              alt="Дворовой шлагбаум"
+              className="h-56 w-full object-cover"
+            />
+            <div className="p-6">
+              <h2 className="text-2xl font-semibold mb-2">Дворовой шлагбаум</h2>
+              <p className="text-neutral-400">
+                Апгрейд существующего въезда без полной замены всей схемы
+                доступа.
+              </p>
+            </div>
+          </article>
+
+          <article className="rounded-3xl overflow-hidden border border-white/10 bg-neutral-900">
+            <img
+              src="https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1200&q=80"
+              alt="Управляющая компания"
+              className="h-56 w-full object-cover"
+            />
+            <div className="p-6">
+              <h2 className="text-2xl font-semibold mb-2">Объект для УК</h2>
+              <p className="text-neutral-400">
+                Расширенная подписка с фото в истории, фильтрами и аналитикой по
+                событиям проезда.
+              </p>
+            </div>
+          </article>
+        </div>
+      </section>
+    </main>
+  );
+}

app/contacts/page.tsx

@@ -0,0 +1,89 @@
+export default function ContactsPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-4xl">
+            <p className="text-emerald-300 text-sm mb-4">Контакты</p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              Свяжитесь с нами
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Если вы хотите обсудить апгрейд дворового шлагбаума, внедрение
+              въезда по номеру автомобиля или подключение сервиса по подписке —
+              свяжитесь с нами удобным способом.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 grid md:grid-cols-2 gap-6">
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <h2 className="text-2xl font-semibold mb-5">Основные контакты</h2>
+            <div className="space-y-4 text-neutral-300">
+              <div>
+                <div className="text-neutral-500 text-sm mb-1">Телефон</div>
+                <a href="tel:+79999698149" className="hover:text-emerald-300">
+                  +7 (999) 969-81-49
+                </a>
+              </div>
+
+              <div>
+                <div className="text-neutral-500 text-sm mb-1">Email для продаж</div>
+                <a
+                  href="mailto:sale@parkflow.ru"
+                  className="hover:text-emerald-300"
+                >
+                  sale@parkflow.ru
+                </a>
+              </div>
+
+              <div>
+                <div className="text-neutral-500 text-sm mb-1">Общий Email</div>
+                <a
+                  href="mailto:info@parkflow.ru"
+                  className="hover:text-emerald-300"
+                >
+                  info@parkflow.ru
+                </a>
+              </div>
+
+              <div>
+                <div className="text-neutral-500 text-sm mb-1">Компания</div>
+                <div>ООО «Пракфлоу»</div>
+              </div>
+
+              <div>
+                <div className="text-neutral-500 text-sm mb-1">ИНН</div>
+                <div>7777773333</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <h2 className="text-2xl font-semibold mb-5">Соцсети и мессенджеры</h2>
+            <div className="space-y-4 text-neutral-300">
+              <a href="#" className="block hover:text-emerald-300">
+                VK
+              </a>
+              <a href="#" className="block hover:text-emerald-300">
+                Telegram
+              </a>
+              <a href="#" className="block hover:text-emerald-300">
+                MAX
+              </a>
+            </div>
+
+            <div className="mt-8 rounded-2xl border border-white/10 bg-black/30 p-5">
+              <p className="text-neutral-400 leading-relaxed">
+                Здесь позже можно добавить форму обратной связи, карту или
+                отдельные контакты для отдела продаж и технической поддержки.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/for-uk/page.tsx

@@ -0,0 +1,61 @@
+import { Building2, CheckCircle2, ShieldCheck, BarChart3 } from "lucide-react";
+
+export default function ForUkPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-3xl">
+            <p className="text-emerald-300 text-sm mb-4">Для управляющих компаний</p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              Решение для УК, ТСЖ и ТСН
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Помогаем перевести дворовой шлагбаум из ручного режима в систему с
+              прозрачной логикой доступа, историей событий и понятной подпиской.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 grid md:grid-cols-2 gap-6">
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <Building2 className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">Единый инструмент</h2>
+            <p className="text-neutral-400">
+              Управление въездом, списками доступа и событиями проезда в одной
+              системе.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <ShieldCheck className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">Контроль территории</h2>
+            <p className="text-neutral-400">
+              Меньше посторонних автомобилей и меньше ручных операций по въезду.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <BarChart3 className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">Аналитика для УК</h2>
+            <p className="text-neutral-400">
+              В расширенном тарифе доступны фильтры, фото в истории и более
+              детальная аналитика проездов.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <CheckCircle2 className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">Поэтапное внедрение</h2>
+            <p className="text-neutral-400">
+              Можно начать с базового функционала и затем перейти на
+              расширенную подписку.
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/globals.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0a0a0a;
+  --foreground: #ffffff;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+@layer utilities {
+  .hero-bg {
+    background: linear-gradient(135deg, #050505 0%, #101712 55%, #12241a 100%);
+  }
+}

app/layout.tsx

@@ -0,0 +1,148 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Link from "next/link";
+import MobileMenu from "@/components/mobile-menu";
+
+const inter = Inter({ subsets: ["latin", "cyrillic"] });
+
+export const metadata: Metadata = {
+  title: "WorkParking — Умные парковки",
+  description:
+    "Апгрейд дворовых шлагбаумов в Москве: въезд и выезд по номеру, приложение, история проездов и подписка на сервис.",
+};
+
+const navLinks = [
+  { href: "/services", label: "Услуги" },
+  { href: "/cases", label: "Кейсы" },
+  { href: "/for-uk", label: "Для УК" },
+  { href: "/pricing", label: "Цены" },
+  { href: "/about", label: "О компании" },
+  { href: "/contacts", label: "Контакты" },
+];
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ru">
+      <body className={`${inter.className} bg-neutral-950 text-white`}>
+        <header className="sticky top-0 z-50 border-b border-white/10 bg-black">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
+            <Link href="/" className="text-xl sm:text-2xl font-bold">
+              WorkParking
+            </Link>
+
+            <nav className="hidden md:flex items-center gap-6 text-sm text-neutral-200">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="hover:text-emerald-300 transition-colors"
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+
+            <MobileMenu navLinks={navLinks} />
+          </div>
+        </header>
+
+        {children}
+
+        <footer className="border-t border-white/10 bg-black">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 py-10 sm:py-12">
+            <div className="flex flex-col gap-10 md:flex-row md:items-start md:justify-between">
+              <div className="max-w-md">
+                <div className="text-white text-xl font-semibold">WorkParking</div>
+                <p className="mt-3 text-sm leading-relaxed text-neutral-400">
+                  Апгрейд дворовых шлагбаумов в Москве: въезд и выезд по номеру,
+                  приложение для жителей, история проездов и подписка на сервис.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 md:gap-10">
+                <div>
+                  <div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
+                    Навигация
+                  </div>
+                  <div className="flex flex-col gap-3 text-sm">
+                    {navLinks.map((link) => (
+                      <Link
+                        key={link.href}
+                        href={link.href}
+                        className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                      >
+                        {link.label}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
+                    Контакты
+                  </div>
+                  <div className="flex flex-col gap-3 text-sm">
+                    <a
+                      href="tel:+79999698149"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      +7 (999) 969-81-49
+                    </a>
+                    <a
+                      href="mailto:sale@parkflow.ru"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      sale@parkflow.ru
+                    </a>
+                    <a
+                      href="mailto:info@parkflow.ru"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      info@parkflow.ru
+                    </a>
+                  </div>
+                </div>
+
+                <div>
+                  <div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
+                    Мы в сети
+                  </div>
+                  <div className="flex flex-col gap-3 text-sm">
+                    <a
+                      href="#"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      VK
+                    </a>
+                    <a
+                      href="#"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      Telegram
+                    </a>
+                    <a
+                      href="#"
+                      className="text-neutral-300 hover:text-emerald-300 transition-colors"
+                    >
+                      MAX
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-10 border-t border-white/10 pt-5 flex flex-col gap-2 text-sm text-neutral-500 md:flex-row md:items-center md:justify-between">
+              <div>© 2026 WorkParking</div>
+              <div>ООО «Пракфлоу» • ИНН 7777773333</div>
+            </div>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -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>
+  );
+}

app/pricing/page.tsx

@@ -0,0 +1,209 @@
+import { CheckCircle2, CircleAlert, Wrench, CreditCard } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-4xl">
+            <p className="text-emerald-300 text-sm mb-4">Тарифы и модель подключения</p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              Стоимость апгрейда
+              <br />
+              дворового шлагбаума
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Можно купить оборудование в собственность или подключить модель с
+              оборудованием от WorkParking по ежемесячной подписке.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="grid xl:grid-cols-2 gap-6">
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+              <div className="flex items-center gap-3 mb-5">
+                <Wrench className="w-8 h-8 text-emerald-500" />
+                <h2 className="text-2xl font-semibold">Покупка оборудования</h2>
+              </div>
+
+              <div className="rounded-2xl bg-black/30 border border-white/10 p-5 mb-6">
+                <div className="text-neutral-400 text-sm mb-2">
+                  Стартовые вложения
+                </div>
+                <div className="text-3xl sm:text-4xl font-bold">
+                  от 150 000 ₽
+                </div>
+                <div className="text-neutral-400 mt-2">
+                  Оборудование и установка. Оборудование принадлежит заказчику.
+                </div>
+              </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" />
+                  Базовая подписка — 10 000 ₽ / мес
+                </div>
+                <div className="flex gap-3">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
+                  Расширенная подписка — 15 000 ₽ / мес
+                </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 gap-3 mb-5">
+                <CreditCard className="w-8 h-8 text-emerald-400" />
+                <h2 className="text-2xl font-semibold">
+                  Оборудование от WorkParking
+                </h2>
+              </div>
+
+              <div className="rounded-2xl bg-black/30 border border-white/10 p-5 mb-6">
+                <div className="text-neutral-400 text-sm mb-2">
+                  Без крупных стартовых вложений
+                </div>
+                <div className="text-3xl sm:text-4xl font-bold">
+                  от 20 000 ₽ / мес
+                </div>
+                <div className="text-neutral-400 mt-2">
+                  Оборудование остаётся в сервисной модели и входит в ежемесячный
+                  платёж.
+                </div>
+              </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" />
+                  Базовый сервис — от 20 000 ₽ / мес
+                </div>
+                <div className="flex gap-3">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
+                  Расширенный сервис — от 30 000 ₽ / мес
+                </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="pb-16 sm:pb-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-10">
+            Подписка на сервис
+          </h2>
+
+          <div className="grid lg:grid-cols-2 gap-6">
+            <div className="rounded-3xl border border-white/10 bg-neutral-900 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">
+                {[
+                  "Въезд по номеру автомобиля",
+                  "Выезд по номеру автомобиля",
+                  "Приложение для жителей",
+                  "Базовые функции доступа",
+                  "Базовая история проездов",
+                ].map((item) => (
+                  <div key={item} className="flex gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
+                    {item}
+                  </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">
+                {[
+                  "Всё из базового тарифа",
+                  "Фото автомобиля в истории проездов",
+                  "Фильтры по событиям и номерам",
+                  "Более подробная аналитика",
+                  "Расширенный контроль и отчётность",
+                ].map((item) => (
+                  <div key={item} className="flex gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="pb-16 sm:pb-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <div className="flex items-start gap-3 mb-6">
+              <CircleAlert className="w-6 h-6 text-emerald-400 mt-1 shrink-0" />
+              <div>
+                <h2 className="text-2xl font-semibold mb-2">
+                  Что происходит при остановке подписки
+                </h2>
+                <p className="text-neutral-400 leading-relaxed">
+                  Мы рекомендуем описывать это мягко и прозрачно: базовая логика
+                  въезда продолжает работать, а сервисные функции становятся
+                  недоступны до возобновления обслуживания.
+                </p>
+              </div>
+            </div>
+
+            <div className="grid lg:grid-cols-2 gap-6">
+              <div className="rounded-2xl border border-white/10 bg-black/30 p-5">
+                <h3 className="text-xl font-semibold mb-4">
+                  Остаётся доступно
+                </h3>
+                <div className="space-y-3 text-neutral-300">
+                  <div>Въезд и выезд по уже сохранённым номерам</div>
+                  <div>Работа текущей локальной конфигурации</div>
+                </div>
+              </div>
+
+              <div className="rounded-2xl border border-white/10 bg-black/30 p-5">
+                <h3 className="text-xl font-semibold mb-4">
+                  Приостанавливается
+                </h3>
+                <div className="space-y-3 text-neutral-300">
+                  <div>Приложение и удалённый доступ</div>
+                  <div>Добавление новых номеров</div>
+                  <div>Гостевые пропуска</div>
+                  <div>Фото в истории, фильтры и аналитика</div>
+                </div>
+              </div>
+            </div>
+
+            <p className="text-neutral-500 text-sm mt-6 leading-relaxed">
+              При длительной неоплате сервис может быть переведён в архивный
+              режим. Повторное подключение, восстановление расширенных функций и
+              сервисных данных может выполняться как отдельная платная услуга.
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/services/page.tsx

@@ -0,0 +1,101 @@
+import {
+  Camera,
+  Fence,
+  Smartphone,
+  Server,
+  CheckCircle2,
+} from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <main className="bg-neutral-950">
+      <section className="hero-bg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="max-w-3xl">
+            <p className="text-emerald-300 text-sm mb-4">
+              Услуги WorkParking
+            </p>
+            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
+              Апгрейд дворовых шлагбаумов
+              <br />
+              под современный доступ
+            </h1>
+            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
+              Мы модернизируем действующий въезд и добавляем распознавание
+              номеров, приложение, историю проездов и подписочные функции.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 sm:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 grid md:grid-cols-2 gap-6">
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <Camera className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">
+              Въезд и выезд по номеру
+            </h2>
+            <p className="text-neutral-400 leading-relaxed">
+              Настраиваем ANPR-камеру для автоматического открытия шлагбаума по
+              номеру автомобиля.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <Fence className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">
+              Интеграция с действующим шлагбаумом
+            </h2>
+            <p className="text-neutral-400 leading-relaxed">
+              Не обязательно менять весь въезд целиком — можно дооснастить
+              текущую точку контроля.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <Smartphone className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">
+              Приложение для жителей
+            </h2>
+            <p className="text-neutral-400 leading-relaxed">
+              Доступ со смартфона, управление гостями и удобный сценарий для
+              постоянных пользователей.
+            </p>
+          </div>
+
+          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <Server className="w-10 h-10 text-emerald-500 mb-5" />
+            <h2 className="text-2xl font-semibold mb-3">
+              История, фото и аналитика
+            </h2>
+            <p className="text-neutral-400 leading-relaxed">
+              В расширенном тарифе доступны фото автомобиля, фильтры по событиям
+              и более детальная аналитика.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="pb-16 sm:pb-20">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6">
+          <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
+            <h2 className="text-3xl font-bold mb-6">Что можем сделать поэтапно</h2>
+            <div className="space-y-4">
+              {[
+                "Подключить въезд и выезд по номеру автомобиля",
+                "Добавить приложение и базовые сценарии доступа",
+                "Включить хранение фото в истории проездов",
+                "Подключить фильтры, отчёты и расширенную аналитику",
+              ].map((item) => (
+                <div key={item} className="flex gap-3">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
+                  <p className="text-neutral-300">{item}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}