feat: add partners slider

package-lock.json

@@ -14,7 +14,8 @@
         "next": "15.3.4",
         "nodemailer": "^7.0.3",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "swiper": "^11.2.10"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5689,6 +5690,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

package.json

@@ -17,7 +17,8 @@
     "next": "15.3.4",
     "nodemailer": "^7.0.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.10"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

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