changes

modules/contribute/header/header.tsx

@@ -116,6 +116,12 @@ export function Header() {
           <Chip className={styles.madeWithLoveChip} label={t('madeWithLove')} icon={(<LoveIcon />)} />
         </div>
       </div>
+      <div className={styles.gradientContainer}>
+        <div
+          className={styles.transitionToBackgound}
+        />
+        <Gradients />
+      </div>
     </header>
   );
 }

modules/home/citiesCard/citiesCard.tsx

@@ -5,9 +5,11 @@ import useLocale from '@/utils/useLocale';
 import { LocalesMap } from '@/utils/useLocale';
 import CityPolotskSmallEn from '@/assets/images/city-polotsk-small-en.svg';
 import CityNovopolotskSmallEn from '@/assets/images/city-novopolotsk-small-en.svg';
+import CityMiorySmallEn from '@/assets/images/city-miory-small-en.svg';
 import CityBigEn from '@/assets/images/city-big-en.svg';
 import CityPolotskSmallRu from '@/assets/images/city-polotsk-small-ru.svg';
 import CityNovopolotskSmallRu from '@/assets/images/city-novopolotsk-small-ru.svg';
+import CityMiorySmallRu from '@/assets/images/city-miory-small-ru.svg';
 import CityBigRu from '@/assets/images/city-big-ru.svg';
 import Mask from '@/assets/images/cities-star-mask.svg';
 import ridebusImage from '@/assets/images/cities-backdrop.jpg';
@@ -49,19 +51,25 @@ function SmallCitiesLine() {
 
   const CityPolotsk = router.locale === 'ru' ? CityPolotskSmallRu : CityPolotskSmallEn;
   const CityNovopolotsk = router.locale === 'ru' ? CityNovopolotskSmallRu : CityNovopolotskSmallEn;
+  const CityMiory = router.locale === 'ru' ? CityMiorySmallRu : CityMiorySmallEn;
 
   return (
     <div ref={rootRef} className={styles.smallCitiesLine}>
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
     </div>
   );
 }
@@ -79,25 +87,31 @@ function BigCitiesLine() {
     const offset = (scrollY / 6) + (time / 30);
 
     if (rootRef.current) {
-      rootRef.current.style.transform = `rotate(356deg) translate3D(${offset % swapWidth * 2}px, 0px, 0px)`;
+      rootRef.current.style.transform = `rotate(356deg) translate3D(${offset % swapWidth * 3}px, 0px, 0px)`;
     }
   }, {}, [cityWidth]);
 
   const CityPolotsk = router.locale === 'ru' ? CityPolotskSmallRu : CityPolotskSmallEn;
   const CityNovopolotsk = router.locale === 'ru' ? CityNovopolotskSmallRu : CityNovopolotskSmallEn;
+  const CityMiory = router.locale === 'ru' ? CityMiorySmallRu : CityMiorySmallEn;
 
   return (
     <div ref={rootRef} className={styles.bigCitiesLine}>
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
       <CityPolotsk />
       <CityNovopolotsk />
+      <CityMiory />
     </div>
   );
 }

modules/home/freeCard/freeCard.module.scss

@@ -10,7 +10,7 @@
 
 .freeForever, .wihthoutAds {
     --on-background: #000000;
-    --background: #F3FF6C;
+    --background: #c0cde6;
     width: 100%;
     position: relative;
     border-radius: 100px;
@@ -59,7 +59,7 @@
 }
 
 .imageCard {
-    background-color: #FFF0E8;
+    background-color: #d6e2fe;
     border-radius: 36px;
     width: 100%;
     height: 100%;

modules/home/header.tsx

@@ -106,6 +106,13 @@ export default function Header() {
             {t('slogan_line')}
           </span>
         </h1>
+        <div className={styles.gradientContainer}>
+          <div
+            ref={transitionToBackgoundRef}
+            className={styles.transitionToBackgound}
+          />
+          {!breakpoint600 && <Gradients />}
+        </div>
       </header>
     </Fragment>
   );