feat: added competition preview page model

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

@@ -0,0 +1,115 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import Navbar from "@/modules/Navbar";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Competition, Status } from "@/shared/types/types";
+
+const mockCompetitions: Competition[] = [
+  {
+    id: '1',
+    name: 'Олимпиада DANO 2025. Индивидуальный этап',
+    imageUrl: '/DANO.png',
+    isOlympics: true,
+    status: Status.InProgress,
+    description: 'Проверка глубоких знаний и навыков в анализе данных.
+Будет несколько творческих заданий со свободным ответом
+Задания выполняются индивидуально, вес тура в итоговом результате – 0,5
+Этап пройдет онлайн в заданное время, с применением системы прокторинга
+На работу дается 240 минут'
+  },
+  {
+    id: '2',
+    name: 'Олимпиада DANO 2025. Индивидуальный этап',
+    imageUrl: '/DANO.png',
+    isOlympics: false,
+    status: Status.NotParticipating,
+    description: 'Индивидуальный этап олимпиады DANO 2025 – это уникальная возможность для студентов продемонстрировать свои навыки анализа данных и решения сложных задач. Участники будут работать с реальными наборами данных и применять современные методы машинного обучения и статистического анализа.'
+  },
+];
+
+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 = () => {
+    console.log("Continue to competition:", competition?.id);
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="container mx-auto px-4 py-8 mt-16">
+        <button 
+          onClick={handleBack}
+          className="flex items-center text-gray-600 mb-8 font-hse-sans"
+        >
+          <ArrowLeft size={16} className="mr-2" />
+          Назад к соревнованиям
+        </button>
+
+        {isLoading ? (
+          <div className="flex justify-center items-center h-64">
+            <p className="font-hse-sans text-gray-500">Загрузка...</p>
+          </div>
+        ) : competition ? (
+          <div className="max-w-5xl mx-auto bg-white rounded-lg overflow-hidden shadow-lg">
+            <div className="w-full h-80 overflow-hidden">
+              <img 
+                src={competition.imageUrl} 
+                alt={competition.name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            
+            <div className="p-8">
+              <div className="flex justify-between items-center mb-8">
+                <h1 className="text-3xl font-semibold font-hse-sans mr-6 flex-1">{competition.name}</h1>
+                <Button 
+                  className="bg-yellow-400 hover:bg-yellow-500 text-black font-hse-sans text-base px-12 min-w-[180px]"
+                  onClick={handleContinue}
+                >
+                  Продолжить
+                </Button>
+              </div>
+              
+              <div className="text-gray-700 font-hse-sans text-lg leading-relaxed">
+                <p>{competition.description}</p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <h2 className="text-2xl font-bold mb-2 font-hse-sans">Соревнование не найдено</h2>
+            <p className="text-gray-600 font-hse-sans">Запрошенное соревнование не существует или было удалено.</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CompetitionPreview;

services/frontend/src/pages/CompetitionsPage/components/CompetitionCard/index.tsx

@@ -1,10 +1,11 @@
-import { Competition } from "../../types";
+import { Competition } from "@/shared/types/types";
 import { cn } from "@/shared/lib/utils";
 import {
   Card,
   CardContent,
   CardFooter,
 } from "@/components/ui/card";
+import { useNavigate } from "react-router";
 
 interface CompetitionCardProps {
   competition: Competition;
@@ -12,10 +13,18 @@ interface CompetitionCardProps {
 }
 
 export function CompetitionCard({ competition, className }: CompetitionCardProps) {
-  const { name, imageUrl, isOlympics, status } = competition;
+  const { id, name, imageUrl, isOlympics, status } = competition;
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/competition/${id}`);
+  };
 
   return (
-    <Card className={cn("overflow-hidden h-full", className)}>
+    <Card 
+      className={cn("overflow-hidden h-full", className)}
+      onClick={handleClick}
+    >
       <div className="relative h-48 overflow-hidden">
         <img 
           src={imageUrl} 

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

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
-import { Competition, Status } from './types';
+import { Competition, Status } from '@/shared/types/types';
 import { CompetitionGrid } from './modules/CompetitionGrid';
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import Navbar from './modules/Navbar';
+import Navbar from '@/modules/Navbar';
 
 const mockCompetitions: Competition[] = [
   {

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

@@ -1,4 +1,4 @@
-import { Competition } from "../../types";
+import { Competition } from "@/shared/types/types";
 import { CompetitionCard } from "../../components/CompetitionCard";
 import CompetitionSkeleton from "../../components/CompetitionSkeleton";
 import { cn } from "@/shared/lib/utils";

services/frontend/src/pages/CompetitionsPage/modules/Navbar/index.tsx

@@ -1,24 +0,0 @@
-import { ChevronDown } from "lucide-react";
-
-const Navbar = () => {
-  return (
-    <nav className="bg-white border-b border-gray-200 py-3 px-4 fixed top-0 left-0 right-0 z-10">
-      <div className="container mx-auto flex justify-between items-center">
-        <div className="flex items-center">
-          <div className="bg-black px-3 py-2 rounded font-hse-sans">
-            <span className="font-bold text-yellow-400">DATA</span>
-            <span className="font-bold text-white">RUSH</span>
-          </div>
-        </div>
-        
-        <div className="flex items-center cursor-pointer">
-          <span className="mr-2 font-semibold font-hse-sans">itqdev</span>
-          <ChevronDown size={16} />
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-
-export default Navbar

services/frontend/src/pages/CompetitionsPage/types.ts

@@ -1,13 +0,0 @@
-export enum Status {
-  InProgress = 'В процессе',
-  NotParticipating = 'Не участвую', 
-  Completed = 'Завершено'
-}
-
-export interface Competition {
-  id: string;
-  name: string;
-  imageUrl: string;
-  isOlympics: boolean;
-  status: Status;
-}