45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import Navbar from "../components/Navbar";
|
||
import { motion } from "framer-motion";
|
||
|
||
const Pricing: React.FC = () => {
|
||
const plans = [
|
||
{ title: "Basic VPS", price: "$5/мес", features: ["1 CPU", "1 GB RAM", "20 GB SSD"] },
|
||
{ title: "Pro VPS", price: "$15/мес", features: ["2 CPU", "4 GB RAM", "50 GB SSD"] },
|
||
{ title: "Enterprise", price: "$30/мес", features: ["4 CPU", "8 GB RAM", "100 GB SSD"] },
|
||
];
|
||
|
||
return (
|
||
<div className="text-gray-800">
|
||
<Navbar />
|
||
|
||
<section className="py-24 bg-gray-100">
|
||
<div className="container mx-auto text-center px-4">
|
||
<h1 className="text-4xl font-bold mb-12">Наши тарифы</h1>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{plans.map((plan, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
className="bg-white rounded-3xl shadow p-6 hover:shadow-2xl transition-all"
|
||
whileHover={{ scale: 1.05 }}
|
||
>
|
||
<h2 className="text-2xl font-bold mb-4">{plan.title}</h2>
|
||
<p className="text-xl mb-4">{plan.price}</p>
|
||
<ul className="mb-6">
|
||
{plan.features.map((f, i) => (
|
||
<li key={i} className="mb-1">{f}</li>
|
||
))}
|
||
</ul>
|
||
<button className="bg-indigo-700 text-white py-2 px-6 rounded-full hover:bg-pink-500 transition-all">
|
||
Выбрать
|
||
</button>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Pricing;
|