main slider desktop

src/App.tsx

@@ -5,8 +5,8 @@ import { Routes, Route } from "react-router-dom";
 import "./styles/style.scss";
 
 // Components
-import Nav from "./components/Nav";
-import Footer from "./components/Footer";
+import Nav from "./components/global/Nav";
+import Footer from "./components/global/Footer";
 
 // Pages
 import Main from "./pages/Main";

src/components/global/Footer.tsx

@@ -2,14 +2,13 @@
 import { Link } from "react-router-dom";
 
 // Icons
-import youtube from "../icons/youtube.svg";
-import vk from "../icons/vk.svg";
-import twitter from "../icons/twitter.svg";
-import classmates from "../icons/odnoklassniki.svg";
-import linkedin from "../icons/linkedin.svg";
-import instagram from "../icons/instagram.svg";
-import facebook from "../icons/facebook.svg";
-import { link } from "fs";
+import youtube from "../../icons/youtube.svg";
+import vk from "../../icons/vk.svg";
+import twitter from "../../icons/twitter.svg";
+import classmates from "../../icons/odnoklassniki.svg";
+import linkedin from "../../icons/linkedin.svg";
+import instagram from "../../icons/instagram.svg";
+import facebook from "../../icons/facebook.svg";
 
 const Footer = () => {
   return (

src/components/global/Nav.tsx

@@ -2,8 +2,8 @@
 import { Link } from "react-router-dom";
 
 // Icons
-import mainLogo from "../icons/main_logo.svg";
-import arrow from "../icons/arrow-down-black.svg";
+import mainLogo from "../../icons/main_logo.svg";
+import arrow from "../../icons/arrow-down-black.svg";
 
 const Nav = () => {
   return (

src/components/main/MainSlider.tsx

@@ -0,0 +1,65 @@
+// Modules
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper";
+import "swiper/css";
+
+// Images
+import game from "../../images/slider-img.jpg";
+
+// Icons
+import arrowPrev from "../../icons/arrow-left-white.svg";
+import arrowNext from "../../icons/arrow-right-white.svg";
+
+// Components
+import MainSliderSlide from "./MainSliderSlide";
+
+// Types
+import { SlideProps } from "../../types/mainSliderSlide";
+
+const sliderData: SlideProps[] = [
+  {
+    slideTitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    slideText:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis auctor penatibus nunc leo rhoncus auctor pellentesque in.",
+    slideLink: "/",
+    slideImg: game,
+  },
+];
+
+const MainSlider = () => {
+  return (
+    <section className="main-slider">
+      <Swiper
+        modules={[Navigation]}
+        spaceBetween={0}
+        slidesPerView={1}
+        loop={true}
+        navigation={{
+          nextEl: ".slider-next",
+          prevEl: ".slider-prev",
+        }}
+      >
+        {sliderData.map((slide, id) => {
+          return (
+            <SwiperSlide key={id}>
+              <MainSliderSlide
+                slideImg={slide.slideImg}
+                slideLink={slide.slideLink}
+                slideText={slide.slideText}
+                slideTitle={slide.slideTitle}
+              />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+      <div className="slider-prev">
+        <img src={arrowPrev} alt="" />
+      </div>
+      <div className="slider-next">
+        <img src={arrowNext} alt="" />
+      </div>
+    </section>
+  );
+};
+
+export default MainSlider;

src/components/main/MainSliderSlide.tsx

@@ -0,0 +1,39 @@
+// Modules
+import { Link } from "react-router-dom";
+
+// Icons
+import arrowNext from "../../icons/arrow-right-white.svg";
+
+// Types
+import { SlideProps } from "../../types/mainSliderSlide";
+
+const MainSliderSlide = ({
+  slideImg,
+  slideTitle,
+  slideText,
+  slideLink,
+}: SlideProps) => {
+  return (
+    <div className="swiper-slide-inner">
+      <div className="swiper-bg">
+        <img src={slideImg} alt="" />
+      </div>
+      <div className="swiper-slide-content">
+        <div className="container">
+          <div className="swiper-slider-content-inner">
+            <h3>{slideTitle}</h3>
+            <p>{slideText}</p>
+            <Link to={slideLink}>
+              <span>Click the button</span>
+              <div>
+                <img src={arrowNext} alt="" />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MainSliderSlide;

src/icons/arrow-left-white.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="27" viewBox="0 0 15 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9311 26.625C11.651 26.6259 11.3742 26.5641 11.1212 26.4441C10.8681 26.324 10.6451 26.1488 10.4686 25.9312L1.41238 14.6812C1.1366 14.3457 0.98584 13.9249 0.98584 13.4906C0.98584 13.0563 1.1366 12.6355 1.41238 12.3L10.7874 1.05C11.1056 0.667094 11.563 0.426298 12.0588 0.380586C12.5546 0.334874 13.0482 0.48799 13.4311 0.80625C13.814 1.12451 14.0548 1.58184 14.1005 2.07764C14.1463 2.57344 13.9931 3.06709 13.6749 3.45L5.29363 13.5L13.3936 23.55C13.6229 23.8252 13.7686 24.1604 13.8133 24.5158C13.8581 24.8712 13.8001 25.232 13.6463 25.5555C13.4924 25.8789 13.2491 26.1516 12.9452 26.3411C12.6412 26.5307 12.2893 26.6292 11.9311 26.625Z" fill="white"/>
+</svg>

src/icons/arrow-right-white.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="27" viewBox="0 0 15 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.06875 0.375001C3.34887 0.374047 3.62564 0.43587 3.87872 0.555924C4.13181 0.675979 4.35478 0.851213 4.53125 1.06875L13.5875 12.3187C13.8633 12.6542 14.014 13.0751 14.014 13.5094C14.014 13.9437 13.8633 14.3645 13.5875 14.7L4.2125 25.95C3.89424 26.3329 3.43691 26.5737 2.94111 26.6194C2.44531 26.6651 1.95166 26.512 1.56875 26.1937C1.18584 25.8755 0.945049 25.4182 0.899338 24.9224C0.853625 24.4266 1.00674 23.9329 1.325 23.55L9.70625 13.5L1.60625 3.45C1.37697 3.17478 1.23133 2.83964 1.18655 2.48424C1.14178 2.12883 1.19975 1.76804 1.3536 1.44455C1.50746 1.12106 1.75076 0.848412 2.05472 0.658868C2.35867 0.469323 2.71056 0.370816 3.06875 0.375001Z" fill="white"/>
+</svg>

src/pages/Main.tsx

@@ -1,7 +1,14 @@
 // Modules
 
+// Components
+import MainSlider from "../components/main/MainSlider";
+
 const Main = () => {
-  return <section className="main"></section>;
+  return (
+    <section className="main">
+      <MainSlider />
+    </section>
+  );
 };
 
 export default Main;

src/styles/_main.scss

@@ -0,0 +1,99 @@
+.main-slider {
+  padding-bottom: 8rem;
+}
+
+.swiper-slide-inner {
+  position: relative;
+  min-height: 85rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.swiper-slide-content {
+  z-index: 2;
+  width: 100%;
+}
+
+.swiper-slider-content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  h3 {
+    color: #fff;
+    font-size: 3rem;
+    pointer-events: none;
+  }
+
+  p {
+    pointer-events: none;
+    color: #fff;
+    font-size: 2.4rem;
+  }
+
+  a {
+    margin-top: 3.2rem;
+    font-size: 1.6rem;
+    max-width: 23.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    background: $base-green;
+    padding: 1.6rem 2.5rem;
+    color: #fff;
+    border-radius: 0.5rem;
+
+    div {
+      width: 2rem;
+      height: 2rem;
+
+      img {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+  }
+}
+
+.swiper-bg {
+  width: 100%;
+  max-height: 85rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.slider-prev,
+.slider-next {
+  position: absolute;
+  top: 55%;
+  width: 4.5rem;
+  height: 4.5rem;
+  z-index: 5;
+  background: $base-green;
+  border-radius: 0.5rem;
+  @include flex-c;
+  @include button-start;
+  cursor: pointer;
+
+  &:active {
+    @include button-end;
+  }
+}
+
+.slider-prev {
+  left: 2rem;
+}
+
+.slider-next {
+  right: 2rem;
+}

src/styles/_variables.scss

@@ -29,3 +29,13 @@ $base-black: #1c1717;
   transform: rotateX(180deg);
   @include transition-std();
 }
+
+@mixin button-end {
+  transform: scale(0.7);
+  @include transition-std();
+}
+
+@mixin button-start {
+  transform: scale(1);
+  @include transition-std();
+}

src/styles/style.scss

@@ -3,3 +3,4 @@
 @import "./general";
 @import "./nav";
 @import "./footer";
+@import "./main";