diff --git a/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.module.scss b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.module.scss new file mode 100644 index 000000000..c4ba51b22 --- /dev/null +++ b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.module.scss @@ -0,0 +1,16 @@ +.intro{ + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #111; + color: white; + text-align: center; + font-size: 24px; + //background: url('') no-repeat center center; + background-size: cover; + z-index: 1; + transition: opacity 0.5s ease, visibility 0.5s ease; + +} \ No newline at end of file diff --git a/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.tsx b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.tsx new file mode 100644 index 000000000..a913740d0 --- /dev/null +++ b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.tsx @@ -0,0 +1,32 @@ +import {forwardRef} from "react"; +import {Button, ButtonTheme} from "@/shared/ui/Button"; +import cls from "./Intro.module.scss"; + +type Props = { + scrollToContent: () => void; +}; + +const Intro = forwardRef((props, ref) => { + const { scrollToContent } = props; + return ( +
+

+ Welcome to our website! +

+

+ Scroll down to see more +

+ +
+ ); +}); + +Intro.displayName = "IntroComponent"; + +export default Intro; \ No newline at end of file diff --git a/frontend-next-migration/src/app/[lng]/(home)/_useScrollHandler.ts b/frontend-next-migration/src/app/[lng]/(home)/_useScrollHandler.ts new file mode 100644 index 000000000..bfd8c2ce7 --- /dev/null +++ b/frontend-next-migration/src/app/[lng]/(home)/_useScrollHandler.ts @@ -0,0 +1,90 @@ +import { useEffect, useState } from 'react'; + +export const _useScrollHandler = (introRef: React.RefObject) => { + const [isScrollbarHidden, setIsScrollbarHidden] = useState(true); + + const updateScrollbarVisibility = () => { + const isBelowIntro = window.scrollY > (introRef.current?.clientHeight || window.innerHeight); + setIsScrollbarHidden(!isBelowIntro); + }; + + const disableUserInteraction = () => { + document.body.style.pointerEvents = 'none'; + document.body.style.userSelect = 'none'; + document.body.style.overflow = 'hidden'; + }; + + const enableUserInteraction = () => { + document.body.style.pointerEvents = ''; + document.body.style.userSelect = ''; + document.body.style.overflow = ''; + }; + + const scrollToIntroOrContent = (lastScrollY: { value: number }) => { + const currentScrollY = window.scrollY; + const scrollDirection = currentScrollY > lastScrollY.value ? 'down' : 'up'; + lastScrollY.value = currentScrollY; + + if (introRef.current) { + const introBottom = introRef.current.clientHeight; + + if (scrollDirection === 'up' && window.scrollY <= introBottom) { + disableUserInteraction(); + setTimeout(() => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + setTimeout(() => { + enableUserInteraction(); + }, 500); + }, 100); + } + + if (scrollDirection === 'down' && window.scrollY < introBottom) { + disableUserInteraction(); + setTimeout(() => { + window.scrollTo({ + top: introBottom + 1, + behavior: 'smooth', + }); + setTimeout(() => { + enableUserInteraction(); + }, 500); + }, 100); + } + } + }; + + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + + let lastScrollY = { value: 0 }; + const handleScroll = () => { + updateScrollbarVisibility(); + scrollToIntroOrContent(lastScrollY); + }; + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const scrollToContent = () => { + if (introRef.current) { + disableUserInteraction(); + window.scrollTo({ + top: introRef.current.clientHeight + 1, + behavior: 'smooth', + }); + setTimeout(() => { + enableUserInteraction(); + }, 500); + } + }; + + return { isScrollbarHidden, scrollToContent }; +}; diff --git a/frontend-next-migration/src/app/[lng]/(home)/layout.tsx b/frontend-next-migration/src/app/[lng]/(home)/layout.tsx index 0ec39aa7f..f5bcdf2ab 100644 --- a/frontend-next-migration/src/app/[lng]/(home)/layout.tsx +++ b/frontend-next-migration/src/app/[lng]/(home)/layout.tsx @@ -1,19 +1,40 @@ -import {ReactNode} from "react"; -import {Navbar} from "@/widgets/Navbar"; -import {Footer} from "@/widgets/Footer"; -import {ScrollTop} from "@/features/ScrollTop"; +'use client' +import { ReactNode, useRef } from 'react'; +import { Navbar } from '@/widgets/Navbar'; +import { Footer } from '@/widgets/Footer'; +import { ScrollTop } from '@/features/ScrollTop'; +import Intro from './_intro/Intro'; +import { _useScrollHandler } from './_useScrollHandler'; + type Props = { children: ReactNode; -} +}; + +export default function HomeLayout({ children }: Props) { + const introRef = useRef(null); + const { isScrollbarHidden, scrollToContent} = _useScrollHandler(introRef); -export default function HomeLayout({children}: Props) { return ( <> - - {children} -