RS-162

package.json

@@ -63,6 +63,7 @@
     "@types/jquery": "^3.5.29",
     "@types/react-helmet": "^6.1.11",
     "@types/react-slick": "^0.23.13",
-    "gh-pages": "^6.1.1"
+    "gh-pages": "^6.1.1",
+    "tailwindcss": "^3.4.5"
   }
 }

public/tailwind-preflight.css

@@ -0,0 +1,75 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    display: block;
+    vertical-align: middle;
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+*,
+::before,
+::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.google-map * {
+    border-style: none;
+}
+
+
+button, a {
+    display: inline-block;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 10px 0;
+    padding: 0px;
+    height: 50px;
+    border-width: 0;
+    background-color: transparent;
+    color: White;
+    font-family: sans-serif;
+    font-weight: normal;
+    font-size: inherit;
+    text-decoration: none;
+    line-height: 50px;
+    cursor: pointer;
+    font-size: 100%;
+}
+button {
+    #width:0px;
+    overflow: visible;
+}
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}

src/App.tsx

@@ -7,16 +7,17 @@ import {
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Helmet} from 'react-helmet';
 import Menu from "./components/utils/menu/Menu";
-import {News} from "./components/pages/News/News";
-import {Events} from "./components/pages/Events/Events";
+import {NewsPage} from "./components/pages/News/News";
+import {EventsPage} from "./components/pages/Events/Events";
 import {Event} from "./components/pages/Event/Event";
-import {Achievements} from "./components/pages/Achievements/Achievements";
-import {Partners} from "./components/pages/Partners/Partners";
-import {Contacts} from "./components/pages/Contacts/Contacts";
-import {Home} from "./components/pages/Home/Home";
-import {Hardathon} from "./components/pages/Hardathon/Hardathon";
+import {AchievementsPage} from "./components/pages/Achievements/Achievements";
+import {PartnersPage} from "./components/pages/Partners/Partners";
+import {ContactsPage} from "./components/pages/Contacts/Contacts";
+import {HomePage} from "./components/pages/Home/Home";
+import {HardathonPage} from "./components/pages/Hardathon/Hardathon";
 import {ProjectDetails} from "./components/pages/Hardathon/ProjectDetails/ProjectDetails";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import HardathonsPage from "./components/pages/Hardathons";
 
 const queryClient = new QueryClient()
 
@@ -29,14 +30,15 @@ function App() {
                 </Helmet>
                 <Menu/>
                 <Routes>
-                    <Route path="/" element={<Home/>}/>
-                    <Route path="/news" element={<News/>}/>
-                    <Route path="/events" element={<Events/>}/>
+                    <Route path="/" element={<HomePage/>}/>
+                    <Route path="/news" element={<NewsPage/>}/>
+                    <Route path="/events" element={<EventsPage/>}/>
                     <Route path="/events/:id" element={<Event/>}/>
-                    <Route path="/achievements" element={<Achievements/>}/>
-                    <Route path="/partners" element={<Partners/>}/>
-                    <Route path="/contacts" element={<Contacts/>}/>
-                    <Route path="/hardathons" element={<Hardathon/>}/>
+                    <Route path="/achievements" element={<AchievementsPage/>}/>
+                    <Route path="/partners" element={<PartnersPage/>}/>
+                    <Route path="/contacts" element={<ContactsPage/>}/>
+                    <Route path="/hardathons" element={<HardathonsPage/>}/>
+                    <Route path="/hardathons/1" element={<HardathonPage/>}/>
                     {/*<Route path="/hardathons/:id/partners" element={<PartnersHardathon/>} />*/}
                     <Route path="/hardathons/:id/details" element={<ProjectDetails/>}/>
 

src/components/pages/Achievements/Achievements.tsx

@@ -1,36 +1,23 @@
-import React, {useEffect, useState, useRef, Ref} from 'react';
+import React, { useEffect, useState, useRef, Ref } from 'react';
 import "./achievements.scss"
 import Logo from "../../utils/logo/Logo"
 import AchieveCard from "../../utils/achieve-card/AchieveCard";
 import 'react-alice-carousel/lib/alice-carousel.css';
 import down_arrow from "../../assets/icons/arrow.svg";
-import axios from "axios";
-import {AppConfig} from "../../../core";
+import { useQuery } from '@tanstack/react-query';
+import { Achievement } from '../../../domain/entities/achievements';
+import { achievementsList } from '../../../shared/apis/achievements';
+import { eventPlaceholder } from '../../../shared/placeholders/achievements';
 
-interface Achievement {
-    id: number;
-    title: string,
-    description: string,
-    photo_album_url: string,
-    link_to_media: string,
-    photo: string,
-    index: number,
-    inputRef: Ref<HTMLDivElement>
-}
-
-export const Achievements = () => {
+export const AchievementsPage = () => {
 
-    const [achievements, setAchievements] = useState<Achievement[]>([]);
+    const { data: achievements} = useQuery<Achievement[]>({
+        queryKey: ['achievement-list'],
+        queryFn: achievementsList,
+        placeholderData: () => [eventPlaceholder],
+    }
+    );
 
-    useEffect(() => {
-        axios.get(`${AppConfig.apiUri}/api/v0/achievements/?page=1`)
-            .then(res => {
-                if (res.data)
-                    setAchievements(res.data.data);
-            }).catch(err => {
-            console.log(err);
-        })
-    }, []);
 
     const InputRefs = useRef<(HTMLDivElement | null)[]>([])
 
@@ -48,10 +35,10 @@ export const Achievements = () => {
 
     return (
         <section className="achievements-page page" id="achievements">
-            <Logo title="достижения"/>
+            <Logo title="достижения" />
             <div className="container-fluid mt-0 h-100 achievements-carousel d-flex justify-content-center px-0">
                 <div className="desktop-carousel-achievements">
-                    {achievements.map((achievement, index) => (
+                    {achievements?.map((achievement, index) => (
                         < AchieveCard
                             title={achievement.title}
                             description={achievement.description}
@@ -65,7 +52,7 @@ export const Achievements = () => {
                     ))}
                 </div>
                 <div className="mobile-carousel-achievements" id="achieve-wrapper">
-                    {achievements.map((achievement, index) => (
+                    {achievements?.map((achievement, index) => (
                         <AchieveCard
                             title={achievement.title}
                             description={achievement.description}
@@ -78,10 +65,10 @@ export const Achievements = () => {
                         />
                     ))}
                     <button className={"btn b-0 p-0 bg-transparent swap-card"} onClick={swapHandler}>
-                        <img src={down_arrow} alt="down-arrow"/>
+                        <img src={down_arrow} alt="down-arrow" />
                     </button>
                 </div>
             </div>
         </section>
     )
-}
+}

src/components/pages/Contacts/Contacts.tsx

@@ -8,7 +8,7 @@ import React from "react";
 
 
 
-export const Contacts = () => {
+export const ContactsPage = () => {
 
     const items = [
         <div className={"card mx-auto w-100 my-auto"}>