events section desktop

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 (
+    <Link to={"/"} className="event">
+      <div className="event-top">
+        <div className="event-img">
+          <img src={image} alt="" />
+        </div>
+        <div className="event-date">
+          <span className="event-time">{time}</span>
+          <span className="event-divider">
+            <img src={divider} alt="" />
+          </span>
+          <span className="event-day">{date}</span>
+        </div>
+      </div>
+      <div className="event-bottom">
+        <p>{text}</p>
+      </div>
+    </Link>
+  );
+};
+
+export default Event;

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 (
+    <section className="events">
+      <div className="container">
+        <div className="events-inner">
+          <SectionTitle title="События и новости" />
+          <div className="events-content">
+            {eventsData.map((evnt, id) => {
+              return (
+                <Event
+                  key={id}
+                  image={evnt.image}
+                  text={evnt.text}
+                  time={evnt.time}
+                  date={evnt.date}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EventsSection;

src/icons/divider.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.5" x="2.82843" y="0.17157" width="4" height="4" rx="1" transform="rotate(45 2.82843 0.17157)" fill="#01815E"/>
+</svg>

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 (
     <section className="main">
       <MainSlider />
+      <EventsSection />
     </section>
   );
 };

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;
+  }
+}

src/styles/_section-title.scss

@@ -6,7 +6,6 @@
   gap: 1.6rem;
   padding: 1.6rem;
   overflow: hidden;
-  margin-bottom: 10rem;
 }
 
 .section-title-title {

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