optimization

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>
   );