55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { api } from "../../api/client";
|
||
import { GlassCard } from "../ui/GlassCard";
|
||
import { Button } from "../ui/Button";
|
||
import { Check } from "lucide-react";
|
||
import { Link } from "react-router-dom";
|
||
|
||
interface Tariff { id: number; name: string; duration_days: number; price_rub: number; }
|
||
|
||
export function PricingSection() {
|
||
const [tariffs, setTariffs] = useState<Tariff[]>([]);
|
||
|
||
useEffect(() => {
|
||
api.action("tariffs").then((r) => { if (r.ok) setTariffs(r.tariffs); });
|
||
}, []);
|
||
|
||
const perks = ["Неограниченный трафик", "До 5 устройств", "WireGuard + VLESS", "Поддержка 24/7"];
|
||
|
||
return (
|
||
<section id="pricing" className="py-24 max-w-6xl mx-auto px-4">
|
||
<h2 className="text-4xl font-bold text-center mb-4">Тарифы</h2>
|
||
<p className="text-white/40 text-center mb-12">Без скрытых платежей</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 justify-items-center">
|
||
{tariffs.map((t, i) => {
|
||
const popular = i === 1;
|
||
return (
|
||
<GlassCard key={t.id} className={`w-full max-w-xs relative ${popular ? "border-accent/40 bg-accent/5" : ""}`}>
|
||
{popular && (
|
||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-accent text-xs font-bold">
|
||
Популярный
|
||
</div>
|
||
)}
|
||
<div className="text-white/50 text-sm mb-2">{t.name}</div>
|
||
<div className="text-4xl font-black mb-1">{t.price_rub} <span className="text-xl text-white/40">₽</span></div>
|
||
<div className="text-sm text-white/30 mb-5">{t.duration_days} дней</div>
|
||
<ul className="space-y-2 mb-6">
|
||
{perks.map((p) => (
|
||
<li key={p} className="flex items-center gap-2 text-sm text-white/70">
|
||
<Check size={15} className="text-green-400 shrink-0" /> {p}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Link to="/register">
|
||
<Button className="w-full" variant={popular ? "primary" : "secondary"}>
|
||
Выбрать
|
||
</Button>
|
||
</Link>
|
||
</GlassCard>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|