partners section desktop

src/components/main/MainSlider.tsx

@@ -1,6 +1,6 @@
 // Modules
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
+import { Navigation, Autoplay } from "swiper";
 import "swiper/css";
 import { v4 as uuidv4 } from "uuid";
 
@@ -31,9 +31,10 @@ const MainSlider = () => {
   return (
     <section className="main-slider">
       <Swiper
-        modules={[Navigation]}
+        modules={[Navigation, Autoplay]}
         spaceBetween={0}
         slidesPerView={1}
+        autoplay={{ delay: 3000 }}
         loop={true}
         navigation={{
           nextEl: ".slider-next",

src/components/main/PartnersSection.tsx

@@ -0,0 +1,62 @@
+// Modules
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper";
+import { v4 as uuidv4 } from "uuid";
+
+// Components
+import SectionTitle from "../global/SectionTitle";
+
+// Images
+import tps from "../../images/tps.jpg";
+import samsung from "../../images/samsung.jpg";
+import mi from "../../images/mi.jpg";
+import dragon from "../../images/do.jpg";
+
+// Icons
+import arrowPrev from "../../icons/arrow-left-green.svg";
+import arrowNext from "../../icons/arrow-right-green.svg";
+
+const partnersData: string[] = [tps, samsung, mi, dragon];
+
+const Partners = () => {
+  return (
+    <section className="partners">
+      <div className="container">
+        <div className="partners-inner">
+          <SectionTitle title={"Партнеры"} />
+          <div className="partners-content">
+            <Swiper
+              modules={[Navigation, Autoplay]}
+              autoplay={{ delay: 3000 }}
+              spaceBetween={0}
+              slidesPerView={4}
+              loop={true}
+              navigation={{
+                nextEl: ".slider-next",
+                prevEl: ".slider-prev",
+              }}
+            >
+              {partnersData.map((image) => {
+                return (
+                  <SwiperSlide key={uuidv4()}>
+                    <div className="partners-slide">
+                      <img src={image} alt="" />
+                    </div>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+            <div className="slider-prev slider-next-white slider-next-white-prev">
+              <img src={arrowPrev} alt="" />
+            </div>
+            <div className="slider-next slider-next-white slider-next-white-next">
+              <img src={arrowNext} alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Partners;

src/icons/arrow-left-green.svg

@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.694 43.5415C31.3516 43.5427 31.0133 43.4671 30.704 43.3204C30.3947 43.1737 30.1222 42.9595 29.9065 42.6936L18.8377 28.9436C18.5007 28.5336 18.3164 28.0192 18.3164 27.4884C18.3164 26.9576 18.5007 26.4432 18.8377 26.0332L30.2961 12.2832C30.685 11.8152 31.244 11.5209 31.85 11.465C32.456 11.4091 33.0593 11.5963 33.5273 11.9853C33.9953 12.3743 34.2896 12.9332 34.3455 13.5392C34.4014 14.1452 34.2142 14.7485 33.8252 15.2165L23.5815 27.4999L33.4815 39.7832C33.7617 40.1196 33.9397 40.5292 33.9944 40.9636C34.0492 41.3979 33.9783 41.8389 33.7903 42.2343C33.6022 42.6297 33.3049 42.9629 32.9334 43.1946C32.5619 43.4262 32.1318 43.5466 31.694 43.5415Z" fill="#01815E"/>
+</svg>

src/icons/arrow-right-green.svg

@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0684 9.3751C19.3485 9.37414 19.6253 9.43597 19.8784 9.55602C20.1314 9.67607 20.3544 9.85131 20.5309 10.0688L29.5871 21.3188C29.8629 21.6543 30.0137 22.0752 30.0137 22.5095C30.0137 22.9438 29.8629 23.3646 29.5871 23.7001L20.2121 34.9501C19.8939 35.333 19.4365 35.5738 18.9407 35.6195C18.4449 35.6652 17.9513 35.5121 17.5684 35.1938C17.1855 34.8756 16.9447 34.4182 16.899 33.9224C16.8533 33.4267 17.0064 32.933 17.3246 32.5501L25.7059 22.5001L17.6059 12.4501C17.3766 12.1749 17.231 11.8397 17.1862 11.4843C17.1414 11.1289 17.1994 10.7681 17.3532 10.4446C17.5071 10.1212 17.7504 9.84851 18.0543 9.65896C18.3583 9.46942 18.7102 9.37091 19.0684 9.3751Z" fill="#01815E"/>
+</svg>

src/pages/Main.tsx

@@ -3,12 +3,14 @@
 // Components
 import MainSlider from "../components/main/MainSlider";
 import EventsSection from "../components/main/EventsSection";
+import Partners from "../components/main/PartnersSection";
 
 const Main = () => {
   return (
     <section className="main">
       <MainSlider />
       <EventsSection />
+      <Partners />
     </section>
   );
 };

src/styles/_main.scss

@@ -161,3 +161,32 @@
     font-weight: bold;
   }
 }
+
+// Partners
+.partners-inner {
+  padding-bottom: 16rem;
+}
+
+.partners-content {
+  position: relative;
+  padding-top: 4.8rem;
+}
+
+.slider-next-white {
+  background: transparent;
+}
+
+.slider-next-white-prev {
+  left: -10rem;
+}
+
+.slider-next-white-next {
+  right: -10rem;
+}
+
+.partners-slide {
+  @include flex-c;
+  min-height: 18rem;
+  width: 100%;
+  border: 0.1rem solid #00000020;
+}