first commit

components/googlePlayButton/googlePlayButton.module.scss

@@ -0,0 +1,89 @@
+.card {
+    border-radius: 36px;
+    overflow: hidden;
+    background-color: #a4a4a41c;
+    transition: 0.3s ease;
+    backdrop-filter: blur(18px);
+  
+    &:hover {
+      background-color: #3d3d3d1c;
+    }
+  
+    a {
+      cursor: none;
+    }
+}
+  
+.disableGlass {
+    background-color: #f5f5f5;
+    backdrop-filter: none;
+  
+    &:hover {
+      background-color: #eaeaea;
+    }
+}
+  
+.content {
+    display: flex;
+    flex-direction: row;
+    padding: 22px;
+}
+  
+.qrCode {
+    width: 200px;
+    height: 200px;
+    margin-right: 20px;
+    flex-shrink: 0;
+}
+  
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+  
+.linkIcon {
+    width: 42px;
+    height: 42px;
+    margin-left: auto;
+}
+  
+.getText {
+    color: #838383;
+    font-weight: 700;
+    font-size: 1.25rem;
+    margin-top: auto;
+    margin-bottom: -6px;
+    margin-right: 8px;
+}
+  
+.storeNameText {
+    color: #242424;
+    font-weight: 700;
+    font-size: 2rem;
+    margin-right: 8px;
+}
+  
+@media screen and (max-width: 1180px) {
+    .qrCode {
+      width: 180px;
+      height: 180px;
+    }
+}
+  
+@media screen and (max-width: 980px) {
+    .qrCode {
+      display: none;
+    }
+    .content {
+      padding-left: 32px;
+      padding-bottom: 26px;
+    }
+}
+  
+  
+@media screen and (max-width: 620px) {
+    .content {
+      padding: 36px;
+    }
+}

components/googlePlayButton/googlePlayButton.tsx

@@ -0,0 +1,57 @@
+import styles from './googlePlayButton.module.scss';
+import Link, { LinkProps } from 'next/link';
+import QRCodeSvg from '@/assets/images/qr-code.svg';
+import LinkIcon from '@/assets/icons/link.svg';
+import useLocale, { LocalesMap } from '@/utils/useLocale';
+import clsx from 'clsx';
+import { CursorEffect } from '@/components/cursor';
+
+const locales: LocalesMap = {
+  ru: {
+    getText: 'Доступно в',
+  },
+  en: {
+    getText: 'Get it on',
+  },
+};
+
+type GooglePlayButtonProps = Omit<LinkProps, 'href'> & {
+  className?: string;
+  disableGlass?: boolean;
+};
+
+export function GooglePlayButton(props: GooglePlayButtonProps) {
+  const {
+    className: restCalssName,
+    disableGlass = false,
+    ...restProps
+  } = props;
+  const t = useLocale(locales);
+
+  return (
+    <CursorEffect cursorBorderRadius={36} cursorPadding={12}>
+      <div
+        className={clsx(
+          styles.card,
+          disableGlass && styles.disableGlass,
+          restCalssName
+        )}
+      >
+        <Link
+          {...restProps}
+          target="_blank"
+          href="https://play.google.com/store/apps/details?id=org.xtimms.ridebus"
+        >
+          <div className={styles.content}>
+            <QRCodeSvg className={styles.qrCode} />
+            <div className={styles.textContainer}>
+              <LinkIcon className={styles.linkIcon} />
+              <span className={styles.getText}>{t('getText')}</span>
+              <span className={styles.storeNameText}>Google Play</span>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </CursorEffect>
+  );
+}

components/googlePlayButton/index.tsx

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