init

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