Добавлена система регистрации, небезопасная

ospabhost/src/pages/pricing.tsx

@@ -1,36 +1,44 @@
-import React from 'react';
-import Navbar from '../components/Navbar';
-import Footer from '../components/Footer';
-import Button from '../components/Button';
+import Navbar from "../components/Navbar";
+import { motion } from "framer-motion";
 
-export default function Pricing() {
+const Pricing: React.FC = () => {
   const plans = [
-    { name: "Мини", price: "200 р/мес", features: ["1 vCPU", "1GB RAM", "25GB SSD"] },
-    { name: "Стандарт", price: "500 р/мес", features: ["2 vCPU", "2GB RAM", "50GB SSD"] },
-    { name: "Профессионал", price: "700 р/мес", features: ["4 vCPU", "8GB RAM", "100GB SSD"] },
+    { 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="min-h-screen flex flex-col bg-gray-50">
-  <Navbar user={null} logout={() => {}} />
+    <div className="text-gray-800">
+      <Navbar />
 
-      <main className="flex-grow px-6 py-12 text-center">
-        <h1 className="text-4xl font-bold mb-6">Выбери свой тариф</h1>
-        <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
-          {plans.map(plan => (
-            <div key={plan.name} className="bg-white shadow-md rounded-xl p-6 hover:shadow-xl transition">
-              <h2 className="text-2xl font-bold mb-4">{plan.name}</h2>
-              <p className="text-3xl font-extrabold text-blue-600 mb-4">{plan.price}</p>
-              <ul className="text-gray-600 mb-6 space-y-2">
-                {plan.features.map(f => <li key={f}>✅ {f}</li>)}
-              </ul>
-              <Button>Заказать</Button>
-            </div>
-          ))}
+      <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>
-      </main>
-
-      <Footer />
+      </section>
     </div>
   );
-}
+};
+
+export default Pricing;