events page desktop

src/App.tsx

@@ -10,6 +10,7 @@ import Footer from "./components/global/Footer";
 
 // Pages
 import Main from "./pages/Main";
+import Events from "./pages/Events";
 
 const App = () => {
   return (
@@ -18,6 +19,7 @@ const App = () => {
       <div className="inner-body">
         <Routes>
           <Route path="/" element={<Main />} />
+          <Route path="/news" element={<Events />} />
         </Routes>
       </div>
       <Footer />

src/components/global/Nav.tsx

@@ -24,7 +24,7 @@ const Nav = () => {
                 </div>
               </li>
               <li>
-                <Link to={"/"}>Новости и события</Link>
+                <Link to={"/news"}>Новости и события</Link>
               </li>
               <li>
                 <Link to={"/"}>Турниры</Link>

src/components/main/EventsSection.tsx

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from "uuid";
 
 // Components
 import SectionTitle from "../global/SectionTitle";
-import Event from "./Event";
+import Event from "../global/Event";
 
 // Images
 import competition from "../../images/competition.jpg";

src/pages/Events.tsx

@@ -0,0 +1,112 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
+// Images
+import competition from "../images/competition.jpg";
+import competition2 from "../images/competition2.jpg";
+import competition3 from "../images/competition3.jpg";
+
+// Components
+import Event from "../components/global/Event";
+
+// Types
+import { eventProps } from "../types/eventProps";
+
+const eventsData: eventProps[] = [
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition2,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+  {
+    image: competition3,
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    time: "02:58",
+    date: "16.12.2021",
+  },
+];
+
+const Events = () => {
+  return (
+    <main className="events-page">
+      <div className="container">
+        <div className="events-page-inner">
+          {eventsData.map((evnt) => {
+            return (
+              <Event
+                key={uuidv4()}
+                image={evnt.image}
+                text={evnt.text}
+                time={evnt.time}
+                date={evnt.date}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Events;

src/styles/_event.scss

@@ -0,0 +1,48 @@
+.event {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  padding-bottom: 1.6rem;
+  border-bottom: 0.1rem solid $base-green;
+}
+
+.event-img {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.event-top {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.event-date {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.6rem;
+}
+
+.event-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+
+  img {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+}
+
+.event-bottom {
+  p {
+    font-size: 1.6rem;
+    font-weight: bold;
+  }
+}

src/styles/_events.scss

@@ -0,0 +1,8 @@
+.events-page-inner {
+  padding: 8rem 0;
+  padding-bottom: 16rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 7rem;
+  row-gap: 3.2rem;
+}

src/styles/_main.scss

@@ -106,14 +106,6 @@
   padding-bottom: 8rem;
 }
 
-.event {
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-  padding-bottom: 1.6rem;
-  border-bottom: 0.1rem solid $base-green;
-}
-
 .events-content {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -121,47 +113,6 @@
   row-gap: 3.2rem;
 }
 
-.event-img {
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.event-top {
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-}
-
-.event-date {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  font-size: 1.6rem;
-}
-
-.event-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-
-  img {
-    width: 0.6rem;
-    height: 0.6rem;
-  }
-}
-
-.event-bottom {
-  p {
-    font-size: 1.6rem;
-    font-weight: bold;
-  }
-}
-
 // Partners
 .partners-inner {
   padding-bottom: 16rem;

src/styles/style.scss

@@ -3,6 +3,8 @@
 @import "./general";
 @import "./section-title";
 @import "./search-table";
+@import "./event";
 @import "./nav";
 @import "./footer";
 @import "./main";
+@import "./events";