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 ( + +
+ +
+ Telegram + +
+ +
+
+ ); +} \ 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() {
+
+ +