package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "15.3.2",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "swiper": "^11.2.8"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5517,6 +5518,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
+      "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
+      "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

@@ -13,7 +13,8 @@
   "dependencies": {
     "next": "15.3.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

public/svg/empty-paper.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 450" style="enable-background:new 0 0 400 450;" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="57.9286" y1="-32.737" x2="342.1984" y2="482.9674">
+	<stop  offset="0.6888" style="stop-color:#B1B1B1"/>
+	<stop  offset="0.7285" style="stop-color:#B6B6B7"/>
+	<stop  offset="0.7792" style="stop-color:#C5C6C6"/>
+	<stop  offset="0.8356" style="stop-color:#DEDFE0"/>
+	<stop  offset="0.8564" style="stop-color:#E9EAEC"/>
+</linearGradient>
+<rect style="fill:url(#SVGID_1_);" width="400" height="450"/>
+<linearGradient id="SVGID_00000092431468075801409100000001785422653880840880_" gradientUnits="userSpaceOnUse" x1="-1.2847" y1="381.6029" x2="311.3088" y2="2.6513" gradientTransform="matrix(-1 0 0 1 328.1064 0)">
+	<stop  offset="0" style="stop-color:#D6D6D6"/>
+	<stop  offset="0.0286" style="stop-color:#E3E3E3"/>
+	<stop  offset="0.0797" style="stop-color:#F3F3F3"/>
+	<stop  offset="0.1376" style="stop-color:#FCFCFC"/>
+	<stop  offset="0.2157" style="stop-color:#FFFFFF"/>
+	<stop  offset="0.4066" style="stop-color:#F9FAFA"/>
+	<stop  offset="0.5936" style="stop-color:#EEEFF1"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000092431468075801409100000001785422653880840880_);" d="M0,0h399.991
+	C400,85.167,400,195.667,400,267.482c0,40.935-10.167,57.018-30.941,77.621c-39.216,38.894-175.393,83.521-228.69,92.004
+	C98.403,443.788,63.291,449.474,0,449.478V0z"/>
+<path style="fill:#B6B6B6;" d="M140.369,437.107C98.403,443.788,63.624,449.474,0,449.478V450c63.791,0,98.403-5.69,140.369-12.371
+	c7.205-1.147,15.985-3.103,25.855-5.72C156.354,434.197,147.574,435.961,140.369,437.107z"/>
+<path style="fill:#EBEBEB;" d="M285.738,393.981c-52.481,21.401-113.877,38.113-145.367,43.126
+	C195,424.566,244.894,392.766,284.99,332.044L285.738,393.981z"/>
+<linearGradient id="SVGID_00000088827454265147082520000018364783835286127748_" gradientUnits="userSpaceOnUse" x1="-0.2559" y1="376.5401" x2="26.9199" y2="325.43" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
+	<stop  offset="0.1061" style="stop-color:#828282"/>
+	<stop  offset="0.4697" style="stop-color:#CBCBCB"/>
+	<stop  offset="1" style="stop-color:#858585"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000088827454265147082520000018364783835286127748_);" d="M284.99,332.044
+	c27.121,14.806,65.801,29.605,81.623,14.697c0.913-0.864,2.121-1.362,2.979-2.322c-0.177,0.225-0.352,0.476-0.533,0.684
+	c-14.903,16.99-46.976,34.06-83.322,48.879L284.99,332.044z"/>
+<linearGradient id="SVGID_00000160896986531897257690000003598917995091685003_" gradientUnits="userSpaceOnUse" x1="66.4041" y1="407.0864" x2="87.9274" y2="354.5603" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
+	<stop  offset="0" style="stop-color:#C8C8C8"/>
+	<stop  offset="0.2454" style="stop-color:#ADADAD"/>
+	<stop  offset="0.3301" style="stop-color:#B7B7B7"/>
+	<stop  offset="0.7764" style="stop-color:#E5E5E5"/>
+	<stop  offset="1" style="stop-color:#F7F7F7"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000160896986531897257690000003598917995091685003_);" d="M374.459,340.525
+	c-36.689,48.121-179.686,87.854-233.912,96.73c-0.399,0.065-0.718-0.062-1.108,0c56.186-10.63,105.481-42.467,145.574-103.187
+	c26.545,12.035,65.786,32.856,83.486,10.868C368.323,345.162,374.626,340.306,374.459,340.525z"/>
+<path style="fill:#828282;" d="M359.061,351.22c13.189-5.533,40.126-35.387,40.355-73.845c0.417-70,0.507-189.88-0.139-277.375
+	h0.691C399.99,93.933,400,207,400,277.083c0,31.571-16.633,57.537-33.147,70.268C366.392,347.869,360.724,351.539,359.061,351.22z"
+	/>
+</svg>

src/core/.gitkeep

@@ -1 +0,0 @@
-reusable components

src/views/home/ui/license/license.tsx

@@ -1,9 +1,11 @@
 import s from './license.module.scss';
 
 import { Button, Input, Mark } from '@shared/ui';
+import { LicenseSlider } from '@/widgets';
+import Image from 'next/image';
 
 import bgForm from '@public/images/bg-form.jpg';
-import Image from 'next/image';
+import emptyPaper from '@public/svg/empty-paper.svg';
 
 export default function License() {
   return (
@@ -12,7 +14,9 @@ export default function License() {
         Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
       </h2>
 
-      <div className={s.Slider}>Slider here</div>
+      <div className={s.Slider}>
+        <LicenseSlider images={slides} />
+      </div>
 
       <div className={s.Form}>
         <div className={s.Offer}>
@@ -45,3 +49,26 @@ export default function License() {
     </section>
   );
 }
+
+const slides = [
+  {
+    id: '0',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '1',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '2',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '3',
+    name: '',
+    image: emptyPaper,
+  },
+];

src/widgets/.gitkeep

@@ -1 +0,0 @@
-reusable components

src/widgets/index.ts

@@ -0,0 +1 @@
+export { LicenseSlider } from './license-slider';

src/widgets/license-slider/index.ts

@@ -0,0 +1 @@
+export { default as LicenseSlider } from './license-slider';

src/widgets/license-slider/license-slider.module.scss

@@ -0,0 +1,9 @@
+.Slider {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.Slide {
+  cursor: pointer;
+}

src/widgets/license-slider/license-slider.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import s from './license-slider.module.scss';
+
+import Image from 'next/image';
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
+import { clsx } from 'clsx';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+type LicenseSliderProps = {
+  className?: string;
+  images: {
+    id: string;
+    name: string;
+    image: string | StaticImport;
+  }[];
+};
+
+const mockFullSizeImage = 'images/empty-image.jpg';
+
+export default function LicenseSlider({
+  className,
+  images,
+}: LicenseSliderProps) {
+  return (
+    <Swiper
+      className={clsx(s.Slider, className)}
+      slidesPerView={3}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={(swiper) => console.log(swiper)}
+    >
+      {images.map(({ id, name, image }) => (
+        <SwiperSlide key={id}>
+          <a href={mockFullSizeImage} target='_blank'>
+            <Image className={s.Slide} src={image} alt={name} />
+          </a>
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}