fix/Fixes images

frontend/src/components/Footer/Footer.tsx

@@ -1,10 +1,10 @@
 import { cx } from '@/utils';
 import styles from './Footer.module.scss';
-import logo from '@/assets/icons/logo-vara-black.png';
-import web from '@/assets/icons/web-icon.png';
-import discord from '@/assets/icons/discord-icon.png';
-import git from '@/assets/icons/git-icon.png';
-import twitter from '@/assets/icons/twitter-icon.png';
+import logo from '@/assets/icons/logo-vara-black.svg';
+import web from '@/assets/icons/web-icon.svg';
+import discord from '@/assets/icons/discord-icon.svg';
+import git from '@/assets/icons/git-icon.svg';
+import twitter from '@/assets/icons/twitter-icon.svg';
 
 const socials = [
   {

frontend/src/components/Header/Header.tsx

@@ -4,7 +4,7 @@ import { Button, Link } from '@ui';
 import { useAccount } from '@gear-js/react-hooks';
 import { cx } from '@/utils';
 import styles from './Header.module.scss';
-import logo from '@/assets/icons/logo-vara-black.png';
+import logo from '@/assets/icons/logo-vara-black.svg';
 import { HeaderProps } from './Header.interfaces';
 import { useMediaQuery } from '@/hooks';
 import menuIcon from '@/assets/icons/burger-menu-icon.svg';

frontend/src/features/Game/component/Road/Road.module.scss

@@ -29,8 +29,16 @@
   z-index: -1;
 
   &-shooted {
-    height: 84px;
-    transform: translate(-38px, -14px);
+    &-fire {
+      height: 84px;
+      transform: translate(-45px, -10px);
+    }
+
+    &-smoke {
+      height: 204px;
+      transform: translate(-38px, -78px);
+    }
+
   }
 
   &-accelerated {

frontend/src/features/Game/component/Road/Road.tsx

@@ -11,7 +11,8 @@ import sectionEndLineSVG from '@/assets/icons/section-end-line.svg';
 import { ReactComponent as PlayerCarSVG } from '@/assets/icons/player-car-icon.svg';
 import { ReactComponent as ContractCarSVG } from '@/assets/icons/contract-car-icon.svg';
 
-import smokeGIF from '@/assets/icons/gif-smoke.gif';
+import smokeGIF from '@/assets/icons/smoke.gif';
+import fireGIF from '@/assets/icons/fire.gif';
 import speedGIF from '@/assets/icons/gif-speed.gif';
 import { CarEffect, CarsState, RoadProps } from './Road.interface';
 import { Cars } from '@/types';
@@ -205,11 +206,29 @@ function RoadComponent({ newCars, carIds }: RoadProps) {
                   }}
                   className={cx(styles.car)}>
                   {cars[id].effect && (
-                    <img
-                      src={cars[id].effect === 'shooted' ? smokeGIF : speedGIF}
-                      alt="smoke"
-                      className={cx(styles['car-effect'], styles[`car-effect-${cars[id].effect}`])}
-                    />
+                    <>
+                      {cars[id].effect === 'accelerated' && (
+                        <img
+                          src={speedGIF}
+                          alt="smoke"
+                          className={cx(styles['car-effect'], styles[`car-effect-${cars[id].effect}`])}
+                        />
+                      )}
+                      {cars[id].effect === 'shooted' && (
+                        <div>
+                          <img
+                            src={fireGIF}
+                            alt="smoke"
+                            className={cx(styles['car-effect'], styles[`car-effect-${cars[id].effect}-fire`])}
+                          />
+                          <img
+                            src={smokeGIF}
+                            alt="smoke"
+                            className={cx(styles['car-effect'], styles[`car-effect-${cars[id].effect}-smoke`])}
+                          />
+                        </div>
+                      )}
+                    </>
                   )}
                   {i === 0 ? <PlayerCarSVG /> : <ContractCarSVG />}
                 </div>

frontend/src/features/Main/components/Layout/Layout.module.scss

@@ -59,4 +59,9 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    .cars-pic {
+        max-width: 100%;
+        max-height: 100%;
+    }
 }

frontend/src/features/Main/components/Layout/Layout.tsx

@@ -3,7 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@ui';
 import styles from './Layout.module.scss';
 import { cx } from '@/utils';
-import carsImg from '@/assets/icons/introdution-cars-img.png';
+import carsImg from '@/assets/icons/introdution-cars-img.webp';
+import carsImgPng from '@/assets/icons/introdution-cars-img.png';
 
 import { CURRENT_GAME } from '@/atoms';
 
@@ -31,7 +32,11 @@ function Layout() {
         />
       </div>
       <div className={cx(styles.right)}>
-        <img src={carsImg} alt="cars" />
+        <picture>
+          <source type="image/webp" srcSet={carsImg} />
+          <source type="image/jpeg" srcSet={carsImgPng} />
+          <img src={carsImg} alt="test" className={cx(styles['cars-pic'])} />
+        </picture>
       </div>
     </div>
   );

frontend/src/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState, MutableRefObject, RefObject, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { ProgramMetadata, getProgramMetadata } from '@gear-js/api';
-import { useAlert, useReadFullState, withoutCommas } from '@gear-js/react-hooks';
+import { useAlert, useReadFullState } from '@gear-js/react-hooks';
 import { HexString } from '@polkadot/util/types';
 import { useAtom } from 'jotai';
 import metaTxt from '@/assets/meta/meta.txt';