feat: add expert-slider

.idea/workspace.xml

@@ -5,12 +5,29 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/app/not-found.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/not-found/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/not-found/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/not-found/ui.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/borodin/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/kaminskiy/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/kolodiy/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/mikova/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/mityaev/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/polinov/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/experts/yancen/model/slider.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/index.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/styles.module.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/ui.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -18,7 +35,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="252589" />
+    <option name="totalTimeSeconds" value="257682" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -26,8 +43,8 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="TypeScript JSX File" />
-        <option value="TypeScript File" />
         <option value="SCSS File" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -61,7 +78,7 @@
     "js.debugger.nextJs.config.created.client": "true",
     "js.debugger.nextJs.config.created.server": "true",
     "junie.onboarding.icon.badge.shown": "true",
-    "last_opened_file_path": "C:/dev-projects/ocenka-web/src/views/sitemap/model",
+    "last_opened_file_path": "C:/dev-personal/ocenka-web/src/views/experts/volkova-goncharova/model",
     "list.type.of.created.stylesheet": "SCSS",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
@@ -78,9 +95,11 @@
 }]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\dev-projects\ocenka-web\src\views\sitemap\model" />
-      <recent name="C:\dev-projects\ocenka-web\src\views\expertise\ocenka" />
-      <recent name="C:\dev-projects\ocenka-web\src\views\expertise\ocenka\model" />
+      <recent name="C:\dev-personal\ocenka-web\src\views\experts\volkova-goncharova\model" />
+      <recent name="C:\dev-personal\ocenka-web\src\views\experts\polinov\model" />
+      <recent name="C:\dev-personal\ocenka-web\src\views\experts\mityaev\model" />
+      <recent name="C:\dev-personal\ocenka-web\src\views\experts\mikova\model" />
+      <recent name="C:\dev-personal\ocenka-web\src\views\experts\kolodiy\model" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\dev-personal\ocenka-web" />
@@ -135,7 +154,7 @@
       <workItem from="1765705636949" duration="904000" />
       <workItem from="1765708416527" duration="881000" />
       <workItem from="1765709337833" duration="2887000" />
-      <workItem from="1765782728360" duration="1605000" />
+      <workItem from="1765782728360" duration="10274000" />
     </task>
     <servers />
   </component>

src/entities/beauty-button/ui.tsx

@@ -13,7 +13,8 @@ type TBeautyButtonProps = {
 
 function BeautyButton({ children, onClick }: TBeautyButtonProps) {
   const modal = useModal();
-  const openModal = () => modal.showModal(<ConsultationModal />);
+  const openModal = () =>
+    modal.showModal(<ConsultationModal pageName={'Header'} />);
 
   return (
     <div className={s.Container}>

src/views/experts/borodin/model/slider.ts

@@ -0,0 +1,22 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/borodin/image01.jpg';
+import img1 from '@public/images/docs/borodin/image02.jpg';
+import img2 from '@public/images/docs/borodin/image03.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+  {
+    id: 1,
+    name: 'Свидетельство',
+    image: img1,
+  },
+  {
+    id: 2,
+    name: 'Свидетельство',
+    image: img2,
+  },
+];

src/views/experts/borodin/ui.tsx

@@ -4,6 +4,8 @@ import { breadcrumbData } from './model/breadcrums';
 import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import photo from '@public/images/photo/borodin-vitaliy.jpg';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertBorodin() {
   return (
@@ -47,6 +49,7 @@ function ExpertBorodin() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/gulmamedov/model/slider.ts

@@ -0,0 +1,10 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/gulmamedov/image01.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+];

src/views/experts/gulmamedov/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/empty-photo.jpg';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertGulmamedov() {
   return (
@@ -44,6 +46,7 @@ function ExpertGulmamedov() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/kaminskiy/model/slider.ts

@@ -0,0 +1,10 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/kaminskiy/image01.jpg';
+
+export const slidesData: TSlide[] = [
+  // {
+  //   id: 0,
+  //   name: 'Свидетельство',
+  //   image: img0,
+  // },
+];

src/views/experts/kolodiy/model/slider.ts

@@ -0,0 +1,10 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/kolodiy/image01.jpg';
+
+export const slidesData: TSlide[] = [
+  // {
+  //   id: 0,
+  //   name: 'Свидетельство',
+  //   image: img0,
+  // },
+];

src/views/experts/mikova/model/slider.ts

@@ -0,0 +1,28 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/mikova/image01.jpeg';
+import img1 from '@public/images/docs/mikova/image02.jpeg';
+import img2 from '@public/images/docs/mikova/image03.jpeg';
+import img3 from '@public/images/docs/mikova/image04.jpeg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+  {
+    id: 1,
+    name: 'Свидетельство',
+    image: img1,
+  },
+  {
+    id: 2,
+    name: 'Свидетельство',
+    image: img2,
+  },
+  {
+    id: 3,
+    name: 'Свидетельство',
+    image: img3,
+  },
+];

src/views/experts/mikova/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/mikova-inna.png';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertMikova() {
   return (
@@ -37,6 +39,7 @@ function ExpertMikova() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/mityaev/model/slider.ts

@@ -0,0 +1,82 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/mityaev/image01.jpg';
+import img1 from '@public/images/docs/mityaev/image02.jpg';
+import img2 from '@public/images/docs/mityaev/image03.jpg';
+import img3 from '@public/images/docs/mityaev/image04.jpg';
+import img4 from '@public/images/docs/mityaev/image05.jpg';
+import img5 from '@public/images/docs/mityaev/image06.jpg';
+import img6 from '@public/images/docs/mityaev/image07.jpg';
+import img7 from '@public/images/docs/mityaev/image08.jpg';
+import img8 from '@public/images/docs/mityaev/image09.jpg';
+import img9 from '@public/images/docs/mityaev/image10.jpg';
+import img10 from '@public/images/docs/mityaev/image11.jpg';
+import img11 from '@public/images/docs/mityaev/image12.jpg';
+import img12 from '@public/images/docs/mityaev/image13.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+  {
+    id: 1,
+    name: 'Свидетельство',
+    image: img1,
+  },
+  {
+    id: 2,
+    name: 'Свидетельство',
+    image: img2,
+  },
+  {
+    id: 3,
+    name: 'Свидетельство',
+    image: img3,
+  },
+  {
+    id: 4,
+    name: 'Свидетельство',
+    image: img4,
+  },
+  {
+    id: 5,
+    name: 'Свидетельство',
+    image: img5,
+  },
+  {
+    id: 6,
+    name: 'Свидетельство',
+    image: img6,
+  },
+  {
+    id: 7,
+    name: 'Свидетельство',
+    image: img7,
+  },
+  {
+    id: 8,
+    name: 'Свидетельство',
+    image: img8,
+  },
+  {
+    id: 9,
+    name: 'Свидетельство',
+    image: img9,
+  },
+  {
+    id: 10,
+    name: 'Свидетельство',
+    image: img10,
+  },
+  {
+    id: 11,
+    name: 'Свидетельство',
+    image: img11,
+  },
+  {
+    id: 12,
+    name: 'Свидетельство',
+    image: img12,
+  },
+];

src/views/experts/mityaev/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/mityaev-alexey.jpg';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertMityaev() {
   return (
@@ -63,6 +65,7 @@ function ExpertMityaev() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/polinov/model/slider.ts

@@ -0,0 +1,34 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/polinov/image01.jpg';
+import img1 from '@public/images/docs/polinov/image02.jpg';
+import img2 from '@public/images/docs/polinov/image03.jpg';
+import img3 from '@public/images/docs/polinov/image04.jpg';
+import img4 from '@public/images/docs/polinov/image05.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+  {
+    id: 1,
+    name: 'Свидетельство',
+    image: img1,
+  },
+  {
+    id: 2,
+    name: 'Свидетельство',
+    image: img2,
+  },
+  {
+    id: 3,
+    name: 'Свидетельство',
+    image: img3,
+  },
+  {
+    id: 4,
+    name: 'Свидетельство',
+    image: img4,
+  },
+];

src/views/experts/polinov/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/polinov-andrey.jpg';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertPolinov() {
   return (
@@ -58,6 +60,7 @@ function ExpertPolinov() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/volkova-goncharova/model/slider.ts

@@ -0,0 +1,10 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/volkova-goncharova/image01.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+];

src/views/experts/volkova-goncharova/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/empty-photo.jpg';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertVolkovaGoncharova() {
   return (
@@ -83,6 +85,7 @@ function ExpertVolkovaGoncharova() {
           />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/experts/yancen/model/slider.ts

@@ -0,0 +1,40 @@
+import { TSlide } from '@widgets/expert-slider';
+import img0 from '@public/images/docs/yancen/image01.jpg';
+import img1 from '@public/images/docs/yancen/image02.jpg';
+import img2 from '@public/images/docs/yancen/image03.jpg';
+import img3 from '@public/images/docs/yancen/image04.jpg';
+import img4 from '@public/images/docs/yancen/image05.jpg';
+import img5 from '@public/images/docs/yancen/image06.jpg';
+
+export const slidesData: TSlide[] = [
+  {
+    id: 0,
+    name: 'Свидетельство',
+    image: img0,
+  },
+  {
+    id: 1,
+    name: 'Свидетельство',
+    image: img1,
+  },
+  {
+    id: 2,
+    name: 'Свидетельство',
+    image: img2,
+  },
+  {
+    id: 3,
+    name: 'Свидетельство',
+    image: img3,
+  },
+  {
+    id: 4,
+    name: 'Свидетельство',
+    image: img4,
+  },
+  {
+    id: 5,
+    name: 'Свидетельство',
+    image: img5,
+  },
+];

src/views/experts/yancen/styles.module.scss

@@ -27,6 +27,10 @@
   display: flex;
   flex-direction: column;
   gap: rem(20px);
+  order: 1;
+  @include iftablet {
+    order: 0;
+  }
 
   h3 {
     font-family: $font-roboto;
@@ -44,7 +48,7 @@
     line-height: 110%;
     color: $color-text;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(18px);
     }
   }
@@ -65,19 +69,26 @@
     color: $color-text;
     list-style: unset;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(18px);
     }
   }
 
-  .ListShift{
+  .ListShift {
     margin-left: rem(40px);
   }
 }
 
 .Photo {
+  order: 0;
+  justify-self: center;
+  @include iftablet {
+    order: 1;
+    justify-self: unset;
+  }
+
   .Image {
     width: rem(200px);
     height: auto;
   }
-}
+}

src/views/experts/yancen/ui.tsx

@@ -4,6 +4,8 @@ import { Breadcrumbs } from '@/widgets';
 import { Partners } from '@/feature/article';
 import { breadcrumbData } from './model/breadcrums';
 import photo from '@public/images/photo/yancen-yana.png';
+import { slidesData } from './model/slider';
+import { ExpertSlider } from '@widgets/expert-slider';
 
 function ExpertYancen() {
   return (
@@ -60,6 +62,7 @@ function ExpertYancen() {
           <Image className={s.Image} src={photo} alt={'Янцен Яна Николаевна'} />
         </div>
       </section>
+      <ExpertSlider slides={slidesData} />
       <Partners />
     </>
   );

src/views/home/call-us/ui.tsx

@@ -8,7 +8,8 @@ import { ConsultationModal } from '@/widgets';
 
 function CallUs() {
   const modal = useModal();
-  const openModal = () => modal.showModal(<ConsultationModal />);
+  const openModal = () =>
+    modal.showModal(<ConsultationModal pageName={'Home-CallUs'} />);
 
   const handlePhoneClick = () => {
     window.open(`tel:${CONTACTS.PHONE}`, '_self');

src/widgets/expert-slider/index.ts

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

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

@@ -0,0 +1,65 @@
+.Slider {
+  display: block;
+  padding: rem(20px) rem(20px);
+  width: 80%;
+
+  @include iftablet {
+    flex: 1;
+    display: block;
+    padding: 0 rem(20px);
+  }
+}
+
+.Slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+
+.PreviewModalContainer {
+  background: $color-white;
+  width: max-content;
+  height: auto;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: rem(20px);
+  display: flex;
+  flex-direction: column;
+  //max-width: max-content;//rem(460px);
+  justify-content: center;
+  align-self: center;
+  overflow: visible;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  .Image{
+    object-fit: contain;
+    width: 80vw;
+    height: auto;
+    max-height: 90vh;
+    @include iftablet{
+      width: auto;
+      height: 90vh;
+    }
+  }
+
+  & > svg {
+    z-index: 1;
+    top: rem(5px);
+    right: rem(-25px);
+    @include iftablet{
+      right: rem(-40px);
+    }
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 1;
+    }
+  }
+}

src/widgets/expert-slider/ui.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import s from './styles.module.scss';
+import Image, { StaticImageData } from 'next/image';
+import { Preview } from '@/widgets';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/grid';
+import 'swiper/css/autoplay';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Grid } from 'swiper/modules';
+import { useModal } from '@core/providers/modal-provider';
+import { SwiperOptions } from 'swiper/types';
+
+export type TSlide = {
+  id: number;
+  name: string;
+  image: StaticImageData;
+};
+
+export type TSwiperBreakpoints =
+  | {
+      [p: number]: SwiperOptions;
+      [p: string]: SwiperOptions;
+    }
+  | undefined;
+
+export const swiperDefault: TSwiperBreakpoints = {
+  360: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  768: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+  1440: {
+    slidesPerView: 4,
+    spaceBetween: 30,
+  },
+};
+
+type ExpertsSliderProps = {
+  slides: TSlide[];
+  swiperBreakpoints?: TSwiperBreakpoints;
+};
+
+function ExpertSlider({
+  slides,
+  swiperBreakpoints = swiperDefault,
+}: ExpertsSliderProps) {
+  const modal = useModal();
+
+  const openPreviewModal =
+    ({ image, name }: { image: StaticImageData; name: string }) =>
+    () =>
+      modal.showModal(
+        <Preview className={s.PreviewModalContainer}>
+          <Image className={s.Image} src={image} alt={name} quality={75} />
+        </Preview>,
+      );
+
+  return (
+    <Swiper
+      className={s.Slider}
+      modules={[Grid, Autoplay]}
+      breakpoints={swiperBreakpoints}
+      autoplay={{
+        delay: 5000,
+        disableOnInteraction: false,
+      }}
+      loop={true}
+    >
+      {slides.map(({ id, name, image }) => (
+        <SwiperSlide key={id} className={s.Slide}>
+          <Image
+            src={image}
+            alt={name}
+            quality={75}
+            width={200}
+            onClick={openPreviewModal({ image, name })}
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}
+
+export { ExpertSlider };