fixed flow hero appearance

src/components/flow/FlowSwiperHero/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
+import Image from 'next/image';
 import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
@@ -36,6 +37,12 @@ const lazy = {
   checkInView: true,
 };
 
+const getSrcSet = (url?: string) =>
+  [
+    `${getURLFromString(url, imagePresets.cover)} 768w`,
+    `${getURLFromString(url, imagePresets.small_hero)}`,
+  ].join(', ');
+
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
   const { isTablet } = useWindowSize();
   const { push } = useNavigation();
@@ -140,7 +147,11 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
           .map((node) => (
             <SwiperSlide key={node.id}>
               <img
-                data-src={getURLFromString(node.thumbnail!, preset)}
+                data-src={getURLFromString(
+                  node.thumbnail,
+                  imagePresets.small_hero,
+                )}
+                data-srcSet={getSrcSet(node.thumbnail)}
                 alt=""
                 className={classNames(styles.preview, 'swiper-lazy')}
               />

src/components/flow/FlowSwiperHero/styles.module.scss

@@ -9,6 +9,7 @@
 
 .swiper {
   @include outer_shadow;
+
   width: 100%;
   height: 100%;
   border-radius: $radius;
@@ -17,7 +18,8 @@
     object-fit: cover;
 
     img {
-      min-width: 150%;
+      min-width: 100%;
+      min-height: 120%;
     }
   }
 }
@@ -67,13 +69,14 @@
 }
 
 img.preview {
-  transform: translate(-15%, 0);
-  transition: transform 7s linear, opacity 1s linear;
+  transform: translate(0, 0);
+  transition: transform 10s linear, opacity 1s linear;
   opacity: 0;
+  will-change: transform;
 
   :global(.swiper-slide-active) &,
   :global(.swiper-slide-duplicate-active) & {
-    transform: translate(-15%, -20%);
+    transform: translate(0, -20%);
     opacity: 1;
   }
 }

src/utils/dom.ts

@@ -70,15 +70,15 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURLFromString = (url?: string, size?: ImagePreset): string => {
-  if (size) {
-    return (url || '').replace(
+export const getURLFromString = (url = '', size?: ImagePreset): string => {
+  if (!size) {
+    return url.replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
+  }
+
+  return url.replace(
     'REMOTE_CURRENT://',
     `${CONFIG.remoteCurrent}cache/${size}/`,
   );
-  }
-
-  return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
 };
 
 export const getURL = (