gg

src/components/Header.jsx

@@ -268,7 +268,7 @@ export default function PalRenewalHeader() {
       <header className={`pal-header ${isScrolled ? "is-scrolled" : ""} ${showPanel ? "is-open" : ""} ${isMobileMenuOpen ? "is-mobile-open" : ""}`} onMouseEnter={clearCloseTimer} onMouseLeave={scheduleClose}>
         <div className="pal-header-inner">
           <h1 className="pal-header-logo">
-            <Link to="/Main" onClick={closeAllMenus}>
+            <Link to="/main" onClick={closeAllMenus}>
               <img src={logoSrc} alt="PAL Networks" />
             </Link>
           </h1>

src/components/main/MainVisual.jsx

@@ -38,7 +38,7 @@ function MainVisual() {
       const darkHeroTrigger = ScrollTrigger.create({
         trigger: sectionRef.current,
         start: "top top",
-        end: "+=2000",
+        end: "+=1400",
         onEnter: () => document.body.classList.add("is-dark-hero"),
         onEnterBack: () => document.body.classList.add("is-dark-hero"),
         onLeave: () => document.body.classList.remove("is-dark-hero"),
@@ -51,10 +51,12 @@ function MainVisual() {
         scrollTrigger: {
           trigger: sectionRef.current,
           start: "top top",
-          end: "+=2000",
-          scrub: 1.15,
+          end: "+=1400",
+          scrub: 0.8,
           pin: true,
           anticipatePin: 1,
+          fastScrollEnd: true,
+          preventOverlaps: true,
           onUpdate: (self) => {
             gsap.set(progressBarRef.current, { width: `${self.progress * 100}%` });
 
@@ -62,7 +64,6 @@ function MainVisual() {
 
             if (self.progress >= 0.42 && !hero2Started) {
               hero2Started = true;
-              videoEl.currentTime = 0;
               videoEl.play().catch(() => {});
             }
 
@@ -75,7 +76,7 @@ function MainVisual() {
         },
       });
 
-      tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "none" }, 0).to(bgRef.current, { scale: 1.08, ease: "none" }, 0).to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.14, duration: 1.35 }, 0.1).to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.55).to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.78).to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.95).to(hero2Ref.current, { scale: 1.095, ease: "none" }, 2.5);
+      tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "power2.out", duration: 1.0 }, 0.15).to(bgRef.current, { scale: 1.08, ease: "none" }, 0.15).to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.07, duration: 0.55 }, 0.25).to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.1).to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.25).to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.4).to(hero2Ref.current, { scale: 1.095, ease: "none" }, 1.75);
 
       return () => {
         if (videoEl) {