little fix

src/app/page.tsx

@@ -5,7 +5,7 @@
 import "react-rangeslider/lib/index.css";
 import "../components/RangeSlider.css";
 import api from "@utils/api";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import FeatureItem from "@components/FeatureItem";
 import StreamButton from "@components/StreamButton";
 import ProjectCard from "@components/ProjectCard";
@@ -87,6 +87,7 @@ export default function App() {
   const [setModal] = useModalStore((state) => [state.setModal]);
   const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
   const [isBuffering, setIsBuffering] = useState(true);
+  const featureRef = useRef(null);
 
   async function getProjects() {
     try {
@@ -335,8 +336,10 @@ export default function App() {
 
           <motion.div
             className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20"
-            viewport={{ once: true }}
-            onViewportEnter={() => console.log("first")}
+            viewport={{ once: true, margin: "-10%" }}
+            onViewportEnter={() =>
+              console.log("first", featureRef.current.firstElementChild)
+            }
           >
             <div className="flex flex-col gap-20">
               <div className="xl:flex flex-col grid sm:grid-cols-2 xl:gap-8 gap-3">
@@ -413,7 +416,10 @@ export default function App() {
                 /> */}
               </div>
             </div>
-            <div className="aspect-video sticky top-[25%] xl:block hidden">
+            <div
+              className="aspect-video sticky top-[25%] xl:block hidden"
+              ref={featureRef}
+            >
               <FeatureVideoViewBox video={selectedVideo} />
             </div>
 
@@ -646,22 +652,20 @@ export default function App() {
 
           <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
             <Heading2>Проекты</Heading2>
-            {projectLabels.map((year) => {
-              const projects =
-                (sortedProjects && sortedProjects.get(year)) ?? [];
+            <div className="flex flex-col gap-4">
+              {projectLabels.map((year) => {
+                const projects =
+                  (sortedProjects && sortedProjects.get(year)) ?? [];
 
-              return (
-                <>
-                  {projects.length !== 0 && (
-                    <ProjectsSection
-                      key={year}
-                      year={year}
-                      projects={projects}
-                    />
-                  )}
-                </>
-              );
-            })}
+                return (
+                  <div key={year}>
+                    {projects.length !== 0 && (
+                      <ProjectsSection year={year} projects={projects} />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
             <div className="2xl:hidden grid xl:grid-cols-4 sm:grid-cols-3 gap-4">
               {[...Array(5)].map((_, index) => (
                 <ProjectCard key={index} {...projects[index]} />