29 changed files with 309 additions and 102 deletions
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 977 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
@ -0,0 +1,71 @@ |
|||||||
|
/* |
||||||
|
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard. |
||||||
|
https://github.com/orioncactus/pretendard |
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1. |
||||||
|
This license is copied below, and is also available with a FAQ at: |
||||||
|
http://scripts.sil.org/OFL |
||||||
|
*/ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 900; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 800; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard ExtraBold'), url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 700; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'), url(./woff/Pretendard-Bold.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 600; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard SemiBold'), url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 500; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'), url(./woff/Pretendard-Medium.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 400; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Regular'), url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 300; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'), url(./woff/Pretendard-Light.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 200; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard ExtraLight'), url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Pretendard'; |
||||||
|
font-weight: 100; |
||||||
|
font-display: swap; |
||||||
|
src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff'); |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,116 @@ |
|||||||
|
import { useEffect, useLayoutEffect, useRef } from "react"; |
||||||
|
import { gsap } from "gsap"; |
||||||
|
import { ScrollTrigger } from "gsap/ScrollTrigger"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
// 이미지 임포트 (경로를 본인 환경에 맞게 수정하세요) |
||||||
|
import img1 from "/images/img1.jpg"; // 가장 먼 배경 (하늘/도시 전경) |
||||||
|
import img2 from "/images/img2.jpg"; // 중간 배경 (공역/네트워크 라인) |
||||||
|
import img3 from "/images/img3.jpg"; // 가까운 피사체 (드론/기체) |
||||||
|
import img4 from "/images/img4.jpg"; // 최전방 요소 (UI/데이터 그래픽) |
||||||
|
|
||||||
|
gsap.registerPlugin(ScrollTrigger); |
||||||
|
|
||||||
|
function MainPage() { |
||||||
|
const mainRef = useRef(null); |
||||||
|
const scrollRef = useRef(null); |
||||||
|
|
||||||
|
useLayoutEffect(() => { |
||||||
|
let ctx = gsap.context(() => { |
||||||
|
const tl = gsap.timeline({ |
||||||
|
scrollTrigger: { |
||||||
|
trigger: scrollRef.current, |
||||||
|
start: "top top", |
||||||
|
end: "+=150%", // 300%에서 150%로 줄여서 갭을 압축함 |
||||||
|
scrub: 1.2, |
||||||
|
pin: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
// 1. 레이어들이 멀어지며 메인 컨텐츠가 사라짐 |
||||||
|
tl.to(".layer-1", { scale: 1.1, y: -30 }, 0).to(".layer-2", { scale: 1.2, y: -80 }, 0).to(".layer-3", { scale: 1.5, y: -150, opacity: 0 }, 0).to(".layer-4", { scale: 2, y: -250, opacity: 0 }, 0).to(".main-content", { y: -50, opacity: 0, duration: 0.5 }, 0); // 메인 텍스트가 빠르게 빠짐 |
||||||
|
|
||||||
|
// 2. "The Future of..." 텍스트가 메인 텍스트 사라짐과 거의 동시에 나타남 (0.2초 지점) |
||||||
|
tl.from( |
||||||
|
".next-content", |
||||||
|
{ |
||||||
|
y: 100, |
||||||
|
opacity: 0, |
||||||
|
duration: 1, |
||||||
|
}, |
||||||
|
0.2, |
||||||
|
); // 0.2는 시작 시점으로부터의 offset입니다. 갭을 줄이는 핵심 포인트! |
||||||
|
}, mainRef); |
||||||
|
return () => ctx.revert(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<main className="main-page" ref={mainRef}> |
||||||
|
<section className="hero-scroll-container" ref={scrollRef}> |
||||||
|
{/* Parallax Layers */} |
||||||
|
<div className="parallax-wrapper"> |
||||||
|
<img src={img1} className="p-layer layer-1" alt="bg" /> |
||||||
|
<img src={img2} className="p-layer layer-2" alt="mid" /> |
||||||
|
<img src={img3} className="p-layer layer-3" alt="drone" /> |
||||||
|
<img src={img4} className="p-layer layer-4" alt="ui" /> |
||||||
|
<div className="overlay" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Content */} |
||||||
|
<div className="main-content"> |
||||||
|
<div className="tagline">10 YEARS OF AVIATION TECH</div> |
||||||
|
<h1 className="title-wrapper"> |
||||||
|
<span className="reveal-text">BEYOND THE SKY,</span> |
||||||
|
<br /> |
||||||
|
<span className="reveal-text">INTELLIGENT AIRSPACE.</span> |
||||||
|
</h1> |
||||||
|
<p className="desc"> |
||||||
|
IBE 솔루션을 넘어 UTM, SWIM, UAM까지. |
||||||
|
<br /> |
||||||
|
우리는 지능형 공역 관리 시스템의 미래를 구축합니다. |
||||||
|
</p> |
||||||
|
<Link to="/projects" className="btn-cta"> |
||||||
|
EXPLORE SOLUTIONS |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="next-content"> |
||||||
|
<h2>The Future of UTM & UAM</h2> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
{/* 기존의 임시 검은 배경 섹션을 지우고 아래와 같이 구성하세요 */} |
||||||
|
<section className="content-section info-utm"> |
||||||
|
<div className="container"> |
||||||
|
<h2>UTM System</h2> |
||||||
|
<p>Drone Traffic Management for Kazakhstan and Global Markets...</p> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<section className="content-section info-uam"> |
||||||
|
<h2>UAM Infrastructure</h2> |
||||||
|
<p>Building the future of Urban Air Mobility...</p> |
||||||
|
</section> |
||||||
|
</main> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default MainPage; |
||||||
|
|
||||||
|
|
||||||
|
.main-page { background: #000; color: #fff; overflow-x: hidden; } |
||||||
|
.hero-scroll-container { position: relative; height: 100vh; width: 100%; overflow: hidden; } |
||||||
|
.parallax-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } |
||||||
|
.p-layer { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; object-fit: cover; will-change: transform; } |
||||||
|
.layer-1 { z-index: 1; } .layer-2 { z-index: 2; } .layer-3 { z-index: 3; } .layer-4 { z-index: 4; } |
||||||
|
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%); z-index: 5; } |
||||||
|
.main-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding-top: 5vh; } |
||||||
|
.next-content { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 11; text-align: center; width: 100%; } |
||||||
|
.next-content h2 { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; } |
||||||
|
.tagline { font-size: 14px; letter-spacing: 4px; color: #00aeef; margin-bottom: 20px; font-weight: 600; } |
||||||
|
.title-wrapper { overflow: hidden; margin-bottom: 30px; } |
||||||
|
.reveal-text { display: inline-block; font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; line-height: 1.1; } |
||||||
|
.desc { font-size: 18px; line-height: 1.6; color: #ccc; max-width: 600px; margin-bottom: 40px; } |
||||||
|
.btn-cta { padding: 15px 40px; border: 1px solid #fff; color: #fff; text-decoration: none; transition: all 0.3s; letter-spacing: 2px; font-weight: 500; } |
||||||
|
.btn-cta:hover { background: #fff; color: #000; } |
||||||
|
.next-content { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 11; text-align: center; } |
||||||
Loading…
Reference in new issue