optimization

modules/contribute/header/header.module.scss

@@ -24,12 +24,12 @@
     font-weight: 600;
     font-size: 2rem;
     max-width: 780px;
-    color: #4F3527;
+    color: #27384f;
     line-height: 150%;
   
     .appName {
       font-weight: 700;
-      color: #361400;
+      color: #001936;
     }
   
     .hobbyProject {
@@ -39,8 +39,8 @@
       margin: 0px 20px;
   
       span {
-          box-shadow: -16px 0px 0px 2px #FF005C, 16px 0px 0px 2px #FF005C;
-          background-color: #FF005C;
+          box-shadow: -16px 0px 0px 2px #006eff, 16px 0px 0px 2px #006eff;
+          background-color: #006eff;
           color: #fff;
           box-decoration-break: clone;
           border-radius: 9px;

modules/contribute/header/header.tsx

@@ -120,7 +120,6 @@ export function Header() {
         <div
           className={styles.transitionToBackgound}
         />
-        <Gradients />
       </div>
     </header>
   );

modules/contribute/shareCard/shareCard.module.scss

@@ -1,7 +1,7 @@
 .card {
-    --on-background: #59321c;
-    --on-background-secondary: #866655;
-    --background: #ffefe9;
+    --on-background: #2C4678;
+    --on-background-secondary: #455E91;
+    --background: #F3F3FA;
     position: relative;
 }
   

modules/home/header.tsx

@@ -10,48 +10,20 @@ import ridebusFlat from '@/assets/images/cities-backdrop.jpg';
 import Image from 'next/image';
 import { Gradients } from '@/components/gradients';
 import { useEffect, useRef, Fragment } from 'react';
+import GradientPrimary from '@/assets/images/header-gradient-primary.svg';
+import GradientTertiary from '@/assets/images/header-gradient-tertiary.svg';
 import useScroll from '@/utils/useScroll';
 import { TopBar } from '@/components/topBar';
 import useFrame from '@/utils/useFrame';
 import useMediaQuery from '@/utils/useMediaQuery';
+import noise from '@/assets/images/noise.png';
 
 const locales: LocalesMap = {
   ru: {
-    slogan_line: (
-      <>
-        <span>Приложение,</span>
-        <span>которое</span>
-        <span>поможет</span>
-        <span>вам</span>
-        <span>с</span>
-        <span className={styles.spendWord}>лёгкостью</span>
-        <span>смотреть</span>
-        <span>расписание</span>
-        <span className={clsx(caveat.className, styles.wiselyWord)}>транспорта</span>
-      </>
-    ),
+    slogan_line: 'Приложение, которое поможет вам с лёгкостью смотреть расписание транспорта',
   },
   en: {
-    slogan_line: (
-      <>
-        <span>Small</span>
-        <span>app</span>
-        <span>that</span>
-        <span>helps</span>
-        <span>you</span>
-        <span className={styles.spendWord}>conveniently</span>
-        <span>view</span>
-        <span className={clsx(caveat.className, styles.wiselyWord)}>
-          public
-        </span>
-        <span className={clsx(caveat.className, styles.wiselyWord)}>
-          transport
-        </span>
-        <span className={clsx(caveat.className, styles.wiselyWord)}>
-          schedules
-        </span>
-      </>
-    ),
+    slogan_line: 'Small app that helps you conveniently view public transpot schedules',
   },
 };
 
@@ -101,17 +73,10 @@ export default function Header() {
           ref={thickRoundStar5}>
           <ThickRoundStar5 />
         </div>
-        <h1 className={clsx(styles.slogan, manrope.className)}>
-          <span ref={sloganLineRef} className={styles.line1}>
-            {t('slogan_line')}
-          </span>
-        </h1>
+        <h1 className={styles.slogan}>{t('slogan_line')}</h1>
         <div className={styles.gradientContainer}>
-          <div
-            ref={transitionToBackgoundRef}
-            className={styles.transitionToBackgound}
-          />
-          {!breakpoint600 && <Gradients />}
+          <GradientPrimary className={styles.greenGradient} />
+          <GradientTertiary className={styles.orangeGradient} />
         </div>
       </header>
     </Fragment>

modules/home/home.module.scss

@@ -1,16 +1,15 @@
 .noiseOverlay {
     position: absolute;
-    top: -500px;
-    left: -500px;
-    width: calc(100% + 1000px);
-    height: calc(100% + 1000px);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     z-index: 10000;
     opacity: 1;
     mix-blend-mode: color-burn;
     background-repeat: repeat;
     background-size: 1024px;
     pointer-events: none;
-    will-change: auto;
 }
   
 .header {
@@ -22,11 +21,10 @@
     justify-content: center;
     position: relative;
     flex-shrink: 0;
-    transform: translate3D(0, 0, 0);
 }
   
 .slogan {
-    max-width: 1300px;
+    max-width: 1200px;
     width: 100%;
     padding: 0px 50px;
     text-align: justify;
@@ -36,7 +34,7 @@
     color: var(--on-background);
     display: flex;
     flex-direction: column;
-    gap: 56px;
+    gap: 16px;
   
     .line1,
     .line2 {
@@ -136,8 +134,24 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: calc(100% + 300px);
-    z-index: -100;
+    height: 100%;
+    z-index: -1;
+
+    .greenGradient,
+    .orangeGradient {
+      position: absolute;
+      filter: blur(80px);
+    }
+
+    .greenGradient {
+      right: -2.6%;
+      top: -260px;
+    }
+
+    .orangeGradient {
+      left: 0%;
+      bottom: 0%;
+    }
 }
   
 .transitionToBackgound {