fixes ellipse

src/components/Layouts/Layout.tsx

@@ -1,17 +1,18 @@
 import { Outlet } from 'react-router-dom';
-import { Motivation } from '../Main/Motivation';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { ModalContainer } from '../Main/ModalContainer';
+import { Contacts } from '../Main/Contacts';
 
 export function Layout() {
   return (
     <>
       <Header />
-      <Motivation />
+      <main className="relative overflow-y-clip">
-      <main className="relative">
         <Outlet />
       </main>
+      <Contacts />
+
       <Footer />
       <ModalContainer />
     </>

src/components/Main/Ellipse.tsx

@@ -12,16 +12,20 @@ export function Ellipse() {
   }
 
   useEffect(() => {
-    document.body.addEventListener('mousemove', handleMouseMove);
+    document
+      .querySelector('main')
+      ?.addEventListener('mousemove', handleMouseMove);
 
     return () => {
-      document.body.removeEventListener('mousemove', handleMouseMove);
+      document
+        .querySelector('main')
+        ?.removeEventListener('mousemove', handleMouseMove);
     };
   }, []);
 
   return (
     <div
-      className="absolute -z-10 bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[325%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw] transition-all duration-100"
+      className="absolute -z-10 bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw] transition-all duration-100"
       style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
     />
   );

src/pages/MainPage.tsx

@@ -8,13 +8,17 @@ import { Availables } from '../components/Main/Availables';
 import { Projects } from '../components/Main/Projects';
 import { Trainings } from '../components/Main/Trainings';
 import { Events } from '../components/Main/Events';
-import { Contacts } from '../components/Main/Contacts';
 import { Ellipse } from '../components/Main/Ellipse';
+import { Motivation } from '../components/Main/Motivation';
+import { useWindowWidth } from '../hooks/useWindowWidth';
 
 export function MainPage() {
+  const width = useWindowWidth();
+
   return (
     <>
-      <Ellipse />
+      {width >= 1024 && <Ellipse />}
+      <Motivation />
       <Video />
       <Decreasing />
       <Effeciency />
@@ -25,7 +29,6 @@ export function MainPage() {
       <Trainings />
       <Projects />
       <Events />
-      <Contacts />
     </>
   );
 }