diff --git a/assets/images/header-gradient-primary.svg b/assets/images/header-gradient-primary.svg
new file mode 100644
index 0000000..0c23e84
--- /dev/null
+++ b/assets/images/header-gradient-primary.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/assets/images/header-gradient-tertiary.svg b/assets/images/header-gradient-tertiary.svg
new file mode 100644
index 0000000..0542b59
--- /dev/null
+++ b/assets/images/header-gradient-tertiary.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/assets/images/noise.png b/assets/images/noise.png
new file mode 100644
index 0000000..3a3c8ac
Binary files /dev/null and b/assets/images/noise.png differ
diff --git a/components/telegramCardButton/index.tsx b/components/telegramCardButton/index.tsx
new file mode 100644
index 0000000..40e62c1
--- /dev/null
+++ b/components/telegramCardButton/index.tsx
@@ -0,0 +1 @@
+export * from './telegramCardButton';
\ No newline at end of file
diff --git a/components/telegramCardButton/telegramCardButton.module.scss b/components/telegramCardButton/telegramCardButton.module.scss
new file mode 100644
index 0000000..a27e39c
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/components/telegramCardButton/telegramCardButton.tsx b/components/telegramCardButton/telegramCardButton.tsx
new file mode 100644
index 0000000..4723062
--- /dev/null
+++ b/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 & { className?: string };
+
+export function TelegramCardButton(props: TelegramCardButtonProps) {
+ const { className: restCalssName, ...restProps } = props;
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/topBar/topBar.tsx b/components/topBar/topBar.tsx
index 94af988..7726ec5 100644
--- a/components/topBar/topBar.tsx
+++ b/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) {
)}
-
-
);
diff --git a/modules/contribute/header/header.module.scss b/modules/contribute/header/header.module.scss
index b0488d8..7630f5a 100644
--- a/modules/contribute/header/header.module.scss
+++ b/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;
diff --git a/modules/contribute/header/header.tsx b/modules/contribute/header/header.tsx
index cf80300..2eaacef 100644
--- a/modules/contribute/header/header.tsx
+++ b/modules/contribute/header/header.tsx
@@ -120,7 +120,6 @@ export function Header() {
-
);
diff --git a/modules/contribute/shareCard/shareCard.module.scss b/modules/contribute/shareCard/shareCard.module.scss
index ec167d3..5ad3c2c 100644
--- a/modules/contribute/shareCard/shareCard.module.scss
+++ b/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;
}
diff --git a/modules/home/header.tsx b/modules/home/header.tsx
index 4ec9964..30ccfaa 100644
--- a/modules/home/header.tsx
+++ b/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: 'Приложение, которое поможет вам с лёгкостью смотреть расписание транспорта',
},
en: {
- slogan_line: (
- <>
- Small
- app
- that
- helps
- you
- conveniently
- view
-
- public
-
-
- transport
-
-
- schedules
-
- >
- ),
+ slogan_line: 'Small app that helps you conveniently view public transpot schedules',
},
};
@@ -101,17 +73,10 @@ export default function Header() {
ref={thickRoundStar5}>
-
-
- {t('slogan_line')}
-
-
+ {t('slogan_line')}
-
- {!breakpoint600 &&
}
+
+
diff --git a/modules/home/home.module.scss b/modules/home/home.module.scss
index 00d4a61..10b423f 100644
--- a/modules/home/home.module.scss
+++ b/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 {
diff --git a/pages/contribute.tsx b/pages/contribute.tsx
index ea14560..fb6ed3b 100644
--- a/pages/contribute.tsx
+++ b/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() {
/>
+
+
+
diff --git a/pages/index.tsx b/pages/index.tsx
index da18e7e..40d142a 100644
--- a/pages/index.tsx
+++ b/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() {