@mashka818/exam-de-template 1.0.0

package/exam-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/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-guides/commented-code/client/src/App.jsx

@@ -0,0 +1,72 @@
+/**
+ * =============================================================================
+ * App.jsx — МАРШРУТЫ REACT (react-router-dom)
+ * =============================================================================
+ * Каждый пункт задания ДЭ = отдельный path + страница в pages/
+ *
+ *   п.1  /register         → RegisterPage.jsx
+ *   п.2  /login            → LoginPage.jsx
+ *   п.3  /requests         → RequestsPage.jsx (история + кнопка на форму)
+ *   п.4  /requests/form    → RequestFormPage.jsx (форма заявки)
+ *   п.5  /admin            → AdminPage.jsx (только role=admin)
+ *   /    LandingPage.jsx   — лендинг для всех (гость и после входа по логотипу)
+ *
+ * ProtectedRoute role="user"|"admin" — без токена редирект на /login
+ * /requests/new → редирект на /requests/form (старый путь, можно не трогать)
+ * path="*" → на главную /
+ *
+ * НОВАЯ СТРАНИЦА: import + <Route path="/about" element={...} /> — см. GUIDE_PAGES.md §6
+ * БАНКЕТАМ.НЕТ: пути те же; тексты и логика — в pages/, не здесь
+ * =============================================================================
+ */
+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-guides/commented-code/client/src/api.js

@@ -0,0 +1,71 @@
+/**
+ * =============================================================================
+ * HTTP-ЗАПРОСЫ К API (все вызовы бэкенда в одном файле)
+ * =============================================================================
+ * Пути /api/... проксируются Vite на localhost:3001 (vite.config.js).
+ * При смене темы endpoints чаще всего те же; меняют тела запросов в routes на сервере.
+ *
+ * TOKEN_KEY — ключ в localStorage; можно не менять.
+ * БАНКЕТАМ.НЕТ: добавить postReview(requestId, { text }) → POST /api/requests/:id/review
+ *
+ * КАК ДОБАВИТЬ НОВЫЙ ЗАПРОС:
+ *   1) Метод в server/routes/...
+ *   2) Строка в export const api = { ... }
+ *   3) Вызов на странице: await api.myMethod(...)
+ *
+ * Ошибки с сервера: catch (err) { err.data?.errors } — объект полей для формы
+ *                     err.data?.message — одна строка (логин неверный)
+ *
+ * GUIDE_PAGES.md §8 | THEME_BANQUETAM_NET.md
+ * =============================================================================
+ */
+
+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) }),
+  // БАНКЕТАМ.НЕТ: postReview: (id, body) => request(`/requests/${id}/review`, { method: 'POST', body: JSON.stringify(body) }),
+
+  // --- Админ → server/routes/admin.js (п.5) ---
+  // БАНКЕТАМ.НЕТ: adminGetRequests: (params) => request(`/admin/requests?status=${params.status}`)
+  adminGetRequests: () => request('/admin/requests'),
+  adminUpdateStatus: (id, body) =>
+    request(`/admin/requests/${id}/status`, { method: 'PATCH', body: JSON.stringify(body) }),
+};

package/exam-guides/commented-code/client/src/components/FormField.jsx

@@ -0,0 +1,25 @@
+/**
+ * =============================================================================
+ * FormField.jsx — ПОЛЕ ФОРМЫ (label + input + ошибка)
+ * =============================================================================
+ * САМ КОМПОНЕНТ не меняют. Меняют на страницах (RegisterPage, RequestFormPage):
+ *   <FormField label="ФИО" error={errors.fullName}>
+ *     <input ... />
+ *   </FormField>
+ *
+ * error={errors.xxx} — текст с validateRegistration / validateRequestForm (validation.js).
+ * Добавить новое поле: label + children (input/select/textarea) + ключ в errors на странице.
+ *
+ * GUIDE_PAGES.md §2.4, §7.1
+ * =============================================================================
+ */
+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-guides/commented-code/client/src/components/Layout.jsx

@@ -0,0 +1,83 @@
+/**
+ * =============================================================================
+ * LAYOUT — общая обёртка всех страниц (шапка + контент)
+ * =============================================================================
+ * ЗАМЕНИТЕ при другой теме:
+ *   brandName    — название портала («Мой Не Сам» → «Автосервис», «Курсы»…)
+ *   brandTagline — короткий слоган под логотипом
+ *   headerStyles — цвета шапки по разделам (каждый раздел — своя «черта» по заданию)
+ *   logo         — картинка в config/images.js → file: 'logo.png'
+ *
+ * АДАПТИВ (мобильный / ПК):
+ *   Сейчас: max-w-lg — узкая колонка (~390–512px), как макет 390×844.
+ *   Для ПК добавьте lg:max-w-5xl lg:px-8 к header и main (см. RESPONSIVE.md).
+ * БАНКЕТАМ.НЕТ: brandName = 'Банкетам.Нет'; brandTagline = 'Бронирование банкетных залов'.
+ *
+ * variant со страницы: register | login | dashboard | admin | default
+ *   → разный цвет шапки (отличительные черты по заданию)
+ * UserNav — только user + variant dashboard (п.3/п.4 в шапке)
+ * Link to="/" на логотипе — после входа возврат на лендинг
+ *
+ * GUIDE_PAGES.md §2 | RESPONSIVE.md (max-w-lg / lg:max-w-5xl)
+ * =============================================================================
+ */
+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>
+
+      {/* max-w-lg — мобильный макет; lg:max-w-5xl — шире на ПК (см. RESPONSIVE.md) */}
+      <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-guides/commented-code/client/src/components/PageImage.jsx

@@ -0,0 +1,38 @@
+/**
+ * =============================================================================
+ * PageImage.jsx — КАРТИНКА НА СТРАНИЦЕ (единый способ)
+ * =============================================================================
+ * КАК МЕНЯТЬ КАРТИНКУ:
+ *   1) Файл в client/public/images/ (например banner.png)
+ *   2) Запись в client/src/config/images.js: myKey: { file: 'banner.png', alt: '...' }
+ *   3) На странице: <PageImage imageKey="myKey" className="w-full h-40 object-cover" />
+ *
+ * НЕ пишите <img src="/images/..."> напрямую в pages — иначе на экзамене запутаетесь.
+ *
+ * className — размер: h-9 (логотип), h-40 (баннер), rounded-full (аватар в футере).
+ * onError — скрывает битую картинку; при отладке временно закомментируйте.
+ *
+ * GUIDE_PAGES.md §3 | БАНКЕТАМ.НЕТ: slide-1…4, footer-photo-1…3
+ * =============================================================================
+ */
+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-guides/commented-code/client/src/components/ProtectedRoute.jsx

@@ -0,0 +1,35 @@
+/**
+ * =============================================================================
+ * ЗАЩИТА МАРШРУТОВ — только для авторизованных
+ * =============================================================================
+ * role="user"  — обычный заказчик (/requests)
+ * role="admin" — панель админа (/admin)
+ * При другой теме роли те же: user | admin (server/db/schema.sql users.role)
+ * БАНКЕТАМ.НЕТ: user → /requests (личный кабинет), admin → /admin
+ *
+ * loading — пока читается токен из localStorage и вызывается /api/auth/me
+ * !user — гость → /login
+ * user.role !== role — админ зашёл на /requests → редирект на /admin и наоборот
+ *
+ * Менять редко. Новый раздел «только для менеджера» — добавить role в БД + сюда.
+ * =============================================================================
+ */
+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-guides/commented-code/client/src/components/UserNav.jsx

@@ -0,0 +1,33 @@
+/**
+ * =============================================================================
+ * UserNav.jsx — ВКЛАДКИ В ШАПКЕ (только заказчик, variant="dashboard")
+ * =============================================================================
+ * Показывается в Layout.jsx когда user.role === 'user' и variant === 'dashboard'.
+ * NavLink подсвечивает активный раздел (isActive → bg-white/30).
+ *
+ * ЗАМЕНИТЕ: текст ссылок и title (подсказка при наведении).
+ * Пути /requests и /requests/form — по заданию ДЭ, обычно не меняют.
+ *
+ * БАНКЕТАМ.НЕТ: «Личный кабинет» → /requests; «Новое бронирование» → /requests/form
+ * GUIDE_PAGES.md §2.3
+ * =============================================================================
+ */
+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-guides/commented-code/client/src/components/landing/HeroSlider.jsx

@@ -0,0 +1,103 @@
+/**
+ * =============================================================================
+ * HeroSlider.jsx — СЛАЙДЕР НА ЛЕНДИНГЕ (модуль 2 / М2)
+ * =============================================================================
+ * 1) SLIDE_KEYS — ключи из config/images.js (slide1, slide2…)
+ * 2) slideText — заголовок и подзаголовок на каждом слайде
+ * 3) public/images/slide-1.png … — файлы картинок (имена в images.js → file)
+ * 4) setInterval — автопрокрутка (БАНКЕТАМ.НЕТ: 3000 мс, 4 слайда)
+ *
+ * Кнопки ‹ › и точки внизу — переключение вручную (go, setIndex).
+ * БАНКЕТАМ.НЕТ: скопировать <HeroSlider /> в RequestsPage для п.3
+ *
+ * GUIDE_PAGES.md §3.2 | config/images.js (slide1…slide4)
+ * =============================================================================
+ */
+import { useEffect, useState } from 'react';
+import { imageAlt, imageUrl } from '../../config/images.js';
+
+const SLIDE_KEYS = ['slide1', 'slide2', 'slide3']; // БАНКЕТАМ.НЕТ: добавить 'slide4'
+
+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); // БАНКЕТАМ.НЕТ: 3000
+    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>
+  );
+}