diff --git a/assets/icons/telegram.svg b/assets/icons/telegram.svg new file mode 100644 index 0000000..4e87211 --- /dev/null +++ b/assets/icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/cities-star-mask.svg b/assets/images/cities-star-mask.svg index ca300b5..3874b7b 100644 --- a/assets/images/cities-star-mask.svg +++ b/assets/images/cities-star-mask.svg @@ -1,3 +1,3 @@ - + diff --git a/components/card/card.module.scss b/components/card/card.module.scss index cbc61b0..c2f5150 100644 --- a/components/card/card.module.scss +++ b/components/card/card.module.scss @@ -30,20 +30,17 @@ } .backdropOnText { - background-color: var(--background); padding: 0.5rem 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .backdropOnText { - background-color: var(--background); padding: 0 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; z-index: 1 !important; position: relative; - box-shadow: 0px 5px 0px var(--background); } .backdropTextHelper { @@ -55,7 +52,7 @@ } .backdropTextHelper .backdropOnText { - box-shadow: 00px -5px 0px var(--background); + // box-shadow: 00px -5px 0px var(--background); } .content { diff --git a/components/telegramLink/index.tsx b/components/telegramLink/index.tsx new file mode 100644 index 0000000..024f794 --- /dev/null +++ b/components/telegramLink/index.tsx @@ -0,0 +1 @@ +export * from './telegramLink'; \ No newline at end of file diff --git a/components/telegramLink/telegramLink.module.scss b/components/telegramLink/telegramLink.module.scss new file mode 100644 index 0000000..86395fe --- /dev/null +++ b/components/telegramLink/telegramLink.module.scss @@ -0,0 +1,14 @@ +.linkWrapper { + display: inline-flex; + height: min-content; +} + +.link { + display: inline-flex; + padding: 18px; + cursor: none; +} + +.linkIcon { + color: var(--on-background); +} \ No newline at end of file diff --git a/components/telegramLink/telegramLink.tsx b/components/telegramLink/telegramLink.tsx new file mode 100644 index 0000000..7b9191b --- /dev/null +++ b/components/telegramLink/telegramLink.tsx @@ -0,0 +1,30 @@ +import styles from './telegramLink.module.scss'; +import Link, { LinkProps } from 'next/link'; +import TelegramIcon from '@/assets/icons/telegram.svg'; +import clsx from 'clsx'; +import { CursorEffect } from '@/components/cursor'; + +type TelegramLinkProps = Omit & { className?: string }; + +export function TelegramLink(props: TelegramLinkProps) { + const { className: restClassName, ...restProps } = props; + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/components/topBar/topBar.tsx b/components/topBar/topBar.tsx index 58db321..f144a95 100644 --- a/components/topBar/topBar.tsx +++ b/components/topBar/topBar.tsx @@ -8,6 +8,7 @@ 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; @@ -46,6 +47,7 @@ export function TopBar(props: TopBarProps) { )} + ); diff --git a/modules/home/citiesCard/citiesCard.module.scss b/modules/home/citiesCard/citiesCard.module.scss index c27c459..152f9be 100644 --- a/modules/home/citiesCard/citiesCard.module.scss +++ b/modules/home/citiesCard/citiesCard.module.scss @@ -81,7 +81,7 @@ display: flex; flex-direction: row; right: -280px; - bottom: 100px; + bottom: 300px; transform-origin: right center; transform: rotate(356deg); gap: 9px; @@ -110,7 +110,7 @@ bottom: 200px; } .bigCitiesLine { - bottom: 50px; + bottom: 150px; } } @@ -129,4 +129,20 @@ .bigCitiesLine svg { width: 200px; } +} + +@media (max-width: 500px) { + .card { + height: 390px; + } + .smallCitiesLine { + bottom: 160px; + + svg { + width: 170px; + } + } + .bigCitiesLine { + bottom: 75px; + } } \ No newline at end of file diff --git a/modules/home/citiesCard/citiesCard.tsx b/modules/home/citiesCard/citiesCard.tsx index 2a751a5..7a86b5f 100644 --- a/modules/home/citiesCard/citiesCard.tsx +++ b/modules/home/citiesCard/citiesCard.tsx @@ -9,7 +9,7 @@ import CityBigEn from '@/assets/images/city-big-en.svg'; import CityPolotskSmallRu from '@/assets/images/city-polotsk-small-ru.svg'; import CityNovopolotskSmallRu from '@/assets/images/city-novopolotsk-small-ru.svg'; import CityBigRu from '@/assets/images/city-big-ru.svg'; -import maskUrl from '@/assets/images/cities-star-mask.svg?url'; +import Mask from '@/assets/images/cities-star-mask.svg'; import ridebusImage from '@/assets/images/cities-backdrop.jpg'; import Image from 'next/image'; import useFrame from '@/utils/useFrame'; @@ -104,13 +104,12 @@ function BigCitiesLine() { export function CitiesCard() { const t = useLocale(locales); - const ridebusImageMaskRef = useRef(null); + const ridebusImageMask = useRef(null); const ridebusImageRef = useRef(null); useFrame((delta, time) => { - if (ridebusImageMaskRef.current && ridebusImageRef.current) { - ridebusImageMaskRef.current.style.transform = `rotate(${-(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`; - ridebusImageRef.current.style.transform = `rotate(${(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`; + if (ridebusImageMask.current) { + ridebusImageMask.current.style.transform = `rotate(${-(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`; } }); @@ -123,24 +122,10 @@ export function CitiesCard() { classes={{ subtitle: styles.description, title: styles.title }} >
-
-
- -
+
+
-
diff --git a/modules/home/header.tsx b/modules/home/header.tsx index d7f6919..8e9101a 100644 --- a/modules/home/header.tsx +++ b/modules/home/header.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx'; import { manrope, caveat } from '@/styles/fonts'; import ThinStarBig from '@/assets/images/thin-star-big.svg'; import ThickRoundStar5 from '@/assets/images/thick-round-star-5.svg'; -import thickRoundStar6Url from '@/assets/images/thick-round-star-6.svg?url'; +import ThickRoundStar6 from '@/assets/images/thick-round-star-6.svg'; import ridebusFlat from '@/assets/images/cities-backdrop.jpg'; import Image from 'next/image'; import { Gradients } from '@/components/gradients'; @@ -22,12 +22,7 @@ const locales: LocalesMap = { Приложение, которое поможет -
- вам -
- -
-
+ вам с лёгкостью смотреть @@ -43,12 +38,7 @@ const locales: LocalesMap = { app that helps -
- you -
- -
-
+ you conveniently view @@ -69,8 +59,7 @@ export default function Header() { const t = useLocale(locales); const sloganLineRef = useRef(null); const transitionToBackgoundRef = useRef(null); - const thickRoundStar6MaskRef = useRef(null); - const thickRoundStar6ImageRef = useRef(null); + const thickRoundStar6 = useRef(null); const thickRoundStar5 = useRef(null); const breakpoint600 = false;//useMediaQuery('(max-width: 600px)'); @@ -91,16 +80,12 @@ export default function Header() { transitionToBackgoundRef.current.style.height = `${scrollY + 300}px`; } - if (thickRoundStar6MaskRef.current && scrollY - 300 < window.innerHeight) { - thickRoundStar6MaskRef.current.style.transform = `translate3D(0px, ${scrollY / 6}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`; - } - - if (thickRoundStar6ImageRef.current && scrollY - 300 < window.innerHeight) { - thickRoundStar6ImageRef.current.style.transform = `rotate(${-scrollY / 8 - (time * 0.01) % 360}deg) translate3d(0,0,0)`; + if (thickRoundStar6.current && scrollY - 300 < window.innerHeight) { + thickRoundStar6.current.style.transform = `translate3D(0px, ${scrollY / 2}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`; } if (thickRoundStar5.current && scrollY - 300 < window.innerHeight) { - thickRoundStar5.current.style.transform = `translate3D(-50%, -50%,0) rotate(${-scrollY / 6 - 10}deg)`; + thickRoundStar5.current.style.transform = `translate3D(0px, ${scrollY / 8}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`; } }, { accelerator: 0.06 }); @@ -108,19 +93,13 @@ export default function Header() {
-
- +
+ +
+
+

@@ -128,11 +107,6 @@ export default function Header() {

-
-
- -
-
); } \ No newline at end of file diff --git a/modules/home/home.module.scss b/modules/home/home.module.scss index 027ad6e..86aa49b 100644 --- a/modules/home/home.module.scss +++ b/modules/home/home.module.scss @@ -96,16 +96,14 @@ top: 20vh; left: -125px; z-index: 0; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: 50%; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; + color: #1d4fac; - img { + div { position: absolute; width: 400px; height: 400px; @@ -114,18 +112,22 @@ } .thickRoundStar5 { - position: relative; - max-width: 1500px; - width: 100%; - margin: auto; - z-index: 100000; + position: absolute; + top: 50vh; + right: -100px; + z-index: 0; + width: 250px; + height: 250px; + display: flex; + align-items: center; + justify-content: center; + color: #715573; div { position: absolute; - top: -50px; - right: 50px; - transform: translate(-50%, -50%) rotate(-10deg); - color: #9f7ea1; + width: 400px; + height: 400px; + object-fit: contain; } } @@ -256,6 +258,13 @@ left: -62px; top: 8vh; } + + .thickRoundStar5 { + width: 125px; + height: 125px; + right: -48px; + top: 74vh; + } } @media screen and (max-width: 500px) {