chore: update dependencies and improve TypeScript configuration

.nvmrc

@@ -0,0 +1 @@
+20.9.0

components/LanguageSelector.jsx

@@ -9,23 +9,17 @@ export default function LanguageSelector() {
     <>
       <div className={languageSelector}>
         <ul>
-          <Link href={currPage} locale="pt">
-            <li>
-              Português
-              </li>
-          </Link>
+          <li>
+            <Link href={currPage} locale="pt">Português</Link>
+          </li>
 
-          <Link href={currPage} locale="en">
-            <li>
-              English
-              </li>
-          </Link>
+          <li>
+            <Link href={currPage} locale="en">English</Link>
+          </li>
 
-          <Link href={currPage} locale="es">
-            <li>
-              Español
-            </li>
-          </Link>
+          <li>
+            <Link href={currPage} locale="es">Español</Link>
+          </li>
         </ul>
       </div>
     </>

components/banners-components/ProjectBanner.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import BannersTextSec from './elements/BannersTextSec.jsx';
 import styles from 'styles/ProjectBanner.module.css';
-import ReactVisibilitySensor from 'react-visibility-sensor';
 
 function ProjectBanner(props) {
 	const { textContent, bgColor, folderName, loop, autoPlay } = props;
@@ -11,6 +10,7 @@ function ProjectBanner(props) {
 	}
 
 	const videoElement = useRef(null);
+	const bannerRef = useRef(null);
 	const [videoAutoPlayable, setVideoAutoPlayable] = useState(true);
 	const [isVisible, setIsVisible] = useState(false);
 
@@ -37,26 +37,37 @@ function ProjectBanner(props) {
 		if(autoPlay) attemptPlay();
 	}, []);
 
+	useEffect(() => {
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry.isIntersecting) {
+				playVideo(true);
+				observer.disconnect();
+			}
+		}, { threshold: 0.2 });
+
+		if (bannerRef.current) {
+			observer.observe(bannerRef.current);
+		}
+
+		return () => observer.disconnect();
+	}, [autoPlay, folderName]);
+
 	return (
 		<section style={sectionStyle} className={`-section`}>
-			<div className={`-standardContainer ${styles.projectBannerContainer}`}>
-				<ReactVisibilitySensor
-					active={!isVisible}
-					onChange={playVideo}>
-					{videoAutoPlayable ?
-						<video className={styles.projectBannerMidia} ref={videoElement} loop={loop} muted playsInline preload="auto">
-							<source src={`/images/HomePage/banners/${folderName}/videoIOS.mp4`} type="video/mp4" />
-							<source src={`/images/HomePage/banners/${folderName}/video.webm`} type="video/webm" />
-							<source src={`/images/HomePage/banners/${folderName}/video.mp4`} type="video/mp4" />
-						</video>
-						:
-						<picture className={styles.projectBannerMidia}>
-							<source srcset={`/images/HomePage/banners/${folderName}/static.png`} type="image/png" />
-							<source srcset={`/images/HomePage/banners/${folderName}/static.webp`} type="image/webp" />
-							<img src={`/images/HomePage/banners/${folderName}/static.webp`} type="image/webp" className={styles.projectBannerMidia} alt = "Static Project Image"  />
-						</picture>
-					}
-				</ReactVisibilitySensor>
+			<div ref={bannerRef} className={`-standardContainer ${styles.projectBannerContainer}`}>
+				{videoAutoPlayable ?
+					<video className={styles.projectBannerMidia} ref={videoElement} loop={loop} muted playsInline preload="auto">
+						<source src={`/images/HomePage/banners/${folderName}/videoIOS.mp4`} type="video/mp4" />
+						<source src={`/images/HomePage/banners/${folderName}/video.webm`} type="video/webm" />
+						<source src={`/images/HomePage/banners/${folderName}/video.mp4`} type="video/mp4" />
+					</video>
+					:
+					<picture className={styles.projectBannerMidia}>
+						<source srcSet={`/images/HomePage/banners/${folderName}/static.png`} type="image/png" />
+						<source srcSet={`/images/HomePage/banners/${folderName}/static.webp`} type="image/webp" />
+						<img src={`/images/HomePage/banners/${folderName}/static.webp`} className={styles.projectBannerMidia} alt="Static Project Image" />
+					</picture>
+				}
 				<BannersTextSec textContent={textContent} />
 			</div>
 		</section>

components/general/CounterText.jsx

@@ -1,35 +1,38 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import CountUp from 'react-countup';
-import VisibilitySensor from 'react-visibility-sensor';
 
 export default function CounterText(props) {
   const { value } = props;
   const { suffix } = props;
   const { plus } = props;
   const [isVisible, setIsVisible] = useState(false);
+  const triggerRef = useRef(null);
 
-  const startCounting = (isInViewPort) => {
-    if (isInViewPort) {
-      setIsVisible(true);
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        observer.disconnect();
+      }
+    }, { threshold: 0.2 });
+
+    if (triggerRef.current) {
+      observer.observe(triggerRef.current);
     }
-  };
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <>
       <div className={props.className}>
-        <CountUp
-          prefix={plus ? '+' : ''}
-          end={value}
-          start={isVisible ? null : 0}>
-          {({ countUpRef }) => (
-            <VisibilitySensor
-              active={!isVisible}
-              onChange={startCounting}
-              delayedCall>
-              <span ref={countUpRef} />
-            </VisibilitySensor>
-          )}
-        </CountUp>
+        <span ref={triggerRef} aria-hidden="true" />
+        {isVisible && (
+          <CountUp
+            prefix={plus ? '+' : ''}
+            end={value}
+          />
+        )}
         <h2>{suffix}</h2>
         <br />
       </div>

components/navbar-components/NavLinks.jsx

@@ -9,31 +9,21 @@ export default function NavLinks(props) {
   return (
     <>
       <ul className={props.className}>
-        <Link href="/zenith">
-          <li className={navBarItem}>
-            <a href="/zenith">{navTexts[0]}</a>
-          </li>
-        </Link>
-        <Link href="/projetos">
-          <li className={navBarItem}>
-            <a href="/projetos">{navTexts[1]}</a>
-          </li>
-        </Link>
-        <Link href="/kurumim">
-          <li className={navBarItem}>
-            <a href="/kurumim">{navTexts[2]}</a>
-          </li>
-        </Link>
-        <Link href="/processo-seletivo">
-          <li className={navBarItem}>
-            <a href="/processo-seletivo">{navTexts[3]}</a>
-          </li>
-        </Link>
-        <Link href="https://ob-site.vercel.app/" passHref={true}>
-          <li className={navBarItem}>
-            <a href="https://ob-site.vercel.app/" passHref={true}>{navTexts[4]}</a>
-          </li>
-        </Link>
+        <li className={navBarItem}>
+          <Link href="/zenith">{navTexts[0]}</Link>
+        </li>
+        <li className={navBarItem}>
+          <Link href="/projetos">{navTexts[1]}</Link>
+        </li>
+        <li className={navBarItem}>
+          <Link href="/kurumim">{navTexts[2]}</Link>
+        </li>
+        <li className={navBarItem}>
+          <Link href="/processo-seletivo">{navTexts[3]}</Link>
+        </li>
+        <li className={navBarItem}>
+          <a href="https://ob-site.vercel.app/">{navTexts[4]}</a>
+        </li>
       </ul>
     </>
   );

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.