diff --git a/public/images/1111.png b/public/images/1111.png new file mode 100644 index 0000000..325f191 Binary files /dev/null and b/public/images/1111.png differ diff --git a/public/images/hero1.png b/public/images/hero1.png new file mode 100644 index 0000000..624c2ba Binary files /dev/null and b/public/images/hero1.png differ diff --git a/public/images/hero2.png b/public/images/hero2.png new file mode 100644 index 0000000..083ddf4 Binary files /dev/null and b/public/images/hero2.png differ diff --git a/public/images/hero3.png b/public/images/hero3.png new file mode 100644 index 0000000..f340a8e Binary files /dev/null and b/public/images/hero3.png differ diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 14154a4..496010a 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -156,14 +156,16 @@ export default function PalRenewalHeader() { const activeData = menuData.find((item) => item.key === activeMenu); const showPanel = Boolean(activeData && !activeData.simple && isHeaderHover); + // const isActiveHeader = isScrolled || showPanel || isMobileMenuOpen; useEffect(() => { const onScroll = () => { - setIsScrolled(window.scrollY > 10); + const scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0; + setIsScrolled(scrollTop > 2000); }; onScroll(); - window.addEventListener("scroll", onScroll); + window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); @@ -259,11 +261,12 @@ export default function PalRenewalHeader() { return ( <> -
+

- + PAL Networks + {/* PAL Networks */}

diff --git a/src/css/common.css b/src/css/common.css index 9535602..df2655e 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -17,23 +17,23 @@ body{overflow-x:hidden;} .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);} - /*main visual*/ -.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; } \ No newline at end of file +.main-section{height:200vh;} +.main-bg{position:sticky;top:var(--header-height);display:flex;max-width:1440px;margin:0 auto;height:600px;border-radius:8px;overflow:hidden;background:url('/images/1111.png') no-repeat 100% 50%/cover;transform:scale(1);transform-origin:center center;} +.main-bg-hero2{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;} +.split-text-section{width:100%;} +.main-text{position:relative;display:flex;flex:1;align-items:center;justify-content:center;padding:0 40px;} +.main-text .text{position:absolute;color:#fff;font-size:48px;line-height:1.2;width:100%;text-align:center;perspective:500px;font-weight:600;left:50%;top:50%;transform:translate(-50%,-50%);} +.main-text .text-change{opacity:0;} + +@media (max-width:1024px){ +.main-bg{height:520px;} +.main-text .text{font-size:38px;} +} + +@media (max-width:768px){ +.main-section{height:170vh;} +.main-bg{top:80px;height:420px;} +.main-text{padding:0 20px;} +.main-text .text{font-size:28px;line-height:1.3;} +} \ No newline at end of file diff --git a/src/css/fonts/pretendard.css b/src/css/fonts/pretendard.css new file mode 100644 index 0000000..962feab --- /dev/null +++ b/src/css/fonts/pretendard.css @@ -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'); +} diff --git a/src/css/fonts/woff/Pretendard-Black.woff b/src/css/fonts/woff/Pretendard-Black.woff new file mode 100644 index 0000000..d07848c Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Black.woff differ diff --git a/src/css/fonts/woff/Pretendard-Bold.woff b/src/css/fonts/woff/Pretendard-Bold.woff new file mode 100644 index 0000000..7837ae5 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Bold.woff differ diff --git a/src/css/fonts/woff/Pretendard-ExtraBold.woff b/src/css/fonts/woff/Pretendard-ExtraBold.woff new file mode 100644 index 0000000..8058b76 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-ExtraBold.woff differ diff --git a/src/css/fonts/woff/Pretendard-ExtraLight.woff b/src/css/fonts/woff/Pretendard-ExtraLight.woff new file mode 100644 index 0000000..f9498d8 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-ExtraLight.woff differ diff --git a/src/css/fonts/woff/Pretendard-Light.woff b/src/css/fonts/woff/Pretendard-Light.woff new file mode 100644 index 0000000..2cad608 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Light.woff differ diff --git a/src/css/fonts/woff/Pretendard-Medium.woff b/src/css/fonts/woff/Pretendard-Medium.woff new file mode 100644 index 0000000..5370409 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Medium.woff differ diff --git a/src/css/fonts/woff/Pretendard-Regular.woff b/src/css/fonts/woff/Pretendard-Regular.woff new file mode 100644 index 0000000..e3b3a35 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Regular.woff differ diff --git a/src/css/fonts/woff/Pretendard-SemiBold.woff b/src/css/fonts/woff/Pretendard-SemiBold.woff new file mode 100644 index 0000000..682e7a4 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-SemiBold.woff differ diff --git a/src/css/fonts/woff/Pretendard-Thin.woff b/src/css/fonts/woff/Pretendard-Thin.woff new file mode 100644 index 0000000..d28e448 Binary files /dev/null and b/src/css/fonts/woff/Pretendard-Thin.woff differ diff --git a/src/css/fonts/woff2/Pretendard-Black.woff2 b/src/css/fonts/woff2/Pretendard-Black.woff2 new file mode 100644 index 0000000..eafe683 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Black.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-Bold.woff2 b/src/css/fonts/woff2/Pretendard-Bold.woff2 new file mode 100644 index 0000000..4d40a1a Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Bold.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-ExtraBold.woff2 b/src/css/fonts/woff2/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..dcd57e7 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-ExtraBold.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-ExtraLight.woff2 b/src/css/fonts/woff2/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..e510402 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-ExtraLight.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-Light.woff2 b/src/css/fonts/woff2/Pretendard-Light.woff2 new file mode 100644 index 0000000..7f82fe8 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Light.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-Medium.woff2 b/src/css/fonts/woff2/Pretendard-Medium.woff2 new file mode 100644 index 0000000..f8c743d Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Medium.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-Regular.woff2 b/src/css/fonts/woff2/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a9f6231 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Regular.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-SemiBold.woff2 b/src/css/fonts/woff2/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..4c6a32d Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-SemiBold.woff2 differ diff --git a/src/css/fonts/woff2/Pretendard-Thin.woff2 b/src/css/fonts/woff2/Pretendard-Thin.woff2 new file mode 100644 index 0000000..6c9bc96 Binary files /dev/null and b/src/css/fonts/woff2/Pretendard-Thin.woff2 differ diff --git a/src/css/header.css b/src/css/header.css index 5972daf..d740322 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,13 +1,14 @@ /*header.*/ -.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:box-shadow .35s ease;} -.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);opacity:0;transition:opacity .35s ease;} -.pal-header.is-scrolled::before,.pal-header.is-open::before{opacity:1;} -.pal-header.is-open{box-shadow:0 18px 40px rgba(15,23,42,.08);} +.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:box-shadow .35s ease;} +.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .35s ease;} +.pal-header.is-scrolled::before,.pal-header.is-open::before,.pal-header.is-mobile-open::before{opacity:1;} +.pal-header.is-scrolled,.pal-header.is-open,.pal-header.is-mobile-open{box-shadow:0 18px 40px rgba(15,23,42,.08);} +/* .pal-header.is-scrolled .pal-gnb-link,.pal-header.is-open .pal-gnb-link,.pal-header.is-mobile-open .pal-gnb-link{color:#111} */ .pal-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1440px;height:96px;margin:0 auto;padding:0 40px;z-index:2;} .pal-header-logo{flex:0 0 auto;margin:0;font-size:0;line-height:1;} .pal-header-logo a{display:inline-flex;align-items:center;font-size:28px;font-weight:800;line-height:1;color:#111;text-decoration:none;letter-spacing:-0.03em;} -.pal-header-logo img{width:180px} +.pal-header-logo img{width:180px;display:block;} .pal-gnb{flex:1 1 auto;display:flex;justify-content:center;height:100%;} .pal-gnb-depth1{display:flex;align-items:center;gap:4px;height:100%;margin:0;padding:0;list-style:none;} diff --git a/src/css/reset.css b/src/css/reset.css index 34154ed..23e7e89 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -1,5 +1,5 @@ @charset "UTF-8"; - +@import './fonts/pretendard.css'; html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; diff --git a/src/pages/MainPage copy 2.jsx b/src/pages/MainPage copy 2.jsx new file mode 100644 index 0000000..35b32b4 --- /dev/null +++ b/src/pages/MainPage copy 2.jsx @@ -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 ( +
+
+ {/* Parallax Layers */} +
+ bg + mid + drone + ui +
+
+ + {/* Content */} +
+
10 YEARS OF AVIATION TECH
+

+ BEYOND THE SKY, +
+ INTELLIGENT AIRSPACE. +

+

+ IBE 솔루션을 넘어 UTM, SWIM, UAM까지. +
+ 우리는 지능형 공역 관리 시스템의 미래를 구축합니다. +

+ + EXPLORE SOLUTIONS + +
+ +
+

The Future of UTM & UAM

+
+
+ + {/* 기존의 임시 검은 배경 섹션을 지우고 아래와 같이 구성하세요 */} +
+
+

UTM System

+

Drone Traffic Management for Kazakhstan and Global Markets...

+
+
+ +
+

UAM Infrastructure

+

Building the future of Urban Air Mobility...

+
+
+ ); +} + +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; } \ No newline at end of file diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index b644902..8f9c7e4 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,96 +1,112 @@ -import { useEffect, useLayoutEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; -import { Link } from "react-router-dom"; +import { SplitText } from "gsap/SplitText"; -// 이미지 임포트 (경로를 본인 환경에 맞게 수정하세요) -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); +gsap.registerPlugin(ScrollTrigger, SplitText); function MainPage() { - const mainRef = useRef(null); - const scrollRef = useRef(null); + const sectionRef = useRef(null); + const bgRef = useRef(null); + const hero2Ref = useRef(null); + const text1Ref = useRef(null); + const text2Ref = useRef(null); + const splitRef = 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, - }, + useEffect(() => { + const setupText = () => { + if (splitRef.current) splitRef.current.revert(); + + splitRef.current = SplitText.create(text1Ref.current, { type: "chars" }); + + gsap.from(splitRef.current.chars, { + x: 150, + opacity: 0, + duration: 0.7, + ease: "power4", + stagger: 0.04, }); + }; + + setupText(); - // 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); // 메인 텍스트가 빠르게 빠짐 + gsap.set(hero2Ref.current, { opacity: 0 }); + gsap.set(text2Ref.current, { opacity: 0, y: 30 }); - // 2. "The Future of..." 텍스트가 메인 텍스트 사라짐과 거의 동시에 나타남 (0.2초 지점) - tl.from( - ".next-content", + const tl = gsap.timeline({ + scrollTrigger: { + trigger: sectionRef.current, + start: "top top", + end: "+=100%", + scrub: 1, + }, + }); + + tl.to( + bgRef.current, + { + scale: 1.18, + borderRadius: 0, + ease: "none", + }, + 0, + ) + .to( + text1Ref.current, { - y: 100, opacity: 0, - duration: 1, + y: -30, + ease: "none", }, 0.2, - ); // 0.2는 시작 시점으로부터의 offset입니다. 갭을 줄이는 핵심 포인트! - }, mainRef); - return () => ctx.revert(); + ) + .to( + hero2Ref.current, + { + opacity: 1, + ease: "none", + }, + 0.35, + ) + .to( + text2Ref.current, + { + opacity: 1, + y: 0, + ease: "none", + }, + 0.45, + ); + + window.addEventListener("resize", setupText); + + return () => { + window.removeEventListener("resize", setupText); + tl.kill(); + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + if (splitRef.current) splitRef.current.revert(); + }; }, []); return ( -
-
- {/* Parallax Layers */} -
- bg - mid - drone - ui -
-
+
+
+
+
- {/* Content */} -
-
10 YEARS OF AVIATION TECH
-

- BEYOND THE SKY, -
- INTELLIGENT AIRSPACE. -

-

- IBE 솔루션을 넘어 UTM, SWIM, UAM까지. -
- 우리는 지능형 공역 관리 시스템의 미래를 구축합니다. -

- - EXPLORE SOLUTIONS - -
+
+
+ 미래 항공 모빌리티를 구현하는 기술 파트너 +
-
-

The Future of UTM & UAM

+
+ 공역관리와 드론 교통관리(UTM)를 기반으로 +
+ 실제 운영 가능한 항공 시스템을 구축합니다 +
+
- - {/* 기존의 임시 검은 배경 섹션을 지우고 아래와 같이 구성하세요 */} -
-
-

UTM System

-

Drone Traffic Management for Kazakhstan and Global Markets...

-
-
- -
-

UAM Infrastructure

-

Building the future of Urban Air Mobility...

-
); }