minor changes #7

app/teachers/page.tsx

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 };
 
 const containerCn = clsx('flex', 'flex-col', 'items-start', 'justify-start');
-const titleCn = clsx('text-4xl', 'font-bold', 'mb-4', 'w-2/3');
+const titleCn = clsx('text-4xl', 'font-bold', 'mb-4', 'w-2/3', 'h-52', 'relative', 'z-10');
 
 /**
  * @returns React component.

components/Menu/MenuList.tsx

@@ -1,8 +1,7 @@
-import {FocusEvent, ReactNode, useCallback, useContext} from 'react';
+import {FocusEvent, ReactNode, useCallback, useContext, useEffect} from 'react';
 import {m} from 'framer-motion';
 import {useHotkeys} from 'react-hotkeys-hook';
 import clsx from 'clsx';
-import useScroll from '@/lib/shared/useScroll';
 import useWindowDimensions from '@/lib/shared/useWindowDimensions';
 import {MenuContext} from './MenuContext';
 import {MenuPosition} from './MenuPosition';
@@ -60,7 +59,14 @@ export default function MenuList({children}: MenuListProps) {
   const {isOpen, setIsOpen, position} = useContext(MenuContext);
   const close = useCallback(() => setIsOpen(false), [setIsOpen]);
   useHotkeys('esc', close);
-  useScroll(close);
+
+  useEffect(() => {
+    addEventListener('scroll', close);
+
+    return () => {
+      removeEventListener('scroll', close);
+    };
+  }, [close]);
 
   const {height} = useWindowDimensions();
 

components/ScrollToTop/ScrollToTop.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import {CSSProperties, useCallback, useState} from 'react';
-import {m} from 'framer-motion';
+import {CSSProperties, useState} from 'react';
+import {m, useScroll, useMotionValueEvent} from 'framer-motion';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCircleArrowUp} from '@fortawesome/free-solid-svg-icons';
 import clsx from 'clsx';
-import useScroll, {ScrollHandler} from '@/lib/shared/useScroll';
+//import useScroll, {ScrollHandler} from '@/lib/shared/useScroll';
 import {isPrefersReducedMotion} from '@/utils/isPrefersReducedMotion';
 
 /**
@@ -29,15 +29,11 @@ const btnCn = clsx('fixed', 'z-10');
  */
 export default function ScrollToTopButton({offset = 1000, ...position}: ScrollToTopButtonProps) {
   const [visible, setVisible] = useState(false);
+  const {scrollY} = useScroll();
 
-  const scrollHandler: ScrollHandler = useCallback(
-    ({scrollTop}) => {
-      setVisible(scrollTop ? scrollTop > offset : false);
-    },
-    [offset],
-  );
-
-  useScroll(scrollHandler);
+  useMotionValueEvent(scrollY, 'change', latest => {
+    setVisible(latest ? latest > offset : false);
+  });
 
   return (
     <m.button

components/Teachers/Teacher.tsx

@@ -1,14 +1,51 @@
+import {Variants, m, useScroll, useTransform} from 'framer-motion';
+import {useRef} from 'react';
 import teachersListConfig from './teachersListConfig';
+import clsx from 'clsx';
 
 /**
  * Props.
  */
 type TeacherBlockProps = (typeof teachersListConfig)[number];
 
+const cardVariants: Variants = {
+  offscreen: {
+    rotate: -10,
+    transition: {
+      type: 'spring',
+      duration: 0.8,
+    },
+  },
+  onscreen: {
+    rotate: 0,
+    transition: {
+      type: 'spring',
+      duration: 0.8,
+    },
+  },
+};
+
+const nameCn = clsx('text-7xl');
+const textCn = clsx('text-3xl', 'mt-4');
+
 /**
  * @param {TeacherBlockProps} props Props.
  * @returns React component.
  */
-export default function Teacher({name}: TeacherBlockProps) {
-  return <div>{name}</div>;
+export default function Teacher({name, style, superPowers, groupLessons}: TeacherBlockProps) {
+  const ref = useRef(null);
+  const {scrollYProgress} = useScroll({target: ref, offset: ['start end', 'end end']});
+  const opacity = useTransform(scrollYProgress, [0, 0.25, 0.9, 1], [0, 1, 1, 0]);
+
+  return (
+    <m.div
+      style={{opacity}}
+      ref={ref}
+    >
+      <div className={nameCn}>{name}</div>
+      <div className={textCn}>{style}</div>
+      <div className={textCn}>{`Super powers: ${superPowers}`}</div>
+      <div className={textCn}>{`Group lessons: ${groupLessons}`}</div>
+    </m.div>
+  );
 }

components/Teachers/Teachers.tsx

@@ -2,7 +2,6 @@
 
 import {useState} from 'react';
 import TeachersBynamicBg from './TeachersDynamicBg';
-import TeachersList from './TeachersList';
 import teachersListConfig from './teachersListConfig';
 import Teacher from './Teacher';
 import ViewportBlock from './ViewportBlock';
@@ -15,12 +14,6 @@ export default function Teachers() {
 
   return (
     <div>
-      <ViewportBlock
-        setBgSrc={setBgSrc}
-        bgSrc={null}
-      >
-        <TeachersList />
-      </ViewportBlock>
       {teachersListConfig.map(t => (
         <ViewportBlock
           key={t.id}

components/Teachers/TeachersDynamicBg.tsx

@@ -26,7 +26,7 @@ const bgCn = clsx(
  */
 export default function TeachersBynamicBg({bgSrc}: TeachersBynamicBgProps) {
   return (
-    <AnimatePresence mode="popLayout">
+    <AnimatePresence mode="wait">
       {bgSrc !== null && (
         <m.div
           className={bgCn}

components/Teachers/ViewportBlock.tsx

@@ -19,7 +19,7 @@ const blockCn = clsx('h-screen', 'relative', 'z-10', 'flex', 'grow', 'flex-1');
  */
 export default function ViewportBlock({setBgSrc, bgSrc, children}: ViewportBlockProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const {isOnScreen} = useOnScreen({ref, threshold: 0.6});
+  const {isOnScreen} = useOnScreen({ref, threshold: 0.25});
 
   useLayoutEffect(() => {
     if (isOnScreen) {