209 lines
10 KiB
TypeScript
209 lines
10 KiB
TypeScript
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>
|
||
);
|
||
} |