optimization

assets/images/header-gradient-primary.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1300" height="1300" fill="none"
+  viewBox="0 0 1300 1300">
+  <path fill="url(#b)" fill-opacity=".3"
+    d="M190.1 1085.4c-35-44.9-173.1-341.4 34.6-503.1 207.6-161.7 793.5-439.6 877-378.6 53.6 86.6-110 579.3-317.6 741-207.7 161.8-559 185.7-594 140.7Z" />
+
+  <defs>
+    <linearGradient id="b" x1="1025.5" x2="400.4" y1="264.7" y2="862.3"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1d4fac" />
+      <stop offset="1" stop-color="#1d4aac" stop-opacity=".2" />
+    </linearGradient>
+  </defs>
+</svg>

assets/images/header-gradient-tertiary.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1300" height="1300" fill="none" viewBox="0 0 1300 1300">
+  <path fill="url(#b)" fill-opacity=".3" d="M1191.5 321.5c24.7 51.3 96.8 370.4-140.4 484.4s-868.7 261.4-937.3 184.2c-34-96 230.2-543 467.4-657s585.6-63 610.3-11.6Z"/>
+  <defs>
+    <linearGradient id="b" x1="201.2" x2="938.6" y1="946.6" y2="495" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#715573"/>
+      <stop offset="1" stop-color="#715573" stop-opacity=".3"/>
+    </linearGradient>
+  </defs>
+</svg>

components/telegramCardButton/index.tsx

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

components/telegramCardButton/telegramCardButton.module.scss

@@ -0,0 +1,38 @@
+.card {
+    border-radius: 36px;
+    overflow: hidden;
+    background-color: #a4a4a41c;
+    backdrop-filter: blur(18px);
+  
+    a {
+      cursor: none;
+    }
+}
+  
+.content {
+    display: flex;
+    flex-direction: row;
+    padding: 14px;
+    padding-left: 28px;
+    padding-right: 22px;
+    transition: 0.3s ease;
+}
+  
+.linkIcon {
+    width: 42px;
+    height: 42px;
+    margin-left: auto;
+}
+  
+.storeNameText {
+    color: #242424;
+    font-weight: 700;
+    font-size: 2rem;
+    margin-right: 8px;
+}
+  
+@media screen and (max-width: 620px) {
+    .content {
+      padding: 36px;
+    }
+}

components/telegramCardButton/telegramCardButton.tsx

@@ -0,0 +1,28 @@
+import styles from './telegramCardButton.module.scss';
+import Link, { LinkProps } from 'next/link';
+import LinkIcon from '@/assets/icons/link.svg';
+import clsx from 'clsx';
+import { CursorEffect } from '@/components/cursor';
+
+type TelegramCardButtonProps = Omit<LinkProps, 'href'> & { className?: string };
+
+export function TelegramCardButton(props: TelegramCardButtonProps) {
+  const { className: restCalssName, ...restProps } = props;
+
+  return (
+    <CursorEffect cursorBorderRadius={36} cursorPadding={12}>
+      <div className={clsx(styles.card, restCalssName)}>
+        <Link
+          {...restProps}
+          target="_blank"
+          href="https://t.me/ridebus"
+        >
+          <div className={styles.content}>
+            <span className={styles.storeNameText}>Telegram</span>
+            <LinkIcon className={styles.linkIcon} />
+          </div>
+        </Link>
+      </div>
+    </CursorEffect>
+  );
+}

components/topBar/topBar.tsx

@@ -2,13 +2,11 @@ import styles from './topBar.module.scss';
 import { LangSwitcher } from '@/components/langSwitcher';
 import { Logo, LogoType } from '@/components/logo';
 import { GithubLink } from '@/components/githubLink';
-import { GooglePlayLink } from '@/components/googlePlayLink';
 import { useRef } from 'react';
 import useScroll from '@/utils/useScroll';
 import { CursorEffect } from '@/components/cursor';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { TelegramLink } from '../telegramLink';
 
 type TopBarProps = {
   notHide?: boolean;
@@ -45,9 +43,7 @@ export function TopBar(props: TopBarProps) {
           </Link>
         </CursorEffect>
       )}
-      <GooglePlayLink className={styles.googlePlayLink} />
       <GithubLink />
-      <TelegramLink />
       <LangSwitcher />
     </div>
   );

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;
+          box-shadow: -16px 0px 0px 2px #006eff, 16px 0px 0px 2px #006eff;
-          background-color: #FF005C;
+          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: #2C4678;
-    --on-background-secondary: #866655;
+    --on-background-secondary: #455E91;
-    --background: #ffefe9;
+    --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: (
+    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>
-      </>
-    ),
   },
   en: {
-    slogan_line: (
+    slogan_line: 'Small app that helps you conveniently view public transpot schedules',
-      <>
-        <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>
-      </>
-    ),
   },
 };
 
@@ -101,17 +73,10 @@ export default function Header() {
           ref={thickRoundStar5}>
           <ThickRoundStar5 />
         </div>
-        <h1 className={clsx(styles.slogan, manrope.className)}>
+        <h1 className={styles.slogan}>{t('slogan_line')}</h1>
-          <span ref={sloganLineRef} className={styles.line1}>
-            {t('slogan_line')}
-          </span>
-        </h1>
         <div className={styles.gradientContainer}>
-          <div
+          <GradientPrimary className={styles.greenGradient} />
-            ref={transitionToBackgoundRef}
+          <GradientTertiary className={styles.orangeGradient} />
-            className={styles.transitionToBackgound}
-          />
-          {!breakpoint600 && <Gradients />}
         </div>
       </header>
     </Fragment>

modules/home/home.module.scss

@@ -1,16 +1,15 @@
 .noiseOverlay {
     position: absolute;
-    top: -500px;
+    top: 0;
-    left: -500px;
+    left: 0;
-    width: calc(100% + 1000px);
+    width: 100%;
-    height: calc(100% + 1000px);
+    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);
+    height: 100%;
-    z-index: -100;
+    z-index: -1;
+
+    .greenGradient,
+    .orangeGradient {
+      position: absolute;
+      filter: blur(80px);
+    }
+
+    .greenGradient {
+      right: -2.6%;
+      top: -260px;
+    }
+
+    .orangeGradient {
+      left: 0%;
+      bottom: 0%;
+    }
 }
   
 .transitionToBackgound {

pages/contribute.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import styles from '@/modules/contribute/contribute.module.scss';
 import { GooglePlayButton } from '@/components/googlePlayButton';
+import { TelegramCardButton } from '@/components/telegramCardButton';
 import { GithubCardButton } from '@/components/githubCardButton';
 import { Card } from '@/components/card';
 import { Footer } from '@/components/footer';
@@ -39,6 +40,9 @@ export default function ContributePage() {
               />
             </div>
           </Card>
+          <div className={styles.additionalStores}>
+            <TelegramCardButton />
+          </div>
           <div className={styles.additionalStores}>
             <GithubCardButton />
           </div>

pages/index.tsx

@@ -1,4 +1,5 @@
 import { Footer } from '@/components/footer';
+import { TelegramCardButton } from '@/components/telegramCardButton';
 import { GithubCardButton } from '@/components/githubCardButton';
 import { GooglePlayButton } from '@/components/googlePlayButton';
 import { ContributeCard } from '@/modules/home/contributeCard';
@@ -30,6 +31,9 @@ export default function HomePage() {
         <div className={styles.cardsRow}>
           <div className={styles.storesBlock}>
             <GooglePlayButton className={styles.googlePlayButton} />
+            <div>
+              <TelegramCardButton />
+            </div>
             <div>
               <GithubCardButton />
             </div>