calendar on main page

src/App.tsx

@@ -21,7 +21,6 @@ import Profile from "./pages/Profile";
 import EventItem from "./pages/EventItem";
 import Structure from "./pages/Structure";
 import Contacts from "./pages/Contact";
-import Calendar from "./components/global/Calendar";
 
 const App = () => {
   // Types
@@ -50,7 +49,6 @@ const App = () => {
             <Route path="/event/:eventId" element={<EventItem />} />
             <Route path="/structure" element={<Structure />} />
             <Route path="/contact" element={<Contacts />} />
-            <Route path="/calendar" element={<Calendar />} />
           </Routes>
         </div>
         <Footer dropdown={dropdown} setDropdown={setDropdown} />

src/components/event_item/EventContentSkeleton.tsx

@@ -3,7 +3,7 @@ const EventContentSkeleton = () => {
     <div className="eventitem-content skeleton">
       <div className="eventitem-top">
         <p></p>
-        <h2></h2>
+        <p className="big"></p>
       </div>
       <div className="eventitem-bottom">
         <div className="eventitem-img"></div>

src/components/main/CalendarSection.tsx

@@ -1,16 +1,12 @@
 // Modules
 import { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Autoplay } from "swiper";
 import "swiper/css";
 import { v4 as uuidv4 } from "uuid";
 
-// Icons
-import arrowPrev from "../../icons/arrow-left-white.svg";
-import arrowNext from "../../icons/arrow-right-white.svg";
-
 // Components
 import VideoPlayer from "../global/VideoPlayer";
+import Calendar from "../global/Calendar";
 
 // Types
 import { playerType } from "../../types/playerType";
@@ -69,6 +65,9 @@ const CalendarSection = () => {
               </Swiper>
             </div>
           </div>
+          <div className="calendars-right">
+            <Calendar />
+          </div>
         </div>
       </div>
     </section>

src/styles/_calendar.scss

@@ -1,6 +1,6 @@
 .calendar {
-  padding: 10rem;
-  max-width: 62rem;
+  align-self: center;
+  max-width: 36rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -90,7 +90,7 @@
   tbody {
     display: flex;
     flex-direction: column;
-    gap: 2.4rem;
+    gap: 2rem;
   }
   th {
     color: $base-green;
@@ -99,7 +99,8 @@
     pointer-events: none;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 3.2rem;
+    justify-content: space-between;
+    gap: 2rem;
 
     * {
       font-size: 1.8rem;

src/styles/_event-item.scss

@@ -75,8 +75,8 @@
       @include shineLoad;
     }
 
-    h2 {
-      height: 3rem;
+    p.big {
+      height: 4rem;
     }
 
     .eventitem-content {

src/styles/_main.scss

@@ -195,3 +195,8 @@
     height: 16rem;
   }
 }
+
+.calendars-right {
+  display: flex;
+  align-items: center;
+}