updates

app/(utils)/homepage-timeline.ts

@@ -22,22 +22,24 @@ export default function homepageTimeline({ componentRef }: { componentRef: { cur
             /**
              * Origin
              */
-            if (scrollTop < 300) {
+            if (!isMobile) {
-                gsap.to("nav", {
+                if (scrollTop < 300) {
-                    opacity: 1,
+                    gsap.to("nav", {
-                    pointerEvents: "visible",
+                        opacity: 1,
-                });
+                        pointerEvents: "visible",
-                gsap.to("header", {
+                    });
-                    zIndex: 2000,
+                    gsap.to("header", {
-                });
+                        zIndex: 2000,
-            } else {
+                    });
-                gsap.to("nav", {
+                } else {
-                    opacity: 0,
+                    gsap.to("nav", {
-                    pointerEvents: "none",
+                        opacity: 0,
-                });
+                        pointerEvents: "none",
-                gsap.to("header", {
+                    });
-                    zIndex: 0,
+                    gsap.to("header", {
-                });
+                        zIndex: 0,
+                    });
+                }
             }
 
             /**

layouts/general_layout/GeneralHeader.tsx

@@ -61,7 +61,7 @@ const GeneralHeader = (): React.ReactElement => {
             <a
                 href="/"
                 data-href="/"
-                className="logo-link-block"
+                className="logo-link-block scale-90 sm:scale-100"
             >
                 <Image
                     src="/images/logo-white.svg"
@@ -74,7 +74,7 @@ const GeneralHeader = (): React.ReactElement => {
             <HeaderNav />
 
             <button
-                className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed right-10 z-10 -rotate-45"
+                className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed top-[35px] right-10 z-10 -rotate-45"
                 onClick={(e) => {
                     e.preventDefault();
                     setMobileNavOpen(!mobileNavOpen);

styles/tw_main.css

@@ -150,6 +150,18 @@
   top: 330px
 }
 
+.top-\[30px\] {
+  top: 30px
+}
+
+.top-\[40px\] {
+  top: 40px
+}
+
+.top-\[35px\] {
+  top: 35px
+}
+
 .z-0 {
   z-index: 0
 }
@@ -320,6 +332,12 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
 
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
@@ -671,6 +689,14 @@
   opacity: 0.6
 }
 
+@media (min-width: 450px) {
+  .sm\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+  }
+}
+
 @media (min-width: 600px) {
   .md\:relative {
     position: relative
@@ -741,6 +767,12 @@
     width: 60%
   }
 
+  .xl\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+  }
+
   .xl\:flex-row {
     flex-direction: row
   }