Browse Source

TEST

remotes/origin/main
김지은 2 months ago
parent
commit
16696a8b3d
  1. 29
      src/components/ScrollToTop.jsx
  2. 10
      src/components/main/MainVisual.jsx
  3. 97
      src/pages/company/AboutPage.jsx

29
src/components/ScrollToTop.jsx

@ -1,21 +1,38 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
export default function ScrollToTop() { export default function ScrollToTop() {
const { pathname } = useLocation(); const { pathname } = useLocation();
useEffect(() => { useEffect(() => {
// ScrollTrigger ( ) // ScrollTrigger
ScrollTrigger.getAll().forEach((t) => t.kill()); ScrollTrigger.getAll().forEach((t) => t.kill());
ScrollTrigger.clearScrollMemory(); gsap.killTweensOf("*");
window.history.scrollRestoration = "manual";
// pin body
document.body.style.removeProperty("overflow");
document.body.style.removeProperty("padding-bottom");
document.body.style.removeProperty("height");
document.documentElement.style.removeProperty("overflow");
document.documentElement.style.removeProperty("height");
// is-dark-hero
document.body.classList.remove("is-dark-hero");
// //
window.scrollTo({ top: 0, behavior: "instant" }); window.scrollTo({ top: 0, behavior: "instant" });
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// ScrollTrigger
ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";
// DOM refresh requestAnimationFrame(() => {
requestAnimationFrame(() => ScrollTrigger.refresh()); ScrollTrigger.refresh(true);
});
}, [pathname]); }, [pathname]);
return null; return null;

10
src/components/main/MainVisual.jsx

@ -88,7 +88,15 @@ function MainVisual() {
}; };
}, sectionRef); }, sectionRef);
return () => ctx.revert(); return () => {
ctx.revert();
// pin
ScrollTrigger.getAll().forEach((t) => t.kill());
document.body.style.removeProperty("overflow");
document.body.style.removeProperty("padding-bottom");
document.documentElement.style.removeProperty("overflow");
document.body.classList.remove("is-dark-hero");
};
}, []); }, []);
return ( return (
<section className="main-section" ref={sectionRef}> <section className="main-section" ref={sectionRef}>

97
src/pages/company/AboutPage.jsx

@ -37,7 +37,7 @@ const AWARDS = [
function animateCount(el, target, suffix, duration = 1600) { function animateCount(el, target, suffix, duration = 1600) {
const from = target > 100 ? target - 4 : 0; const from = target > 100 ? target - 4 : 0;
let start = null; let start = null;
const step = ts => { const step = (ts) => {
if (!start) start = ts; if (!start) start = ts;
const p = Math.min((ts - start) / duration, 1); const p = Math.min((ts - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3); const ease = 1 - Math.pow(1 - p, 3);
@ -61,53 +61,36 @@ export default function AboutPage() {
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 }, scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 },
}); });
gsap.to(".ab-vid-txt", { gsap.to(".ab-vid-txt", {
y: -80, opacity: 0, y: -80,
opacity: 0,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 }, scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 },
}); });
// //
gsap.fromTo(".ab-phil-line", gsap.fromTo(".ab-phil-line", { opacity: 0, x: -40 }, { opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
{ opacity: 0, x: -40 },
{ opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
// //
gsap.fromTo(".ab-phil-right", gsap.fromTo(".ab-phil-right", { opacity: 0, x: 50 }, { opacity: 1, x: 0, duration: 1.1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
{ opacity: 0, x: 50 }, gsap.fromTo(".ab-phil-body", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } });
{ opacity: 1, x: 0, duration: 1.1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
gsap.fromTo(".ab-phil-body",
{ opacity: 0, y: 24 },
{ opacity: 1, y: 0, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } }
);
// //
gsap.fromTo(".ab-val-item", gsap.fromTo(".ab-val-item", { opacity: 0, y: 40 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out", scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } });
{ opacity: 0, y: 40 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out",
scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } }
);
// //
gsap.fromTo(".ab-awd-row", gsap.fromTo(".ab-awd-row", { opacity: 0, y: 22 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out", scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } });
{ opacity: 0, y: 22 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out",
scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } }
);
// CTA // CTA
gsap.fromTo(".ab-cta-inner > *", gsap.fromTo(".ab-cta-inner > *", { opacity: 0, y: 28 }, { opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } });
{ opacity: 0, y: 28 },
{ opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } }
);
// stats fade // stats fade
gsap.fromTo(".ab-si", gsap.fromTo(
".ab-si",
{ opacity: 0, y: 32 }, { opacity: 0, y: 32 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out", {
opacity: 1,
y: 0,
stagger: 0.1,
duration: 0.7,
ease: "power3.out",
scrollTrigger: { scrollTrigger: {
trigger: ".ab-stats", trigger: ".ab-stats",
start: "top 78%", start: "top 78%",
@ -118,9 +101,9 @@ export default function AboutPage() {
if (!el) return; if (!el) return;
setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 80); setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 80);
}); });
} },
} },
} },
); );
}); });
@ -129,12 +112,7 @@ export default function AboutPage() {
return ( return (
<article> <article>
<SubHero <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" />
title={"가치를 실천하는\n항공 IT 전문기업"}
desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다."
navItems={COMPANY_NAV}
bgImage="/images/hero1.png"
/>
{/* 수치 */} {/* 수치 */}
<section className="ab-stats"> <section className="ab-stats">
@ -143,7 +121,10 @@ export default function AboutPage() {
<div className="ab-stats-grid"> <div className="ab-stats-grid">
{STATS.map((s, i) => ( {STATS.map((s, i) => (
<div className="ab-si" key={s.label}> <div className="ab-si" key={s.label}>
<strong className="ab-si-num" ref={el => statRefs.current[i] = el}>{s.num}{s.suffix}</strong> <strong className="ab-si-num" ref={(el) => (statRefs.current[i] = el)}>
{s.num}
{s.suffix}
</strong>
<span className="ab-si-lbl">{s.label}</span> <span className="ab-si-lbl">{s.label}</span>
<span className="ab-si-bar" /> <span className="ab-si-bar" />
</div> </div>
@ -158,8 +139,16 @@ export default function AboutPage() {
<div className="ab-vid-overlay" /> <div className="ab-vid-overlay" />
<div className="ab-vid-txt"> <div className="ab-vid-txt">
<span className="ab-vid-kicker">PAL Networks × UAM</span> <span className="ab-vid-kicker">PAL Networks × UAM</span>
<h2 className="ab-vid-title">미래의 하늘을<br />설계합니다</h2> <h2 className="ab-vid-title">
<p className="ab-vid-desc">도심항공교통(UAM) 안전한 운항을 위한<br />통합 관제 기술을 연구·개발합니다</p> 미래의 하늘을
<br />
설계합니다
</h2>
<p className="ab-vid-desc">
도심항공교통(UAM) 안전한 운항을 위한
<br />
통합 관제 기술을 연구·개발합니다
</p>
</div> </div>
</section> </section>
@ -191,7 +180,7 @@ export default function AboutPage() {
<span className="ab-vals-ew">Core Values</span> <span className="ab-vals-ew">Core Values</span>
<h2 className="ab-vals-title">우리가 지키는 가치</h2> <h2 className="ab-vals-title">우리가 지키는 가치</h2>
<div className="ab-vals-list"> <div className="ab-vals-list">
{VALUES.map(v => ( {VALUES.map((v) => (
<div className="ab-val-item" key={v.num}> <div className="ab-val-item" key={v.num}>
<span className="ab-val-num">{v.num}</span> <span className="ab-val-num">{v.num}</span>
<div className="ab-val-body"> <div className="ab-val-body">
@ -233,11 +222,19 @@ export default function AboutPage() {
<div className="ab-cta-glow" /> <div className="ab-cta-glow" />
<div className="ab-cta-inner"> <div className="ab-cta-inner">
<span className="ab-cta-chip">Contact Us</span> <span className="ab-cta-chip">Contact Us</span>
<h2 className="ab-cta-title">팔네트웍스와<br />함께하세요</h2> <h2 className="ab-cta-title">
팔네트웍스와
<br />
함께하세요
</h2>
<p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 무엇이든 편하게 연락주세요.</p> <p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 무엇이든 편하게 연락주세요.</p>
<div className="ab-cta-btns"> <div className="ab-cta-btns">
<Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">문의하기</Link> <Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">채용 안내</Link> 문의하기
</Link>
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">
채용 안내
</Link>
</div> </div>
</div> </div>
</section> </section>

Loading…
Cancel
Save