Улучшить мобильное меню и форму заявки, добавить номер лида и заменить middleware на proxy
All checks were successful
Auto Deploy / deploy (push) Successful in 22s
All checks were successful
Auto Deploy / deploy (push) Successful in 22s
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
import LeadStatusSelect from "@/components/lead-status-select";
|
import LeadStatusSelect from "@/components/lead-status-select";
|
||||||
|
import { LeadStatus } from "@prisma/client";
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
@@ -8,6 +9,8 @@ type SearchParams = Promise<{
|
|||||||
status?: string;
|
status?: string;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
|
const leadStatuses = Object.values(LeadStatus);
|
||||||
|
|
||||||
function formatLeadNumber(id: string, createdAt: Date) {
|
function formatLeadNumber(id: string, createdAt: Date) {
|
||||||
const date = new Date(createdAt);
|
const date = new Date(createdAt);
|
||||||
const y = date.getFullYear();
|
const y = date.getFullYear();
|
||||||
@@ -24,7 +27,10 @@ export default async function AdminLeadsPage({
|
|||||||
}) {
|
}) {
|
||||||
const params = await searchParams;
|
const params = await searchParams;
|
||||||
const q = params.q?.trim() || "";
|
const q = params.q?.trim() || "";
|
||||||
const status = params.status?.trim() || "";
|
const statusParam = params.status?.trim() || "";
|
||||||
|
const status = leadStatuses.includes(statusParam as LeadStatus)
|
||||||
|
? (statusParam as LeadStatus)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
const leads = await prisma.lead.findMany({
|
const leads = await prisma.lead.findMany({
|
||||||
where: {
|
where: {
|
||||||
@@ -39,7 +45,7 @@ export default async function AdminLeadsPage({
|
|||||||
],
|
],
|
||||||
}
|
}
|
||||||
: {},
|
: {},
|
||||||
status ? { status: status as any } : {},
|
status ? { status } : {},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
orderBy: { createdAt: "desc" },
|
orderBy: { createdAt: "desc" },
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import LeadForm from "@/components/lead-form";
|
||||||
|
|
||||||
export default function ContactsPage() {
|
export default function ContactsPage() {
|
||||||
return (
|
return (
|
||||||
<main className="bg-neutral-950">
|
<main className="bg-neutral-950">
|
||||||
@@ -84,6 +86,18 @@ export default function ContactsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section className="pb-16 sm:pb-20">
|
||||||
|
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||||
|
<div className="rounded-[32px] border border-white/10 bg-neutral-900 p-6 sm:p-10">
|
||||||
|
<LeadForm
|
||||||
|
id="lead-form"
|
||||||
|
title="Оставить заявку"
|
||||||
|
description="Заполните короткую форму. Мы свяжемся с вами, уточним задачу и предложим подходящий сценарий для объекта."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -29,10 +29,15 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<body className={`${inter.className} bg-neutral-950 text-white`}>
|
<body className={`${inter.className} bg-neutral-950 text-white`}>
|
||||||
<header className="sticky top-0 z-50 border-b border-white/10 bg-black">
|
<header className="sticky top-0 z-50 border-b border-white/10 bg-black/85 backdrop-blur-xl">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
|
<div className="max-w-7xl mx-auto flex items-center justify-between gap-4 px-4 py-3 sm:px-6 sm:py-4">
|
||||||
<Link href="/" className="text-xl sm:text-2xl font-bold">
|
<Link href="/" className="flex flex-col leading-none">
|
||||||
|
<span className="text-lg font-semibold tracking-[-0.03em] sm:text-2xl">
|
||||||
WorkParking
|
WorkParking
|
||||||
|
</span>
|
||||||
|
<span className="mt-1 hidden text-[11px] uppercase tracking-[0.24em] text-neutral-500 sm:block">
|
||||||
|
Smart entry systems
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="hidden md:flex items-center gap-6 text-sm text-neutral-200">
|
<nav className="hidden md:flex items-center gap-6 text-sm text-neutral-200">
|
||||||
@@ -54,27 +59,30 @@ export default function RootLayout({
|
|||||||
{children}
|
{children}
|
||||||
|
|
||||||
<footer className="border-t border-white/10 bg-black">
|
<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="mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-10">
|
||||||
<div className="flex flex-col gap-10 md:flex-row md:items-start md:justify-between">
|
<div className="rounded-[28px] border border-white/10 bg-neutral-950/70 px-5 py-5 shadow-[0_24px_80px_rgba(0,0,0,0.28)] sm:px-8 sm:py-7">
|
||||||
<div className="max-w-md">
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
||||||
<div className="text-white text-xl font-semibold">WorkParking</div>
|
<div className="max-w-xl">
|
||||||
<p className="mt-3 text-sm leading-relaxed text-neutral-400">
|
<div className="text-lg font-semibold tracking-[-0.03em] sm:text-xl">
|
||||||
Апгрейд дворовых шлагбаумов в Москве: въезд и выезд по номеру,
|
WorkParking
|
||||||
приложение для жителей, история проездов и подписка на сервис.
|
</div>
|
||||||
|
<p className="mt-2 max-w-md text-sm leading-relaxed text-neutral-400">
|
||||||
|
Умные системы въезда для дворов, ЖК и управляющих компаний
|
||||||
|
без перегруженного внедрения.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 md:gap-10">
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-[auto_auto_auto] lg:gap-8">
|
||||||
<div>
|
<div>
|
||||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||||
Навигация
|
Навигация
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3 text-sm">
|
<div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm sm:flex sm:flex-col sm:gap-2">
|
||||||
{navLinks.map((link) => (
|
{navLinks.map((link) => (
|
||||||
<Link
|
<Link
|
||||||
key={link.href}
|
key={link.href}
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -83,25 +91,25 @@ export default function RootLayout({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||||
Контакты
|
Контакты
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3 text-sm">
|
<div className="flex flex-col gap-2 text-sm">
|
||||||
<a
|
<a
|
||||||
href="tel:+79999698149"
|
href="tel:+79999698149"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
+7 (999) 969-81-49
|
+7 (999) 969-81-49
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:sale@parkflow.ru"
|
href="mailto:sale@parkflow.ru"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
sale@parkflow.ru
|
sale@parkflow.ru
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:info@parkflow.ru"
|
href="mailto:info@parkflow.ru"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
info@parkflow.ru
|
info@parkflow.ru
|
||||||
</a>
|
</a>
|
||||||
@@ -109,25 +117,25 @@ export default function RootLayout({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||||
Мы в сети
|
Каналы
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3 text-sm">
|
<div className="flex flex-col gap-2 text-sm">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
VK
|
VK
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
Telegram
|
Telegram
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-neutral-300 hover:text-emerald-300 transition-colors"
|
className="text-neutral-300 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
MAX
|
MAX
|
||||||
</a>
|
</a>
|
||||||
@@ -136,11 +144,12 @@ export default function RootLayout({
|
|||||||
</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 className="mt-5 flex flex-col gap-1 border-t border-white/10 pt-4 text-xs text-neutral-500 sm:flex-row sm:items-center sm:justify-between sm:text-sm">
|
||||||
<div>© 2026 WorkParking</div>
|
<div>© 2026 WorkParking</div>
|
||||||
<div>ООО «Пракфлоу» • ИНН 7777773333</div>
|
<div>ООО «Пракфлоу» • ИНН 7777773333</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
121
app/page.tsx
121
app/page.tsx
@@ -1,10 +1,10 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import LeadForm from "@/components/lead-form";
|
import LeadForm from "@/components/lead-form";
|
||||||
|
import BarrierIcon from "@/components/barrier-icon";
|
||||||
import {
|
import {
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Camera,
|
Camera,
|
||||||
Fence,
|
|
||||||
Smartphone,
|
Smartphone,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
@@ -13,31 +13,31 @@ import {
|
|||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<section className="hero-bg min-h-[calc(100vh-73px)] flex items-center">
|
<section className="hero-bg flex min-h-[calc(100vh-65px)] items-center">
|
||||||
<div className="max-w-7xl mx-auto w-full px-4 sm:px-6 py-14 sm:py-20">
|
<div className="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 sm:py-20">
|
||||||
<div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
|
<div className="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
|
||||||
<div>
|
<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">
|
<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">
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
|
<span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
|
||||||
Апгрейд дворовых шлагбаумов в Москве
|
Апгрейд дворовых шлагбаумов в Москве
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
|
<h1 className="text-4xl font-bold leading-[0.98] tracking-[-0.05em] sm:text-5xl lg:text-6xl">
|
||||||
Умный въезд
|
Умный въезд
|
||||||
<br />
|
<br />
|
||||||
для двора, ЖК и УК
|
для двора
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="mt-5 text-base sm:text-lg lg:text-xl text-neutral-300 max-w-2xl leading-relaxed">
|
<p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-neutral-300 sm:mt-5 sm:text-lg lg:text-xl">
|
||||||
Распознавание номера автомобиля, автоматический въезд и выезд,
|
Распознавание номера автомобиля, автоматический въезд и выезд,
|
||||||
приложение для жителей, история проездов, фото с камеры и
|
приложение для жителей, история проездов и удобный контроль
|
||||||
аналитика по подписке.
|
доступа для двора, ЖК, ТСЖ и управляющей компании.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-8 flex flex-col sm:flex-row gap-4">
|
<div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
|
||||||
<Link
|
<Link
|
||||||
href="/pricing"
|
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"
|
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"
|
||||||
>
|
>
|
||||||
Посмотреть тарифы
|
Посмотреть тарифы
|
||||||
<ArrowRight className="w-5 h-5" />
|
<ArrowRight className="w-5 h-5" />
|
||||||
@@ -45,13 +45,13 @@ export default function Home() {
|
|||||||
|
|
||||||
<Link
|
<Link
|
||||||
href="/for-uk"
|
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"
|
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"
|
||||||
>
|
>
|
||||||
Решение для УК
|
Решение для УК
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 grid sm:grid-cols-3 gap-3 text-sm">
|
<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 className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
|
||||||
Въезд и выезд по номеру
|
Въезд и выезд по номеру
|
||||||
</div>
|
</div>
|
||||||
@@ -65,8 +65,8 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-4 sm:p-6 shadow-2xl">
|
<div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-3 shadow-2xl sm:p-6">
|
||||||
<div className="relative h-[260px] sm:h-[360px] lg:h-[460px] w-full overflow-hidden rounded-[22px]">
|
<div className="relative h-[250px] w-full overflow-hidden rounded-[22px] sm:h-[360px] lg:h-[460px]">
|
||||||
<Image
|
<Image
|
||||||
src="/images/barrier.jpg"
|
src="/images/barrier.jpg"
|
||||||
alt="Дворовой въезд со шлагбаумом"
|
alt="Дворовой въезд со шлагбаумом"
|
||||||
@@ -78,13 +78,13 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="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="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Camera className="w-8 h-8 text-emerald-400 mt-1" />
|
<Camera className="mt-1 h-7 w-7 text-emerald-400 sm:h-8 sm:w-8" />
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-neutral-400">Контроль доступа</p>
|
<p className="text-xs text-neutral-400 sm:text-sm">Контроль доступа</p>
|
||||||
<p className="text-2xl font-bold">ANPR-камера</p>
|
<p className="text-lg font-bold sm:text-2xl">ANPR-камера</p>
|
||||||
<p className="text-sm text-neutral-400">
|
<p className="text-xs text-neutral-400 sm:text-sm">
|
||||||
распознавание номера и фото проезда
|
распознавание номера и фото проезда
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,20 +108,20 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="py-16 sm:py-20 bg-neutral-950">
|
<section className="bg-neutral-950 py-12 sm:py-20">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6">
|
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
<div className="max-w-3xl mb-10 sm:mb-14">
|
<div className="mb-8 max-w-3xl sm:mb-14">
|
||||||
<h2 className="text-3xl sm:text-4xl font-bold">
|
<h2 className="text-3xl sm:text-4xl font-bold">
|
||||||
Что входит в апгрейд
|
Что входит в апгрейд
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 text-neutral-400 text-base sm:text-lg">
|
<p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
|
||||||
Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
|
Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
|
||||||
управляемую систему доступа для двора и управляющей компании.
|
управляемую систему доступа для двора и управляющей компании.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
<div className="grid gap-4 md:grid-cols-3 md:gap-6">
|
||||||
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
|
<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" />
|
<Camera className="w-11 h-11 text-emerald-500 mb-5" />
|
||||||
<h3 className="text-xl font-semibold mb-3">Распознавание номера</h3>
|
<h3 className="text-xl font-semibold mb-3">Распознавание номера</h3>
|
||||||
<p className="text-neutral-400 leading-relaxed">
|
<p className="text-neutral-400 leading-relaxed">
|
||||||
@@ -130,8 +130,8 @@ export default function Home() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
|
<div className="rounded-3xl border border-white/10 bg-neutral-900 p-5 sm:p-8">
|
||||||
<Fence className="w-11 h-11 text-emerald-500 mb-5" />
|
<BarrierIcon className="mb-5 h-11 w-11 text-emerald-500" />
|
||||||
<h3 className="text-xl font-semibold mb-3">
|
<h3 className="text-xl font-semibold mb-3">
|
||||||
Управление шлагбаумом
|
Управление шлагбаумом
|
||||||
</h3>
|
</h3>
|
||||||
@@ -141,7 +141,7 @@ export default function Home() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
|
<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" />
|
<Smartphone className="w-11 h-11 text-emerald-500 mb-5" />
|
||||||
<h3 className="text-xl font-semibold mb-3">
|
<h3 className="text-xl font-semibold mb-3">
|
||||||
Приложение и личный доступ
|
Приложение и личный доступ
|
||||||
@@ -155,23 +155,23 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="py-16 sm:py-20 bg-neutral-900">
|
<section className="bg-neutral-900 py-12 sm:py-20">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6">
|
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
<div className="max-w-3xl mb-10 sm:mb-14">
|
<div className="mb-8 max-w-3xl sm:mb-14">
|
||||||
<h2 className="text-3xl sm:text-4xl font-bold">
|
<h2 className="text-3xl sm:text-4xl font-bold">
|
||||||
Два формата подписки
|
Два формата подписки
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 text-neutral-400 text-base sm:text-lg">
|
<p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
|
||||||
Можно начать с базового тарифа и перейти на расширенный, когда
|
Можно начать с базового тарифа и перейти на расширенный, когда
|
||||||
понадобится более глубокая история и аналитика.
|
понадобится более глубокая история и аналитика.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 gap-6">
|
<div className="grid gap-4 lg:grid-cols-2 lg:gap-6">
|
||||||
<div className="rounded-3xl border border-white/10 bg-black/30 p-6 sm:p-8">
|
<div className="rounded-3xl border border-white/10 bg-black/30 p-5 sm:p-8">
|
||||||
<div className="flex items-center justify-between gap-4 mb-6">
|
<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>
|
<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">
|
<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 ₽ / мес
|
10 000 ₽ / мес
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -196,10 +196,10 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl border border-emerald-500/30 bg-emerald-500/5 p-6 sm:p-8">
|
<div className="rounded-3xl border border-emerald-500/30 bg-emerald-500/5 p-5 sm:p-8">
|
||||||
<div className="flex items-center justify-between gap-4 mb-6">
|
<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>
|
<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">
|
<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 ₽ / мес
|
15 000 ₽ / мес
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -227,15 +227,15 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="py-16 sm:py-20 bg-neutral-950">
|
<section className="bg-neutral-950 py-12 sm:py-20">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6">
|
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
<div className="grid lg:grid-cols-2 gap-8 lg:gap-14 items-start">
|
<div className="grid items-start gap-6 lg:grid-cols-2 lg:gap-14">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-3xl sm:text-4xl font-bold mb-6">
|
<h2 className="text-3xl sm:text-4xl font-bold mb-6">
|
||||||
Что получает объект
|
Что получает объект
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-3 sm:space-y-4">
|
||||||
{[
|
{[
|
||||||
"Контроль въезда и выезда по номеру автомобиля",
|
"Контроль въезда и выезда по номеру автомобиля",
|
||||||
"Историю всех событий проезда",
|
"Историю всех событий проезда",
|
||||||
@@ -245,7 +245,7 @@ export default function Home() {
|
|||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div
|
<div
|
||||||
key={item}
|
key={item}
|
||||||
className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4"
|
className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900 px-4 py-3.5 sm:py-4"
|
||||||
>
|
>
|
||||||
<CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
|
<CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
|
||||||
<p className="text-neutral-200">{item}</p>
|
<p className="text-neutral-200">{item}</p>
|
||||||
@@ -254,36 +254,36 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
|
<div className="rounded-[28px] border border-white/10 bg-neutral-900 p-5 sm:p-8">
|
||||||
<h3 className="text-2xl font-semibold mb-5">
|
<h3 className="text-2xl font-semibold mb-5">
|
||||||
Для кого подходит решение
|
Для кого подходит решение
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className="space-y-4 text-neutral-300">
|
<div className="space-y-4 text-neutral-300">
|
||||||
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
|
<div className="rounded-2xl border border-white/10 bg-black/30 p-4">
|
||||||
Дворы многоквартирных домов
|
Дворы многоквартирных домов
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
|
<div className="rounded-2xl border border-white/10 bg-black/30 p-4">
|
||||||
Жилые комплексы с закрытым въездом
|
Жилые комплексы с закрытым въездом
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
|
<div className="rounded-2xl border border-white/10 bg-black/30 p-4">
|
||||||
Управляющие компании, ТСЖ и ТСН
|
Управляющие компании, ТСЖ и ТСН
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-2xl bg-black/30 border border-white/10 p-4">
|
<div className="rounded-2xl border border-white/10 bg-black/30 p-4">
|
||||||
Объекты, где нужен простой старт и платное расширение функций
|
Объекты, где нужен простой старт и платное расширение функций
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 flex flex-col sm:flex-row gap-4">
|
<div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
|
||||||
<Link
|
<Link
|
||||||
href="/services"
|
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"
|
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"
|
||||||
>
|
>
|
||||||
Посмотреть услуги
|
Посмотреть услуги
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/pricing"
|
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"
|
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"
|
||||||
>
|
>
|
||||||
Смотреть тарифы
|
Смотреть тарифы
|
||||||
</Link>
|
</Link>
|
||||||
@@ -293,21 +293,20 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="py-16 sm:py-24 bg-gradient-to-b from-neutral-950 to-black">
|
<section className="bg-gradient-to-b from-neutral-950 to-black py-12 sm:py-24">
|
||||||
<div className="max-w-4xl mx-auto px-4 sm:px-6">
|
<div className="mx-auto max-w-4xl px-4 sm:px-6">
|
||||||
<div className="rounded-[32px] border border-white/10 bg-neutral-900 p-6 sm:p-10">
|
<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">
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
<h2 className="text-3xl sm:text-4xl font-bold">
|
<h2 className="text-3xl sm:text-4xl font-bold">
|
||||||
Обсудим апгрейд вашего шлагбаума
|
Обсудим апгрейд вашего шлагбаума
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 text-neutral-400 text-base sm:text-lg">
|
<p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
|
||||||
На следующем этапе сюда можно подключить реальную форму и
|
Оставьте контакты и коротко опишите объект. Мы предложим
|
||||||
отправку заявки в backend.
|
подходящий сценарий внедрения и тариф.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<LeadForm />
|
<LeadForm />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import {
|
import {
|
||||||
Camera,
|
Camera,
|
||||||
Fence,
|
|
||||||
Smartphone,
|
Smartphone,
|
||||||
Server,
|
Server,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
import BarrierIcon from "@/components/barrier-icon";
|
||||||
|
|
||||||
export default function ServicesPage() {
|
export default function ServicesPage() {
|
||||||
return (
|
return (
|
||||||
@@ -42,7 +42,7 @@ export default function ServicesPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
|
<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" />
|
<BarrierIcon className="mb-5 h-10 w-10 text-emerald-500" />
|
||||||
<h2 className="text-2xl font-semibold mb-3">
|
<h2 className="text-2xl font-semibold mb-3">
|
||||||
Интеграция с действующим шлагбаумом
|
Интеграция с действующим шлагбаумом
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
25
components/barrier-icon.tsx
Normal file
25
components/barrier-icon.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
export default function BarrierIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path d="M3 20h18" />
|
||||||
|
<path d="M6 20v-7a2 2 0 0 1 2-2h1" />
|
||||||
|
<path d="M9 11h10.5" />
|
||||||
|
<path d="M9 11 20 5" />
|
||||||
|
<path d="M11.3 9.75 13 10.7" />
|
||||||
|
<path d="M14.8 7.85 16.5 8.8" />
|
||||||
|
<path d="M18.3 5.95 20 6.9" />
|
||||||
|
<path d="M6 16h2" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,8 +2,68 @@
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
|
type FieldErrors = {
|
||||||
|
company?: string;
|
||||||
|
phone?: string;
|
||||||
|
email?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function getPhoneDigits(input: string) {
|
||||||
|
return input.replace(/\D/g, "").slice(0, 11);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatRussianPhoneInput(input: string) {
|
||||||
|
const digits = getPhoneDigits(input);
|
||||||
|
|
||||||
|
if (!digits) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
let normalized = digits;
|
||||||
|
|
||||||
|
if (normalized[0] === "8") {
|
||||||
|
normalized = `7${normalized.slice(1)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (normalized[0] !== "7") {
|
||||||
|
normalized = `7${normalized.slice(0, 10)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
normalized = normalized.slice(0, 11);
|
||||||
|
|
||||||
|
const country = "+7";
|
||||||
|
const part1 = normalized.slice(1, 4);
|
||||||
|
const part2 = normalized.slice(4, 7);
|
||||||
|
const part3 = normalized.slice(7, 9);
|
||||||
|
const part4 = normalized.slice(9, 11);
|
||||||
|
|
||||||
|
let result = country;
|
||||||
|
|
||||||
|
if (part1) {
|
||||||
|
result += ` (${part1}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (part1.length === 3) {
|
||||||
|
result += ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (part2) {
|
||||||
|
result += ` ${part2}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (part3) {
|
||||||
|
result += `-${part3}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (part4) {
|
||||||
|
result += `-${part4}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
function normalizePhone(input: string) {
|
function normalizePhone(input: string) {
|
||||||
const digits = input.replace(/\D/g, "");
|
const digits = getPhoneDigits(input);
|
||||||
|
|
||||||
if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
|
if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
|
||||||
return `7${digits.slice(1)}`;
|
return `7${digits.slice(1)}`;
|
||||||
@@ -20,29 +80,70 @@ function isValidEmail(email: string) {
|
|||||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function LeadForm() {
|
type LeadFormProps = {
|
||||||
|
id?: string;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
compact?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function LeadForm({
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
compact = false,
|
||||||
|
}: LeadFormProps) {
|
||||||
const [company, setCompany] = useState("");
|
const [company, setCompany] = useState("");
|
||||||
const [phone, setPhone] = useState("");
|
const [phone, setPhone] = useState("");
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [message, setMessage] = useState("");
|
const [message, setMessage] = useState("");
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [resultMessage, setResultMessage] = useState("");
|
const [resultMessage, setResultMessage] = useState("");
|
||||||
|
const [submitError, setSubmitError] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<FieldErrors>({});
|
||||||
|
|
||||||
|
function validateFields() {
|
||||||
|
const nextErrors: FieldErrors = {};
|
||||||
|
const normalizedPhone = normalizePhone(phone);
|
||||||
|
const trimmedCompany = company.trim();
|
||||||
|
const trimmedEmail = email.trim();
|
||||||
|
|
||||||
|
if (trimmedCompany.length < 2) {
|
||||||
|
nextErrors.company = "Укажите название объекта или компании";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!normalizedPhone) {
|
||||||
|
nextErrors.phone = "Введите российский номер в формате +7";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!trimmedEmail) {
|
||||||
|
nextErrors.email = "Введите email";
|
||||||
|
} else if (!isValidEmail(trimmedEmail)) {
|
||||||
|
nextErrors.email = "Проверьте корректность email";
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
nextErrors,
|
||||||
|
normalizedPhone,
|
||||||
|
trimmedCompany,
|
||||||
|
trimmedEmail,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setResultMessage("");
|
setResultMessage("");
|
||||||
|
setSubmitError(false);
|
||||||
|
|
||||||
const normalizedPhone = normalizePhone(phone);
|
const { nextErrors, normalizedPhone, trimmedCompany, trimmedEmail } =
|
||||||
if (!normalizedPhone) {
|
validateFields();
|
||||||
setResultMessage("Введите корректный российский телефон");
|
|
||||||
return;
|
if (Object.keys(nextErrors).length > 0 || !normalizedPhone) {
|
||||||
}
|
setErrors(nextErrors);
|
||||||
|
|
||||||
if (!isValidEmail(email.trim())) {
|
|
||||||
setResultMessage("Введите корректный email");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setErrors({});
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -52,79 +153,165 @@ export default function LeadForm() {
|
|||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
company,
|
company: trimmedCompany,
|
||||||
phone: normalizedPhone,
|
phone: normalizedPhone,
|
||||||
email,
|
email: trimmedEmail,
|
||||||
message,
|
message: message.trim(),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
|
setSubmitError(true);
|
||||||
setResultMessage(data.error || "Ошибка отправки");
|
setResultMessage(data.error || "Ошибка отправки");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setSubmitError(false);
|
||||||
setResultMessage("Заявка отправлена. Мы свяжемся с вами.");
|
setResultMessage("Заявка отправлена. Мы свяжемся с вами.");
|
||||||
setCompany("");
|
setCompany("");
|
||||||
setPhone("");
|
setPhone("");
|
||||||
setEmail("");
|
setEmail("");
|
||||||
setMessage("");
|
setMessage("");
|
||||||
} catch {
|
} catch {
|
||||||
|
setSubmitError(true);
|
||||||
setResultMessage("Не удалось сохранить заявку");
|
setResultMessage("Не удалось сохранить заявку");
|
||||||
} finally {
|
} finally {
|
||||||
setIsSubmitting(false);
|
setIsSubmitting(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fieldClassName =
|
||||||
|
"w-full rounded-2xl border bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4";
|
||||||
|
const labelClassName = "mb-2 block text-sm font-medium text-neutral-200";
|
||||||
|
const helperClassName = "mt-2 text-xs text-neutral-500";
|
||||||
|
const errorClassName = "mt-2 text-xs text-rose-300";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit} className="mt-8 grid gap-4 sm:gap-5">
|
<div id={id}>
|
||||||
|
{(title || description) && (
|
||||||
|
<div className={compact ? "mb-6" : "mb-8"}>
|
||||||
|
{title && (
|
||||||
|
<h3 className="text-2xl font-semibold tracking-[-0.03em] sm:text-3xl">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
{description && (
|
||||||
|
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-400 sm:text-base">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="grid gap-4 sm:gap-5" noValidate>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="lead-company" className={labelClassName}>
|
||||||
|
Объект или компания
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
|
id="lead-company"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Название ЖК, ТСЖ или УК"
|
placeholder="Например: ЖК Сокол, ТСЖ Север, УК Домсервис"
|
||||||
value={company}
|
value={company}
|
||||||
onChange={(e) => setCompany(e.target.value)}
|
onChange={(e) => {
|
||||||
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"
|
setCompany(e.target.value);
|
||||||
|
if (errors.company) {
|
||||||
|
setErrors((current) => ({ ...current, company: undefined }));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`${fieldClassName} ${errors.company ? "border-rose-400/70" : "border-white/10"}`}
|
||||||
|
autoComplete="organization"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
{errors.company ? (
|
||||||
|
<p className={errorClassName}>{errors.company}</p>
|
||||||
|
) : (
|
||||||
|
<p className={helperClassName}>Укажите ЖК, ТСЖ, УК или адрес объекта</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="lead-phone" className={labelClassName}>
|
||||||
|
Телефон
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
|
id="lead-phone"
|
||||||
type="tel"
|
type="tel"
|
||||||
placeholder="+7 (999) 123-45-67"
|
placeholder="+7 (999) 123-45-67"
|
||||||
value={phone}
|
value={phone}
|
||||||
onChange={(e) => setPhone(e.target.value)}
|
onChange={(e) => {
|
||||||
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"
|
setPhone(formatRussianPhoneInput(e.target.value));
|
||||||
|
if (errors.phone) {
|
||||||
|
setErrors((current) => ({ ...current, phone: undefined }));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`${fieldClassName} ${errors.phone ? "border-rose-400/70" : "border-white/10"}`}
|
||||||
|
inputMode="numeric"
|
||||||
|
autoComplete="tel"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
{errors.phone ? (
|
||||||
|
<p className={errorClassName}>{errors.phone}</p>
|
||||||
|
) : (
|
||||||
|
<p className={helperClassName}>Только мобильные и городские номера РФ</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="lead-email" className={labelClassName}>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
|
id="lead-email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="name@company.ru"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => {
|
||||||
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"
|
setEmail(e.target.value);
|
||||||
|
if (errors.email) {
|
||||||
|
setErrors((current) => ({ ...current, email: undefined }));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`${fieldClassName} ${errors.email ? "border-rose-400/70" : "border-white/10"}`}
|
||||||
|
autoComplete="email"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
{errors.email ? (
|
||||||
|
<p className={errorClassName}>{errors.email}</p>
|
||||||
|
) : (
|
||||||
|
<p className={helperClassName}>Отправим ответ и детали по этому адресу</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="lead-message" className={labelClassName}>
|
||||||
|
Комментарий
|
||||||
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
placeholder="Опишите текущий шлагбаум и что хотите добавить"
|
id="lead-message"
|
||||||
|
placeholder="Коротко опишите объект, текущий шлагбаум и что хотите улучшить"
|
||||||
value={message}
|
value={message}
|
||||||
onChange={(e) => setMessage(e.target.value)}
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
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"
|
className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
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 disabled:opacity-60"
|
className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold transition-colors hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60"
|
||||||
>
|
>
|
||||||
{isSubmitting ? "Отправка..." : "Отправить заявку"}
|
{isSubmitting ? "Отправка..." : "Оставить заявку"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{resultMessage && (
|
{resultMessage && (
|
||||||
<p className="text-sm text-neutral-300">{resultMessage}</p>
|
<p className={`text-sm ${submitError ? "text-rose-300" : "text-emerald-300"}`}>
|
||||||
|
{resultMessage}
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -4,6 +4,7 @@ import Link from "next/link";
|
|||||||
import { Menu, X, Send, MessageCircle, FileText } from "lucide-react";
|
import { Menu, X, Send, MessageCircle, FileText } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
type NavLink = {
|
type NavLink = {
|
||||||
href: string;
|
href: string;
|
||||||
@@ -17,6 +18,7 @@ export default function MobileMenu({
|
|||||||
}) {
|
}) {
|
||||||
const [mobileOpen, setMobileOpen] = useState(false);
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const canUsePortal = typeof window !== "undefined";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mobileOpen) {
|
if (mobileOpen) {
|
||||||
@@ -38,44 +40,49 @@ export default function MobileMenu({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setMobileOpen(true)}
|
onClick={() => setMobileOpen(true)}
|
||||||
className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 hover:bg-white/10 transition-colors"
|
className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 transition-colors hover:bg-white/10 md:hidden"
|
||||||
aria-label="Открыть меню"
|
aria-label="Открыть меню"
|
||||||
>
|
>
|
||||||
<Menu className="w-5 h-5" />
|
<Menu className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{mobileOpen && (
|
{canUsePortal &&
|
||||||
<div className="fixed inset-0 z-[999] md:hidden bg-black">
|
mobileOpen &&
|
||||||
<div className="flex h-full flex-col bg-black">
|
createPortal(
|
||||||
<div className="flex items-center justify-between px-4 py-4 border-b border-white/10">
|
<div className="fixed inset-0 z-[999] w-screen overflow-x-hidden bg-black/90 backdrop-blur-xl md:hidden">
|
||||||
<div>
|
<div className="flex min-h-dvh w-full flex-col bg-[radial-gradient(circle_at_top,#133222_0%,#090909_42%,#050505_100%)]">
|
||||||
<div className="text-2xl font-bold leading-none">WorkParking</div>
|
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
|
||||||
<div className="mt-2 text-sm text-neutral-500">
|
<div className="min-w-0">
|
||||||
Апгрейд дворовых шлагбаумов
|
<div className="text-xl font-semibold leading-none tracking-[-0.03em]">
|
||||||
|
WorkParking
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-neutral-500">
|
||||||
|
Smart entry systems
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 hover:bg-white/5 hover:text-white transition-colors"
|
className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 transition-colors hover:bg-white/5 hover:text-white"
|
||||||
aria-label="Закрыть меню"
|
aria-label="Закрыть меню"
|
||||||
>
|
>
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto px-4 py-6">
|
<div className="flex-1 overflow-y-auto px-4 py-5">
|
||||||
|
<div className="mx-auto w-full max-w-none">
|
||||||
<Link
|
<Link
|
||||||
href="/contacts"
|
href="/contacts#lead-form"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className="mb-8 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-base font-semibold text-white hover:bg-emerald-500 transition-colors"
|
className="mb-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-sm font-semibold text-white transition-colors hover:bg-emerald-500"
|
||||||
>
|
>
|
||||||
<FileText className="w-5 h-5" />
|
<FileText className="w-5 h-5" />
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="flex flex-col">
|
<nav className="flex w-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] px-4 py-1">
|
||||||
{navLinks.map((link) => {
|
{navLinks.map((link) => {
|
||||||
const isActive = pathname === link.href;
|
const isActive = pathname === link.href;
|
||||||
|
|
||||||
@@ -85,7 +92,7 @@ export default function MobileMenu({
|
|||||||
href={link.href}
|
href={link.href}
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={[
|
className={[
|
||||||
"border-b border-white/10 py-4 text-lg transition-colors",
|
"block w-full border-b border-white/10 py-3.5 text-base transition-colors last:border-b-0",
|
||||||
isActive
|
isActive
|
||||||
? "text-emerald-300"
|
? "text-emerald-300"
|
||||||
: "text-white hover:text-emerald-300",
|
: "text-white hover:text-emerald-300",
|
||||||
@@ -97,68 +104,72 @@ export default function MobileMenu({
|
|||||||
})}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className="mt-10">
|
<div className="mt-6 grid w-full gap-4">
|
||||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
<div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
|
||||||
|
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||||
Контакты
|
Контакты
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-3 text-base">
|
<div className="flex flex-col gap-2 text-sm">
|
||||||
<a
|
<a
|
||||||
href="tel:+79999698149"
|
href="tel:+79999698149"
|
||||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
+7 (999) 969-81-49
|
+7 (999) 969-81-49
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:sale@parkflow.ru"
|
href="mailto:sale@parkflow.ru"
|
||||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
sale@parkflow.ru
|
sale@parkflow.ru
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:info@parkflow.ru"
|
href="mailto:info@parkflow.ru"
|
||||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
info@parkflow.ru
|
info@parkflow.ru
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-10">
|
<div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
|
||||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||||
Мы в сети
|
Мы в сети
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-3 text-base">
|
<div className="flex flex-wrap gap-3 text-sm">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
VK
|
VK
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
<Send className="w-4 h-4" />
|
<Send className="h-4 w-4" />
|
||||||
Telegram
|
Telegram
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||||
>
|
>
|
||||||
<MessageCircle className="w-4 h-4" />
|
<MessageCircle className="h-4 w-4" />
|
||||||
MAX
|
MAX
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-10 pb-6 text-sm text-neutral-500">
|
<div className="px-1 text-xs text-neutral-500">
|
||||||
ООО «Пракфлоу» • ИНН 7777773333
|
ООО «Пракфлоу» • ИНН 7777773333
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body,
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ function normalizeHost(host: string) {
|
|||||||
return host.split(":")[0].toLowerCase();
|
return host.split(":")[0].toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function middleware(request: NextRequest) {
|
export async function proxy(request: NextRequest) {
|
||||||
const pathname = request.nextUrl.pathname;
|
const pathname = request.nextUrl.pathname;
|
||||||
const search = request.nextUrl.search;
|
const search = request.nextUrl.search;
|
||||||
const host = normalizeHost(request.headers.get("host") || "");
|
const host = normalizeHost(request.headers.get("host") || "");
|
||||||
@@ -18,7 +18,6 @@ export async function middleware(request: NextRequest) {
|
|||||||
const token = request.cookies.get(getSessionCookieName())?.value;
|
const token = request.cookies.get(getSessionCookieName())?.value;
|
||||||
const isAuthed = await verifySessionToken(token);
|
const isAuthed = await verifySessionToken(token);
|
||||||
|
|
||||||
// Если открыли crm.workparking.ru/ — сразу ведём в CRM
|
|
||||||
if (isCrmHost && pathname === "/") {
|
if (isCrmHost && pathname === "/") {
|
||||||
const url = request.nextUrl.clone();
|
const url = request.nextUrl.clone();
|
||||||
url.pathname = isAuthed ? "/admin/leads" : "/admin/login";
|
url.pathname = isAuthed ? "/admin/leads" : "/admin/login";
|
||||||
@@ -26,7 +25,6 @@ export async function middleware(request: NextRequest) {
|
|||||||
return NextResponse.redirect(url);
|
return NextResponse.redirect(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Если admin открыли не на CRM-домене — уводим на CRM без порта
|
|
||||||
if (isAdminPath && !isCrmHost) {
|
if (isAdminPath && !isCrmHost) {
|
||||||
const url = request.nextUrl.clone();
|
const url = request.nextUrl.clone();
|
||||||
url.protocol = "https";
|
url.protocol = "https";
|
||||||
Reference in New Issue
Block a user