|
|
import styles from '@/modules/home/home.module.scss';
|
|
|
import useLocale from '@/utils/useLocale';
|
|
|
import { LocalesMap } from '@/utils/useLocale';
|
|
|
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 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';
|
|
|
import { useEffect, useRef, Fragment } from 'react';
|
|
|
import useScroll from '@/utils/useScroll';
|
|
|
import { TopBar } from '@/components/topBar';
|
|
|
import useFrame from '@/utils/useFrame';
|
|
|
import useMediaQuery from '@/utils/useMediaQuery';
|
|
|
|
|
|
const locales: LocalesMap = {
|
|
|
ru: {
|
|
|
slogan_line: (
|
|
|
<>
|
|
|
<span>Приложение,</span>
|
|
|
<span>которое</span>
|
|
|
<span>поможет</span>
|
|
|
<span>вам</span>
|
|
|
<span>с</span>
|
|
|
<span className={styles.spendWord}>лёгкостью</span>
|
|
|
<span>смотреть</span>
|
|
|
<span>расписание</span>
|
|
|
<span className={clsx(caveat.className, styles.wiselyWord)}>транспорта</span>
|
|
|
</>
|
|
|
),
|
|
|
},
|
|
|
en: {
|
|
|
slogan_line: (
|
|
|
<>
|
|
|
<span>Small</span>
|
|
|
<span>app</span>
|
|
|
<span>that</span>
|
|
|
<span>helps</span>
|
|
|
<span>you</span>
|
|
|
<span className={styles.spendWord}>conveniently</span>
|
|
|
<span>view</span>
|
|
|
<span className={clsx(caveat.className, styles.wiselyWord)}>
|
|
|
public
|
|
|
</span>
|
|
|
<span className={clsx(caveat.className, styles.wiselyWord)}>
|
|
|
transport
|
|
|
</span>
|
|
|
<span className={clsx(caveat.className, styles.wiselyWord)}>
|
|
|
schedules
|
|
|
</span>
|
|
|
</>
|
|
|
),
|
|
|
},
|
|
|
};
|
|
|
|
|
|
export default function Header() {
|
|
|
const t = useLocale(locales);
|
|
|
const sloganLineRef = useRef<HTMLSpanElement>(null);
|
|
|
const transitionToBackgoundRef = useRef<HTMLDivElement>(null);
|
|
|
const thickRoundStar6 = useRef<HTMLDivElement>(null);
|
|
|
const thickRoundStar5 = useRef<HTMLDivElement>(null);
|
|
|
const breakpoint600 = false;//useMediaQuery('(max-width: 600px)');
|
|
|
|
|
|
useScroll((scrollY, deltaTime, time) => {
|
|
|
const childs: HTMLSpanElement[] = [
|
|
|
...Array.from(sloganLineRef.current?.children || []),
|
|
|
] as HTMLSpanElement[];
|
|
|
|
|
|
childs.forEach((child, index) => {
|
|
|
const rawOffset = Math.min(-scrollY * 2 + index * 50, 0);
|
|
|
const offset = Math.max(-Math.pow(rawOffset / 50, 2), -500);
|
|
|
const rotateDirection = index % 2 === 0 ? 1 : -1;
|
|
|
|
|
|
child.style.transform = `translate3D(0px, ${offset}px, 0px) rotate(${(offset / 10) * rotateDirection}deg)`;
|
|
|
});
|
|
|
|
|
|
if (transitionToBackgoundRef.current && scrollY + 300 < window.innerHeight) {
|
|
|
transitionToBackgoundRef.current.style.height = `${scrollY + 300}px`;
|
|
|
}
|
|
|
|
|
|
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(0px, ${scrollY / 8}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
|
|
|
}
|
|
|
}, { accelerator: 0.06 });
|
|
|
|
|
|
return (
|
|
|
<Fragment>
|
|
|
<header className={styles.header}>
|
|
|
<TopBar />
|
|
|
<div className={styles.thickRoundStar6}
|
|
|
ref={thickRoundStar6}>
|
|
|
<ThickRoundStar6 />
|
|
|
</div>
|
|
|
<div className={styles.thickRoundStar5}
|
|
|
ref={thickRoundStar5}>
|
|
|
<ThickRoundStar5 />
|
|
|
</div>
|
|
|
<h1 className={clsx(styles.slogan, manrope.className)}>
|
|
|
<span ref={sloganLineRef} className={styles.line1}>
|
|
|
{t('slogan_line')}
|
|
|
</span>
|
|
|
</h1>
|
|
|
</header>
|
|
|
</Fragment>
|
|
|
);
|
|
|
} |