palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

메인

remotes/origin/main
김지은 2 months ago
parent
97eb969bd3
commit
468bb53675
2 changed files with 130 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 99
      src/css/common.css
  2. 67
      src/pages/MainPage.jsx

99
src/css/common.css
Unescape View File

@ -17,26 +17,46 @@ body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} .main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} .sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/* main visual */
.main-page{width:100%;overflow:hidden;} .main-page{width:100%;overflow:hidden;}
.main-section{position:relative;height:100vh;} .main-section{position:relative;height:100vh;}
.main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;} .main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;} .main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.02);} .main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
.main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;} .main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 78%,rgba(58,64,129,.24) 0%,rgba(58,64,129,.08) 18%,rgba(58,64,129,0) 45%);z-index:1;pointer-events:none;} .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
.main-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.1) 0%,rgba(4,10,24,.32) 52%,rgba(4,10,24,.58) 100%),linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.02) 40%,rgba(0,0,0,.14) 100%);z-index:1;pointer-events:none;} .main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
.main-visible-haze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,78vw);height:min(460px,40vw);z-index:2;pointer-events:none;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 16%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 64%);filter:blur(28px);opacity:.56;animation:visibleHaze 4.8s ease-in-out infinite;}
.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
.text-center-hero{left:50%;top:40%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
.main-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 40px;z-index:2;}
.main-text .text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:1080px;color:#fff;text-align:center;font-size:56px;line-height:1.2;font-weight:700;letter-spacing:-.05em;will-change:transform,opacity,filter;text-shadow:0 10px 30px rgba(0,0,0,.22);}
.main-text .text-change{opacity:0;} .main-text .text-change{opacity:0;}
.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;} .main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}
.main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;} .main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 14px rgba(255,255,255,.28);}
.main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;} .main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;} .main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
@ -48,18 +68,67 @@ body{overflow-x:hidden;}
100%{transform:translateY(0);opacity:.35;} 100%{transform:translateY(0);opacity:.35;}
} }
@keyframes visibleAtmo1{
0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
}
@keyframes visibleAtmo2{
0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
}
@keyframes visibleBeam1{
0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
8%{opacity:.32;}
36%{opacity:.95;}
58%{opacity:.48;}
100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
}
@keyframes visibleBeam2{
0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
10%{opacity:.22;}
40%{opacity:.72;}
62%{opacity:.34;}
100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
}
@keyframes visibleHaze{
0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
}
@keyframes gridShift{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,18px,0);}
}
@media (max-width:1280px){ @media (max-width:1280px){
.main-bg{width:calc(100vw - 48px);height:540px;} .main-bg{width:calc(100vw - 48px);height:540px;}
.main-text .text{font-size:44px;max-width:980px;} .main-grid{background-size:56px 56px;}
.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
.main-visible-beam{width:82%;}
} }
@media (max-width:768px){ @media (max-width:768px){
.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;} .main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
.main-text{padding:0 20px;} .main-visible-atmo1{filter:blur(18px);opacity:.44;}
.main-text .text{font-size:30px;line-height:1.28;letter-spacing:-.035em;max-width:100%;} .main-visible-atmo2{filter:blur(20px);opacity:.28;}
.main-progress{bottom:28px;width:calc(100% - 32px);} .main-visible-beam{width:118%;}
.main-scroll-indicator{bottom:56px;} .main-visible-beam1{filter:blur(8px);}
.main-visible-beam2{filter:blur(10px);}
.main-visible-haze{width:90vw;height:42vw;filter:blur(22px);opacity:.46;}
.main-grid{background-size:34px 34px;opacity:.12;}
.text-left-bottom{left:24px;right:24px;bottom:96px;max-width:none;font-size:32px;}
.text-center-hero{width:calc(100% - 40px);font-size:28px;line-height:1.34;}
.main-progress{bottom:28px;width:180px;}
.main-scroll-indicator{bottom:58px;}
.main-scroll-line{height:22px;} .main-scroll-line{height:22px;}
.main-scroll-text{font-size:10px;letter-spacing:.22em;} .main-scroll-text{font-size:10px;letter-spacing:.22em;}
} }

67
src/pages/MainPage.jsx
Unescape View File

@ -18,11 +18,36 @@ function MainPage() {
const ctx = gsap.context(() => { const ctx = gsap.context(() => {
gsap.set(hero2Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); gsap.set(hero2Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" });
gsap.set(hero3Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); gsap.set(hero3Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" });
gsap.set(text2Ref.current, { opacity: 0, y: 40, filter: "blur(8px)" });
gsap.set(text3Ref.current, { opacity: 0, y: 40, filter: "blur(8px)" }); gsap.set(text2Ref.current, {
opacity: 0,
y: 48,
x: 0,
scale: 0.96,
filter: "blur(10px)",
});
gsap.set(text3Ref.current, {
opacity: 0,
y: 48,
x: 0,
scale: 0.96,
filter: "blur(10px)",
});
gsap.set(progressBarRef.current, { width: "0%" }); gsap.set(progressBarRef.current, { width: "0%" });
gsap.set(".fill-line", { backgroundPosition: "100% 0%" }); gsap.set(".fill-line", { backgroundPosition: "100% 0%" });
const darkHeroTrigger = ScrollTrigger.create({
trigger: sectionRef.current,
start: "top top",
end: "+=2600",
onEnter: () => document.body.classList.add("is-dark-hero"),
onEnterBack: () => document.body.classList.add("is-dark-hero"),
onLeave: () => document.body.classList.remove("is-dark-hero"),
onLeaveBack: () => document.body.classList.remove("is-dark-hero"),
});
const tl = gsap.timeline({ const tl = gsap.timeline({
scrollTrigger: { scrollTrigger: {
trigger: sectionRef.current, trigger: sectionRef.current,
@ -42,30 +67,22 @@ function MainPage() {
.to(text1Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 1.35) .to(text1Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 1.35)
.to(hero2Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 1.15) .to(hero2Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 1.15)
.fromTo(text2Ref.current, { opacity: 0, y: 40, filter: "blur(8px)" }, { opacity: 1, y: 0, filter: "blur(0px)", ease: "none" }, 1.22) .to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.24)
.to(hero2Ref.current, { scale: 1.1, ease: "none" }, 1.72) .to(hero2Ref.current, { scale: 1.1, ease: "none" }, 1.72)
.to(text2Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 2.02) .to(text2Ref.current, { opacity: 0, y: -28, scale: 0.98, filter: "blur(8px)", ease: "none" }, 2.02)
.to(hero3Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 2.14) .to(hero3Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 2.14)
.fromTo(text3Ref.current, { opacity: 0, y: 40, filter: "blur(8px)" }, { opacity: 1, y: 0, filter: "blur(0px)", ease: "none" }, 2.28) .to(text3Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 2.28)
.to(hero3Ref.current, { scale: 1.08, ease: "none" }, 2.82); .to(hero3Ref.current, { scale: 1.08, ease: "none" }, 2.82);
ScrollTrigger.create({ return () => {
trigger: sectionRef.current, darkHeroTrigger.kill();
start: "top top", document.body.classList.remove("is-dark-hero");
end: "+=2600", };
onEnter: () => document.body.classList.add("is-dark-hero"),
onEnterBack: () => document.body.classList.add("is-dark-hero"),
onLeave: () => document.body.classList.remove("is-dark-hero"),
onLeaveBack: () => document.body.classList.remove("is-dark-hero"),
});
}, sectionRef); }, sectionRef);
return () => { return () => ctx.revert();
document.body.classList.remove("is-dark-hero");
ctx.revert();
};
}, []); }, []);
return ( return (
@ -77,20 +94,28 @@ function MainPage() {
<div className="main-bg-hero2" ref={hero2Ref}></div> <div className="main-bg-hero2" ref={hero2Ref}></div>
<div className="main-bg-hero3" ref={hero3Ref}></div> <div className="main-bg-hero3" ref={hero3Ref}></div>
<div className="main-visible-atmo main-visible-atmo1"></div>
<div className="main-visible-atmo main-visible-atmo2"></div>
<div className="main-visible-beam main-visible-beam1"></div>
<div className="main-visible-beam main-visible-beam2"></div>
<div className="main-visible-haze"></div>
<div className="main-grid"></div>
<div className="main-text"> <div className="main-text">
<div className="text text-fill" ref={text1Ref}> <div className="text text-fill text-left-bottom" ref={text1Ref}>
<span className="main-kicker">PAL NETWORKS</span>
<span className="fill-line">Technology Partner for</span> <span className="fill-line">Technology Partner for</span>
<br /> <br />
<span className="fill-line">Advanced Air Mobility</span> <span className="fill-line">Advanced Air Mobility</span>
</div> </div>
<div className="text text-change" ref={text2Ref}> <div className="text text-change text-center-hero" ref={text2Ref}>
항공 데이터와 통합 관제 기술로 항공 데이터와 통합 관제 기술로
<br /> <br />
안전한 하늘길을 설계합니다 안전한 하늘길을 설계합니다
</div> </div>
<div className="text text-change" ref={text3Ref}> <div className="text text-change text-center-hero" ref={text3Ref}>
공역관리와 드론 교통관리(UTM)를 기반으로 공역관리와 드론 교통관리(UTM)를 기반으로
<br /> <br />
실제 운영 가능한 항공 시스템을 구축합니다 실제 운영 가능한 항공 시스템을 구축합니다

Write Preview
Loading…
Cancel
Save