feat: add partners slider

src/views/expertise/autotech/styles.module.scss

@@ -52,8 +52,7 @@
     width: 100%;
     display: flex;
     text-align: center;
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding: rem(40px) 0;
 
     .Separator {
       display: flex;

src/views/expertise/autotech/ui.tsx

@@ -1,6 +1,7 @@
 import s from './styles.module.scss';
 import { CallbackForm, Connect, OrderSchema } from '@/entities';
 import { Consultation, RelatedArticles, Sidebar } from '@/feature/article';
+import { PartnersSlider } from '@/widgets';
 import { sidebarData } from './model/sidebar';
 import { relatedArticlesData } from './model/relatedArticles';
 import { expertData } from './model/expert';
@@ -100,7 +101,7 @@ function AutoTech() {
         <div className={s.Divider}>
           <span className={s.Separator} />
         </div>
-        Slider
+        <PartnersSlider />
         <div className={s.Divider}>
           <span className={s.Separator} />
         </div>

src/widgets/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/widgets/index.ts

@@ -1,2 +1,4 @@
 export * from './header';
 export * from './footer';
+export * from './breadcrumbs';
+export * from './partners-slider';

src/widgets/partners-slider/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/widgets/partners-slider/model/slides.ts

@@ -0,0 +1,75 @@
+import logoMegafon from '@public/images/partners/megafon.png';
+import logoMig from '@public/images/partners/mig.png';
+import logoECZ from '@public/images/partners/edinyi-centr-zashhity.png';
+import logoZevs from '@public/images/partners/jur-firma-zevs.png';
+import logoETD from '@public/images/partners/etd.png';
+import logoLaura from '@public/images/partners/laura-sochi.png';
+import logoMTS from '@public/images/partners/mts.png';
+import logoSAH from '@public/images/partners/sah.png';
+import logoSochiPark from '@public/images/partners/sochi-park.png';
+import logoSputnik from '@public/images/partners/sputnik.png';
+import logoYugoria from '@public/images/partners/yugoriya.png';
+import logoTransdekra from '@public/images/partners/transdekra.png';
+
+export const slidesData = [
+  {
+    id: '0',
+    name: '',
+    image: logoMegafon,
+  },
+  {
+    id: '1',
+    name: '',
+    image: logoMig,
+  },
+  {
+    id: '2',
+    name: '',
+    image: logoECZ,
+  },
+  {
+    id: '3',
+    name: '',
+    image: logoZevs,
+  },
+  {
+    id: '4',
+    name: '',
+    image: logoETD,
+  },
+  {
+    id: '5',
+    name: '',
+    image: logoLaura,
+  },
+  {
+    id: '6',
+    name: '',
+    image: logoMTS,
+  },
+  {
+    id: '7',
+    name: '',
+    image: logoSAH,
+  },
+  {
+    id: '8',
+    name: '',
+    image: logoSochiPark,
+  },
+  {
+    id: '9',
+    name: '',
+    image: logoSputnik,
+  },
+  {
+    id: '10',
+    name: '',
+    image: logoYugoria,
+  },
+  {
+    id: '11',
+    name: '',
+    image: logoTransdekra,
+  },
+];

src/widgets/partners-slider/styles.module.scss

@@ -0,0 +1,14 @@
+.Slider {
+  display: block;
+  padding: 0 20px;
+  //flex-direction: row;
+  //justify-content: space-between;
+}
+
+.Slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: auto;
+}

src/widgets/partners-slider/ui.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/grid';
+import 'swiper/css/autoplay';
+import s from './styles.module.scss';
+
+import Image from 'next/image';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Grid } from 'swiper/modules';
+import { slidesData } from '@widgets/partners-slider/model/slides';
+
+const swiperBreakpoints = {
+  360: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  768: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 4,
+    spaceBetween: 30,
+  },
+  1440: {
+    slidesPerView: 5,
+    spaceBetween: 30,
+  },
+};
+
+function PartnersSlider() {
+  return (
+    <Swiper
+      className={s.Slider}
+      modules={[Grid, Autoplay]}
+      breakpoints={swiperBreakpoints}
+      autoplay={{
+        delay: 2000,
+        disableOnInteraction: false,
+      }}
+      loop={true}
+    >
+      {slidesData.map(({ id, name, image }) => (
+        <SwiperSlide key={id} className={s.Slide}>
+          <Image src={image} alt={name} quality={75} />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}
+
+export { PartnersSlider };