From f429b95a01cc9e1585592f31e0058f55d07ff1fa Mon Sep 17 00:00:00 2001
From: Hetari <hetari4py@gmail.com>
Date: Tue, 24 Sep 2024 13:57:08 +0300
Subject: [PATCH] fix ui

---
 src/components/design/Marquee.vue   | 33 ++++-------------------------
 src/components/design/index.ts      | 18 +++++++++-------
 src/components/sections/People.vue  |  2 +-
 src/components/sections/aboutMe.vue |  2 +-
 src/components/sections/index.ts    |  3 ++-
 5 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/src/components/design/Marquee.vue b/src/components/design/Marquee.vue
index 81f9547..347bb3d 100644
--- a/src/components/design/Marquee.vue
+++ b/src/components/design/Marquee.vue
@@ -1,5 +1,4 @@
 <template>
-  isSmallScreen: {{ isSmallScreen }}
   <section
     v-if="!isSmallScreen"
     id="marquee-section"
@@ -429,7 +428,7 @@
 
 <script setup lang="ts">
   import gsap from 'gsap';
-  import { Observer, ScrollToPlugin } from 'gsap/all';
+  import { ScrollToPlugin } from 'gsap/all';
 
   import { computed, onMounted, ref } from 'vue';
   import { useWindowSize } from '@vueuse/core';
@@ -444,7 +443,7 @@
     document.getElementById('logos') as HTMLElement,
   );
 
-  gsap.registerPlugin(Observer);
+  // gsap.registerPlugin(Observer);
   gsap.registerPlugin(ScrollToPlugin);
 
   onMounted(() => {
@@ -452,7 +451,6 @@
       const marquees = gsap.utils.toArray('.marquee') as HTMLElement[];
 
       gsap.registerPlugin(ScrollTrigger);
-      gsap.registerPlugin(Observer);
 
       // Animate marquees
       marquees.forEach((marquee, index) => {
@@ -477,7 +475,7 @@
               trigger: '#marquee-section',
               start: 'top bottom',
               end: 'bottom top',
-              scrub: true,
+              scrub: 1,
               // markers: false,
             },
           },
@@ -485,34 +483,11 @@
       });
 
       // Animate logos
-
       const logos = gsap.utils.toArray('.logos-marquee div');
       const tl = horizontalLoop(logos, {
         repeat: -1,
         paddingRight: 40,
-      });
-
-      Observer.create({
-        type: 'wheel',
-        onChangeY(self) {
-          let factor = 1.5;
-          if (self.deltaY < 0) {
-            factor *= -1;
-          }
-          gsap
-            .timeline({
-              defaults: {
-                ease: 'none',
-              },
-            })
-
-            .to(tl, { timeScale: factor, duration: 0.2 });
-          //   .to(
-          //     tl,
-          //     { timeScale: factor / 2.5, duration: 1, ease: 'power1' },
-          //     '+=0.3',
-          //   );
-        },
+        speed: 0.6,
       });
     }
   });
diff --git a/src/components/design/index.ts b/src/components/design/index.ts
index 4fd3b14..9e9ce0c 100644
--- a/src/components/design/index.ts
+++ b/src/components/design/index.ts
@@ -1,13 +1,15 @@
-import Circles from './Circles.vue';
-import MyName from './MyName.vue';
-import Star from './Star.vue';
+import { defineAsyncComponent } from 'vue';
+
 import LoadingScreen from './LoadingScreen.vue';
-import SamsungError from './SamsungError.vue';
-import Marquee from './Marquee.vue';
-import Slider from './Slider.vue';
-import Footer from './Footer.vue';
 
-import Cursor from './Cursor.vue';
+const Circles = defineAsyncComponent(() => import('./Circles.vue'));
+const MyName = defineAsyncComponent(() => import('./MyName.vue'));
+const Star = defineAsyncComponent(() => import('./Star.vue'));
+const SamsungError = defineAsyncComponent(() => import('./SamsungError.vue'));
+const Marquee = defineAsyncComponent(() => import('./Marquee.vue'));
+const Slider = defineAsyncComponent(() => import('./Slider.vue'));
+const Footer = defineAsyncComponent(() => import('./Footer.vue'));
+const Cursor = defineAsyncComponent(() => import('./Cursor.vue'));
 
 export {
   Circles,
diff --git a/src/components/sections/People.vue b/src/components/sections/People.vue
index fe4b972..dd728d7 100644
--- a/src/components/sections/People.vue
+++ b/src/components/sections/People.vue
@@ -2,7 +2,7 @@
   <!-- common-padding  -->
   <section
     id="testimonials-section"
-    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-transform"
+    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-auto"
   >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
diff --git a/src/components/sections/aboutMe.vue b/src/components/sections/aboutMe.vue
index a8f087d..ba2672f 100644
--- a/src/components/sections/aboutMe.vue
+++ b/src/components/sections/aboutMe.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     id="about-me-section"
-    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-transform sm:mt-0"
+    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-auto sm:mt-0"
   >
     <div class="md:column-gap grid grid-cols-12">
       <div class="hide-on-mobile overflow-hidden md:col-span-4">
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
index 1e23220..6a3165e 100644
--- a/src/components/sections/index.ts
+++ b/src/components/sections/index.ts
@@ -1,11 +1,12 @@
 import { defineAsyncComponent } from 'vue';
 
 import Hero from './Hero.vue';
+import Contact from './Contact.vue';
 
 const Services = defineAsyncComponent(() => import('./Services.vue'));
 const Works = defineAsyncComponent(() => import('./Works.vue'));
 const aboutMe = defineAsyncComponent(() => import('./aboutMe.vue'));
 const People = defineAsyncComponent(() => import('./People.vue'));
-const Contact = defineAsyncComponent(() => import('./Contact.vue'));
+// const Contact = defineAsyncComponent(() => import('./Contact.vue'));
 
 export { Hero, Services, Works, aboutMe, People, Contact };