@mashka818/exam-de-template 1.0.0

package/exam-project/client/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "exam-template-client",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.7",
+    "@vitejs/plugin-react": "^4.5.0",
+    "tailwindcss": "^4.1.7",
+    "vite": "^6.3.5"
+  }
+}

package/exam-project/client/public/images/README.txt

@@ -0,0 +1,26 @@
+ПАПКА КАРТИНОК ДЛЯ ФРОНТА (экзамен / Figma)
+============================================
+
+1. Экспортируйте макеты из Figma в PNG (или оставьте SVG-заглушки).
+2. Кладите файлы СЮДА: client/public/images/
+3. В браузере они доступны как: /images/имя-файла.png
+
+Список файлов (имена менять можно, но тогда правьте client/src/config/images.js):
+
+  logo.png              — логотип в шапке (или logo.svg)
+  home-hero.png         — главная страница
+  register-banner.png   — регистрация
+  login-banner.png      — вход
+  requests-banner.png   — список заявок
+  new-request-banner.png — форма новой заявки
+  admin-banner.png      — панель администратора
+  empty-requests.png    — пустой список заявок
+
+  ЛЕНДИНГ (/):
+  slide-1.png … slide-3.png   — слайдер
+  about-cleaning.png            — блок «О клининге»
+  footer-photo-1.png … 3.png    — круглые фото в футере
+
+При смене темы: замените картинки на свои, подписи alt — в config/images.js
+
+БАНКЕТАМ.НЕТ: slide-1…slide-4.png (4 слайда); тексты банкетов в HeroSlider.jsx

package/exam-project/client/public/images/about-cleaning.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="280" viewBox="0 0 400 280">
+  <rect width="400" height="280" rx="16" fill="#e0f2f1"/>
+  <text x="200" y="145" text-anchor="middle" fill="#0f766e" font-family="sans-serif" font-size="13">about-cleaning.png</text>
+</svg>

package/exam-project/client/public/images/admin-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="80" viewBox="0 0 360 80"><rect width="360" height="80" rx="12" fill="#c4b5fd"/><text x="180" y="48" text-anchor="middle" fill="#4c1d95" font-size="12" font-family="sans-serif">admin-banner</text></svg>

package/exam-project/client/public/images/empty-requests.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 200 120"><rect width="200" height="120" rx="8" fill="#f1f5f9"/><text x="100" y="65" text-anchor="middle" fill="#64748b" font-size="10" font-family="sans-serif">=5B 70O2>:</text></svg>

package/exam-project/client/public/images/footer-photo-1.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <rect width="120" height="120" rx="60" fill="#cbd5e1"/>
+  <text x="60" y="65" text-anchor="middle" fill="#64748b" font-size="9" font-family="sans-serif">D>B> 1</text>
+</svg>

package/exam-project/client/public/images/footer-photo-2.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <rect width="120" height="120" rx="60" fill="#cbd5e1"/>
+  <text x="60" y="65" text-anchor="middle" fill="#64748b" font-size="9" font-family="sans-serif">D>B> 2</text>
+</svg>

package/exam-project/client/public/images/footer-photo-3.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <rect width="120" height="120" rx="60" fill="#cbd5e1"/>
+  <text x="60" y="65" text-anchor="middle" fill="#64748b" font-size="9" font-family="sans-serif">D>B> 3</text>
+</svg>

package/exam-project/client/public/images/home-hero.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="160" viewBox="0 0 360 160">
+  <rect width="360" height="160" rx="16" fill="#ccfbf1"/>
+  <text x="180" y="85" text-anchor="middle" fill="#0f766e" font-family="sans-serif" font-size="14">home-hero  70<5=8B5 PNG 87 Figma</text>
+</svg>

package/exam-project/client/public/images/login-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="100" viewBox="0 0 360 100"><rect width="360" height="100" rx="12" fill="#cbd5e1"/><text x="180" y="55" text-anchor="middle" fill="#1e293b" font-size="12" font-family="sans-serif">login-banner</text></svg>

package/exam-project/client/public/images/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+  <rect width="120" height="40" rx="8" fill="#0d9488"/>
+  <text x="60" y="26" text-anchor="middle" fill="white" font-family="sans-serif" font-size="11" font-weight="bold">>9 5 !0<</text>
+</svg>

package/exam-project/client/public/images/new-request-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="80" viewBox="0 0 360 80"><rect width="360" height="80" rx="12" fill="#a5f3fc"/><text x="180" y="48" text-anchor="middle" fill="#155e75" font-size="12" font-family="sans-serif">new-request-banner</text></svg>

package/exam-project/client/public/images/register-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="100" viewBox="0 0 360 100"><rect width="360" height="100" rx="12" fill="#99f6e4"/><text x="180" y="55" text-anchor="middle" fill="#134e4a" font-size="12" font-family="sans-serif">register-banner</text></svg>

package/exam-project/client/public/images/requests-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="80" viewBox="0 0 360 80"><rect width="360" height="80" rx="12" fill="#5eead4"/><text x="180" y="48" text-anchor="middle" fill="#115e59" font-size="12" font-family="sans-serif">requests-banner</text></svg>

package/exam-project/client/public/images/slide-1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs><linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#0d9488"/><stop offset="100%" style="stop-color:#0891b2"/></linearGradient></defs>
+  <rect width="800" height="400" fill="url(#g1)"/>
+  <text x="400" y="200" text-anchor="middle" fill="white" font-family="sans-serif" font-size="22" font-weight="bold">1I89 :;8=8=3</text>
+  <text x="400" y="230" text-anchor="middle" fill="#ccfbf1" font-size="14">slide-1.png  70<5=8B5 87 Figma</text>
+</svg>

package/exam-project/client/public/images/slide-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#0f766e"/>
+  <text x="400" y="200" text-anchor="middle" fill="white" font-family="sans-serif" font-size="22" font-weight="bold">5=5@0;L=0O C1>@:0</text>
+  <text x="400" y="230" text-anchor="middle" fill="#99f6e4" font-size="14">slide-2.png</text>
+</svg>

package/exam-project/client/public/images/slide-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#115e59"/>
+  <text x="400" y="200" text-anchor="middle" fill="white" font-family="sans-serif" font-size="22" font-weight="bold">%8<G8AB:0 :>2@>2 8 <515;8</text>
+  <text x="400" y="230" text-anchor="middle" fill="#a7f3d0" font-size="14">slide-3.png</text>
+</svg>

package/exam-project/client/src/App.jsx

@@ -0,0 +1,52 @@
+
+import { Routes, Route, Navigate } from 'react-router-dom';
+import ProtectedRoute from './components/ProtectedRoute.jsx';
+import LandingPage from './pages/LandingPage.jsx';
+import RegisterPage from './pages/RegisterPage.jsx';
+import LoginPage from './pages/LoginPage.jsx';
+import RequestsPage from './pages/RequestsPage.jsx';
+import RequestFormPage from './pages/RequestFormPage.jsx';
+import AdminPage from './pages/AdminPage.jsx';
+export default function App() {
+  return (
+    <Routes>
+      {/* Лендинг для всех; по клику «Мой Не Сам» — сюда же */}
+      <Route path="/" element={<LandingPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route path="/login" element={<LoginPage />} />
+
+      {/* п.3 — страница создания заявки */}
+      <Route
+        path="/requests"
+        element={
+          <ProtectedRoute role="user">
+            <RequestsPage />
+          </ProtectedRoute>
+        }
+      />
+
+      {/* п.4 — страница формирования заявки */}
+      <Route
+        path="/requests/form"
+        element={
+          <ProtectedRoute role="user">
+            <RequestFormPage />
+          </ProtectedRoute>
+        }
+      />
+
+      {/* старый путь — редирект на п.4 */}
+      <Route path="/requests/new" element={<Navigate to="/requests/form" replace />} />
+
+      <Route
+        path="/admin"
+        element={
+          <ProtectedRoute role="admin">
+            <AdminPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/exam-project/client/src/api.js

@@ -0,0 +1,50 @@
+
+
+const TOKEN_KEY = 'exam_token';
+
+export function getToken() {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token) {
+  if (token) localStorage.setItem(TOKEN_KEY, token);
+  else localStorage.removeItem(TOKEN_KEY);
+}
+
+async function request(path, options = {}) {
+  const headers = { 'Content-Type': 'application/json', ...options.headers };
+  const token = getToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch(`/api${path}`, { ...options, headers });
+  const data = await res.json().catch(() => ({}));
+
+  if (!res.ok) {
+    const err = new Error(data.message || 'Ошибка запроса');
+    err.status = res.status;
+    err.data = data;
+    throw err;
+  }
+  return data;
+}
+
+export const api = {
+  // --- Авторизация → server/routes/auth.js (п.1 register, п.2 login) ---
+  // body register: { login, password, fullName, phone, email }
+  register: (body) => request('/auth/register', { method: 'POST', body: JSON.stringify(body) }),
+  login: (body) => request('/auth/login', { method: 'POST', body: JSON.stringify(body) }),
+  me: () => request('/auth/me'), // проверка токена при F5
+
+  // --- Справочник → server/routes/services.js + db/seed.sql (помещения/услуги) ---
+  getServices: () => request('/services'),
+
+  // --- Заявки пользователя → server/routes/requests.js (п.3 mine, п.4 POST) ---
+  getMyRequests: () => request('/requests/mine'),
+  createRequest: (body) => request('/requests', { method: 'POST', body: JSON.stringify(body) }),
+
+  // --- Админ → server/routes/admin.js (п.5) ---
+
+  adminGetRequests: () => request('/admin/requests'),
+  adminUpdateStatus: (id, body) =>
+    request(`/admin/requests/${id}/status`, { method: 'PATCH', body: JSON.stringify(body) }),
+};

package/exam-project/client/src/components/FormField.jsx

@@ -0,0 +1,11 @@
+
+export default function FormField({ label, error, children, className = '' }) {
+  return (
+    <label className={`block mb-4 ${className}`}>
+      {/* Подпись поля — задаётся на странице (RegisterPage, NewRequestPage…) */}
+      <span className="block text-sm font-medium text-slate-700 mb-1">{label}</span>
+      {children}
+      {error && <p className="field-error">{error}</p>}
+    </label>
+  );
+}

package/exam-project/client/src/components/Layout.jsx

@@ -0,0 +1,61 @@
+
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+import PageImage from './PageImage.jsx';
+import UserNav from './UserNav.jsx';
+
+// --- Тексты бренда (менять на экзамене в первую очередь) ---
+const brandName = 'Мой Не Сам';
+const brandTagline = 'Клининг без хлопот';
+
+// --- Стили шапки: variant передаётся со страницы (register, login, dashboard, admin) ---
+const headerStyles = {
+  default: 'bg-white border-b border-slate-200 text-slate-800',
+  register: 'bg-teal-700 text-white',
+  login: 'bg-slate-800 text-white',
+  dashboard: 'bg-gradient-to-r from-teal-600 to-cyan-600 text-white',
+  admin: 'bg-violet-900 text-white',
+};
+
+export default function Layout({ children, variant = 'default' }) {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      
+      <header className={`${headerStyles[variant]} shadow-sm animate-fade-up`}>
+        <div className="mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-3 flex items-center justify-between gap-3">
+          <Link to="/" className="flex items-center gap-2 min-w-0">
+            {/* Картинка: client/public/images/ + ключ logo в config/images.js */}
+            <PageImage imageKey="logo" className="h-9 lg:h-11 w-auto shrink-0" />
+            <span className="font-semibold text-lg tracking-tight truncate">{brandName}</span>
+          </Link>
+
+          {user ? (
+            <div className="flex items-center gap-2 shrink-0">
+              {user.role === 'user' && variant === 'dashboard' && <UserNav />}
+              <button
+                type="button"
+                onClick={() => {
+                  logout();
+                  navigate('/login');
+                }}
+                className="text-sm opacity-90 hover:opacity-100"
+              >
+                Выйти
+              </button>
+            </div>
+          ) : (
+            <span className="text-xs opacity-80 shrink-0 hidden sm:inline">{brandTagline}</span>
+          )}
+        </div>
+      </header>
+
+      
+      <main className="flex-1 mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-6 lg:py-10">
+        {children}
+      </main>
+    </div>
+  );
+}

package/exam-project/client/src/components/PageImage.jsx

@@ -0,0 +1,22 @@
+
+import { imageAlt, imageUrl } from '../config/images.js';
+
+export default function PageImage({ imageKey, className = 'w-full h-auto rounded-xl object-cover' }) {
+  const src = imageUrl(imageKey);
+  const alt = imageAlt(imageKey);
+
+  if (!src) return null;
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      loading="lazy"
+      /* при ошибке загрузки (забыли положить PNG) — скрываем, чтобы не ломать вёрстку */
+      onError={(e) => {
+        e.currentTarget.style.display = 'none';
+      }}
+    />
+  );
+}

package/exam-project/client/src/components/ProtectedRoute.jsx

@@ -0,0 +1,20 @@
+
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+
+export default function ProtectedRoute({ children, role }) {
+  const { user, loading } = useAuth();
+
+  // Пока AuthContext проверяет токен — не редиректим преждевременно
+  if (loading) {
+    return <p className="text-center text-slate-500 animate-pulse py-12">Загрузка…</p>;
+  }
+
+  if (!user) return <Navigate to="/login" replace />;
+
+  if (role && user.role !== role) {
+    return <Navigate to={user.role === 'admin' ? '/admin' : '/requests'} replace />;
+  }
+
+  return children;
+}

package/exam-project/client/src/components/UserNav.jsx

@@ -0,0 +1,20 @@
+
+import { NavLink } from 'react-router-dom';
+
+const linkClass = ({ isActive }) =>
+  `text-xs px-2 py-1 rounded-md transition ${
+    isActive ? 'bg-white/30 font-semibold' : 'opacity-80 hover:opacity-100'
+  }`;
+
+export default function UserNav() {
+  return (
+    <nav className="flex gap-1 shrink-0" aria-label="Разделы заявок">
+      <NavLink to="/requests" className={linkClass} end title="п.3 Создание заявки">
+        Мои заявки
+      </NavLink>
+      <NavLink to="/requests/form" className={linkClass} title="п.4 Формирование заявки">
+        Новая заявка
+      </NavLink>
+    </nav>
+  );
+}

package/exam-project/client/src/components/landing/HeroSlider.jsx

@@ -0,0 +1,89 @@
+
+import { useEffect, useState } from 'react';
+import { imageAlt, imageUrl } from '../../config/images.js';
+
+const SLIDE_KEYS = ['slide1', 'slide2', 'slide3'];
+
+const slideText = {
+  slide1: { title: 'Общий клининг', subtitle: 'Поддерживаем порядок регулярно' },
+  slide2: { title: 'Генеральная уборка', subtitle: 'Глубокая очистка всех поверхностей' },
+  slide3: { title: 'Химчистка', subtitle: 'Ковры, мебель, деликатные ткани' },
+};
+
+export default function HeroSlider() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((i) => (i + 1) % SLIDE_KEYS.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const key = SLIDE_KEYS[index];
+  const text = slideText[key];
+
+  const go = (dir) => {
+    setIndex((i) => (i + dir + SLIDE_KEYS.length) % SLIDE_KEYS.length);
+  };
+
+  return (
+    <section className="relative w-full overflow-hidden bg-teal-900" aria-label="Слайдер услуг">
+      <div className="relative h-52 sm:h-64 lg:h-80">
+        {SLIDE_KEYS.map((k, i) => (
+          <div
+            key={k}
+            className={`absolute inset-0 transition-opacity duration-700 ${
+              i === index ? 'opacity-100 z-10' : 'opacity-0 z-0'
+            }`}
+          >
+            <img
+              src={imageUrl(k)}
+              alt={imageAlt(k)}
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
+          </div>
+        ))}
+
+        <div className="absolute inset-0 z-20 flex flex-col justify-end p-6 lg:p-10 max-w-5xl mx-auto">
+          <h2 className="text-2xl lg:text-4xl font-bold text-white drop-shadow animate-fade-up">
+            {text.title}
+          </h2>
+          <p className="text-teal-100 text-sm lg:text-base mt-1">{text.subtitle}</p>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => go(-1)}
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-30 w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/40 backdrop-blur"
+          aria-label="Предыдущий слайд"
+        >
+          ‹
+        </button>
+        <button
+          type="button"
+          onClick={() => go(1)}
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-30 w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/40 backdrop-blur"
+          aria-label="Следующий слайд"
+        >
+          ›
+        </button>
+      </div>
+
+      <div className="absolute bottom-3 left-0 right-0 z-30 flex justify-center gap-2">
+        {SLIDE_KEYS.map((k, i) => (
+          <button
+            key={k}
+            type="button"
+            onClick={() => setIndex(i)}
+            className={`h-2 rounded-full transition-all ${
+              i === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
+            }`}
+            aria-label={`Слайд ${i + 1}`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/exam-project/client/src/components/landing/LandingLayout.jsx

@@ -0,0 +1,61 @@
+
+import { Link } from 'react-router-dom';
+import PageImage from '../PageImage.jsx';
+import { useAuth } from '../../context/AuthContext.jsx';
+
+const brandName = 'Мой Не Сам';
+
+export default function LandingLayout({ children }) {
+  const { user, logout } = useAuth();
+
+  const cabinetPath = user?.role === 'admin' ? '/admin' : '/requests';
+  const cabinetLabel = user?.role === 'admin' ? 'Панель админа' : 'Мои заявки';
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      <header className="bg-white border-b border-slate-200 shadow-sm sticky top-0 z-40">
+        <div className="mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-3 flex items-center justify-between gap-3">
+          <Link to="/" className="flex items-center gap-2 min-w-0">
+            <PageImage imageKey="logo" className="h-9 lg:h-11 w-auto shrink-0" />
+            <span className="font-semibold text-lg text-teal-900 truncate">{brandName}</span>
+          </Link>
+
+          {user ? (
+            <div className="flex items-center gap-2 shrink-0 text-sm">
+              <Link
+                to={cabinetPath}
+                className="px-3 py-1.5 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition"
+              >
+                {cabinetLabel}
+              </Link>
+              <button
+                type="button"
+                onClick={logout}
+                className="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 transition"
+              >
+                Выйти
+              </button>
+            </div>
+          ) : (
+            <div className="flex gap-2 shrink-0 text-sm">
+              <Link
+                to="/login"
+                className="px-3 py-1.5 rounded-lg text-slate-700 hover:bg-slate-100 transition"
+              >
+                Вход
+              </Link>
+              <Link
+                to="/register"
+                className="px-3 py-1.5 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition"
+              >
+                Регистрация
+              </Link>
+            </div>
+          )}
+        </div>
+      </header>
+
+      <div className="flex-1 w-full">{children}</div>
+    </div>
+  );
+}

package/exam-project/client/src/components/landing/SiteFooter.jsx

@@ -0,0 +1,61 @@
+
+import { Link } from 'react-router-dom';
+import PageImage from '../PageImage.jsx';
+
+const footerLinks = [
+  { label: 'О компании', to: '/' },
+  { label: 'Услуги', to: '/' },
+  { label: 'Контакты', to: '/' },
+];
+
+export default function SiteFooter() {
+  return (
+    <footer className="bg-slate-900 text-slate-300 mt-auto">
+      <div className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8 py-10">
+        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+          <div>
+            <p className="text-white font-semibold text-lg mb-2">Мой Не Сам</p>
+            <p className="text-sm leading-relaxed max-w-sm">
+              Портал заявок на клининговые услуги. Профессиональная уборка жилых и
+              производственных помещений — вы отдыхаете, мы наводим порядок.
+            </p>
+          </div>
+
+          {/* Фото в футере — замените PNG в public/images/footer-photo-*.png */}
+          <div className="flex gap-4 justify-center lg:justify-end">
+            <PageImage
+              imageKey="footerPhoto1"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+            <PageImage
+              imageKey="footerPhoto2"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+            <PageImage
+              imageKey="footerPhoto3"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+          </div>
+        </div>
+
+        <nav className="flex flex-wrap gap-4 justify-center lg:justify-start mt-8 text-sm">
+          {footerLinks.map((l) => (
+            <Link key={l.label} to={l.to} className="hover:text-white transition">
+              {l.label}
+            </Link>
+          ))}
+          <Link to="/register" className="hover:text-teal-400 transition">
+            Регистрация
+          </Link>
+          <Link to="/login" className="hover:text-teal-400 transition">
+            Вход
+          </Link>
+        </nav>
+
+        <p className="text-center lg:text-left text-xs text-slate-500 mt-8 border-t border-slate-700 pt-6">
+          © {new Date().getFullYear()} Мой Не Сам · Шаблон для ДЭ
+        </p>
+      </div>
+    </footer>
+  );
+}