diff --git a/src/App.tsx b/src/App.tsx
index e418bbb..2e0977f 100644
--- a/src/App.tsx
+++ b/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 = () => {
} />
+ } />
diff --git a/src/components/main/Event.tsx b/src/components/global/Event.tsx
similarity index 100%
rename from src/components/main/Event.tsx
rename to src/components/global/Event.tsx
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index bcb4551..7c66cb0 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -24,7 +24,7 @@ const Nav = () => {
- Новости и события
+ Новости и события
Турниры
diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx
index 51a6bbc..639b05a 100644
--- a/src/components/main/EventsSection.tsx
+++ b/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";
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
new file mode 100644
index 0000000..e748f08
--- /dev/null
+++ b/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 (
+
+
+
+ {eventsData.map((evnt) => {
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default Events;
diff --git a/src/styles/_event.scss b/src/styles/_event.scss
new file mode 100644
index 0000000..ca272f1
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/styles/_events.scss b/src/styles/_events.scss
new file mode 100644
index 0000000..d705bb5
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 1e65816..9449c5a 100644
--- a/src/styles/_main.scss
+++ b/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;
diff --git a/src/styles/style.scss b/src/styles/style.scss
index c4f3638..00986bd 100644
--- a/src/styles/style.scss
+++ b/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";