init
This commit is contained in:
deonisii
209
app/pricing/page.tsx
Normal file
209
app/pricing/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user