rating page desktop

src/App.tsx

@@ -11,6 +11,7 @@ import Footer from "./components/global/Footer";
 // Pages
 import Main from "./pages/Main";
 import Events from "./pages/Events";
+import Rating from "./pages/Rating";
 
 const App = () => {
   return (
@@ -20,6 +21,7 @@ const App = () => {
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/news" element={<Events />} />
+          <Route path="/rating" element={<Rating />} />
         </Routes>
       </div>
       <Footer />

src/components/global/Footer.tsx

@@ -24,10 +24,10 @@ const Footer = () => {
                 <Link to={"/"}>События</Link>
               </li>
               <li>
-                <Link to={"/"}>Новости</Link>
+                <Link to={"/news"}>Новости</Link>
               </li>
               <li>
-                <Link to={"/"}>Рейтинг</Link>
+                <Link to={"/rating"}>Рейтинг</Link>
               </li>
               <li>
                 <Link to={"/"}>Партнеры</Link>

src/components/global/Nav.tsx

@@ -33,8 +33,10 @@ const Nav = () => {
               <li>
                 <Link to={"/"}>Турниры</Link>
               </li>
-              <li>
-                <Link to={"/"}>Рейтинг</Link>
+              <li
+                className={location.pathname.includes("rating") ? "active" : ""}
+              >
+                <Link to={"/rating"}>Рейтинг</Link>
               </li>
               <li>
                 <Link to={"/"}>Контакты</Link>

src/pages/Rating.tsx

@@ -0,0 +1,67 @@
+// Modules
+import { Link } from "react-router-dom";
+
+// Components
+import SectionTitle from "../components/global/SectionTitle";
+import SearchTable from "../components/global/SearchTable";
+
+// Images
+import magnus from "../images/magnus.jpg";
+import hou from "../images/hou.jpg";
+import firouzja from "../images/firouzja.jpg";
+import zhu from "../images/zhu.jpg";
+
+const Rating = () => {
+  return (
+    <main className="rating">
+      <div className="container">
+        <div className="rating-inner">
+          <SectionTitle title={"Лучшие игроки"} />
+          <div className="rating-content">
+            <div className="rating-banner">
+              <Link className="rating-banner-block" to={"/"}>
+                <div className="rating-banner-img">
+                  <img src={magnus} alt="" />
+                </div>
+                <div className="rating-banner-text">
+                  <h4>Carlsen, Magnus</h4>
+                  <h5>2864</h5>
+                </div>
+              </Link>
+              <Link className="rating-banner-block" to={"/"}>
+                <div className="rating-banner-img">
+                  <img src={hou} alt="" />
+                </div>
+                <div className="rating-banner-text">
+                  <h4>Hou, Yifan</h4>
+                  <h5>2650</h5>
+                </div>
+              </Link>
+              <Link className="rating-banner-block" to={"/"}>
+                <div className="rating-banner-img">
+                  <img src={firouzja} alt="" />
+                </div>
+                <div className="rating-banner-text">
+                  <h4>Firouzja, Alireza</h4>
+                  <h5>2804</h5>
+                </div>
+              </Link>
+              <Link className="rating-banner-block" to={"/"}>
+                <div className="rating-banner-img">
+                  <img src={zhu} alt="" />
+                </div>
+                <div className="rating-banner-text">
+                  <h4>Zhu, Jiner</h4>
+                  <h5>2464</h5>
+                </div>
+              </Link>
+            </div>
+            <SearchTable />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Rating;

src/styles/_rating.scss

@@ -0,0 +1,41 @@
+.rating-inner {
+  padding: 8rem 0;
+}
+
+.rating-banner {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+  background: #fff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+}
+
+.rating-banner-block {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+}
+
+.rating-banner-text {
+  padding-bottom: 3.2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+
+  h4 {
+    color: $base-green;
+    font-size: 1.8rem;
+  }
+
+  h5 {
+    font-size: 1.8rem;
+  }
+}
+
+.rating-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8rem;
+}

src/styles/style.scss

@@ -8,3 +8,4 @@
 @import "./footer";
 @import "./main";
 @import "./events";
+@import "./rating";