added Maria page

devops/package.json

@@ -10,21 +10,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router": "^7.13.0",
-    "tailwindcss": "^4.2.0"
+    "react-router": "^7.13.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.2.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "tailwindcss": "^4.2.0",
     "vite": "^7.3.1"
   }
 }

devops/src/App.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-export default function Главная() {
+export default function App() {
   return (
-    <div>Главная</div>
+    <div>App</div>
   )
 }

devops/src/Components/InexPage.jsx

@@ -1,7 +1,63 @@
-import React from 'react'
+import { NavLink } from "react-router";
 
-export default function InexPage() {
+export default function IndexPage() {
     return (
-        <div>InexPage</div>
-    )
-}
+        <div>
+            <section className="relative min-h-screen flex items-center justify-center">
+                <div className="absolute inset-0 -z-10">
+                    <img src="/main.jpg" alt="NeoGoth Vogue" className="w-full h-full object-cover" />
+                </div>
+
+                <div
+                    className="text-center px-6"
+                >
+                    <h1 className="text-7xl sm:text-8xl md:text-9xl font-bold tracking-tighter text-black drop-shadow-2xl">
+                        Biography
+                    </h1>
+                    <p
+                        className="mt-6 text-lg sm:text-xl md:text-2xl font-light text-black tracking-wide"
+                    >
+                        Our bio Pages
+                    </p>
+                </div>
+            </section>
+
+            <section className="bg-white py-24 lg:py-32">
+                <div className="max-w-screen-2xl mx-auto px-6 md:px-12 lg:px-20">
+
+                    <div
+                        className="text-center mb-20"
+                    >
+                        <h2 className="text-6xl sm:text-7xl md:text-9xl font-bold tracking-tight">
+                            Link to meet
+                        </h2>
+                    </div>
+
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 mb-20 px-4 md:px-8">
+                        <NavLink to='/di'>
+                            <div className="flex flex-col items-center text-center">
+                                <img src="/first.jpeg" alt="Di" className="w-full max-w-lg rounded-xl shadow-2xl" />
+                                <div className="mt-6 max-w-lg">
+                                    <h3 className="text-2xl font-bold">Di</h3>
+                                </div>
+                            </div>
+                        </NavLink>
+
+                        <NavLink to='/maria'>
+                            <div className="flex flex-col items-center text-center">
+                                <img src="/second.jpg" alt="Maria" className="w-full max-w-lg rounded-xl shadow-2xl" />
+                                <div className="mt-6 max-w-lg">
+                                    <h3 className="text-2xl font-bold">Maria</h3>
+                                </div>
+                            </div>
+                        </NavLink>
+
+                    </div>
+
+                </div>
+            </section>
+
+
+        </div>
+    );
+}

devops/src/Components/MariaPage.jsx

@@ -2,6 +2,76 @@ import React from 'react'
 
 export default function MariaPage() {
     return (
-        <div>Maria Page</div>
-    )
-}
+        <div className="min-h-screen bg-white text-black flex flex-col items-center px-5 md:px-8 lg:px-12 py-12 font-sans">
+
+            <h1 className="text-6xl sm:text-8xl md:text-9xl lg:text-[10rem] xl:text-[11rem] font-black leading-none tracking-[-0.03em] uppercase mb-16 md:mb-24 text-center">
+                Maria
+                <span className="block text-5xl sm:text-7xl md:text-8xl lg:text-9xl xl:text-[10rem] mt-[-0.12em]">
+                    Snitko
+                </span>
+                <span className="block text-4xl sm:text-5xl md:text-6xl">.</span>
+            </h1>
+
+            <div className="w-full max-w-6xl flex flex-col md:flex-row items-center md:items-start gap-10 md:gap-16 mb-24">
+                <div className="w-full md:w-1/2">
+                    <img
+                        src="/mariia.jpeg"
+                        alt=""
+                        className="w-full h-auto object-cover"
+                    />
+                </div>
+
+                <div className="w-full md:w-1/2 text-left space-y-4 md:pt-8">
+                    <p className="text-2xl md:text-3xl font-bold">Maria Snitko</p>
+                    <p className="text-lg md:text-xl">Frontend Developer (Full-Stack)</p>
+                    <p className="text-lg md:text-xl">HTML, CSS, JavaScript, TypeScript</p>
+                    <p className="text-lg md:text-xl">React, Next, Vue, Django, Git, ect.</p>
+                    <p className="text-base md:text-lg mt-6 opacity-80">
+                        Создаю быстрые, адаптивные и удобные веб-приложения с чистой архитектурой и продуманным UX.<br />
+                    </p>
+                </div>
+            </div>
+
+            <div className="w-200 h-100 flex flex-col md:flex-row-reverse items-center md:items-start gap-10 md:gap-16 mb-24">
+                <div className="w-full md:w-1/2">
+                    <img
+                        src="/snow.jpg"
+                        alt=""
+                        className="w-full h-auto object-cover"
+                    />
+                </div>
+
+                <div className="w-full md:w-1/2 text-left md:text-right space-y-4 md:pt-8">
+                    <p className="text-2xl md:text-3xl font-bold">Hobbies</p>
+                    <p className="text-lg md:text-xl">Painting</p>
+                    <p className="text-lg md:text-xl">Snowbording</p>
+                    <p className="text-lg md:text-xl">Reading</p>
+                    <p className="text-lg md:text-xl">History and Crime</p>
+                    <p className="text-base md:text-lg mt-6 opacity-80">
+                        Профессионально катаюсь на сноуборде<br />
+                        Выпустилась из художественной школы<br />
+                        Люблю читать дарк-фэнтази и книги в стиле Пелевина<br />
+                        Активно изучаю историю и тру крайм<br />
+                    </p>
+                </div>
+            </div>
+
+            <div className=" mt-40 w-full max-w-5xl text-center mb-16">
+                <p className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
+                    REAL MOMENTS
+                </p>
+                <p className="text-lg md:text-xl max-w-3xl mx-auto opacity-80">
+                    Few moments from my life<br />
+                </p>
+            </div>
+
+            <div className="w-full max-w-6xl grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+                <img src="/1.jpeg" alt="" className="w- h-auto object-cover " />
+                <img src="/2.jpeg" alt="" className="w-full h-auto object-cover " />
+                <img src="/3.jpeg" alt="" className="w-full h-auto object-cover" />
+                <img src="/4.jpeg" alt="" className="w-full h-auto object-cover " />
+            </div>
+
+        </div>
+    );
+}

devops/src/MainLayout.jsx

@@ -4,14 +4,14 @@ import { NavLink } from 'react-router'
 
 export default function MainLayout() {
     return (
-        <div className="container mx-auto">
+        <div className="min-h-screen">
             <header className="flex gap-x-5 justify-end py-4">
                 <NavLink to="/"> Main</NavLink>
                 <NavLink to="/di">Di</NavLink>
                 <NavLink to="/maria">Maria</NavLink>
             </header>
 
-            <main>
+            <main className="flex-1 pt-16">
                 <Outlet />
             </main>
         </div>

devops/src/index.css

@@ -1 +1,5 @@
-@import "tailwind";
+@import "tailwindcss";
+
+.striked {
+  text-decoration: line-through;
+}

devops/src/main.jsx

@@ -1,7 +1,7 @@
 import { RouterProvider } from "react-router";
 import { router } from "./routes";
-import ReactDOM from "react-dom/client"
-
+import ReactDOM from "react-dom/client";
+import "./index.css"
 const root = document.getElementById("root");
 
 ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

devops/vite.config.js

@@ -2,7 +2,9 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
-})
+  plugins: [
+    react(),
+    tailwindcss(),          // ← именно так, без параметров
+  ],
+})