diff --git a/src/components/main/Event.tsx b/src/components/main/Event.tsx
new file mode 100644
index 0000000..eaadef5
--- /dev/null
+++ b/src/components/main/Event.tsx
@@ -0,0 +1,32 @@
+// Modules
+import { Link } from "react-router-dom";
+
+// Icons
+import divider from "../../icons/divider.svg";
+
+// Types
+import { eventProps } from "../../types/eventProps";
+
+const Event = ({ image, time, date, text }: eventProps) => {
+ return (
+
+
+
+

+
+
+
{time}
+
+
+
+
{date}
+
+
+
+
+ );
+};
+
+export default Event;
diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx
new file mode 100644
index 0000000..ad5b529
--- /dev/null
+++ b/src/components/main/EventsSection.tsx
@@ -0,0 +1,79 @@
+// Modules
+
+// Components
+import SectionTitle from "../global/SectionTitle";
+import Event from "./Event";
+
+// Images
+import competition from "../../images/competition.jpg";
+import competition2 from "../../images/competition2.jpg";
+import competition3 from "../../images/competition3.jpg";
+
+// 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",
+ },
+];
+
+const EventsSection = () => {
+ return (
+
+
+
+
+
+ {eventsData.map((evnt, id) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default EventsSection;
diff --git a/src/icons/divider.svg b/src/icons/divider.svg
new file mode 100644
index 0000000..2b05b40
--- /dev/null
+++ b/src/icons/divider.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/competition.jpg b/src/images/competition.jpg
new file mode 100644
index 0000000..62d54f3
Binary files /dev/null and b/src/images/competition.jpg differ
diff --git a/src/images/competition2.jpg b/src/images/competition2.jpg
new file mode 100644
index 0000000..70208b2
Binary files /dev/null and b/src/images/competition2.jpg differ
diff --git a/src/images/competition3.jpg b/src/images/competition3.jpg
new file mode 100644
index 0000000..c67a338
Binary files /dev/null and b/src/images/competition3.jpg differ
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 477e8c6..2323848 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -2,12 +2,13 @@
// Components
import MainSlider from "../components/main/MainSlider";
-import SectionTitle from "../components/global/SectionTitle";
+import EventsSection from "../components/main/EventsSection";
const Main = () => {
return (
);
};
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index df7e758..e1a84a5 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -97,3 +97,67 @@
.slider-next {
right: 2rem;
}
+
+// Events
+.events-inner {
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+ 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;
+ column-gap: 7rem;
+ 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;
+ }
+}
diff --git a/src/styles/_section-title.scss b/src/styles/_section-title.scss
index c2681b3..3f81b9f 100644
--- a/src/styles/_section-title.scss
+++ b/src/styles/_section-title.scss
@@ -6,7 +6,6 @@
gap: 1.6rem;
padding: 1.6rem;
overflow: hidden;
- margin-bottom: 10rem;
}
.section-title-title {
diff --git a/src/types/eventProps.ts b/src/types/eventProps.ts
new file mode 100644
index 0000000..cdb41e7
--- /dev/null
+++ b/src/types/eventProps.ts
@@ -0,0 +1,8 @@
+export interface eventProps {
+ image: string;
+ time: string;
+ date: string;
+ text: string;
+}
+
+// Used in EventsSection.tsx and its' child component Event.tsx