"Добавлен frontend с TSX, Tailwind и ЛК

ospabhost/src/components/Footer.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-
-export default function Footer() {
+const Footer: React.FC = () => {
   return (
-    <footer className="bg-gray-900 text-gray-400 py-6 text-center mt-10">
-      <p>© {new Date().getFullYear()} ospab.host — All rights reserved</p>
+    <footer className="bg-gray-900 text-white p-4 text-center">
+      © {new Date().getFullYear()} osapab.host. Все права защищены.
     </footer>
   );
-}
+};
+
+export default Footer;

ospabhost/src/components/Navbar.tsx

@@ -1,18 +1,30 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
-export default function Navbar() {
+interface NavbarProps {
+  user: { email: string } | null;
+  logout: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ user, logout }) => {
   return (
-    <nav className="bg-gray-900 text-white px-6 py-4 flex items-center justify-between shadow-md">
-      <Link to="/" className="text-xl font-bold text-blue-400">
-        ospab.host
-      </Link>
-      <div className="space-x-6">
-        <Link to="/" className="hover:text-blue-400">Home</Link>
-        <Link to="/pricing" className="hover:text-blue-400">Pricing</Link>
-        <Link to="/login" className="hover:text-blue-400">Login</Link>
-        <Link to="/dashboard" className="hover:text-blue-400">Dashboard</Link>
+    <nav className="bg-gray-800 text-white p-4 flex justify-between items-center">
+      <div className="text-xl font-bold">ospab.host</div>
+      <div className="space-x-4">
+        <Link to="/">Главная</Link>
+        <Link to="/pricing">Цены</Link>
+        {user ? (
+          <>
+            <Link to="/dashboard">ЛК</Link>
+            <button onClick={logout} className="bg-red-600 px-2 py-1 rounded">
+              Выйти
+            </button>
+          </>
+        ) : (
+          <Link to="/login">Вход</Link>
+        )}
       </div>
     </nav>
   );
-}
+};
+
+export default Navbar;

ospabhost/src/components/ProtectedRoute.tsx

@@ -0,0 +1,15 @@
+import { Navigate } from "react-router-dom";
+
+interface ProtectedRouteProps {
+  user: { email: string } | null;
+  children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ user, children }) => {
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

ospabhost/src/index.tsx

@@ -8,12 +8,19 @@ import Dashboard from './pages/dashboard/index';
 import './styles/tailwind.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
+
+// Заглушка для функции login
+const login = (email: string) => {
+  // Здесь может быть логика авторизации
+  console.log('Вход для:', email);
+};
+
 root.render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Index />} />
       <Route path="/pricing" element={<Pricing />} />
-      <Route path="/login" element={<Login />} />
+      <Route path="/login" element={<Login login={login} />} />
       <Route path="/dashboard/*" element={<Dashboard />} />
     </Routes>
   </BrowserRouter>

ospabhost/src/pages/dashboard/index.tsx

@@ -1,28 +1,25 @@
-import React from 'react';
-import Navbar from '../../components/Navbar';
-import Footer from '../../components/Footer';
-import Button from '../../components/Button';
+import { Link, Routes, Route } from "react-router-dom";
+import Servers from "./servers";
+import Billing from "./billing";
+import Support from "./support";
 
-export default function Index() {
+const Dashboard: React.FC = () => {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
-      <Navbar />
-
-      <main className="flex-grow flex flex-col items-center justify-center text-center px-6">
-        <h1 className="text-5xl font-extrabold text-gray-900 mb-6">
-          Next-Gen VPS Hosting
-        </h1>
-        <p className="text-lg text-gray-600 max-w-2xl mb-8">
-          Deploy and manage virtual servers with ease. Powered by DigitalOcean and AWS.
-        </p>
-        <div className="space-x-4">
-          <Button>Get Started</Button>
-          {/* Для поддержки variant="secondary" нужно доработать компонент Button */}
-          <Button>View Pricing</Button>
-        </div>
-      </main>
-
-      <Footer />
+    <div>
+      <h1 className="text-3xl font-bold mb-4">Личный кабинет</h1>
+      <div className="flex space-x-4 mb-4">
+        <Link className="underline" to="servers">Сервера</Link>
+        <Link className="underline" to="billing">Биллинг</Link>
+        <Link className="underline" to="support">Поддержка</Link>
+      </div>
+      <Routes>
+        <Route path="servers" element={<Servers />} />
+        <Route path="billing" element={<Billing />} />
+        <Route path="support" element={<Support />} />
+        <Route path="/" element={<div>Выберите раздел</div>} />
+      </Routes>
     </div>
   );
-}
+};
+
+export default Dashboard;

ospabhost/src/pages/dashboard/servers.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+const Servers: React.FC = () => {
+  return <div>Здесь будут ваши VPS</div>;
+};
 
-export default function Servers() {
-  return <div>Your VPS servers list</div>;
-}
+export default Servers;

ospabhost/src/pages/index.tsx

@@ -4,11 +4,11 @@ import Footer from '../components/Footer';
 
 export default function Index() {
   return (
-    <div>
-      <Navbar />
-      <main className="p-10">
-        <h1 className="text-4xl font-bold">Welcome to ospab.host</h1>
-        <p className="mt-4 text-lg">Your VPS hosting control panel</p>
+    <div className="min-h-screen flex flex-col bg-white">
+      <Navbar user={null} logout={() => {}} />
+      <main className="flex-grow p-10">
+        <h1 className="text-4xl font-bold">Добро пожаловать в ospab.host</h1>
+        <p className="mt-4 text-lg">Ваша панель управления VPS-хостингом</p>
       </main>
       <Footer />
     </div>

ospabhost/src/pages/login.tsx

@@ -1,23 +1,47 @@
-import React from 'react';
-import Navbar from '../components/Navbar';
-import Footer from '../components/Footer';
-import Button from '../components/Button';
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface LoginProps {
+  login: (email: string) => void;
+}
+
+const Login: React.FC<LoginProps> = ({ login }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    login(email);
+    navigate("/dashboard");
+  };
 
-export default function Login() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
-      <Navbar />
-
-      <main className="flex-grow flex items-center justify-center px-6">
-        <div className="bg-white shadow-lg rounded-xl p-8 w-full max-w-md">
-          <h1 className="text-2xl font-bold mb-6 text-center">Login</h1>
-          <input className="border p-3 w-full mb-4 rounded-lg" placeholder="Email" />
-          <input className="border p-3 w-full mb-6 rounded-lg" placeholder="Password" type="password"/>
-          <Button>Login</Button>
-        </div>
-      </main>
-
-      <Footer />
+    <div className="max-w-md mx-auto mt-20 p-6 bg-gray-800 text-white rounded">
+      <h1 className="text-2xl font-bold mb-4">Вход</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full p-2 rounded text-black"
+          required
+        />
+        <input
+          type="password"
+          placeholder="Пароль"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full p-2 rounded text-black"
+          required
+        />
+        <button className="w-full bg-blue-600 py-2 rounded font-bold hover:bg-blue-700">
+          Войти
+        </button>
+      </form>
     </div>
   );
-}
+};
+
+export default Login;

ospabhost/src/pages/pricing.tsx

@@ -5,17 +5,17 @@ import Button from '../components/Button';
 
 export default function Pricing() {
   const plans = [
-    { name: "Basic", price: "$5/mo", features: ["1 vCPU", "1GB RAM", "25GB SSD"] },
-    { name: "Standard", price: "$10/mo", features: ["2 vCPU", "2GB RAM", "50GB SSD"] },
-    { name: "Pro", price: "$20/mo", features: ["4 vCPU", "8GB RAM", "100GB SSD"] },
+    { 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"] },
   ];
 
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
-      <Navbar />
+  <Navbar user={null} logout={() => {}} />
 
       <main className="flex-grow px-6 py-12 text-center">
-        <h1 className="text-4xl font-bold mb-6">Choose Your Plan</h1>
+        <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">
@@ -24,7 +24,7 @@ export default function Pricing() {
               <ul className="text-gray-600 mb-6 space-y-2">
                 {plan.features.map(f => <li key={f}>✅ {f}</li>)}
               </ul>
-              <Button>Get {plan.name}</Button>
+              <Button>Заказать</Button>
             </div>
           ))}
         </div>