From 72334ccc3ae324ccd3fa2ce6f23dc2109c34c4fa Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 20 Aug 2024 11:03:30 +0500
Subject: [PATCH] fixes ellipse

---
 src/components/Layouts/Layout.tsx |  7 ++++---
 src/components/Main/Ellipse.tsx   | 10 +++++++---
 src/pages/MainPage.tsx            |  9 ++++++---
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 25919c6..2af9fa5 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/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">
+      <main className="relative overflow-y-clip">
         <Outlet />
       </main>
+      <Contacts />
+
       <Footer />
       <ModalContainer />
     </>
diff --git a/src/components/Main/Ellipse.tsx b/src/components/Main/Ellipse.tsx
index 6b454ad..070d782 100644
--- a/src/components/Main/Ellipse.tsx
+++ b/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` }}
     />
   );
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index d06b607..cc9219a 100644
--- a/src/pages/MainPage.tsx
+++ b/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 />
     </>
   );
 }