fix: competition page

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 CompetitionPreviewPage from "./pages/CompetitionPreviewPage";
-import CompetitionRunnerPage from "./pages/CompetitionRunnerPage";
+import CompetitionsPage from "./pages/Competitions";
+import CompetitionPage from "./pages/Competition";
+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:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        default: "bg-primary text-foreground  hover:bg-primary/80",
         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/CompetitionPreviewPage/index.tsx

@@ -1,108 +0,0 @@
-import { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import Navbar from "@/widgets/Navbar";
-import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
-import { Competition } from "@/shared/types";
-import { mockCompetitions, mockTasks } from "@/shared/mocks/mocks";
-
-const CompetitionPreview = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [competition, setCompetition] = useState<Competition | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchCompetition = async () => {
-      try {
-        setTimeout(() => {
-          const found = mockCompetitions.find((comp) => comp.id === id);
-          setCompetition(found || null);
-          setIsLoading(false);
-        }, 500);
-      } catch (error) {
-        console.error("Error fetching competition:", error);
-        setIsLoading(false);
-      }
-    };
-
-    fetchCompetition();
-  }, [id]);
-
-  const handleBack = () => {
-    navigate(-1);
-  };
-
-  const handleContinue = () => {
-    if (competition?.id) {
-      const competitionTasks = mockTasks[competition.id];
-
-      if (competitionTasks && competitionTasks.length > 0) {
-        const firstTaskId = competitionTasks[0].id;
-        navigate(`/competition/${competition.id}/tasks/${firstTaskId}`);
-      } else {
-        navigate(`/competition/${competition.id}/tasks`);
-      }
-    }
-  };
-
-  return (
-    <>
-      <Navbar />
-      <div className="container mx-auto mt-16 px-4 py-8">
-        <button
-          onClick={handleBack}
-          className="font-hse-sans mb-8 flex items-center text-gray-600"
-        >
-          <ArrowLeft size={16} className="mr-2" />
-          Назад к соревнованиям
-        </button>
-
-        {isLoading ? (
-          <div className="flex h-64 items-center justify-center">
-            <p className="font-hse-sans text-gray-500">Загрузка...</p>
-          </div>
-        ) : competition ? (
-          <div className="mx-auto max-w-5xl overflow-hidden rounded-lg bg-white shadow-lg">
-            <div className="h-80 w-full overflow-hidden">
-              <img
-                src={competition.imageUrl}
-                alt={competition.name}
-                className="h-full w-full object-cover"
-              />
-            </div>
-
-            <div className="p-8">
-              <div className="mb-8 flex items-center justify-between">
-                <h1 className="font-hse-sans mr-6 flex-1 text-3xl font-semibold">
-                  {competition.name}
-                </h1>
-                <Button
-                  className="font-hse-sans min-w-[180px] bg-yellow-400 px-12 text-base text-black hover:bg-yellow-500"
-                  onClick={handleContinue}
-                >
-                  Продолжить
-                </Button>
-              </div>
-
-              <div className="font-hse-sans text-lg leading-relaxed text-gray-700">
-                <p>{competition.description}</p>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="py-12 text-center">
-            <h2 className="font-hse-sans mb-2 text-2xl font-bold">
-              Соревнование не найдено
-            </h2>
-            <p className="font-hse-sans text-gray-600">
-              Запрошенное соревнование не существует или было удалено.
-            </p>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default CompetitionPreview;

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

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import Navbar from "@/widgets/Navbar";
 import { Task, TaskStatus } from "@/shared/types";
 
 const sampleTasks: Task[] = [
@@ -58,8 +57,6 @@ const CompetitionRunnerPage = () => {
 
   return (
     <>
-      <Navbar />
-
       <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">

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:
-      "Проверка глубоких знаний и навыков в анализе данных. Будет несколько творческих заданий со свободным ответом. Задания выполняются индивидуально, вес тура в итоговом результате – 0,5. Этап пройдет онлайн в заданное время, с применением системы прокторинга. На работу дается 240 минут.",
+    description: `Проверка глубоких знаний и навыков в анализе данных.
+Будет несколько творческих заданий со свободным ответом.
+Задания выполняются индивидуально, вес тура в итоговом результате – 0,5.
+Этап пройдет онлайн в заданное время, с применением системы прокторинга.
+На работу дается 240 минут.`,
   },
   {
     id: "2",