fix: training runner

services/frontend/src/App.tsx

@@ -1,8 +1,8 @@
 import { Routes, Route } from "react-router";
 import "./styles/globals.css";
-import CompetitionsPage from "./pages/CompetitionsPage";
+import CompetitionsPage from "./pages/Competitions";
-import CompetitionPreviewPage from "./pages/CompetitionPreviewPage";
+import CompetitionPage from "./pages/Competition";
-import CompetitionRunnerPage from "./pages/CompetitionRunnerPage";
+import CompetitionRunnerPage from "./pages/CompetitionSession";
 import { NavbarLayout } from "./widgets/navbar-layout";
 
 const App = () => {
@@ -10,12 +10,12 @@ const App = () => {
     <Routes>
       <Route element={<NavbarLayout />}>
         <Route path="/" element={<CompetitionsPage />} />
+        <Route path="/competitions/:id" element={<CompetitionPage />} />
+        <Route
+          path="/competitions/:id/tasks/:taskId"
+          element={<CompetitionRunnerPage />}
+        />
       </Route>
-      <Route path="/competition/:id" element={<CompetitionPreviewPage />} />
-      <Route
-        path="/competition/:id/tasks/:taskId"
-        element={<CompetitionRunnerPage />}
-      />
     </Routes>
   );
 };

services/frontend/src/components/ui/button.tsx

@@ -9,8 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
+        default: "bg-primary text-foreground  hover:bg-primary/80",
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline:
@@ -21,7 +20,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-12 px-5 py-3 has-[>svg]:px-3 text-lg font-semibold",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",

services/frontend/src/pages/Competition/index.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Competition } from "@/shared/types";
+import { mockCompetitions } from "@/shared/mocks/mocks";
+
+const CompetitionPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const [competition] = useState<Competition>(
+    mockCompetitions.find((comp) => comp.id === id)!,
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Link
+        className="font-hse-sans text-muted-foreground flex items-center"
+        to="/"
+      >
+        <ArrowLeft size={16} className="mr-2" />
+        Назад к соревнованиям
+      </Link>
+
+      <div className="flex flex-col gap-6">
+        <div className="aspect-2 h-auto w-full overflow-hidden rounded-xl">
+          <img
+            src={competition.imageUrl}
+            alt={competition.name}
+            className="h-full w-full object-cover object-center"
+          />
+        </div>
+
+        <div className="flex gap-8">
+          <div className="flex flex-1 flex-col gap-5">
+            <h1 className="text-[34px] leading-11 font-semibold text-balance">
+              {competition.name}
+            </h1>
+            <div className="text-xl leading-10 font-normal">
+              {competition.description
+                ?.split("\n")
+                .map((line, i) => <p key={i}>{line}</p>)}
+            </div>
+          </div>
+          <div className="w-96 *:w-full">
+            <Button>Продолжить</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompetitionPage;

services/frontend/src/pages/CompetitionSession/index.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Task } from "@/shared/types";
+import { getTaskBgColor, getTaskTextColor } from "./utils/utils";
+import { mockTasks } from "@/shared/mocks/mocks";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "lucide-react";
+
+const CompetitionRunnerPage = () => {
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
+  const [competitionTitle, setCompetitionTitle] = useState(
+    "Олимпиада DANO 2025. Индивидуальный этап",
+  );
+  const [tasks] = useState<Task[]>(mockTasks);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(
+    taskId || null,
+  );
+  const [answer, setAnswer] = useState("");
+
+  useEffect(() => {
+    if (taskId) {
+      setSelectedTaskId(taskId);
+    } else if (tasks.length > 0) {
+      navigate(`/competition/${id}/tasks/${tasks[0].id}`, { replace: true });
+    }
+  }, [taskId, tasks, id, navigate]);
+
+  const handleTaskClick = (taskId: string) => {
+    if (selectedTaskId !== taskId) {
+      setSelectedTaskId(taskId);
+      navigate(`/competition/${id}/tasks/${taskId}`);
+    }
+  };
+
+  const currentTask = tasks.find((t) => t.id === selectedTaskId);
+
+  const handleSubmit = () => {
+    console.log("Submitting answer:", answer);
+    // Submit logic here
+  };
+
+  const handleHistoryClick = () => {
+    console.log("View history");
+  };
+
+  return (
+<<<<<<< HEAD:services/frontend/src/pages/CompetitionRunnerPage/index.tsx
+    <>      
+      <div className="sticky top-0 z-10 bg-white">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="py-3 text-center">
+            <h1 className="text-lg font-semibold font-hse-sans">{competitionTitle}</h1>
+=======
+    <>
+      <div className="sticky top-16 z-10 border-b border-gray-200 bg-white shadow-sm">
+        <div className="container mx-auto px-4">
+          <div className="py-4">
+            <h1 className="font-hse-sans text-xl font-semibold">
+              {competitionTitle}
+            </h1>
+>>>>>>> 58f493250150ba62ac4f325a0708b96eb88661e9:services/frontend/src/pages/CompetitionSession/index.tsx
+          </div>
+
+          <div className="no-scrollbar flex items-center justify-center gap-2 overflow-x-auto pb-3">
+            {tasks.map((task) => (
+              <div 
+                key={task.id}
+                className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} font-hse-sans flex-shrink-0 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium transition-all hover:brightness-95 ${selectedTaskId === task.id ? "scale-105 transform shadow-md" : ""}`}
+                onClick={() => handleTaskClick(task.id)}
+              >
+                {task.number}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="min-h-screen bg-[#F8F8F8] pb-8">
+        <div className="mx-auto max-w-6xl px-4 py-6">
+          {currentTask ? (
+            <div className="font-hse-sans flex flex-col gap-6 md:flex-row">
+              {/* Left Container - Task Description */}
+              <div className="flex-1 rounded-lg bg-white p-6">
+                <h2 className="mb-4 text-xl font-medium">
+                  Задача {currentTask.number}
+                </h2>
+
+                <div className="prose max-w-none text-gray-700">
+                  <p>
+                    Рассмотрим последовательность чисел 2, 3, 5, 9, 17, 33, 65,
+                    129, ... Каждый член этой последовательности, начиная с
+                    третьего, равен сумме двух предыдущих членов.
+                  </p>
+                  <p className="mt-4">
+                    Найдите сумму первых 15 членов этой последовательности.
+                  </p>
+                  <p className="mt-4">В ответе укажите целое число.</p>
+                </div>
+              </div>
+
+              {/* Right Container - Solution Area */}
+              <div className="flex flex-col gap-4 md:w-[350px]">
+                {/* Solution Status Card */}
+                <div
+                  className={`${getTaskBgColor(currentTask.status)} relative rounded-lg p-4`}
+                >
+                  <div className="flex flex-col">
+                    <span
+                      className={`${getTaskTextColor(currentTask.status)} font-medium`}
+                    >
+                      Решение 12345
+                    </span>
+                    <span
+                      className={`${getTaskTextColor(currentTask.status)} mt-1`}
+                    >
+                      Зачтено 5/10 баллов
+                    </span>
+                  </div>
+                  <div className="absolute right-3 bottom-2 text-xs text-gray-600">
+                    1 марта, 08:41
+                  </div>
+                </div>
+
+                {/* Answer Input */}
+                <div className="rounded-lg bg-white p-4">
+                  <textarea
+                    className="font-hse-sans h-32 w-full rounded-md border border-gray-300 p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    placeholder="Введите ответ"
+                    value={answer}
+                    onChange={(e) => setAnswer(e.target.value)}
+                  />
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex justify-between gap-3">
+                  <Button
+                    variant="outline"
+                    className="font-hse-sans"
+                    onClick={handleHistoryClick}
+                  >
+                    История
+                  </Button>
+                  <Button
+                    className="font-hse-sans bg-yellow-400 text-black hover:bg-yellow-500"
+                    onClick={handleSubmit}
+                  >
+                    Отправить решение
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex h-40 items-center justify-center rounded-lg bg-white">
+              <p className="font-hse-sans text-gray-500">Загрузка задания...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CompetitionRunnerPage;

services/frontend/src/pages/Competitions/modules/CompetitionGrid/index.tsx

@@ -1,5 +1,6 @@
 import { Competition } from "@/shared/types";
 import { CompetitionCard } from "../../components/CompetitionCard";
+import { Link } from "react-router";
 
 interface CompetitionGridProps {
   competitions: Competition[];
@@ -9,7 +10,9 @@ export function CompetitionGrid({ competitions }: CompetitionGridProps) {
   return (
     <div className="grid grid-cols-3 gap-9">
       {competitions.map((competition) => (
-        <CompetitionCard key={competition.id} competition={competition} />
+        <Link key={competition.id} to={`/competitions/${competition.id}`}>
+          <CompetitionCard competition={competition} />
+        </Link>
       ))}
     </div>
   );

services/frontend/src/shared/mocks/mocks.ts

@@ -7,8 +7,11 @@ const mockCompetitions: Competition[] = [
     imageUrl: "/DANO.png",
     isOlympics: true,
     status: CompetitionStatus.InProgress,
-    description:
+    description: `Проверка глубоких знаний и навыков в анализе данных.
-      "Проверка глубоких знаний и навыков в анализе данных. Будет несколько творческих заданий со свободным ответом. Задания выполняются индивидуально, вес тура в итоговом результате – 0,5. Этап пройдет онлайн в заданное время, с применением системы прокторинга. На работу дается 240 минут.",
+Будет несколько творческих заданий со свободным ответом.
+Задания выполняются индивидуально, вес тура в итоговом результате – 0,5.
+Этап пройдет онлайн в заданное время, с применением системы прокторинга.
+На работу дается 240 минут.`,
   },
   {
     id: "2",