diff --git a/src/css/common.css b/src/css/common.css index fca4bf8..a77a016 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1111,19 +1111,21 @@ body{overflow-x:hidden;} .utm-intro { display: flex; flex-direction: column; gap: 52px; padding: 80px 0;} .utm-intro__left { flex: 1; } .utm-intro__top { max-width: 560px; } -.utm-what__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #fff; margin-bottom: 20px; word-break: keep-all; } -.utm-what__title em { background: linear-gradient(90deg, #ff6b6b, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } +.utm-intro__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; } +.utm-intro__title em { color: #1A1F5E; font-style: normal; -webkit-text-fill-color: #1A1F5E; } .utm-intro__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; } .utm-intro__desc strong { font-weight: 600; color: #111; } .utm-intro__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin-left: auto; } -.utm-intro__card { background: #fff; border-radius: 16px; padding: 28px 24px 32px; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); width: 260px; height: 260px;} +.utm-intro__card { background: #fff; border-radius: 16px; padding: 28px 24px 32px; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); width: 240px; height: 240px;} .utm-intro__card-num { position: absolute; top: 16px; right: 20px; font-size: 56px; font-weight: 700; color: rgba(0,0,0,0.07); line-height: 1; } -.utm-intro__card-img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 16px; } +.utm-intro__card-icon { margin-bottom: 14px; display: block; background: linear-gradient(135deg, #C850C0, #4158D0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .utm-intro__card-label { font-size: 18px; font-weight: 600; color: #222; line-height: 1.4; word-break: keep-all; } + .utm-what { background: linear-gradient(135deg, #1A0A2E 0%, #0D0D1A 50%, #1A0820 100%); padding: 100px 0; } .utm-what__top { text-align: center; margin-bottom: 64px; } - +.utm-what__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #fff; margin-bottom: 20px; word-break: keep-all; } +.utm-what__title em { background: linear-gradient(90deg, #ff6b6b, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } .utm-what__inner { display: flex; align-items: center; justify-content: space-between; gap: 80px; min-height: 500px; } .utm-what__left { flex: 0 0 480px; } .utm-what__eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 20px; } @@ -1235,3 +1237,20 @@ body{overflow-x:hidden;} .utm-evo__item--highlight .utm-evo__dot { border-color: transparent; color: #fff; } .utm-evo__item--highlight .utm-evo__dot::before { opacity: 1; } .utm-evo__item--highlight .utm-evo__card-tag { background: rgba(26,31,94,0.08); color: var(--navy); } + + +.utm-cap { padding: 80px 0; background: #F7F8FA; } +.utm-cap__top { max-width: 560px; } +.utm-cap .inner-wrap { display: flex; flex-direction: column; gap: 52px; } +.utm-cap__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; } +.utm-cap__title em { color: var(--color-primary, #E8193C); font-style: normal; } +.utm-cap__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; } +.utm-cap__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; background: #F7F8FA; border-radius: 20px; padding: 32px; } +.utm-cap__card { background: #fff; border-radius: 16px; padding: 28px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } +.utm-cap__card-num { position: absolute; top: 16px; right: 20px; font-size: 72px; font-weight: 700; color: rgba(0,0,0,0.05); line-height: 1; } +.utm-cap__card-body { display: flex; flex-direction: column; gap: 16px; } +.utm-cap__card-name { font-size: 18px; font-weight: 700; color: #111; line-height: 1.35; word-break: keep-all; display: block; } +.utm-cap__card-name::before { content: ''; display: block; width: 24px; height: 2.5px; background: var(--cap-color); border-radius: 2px; margin-bottom: 14px; } +.utm-cap__card-tags { list-style: none; display: flex; flex-direction: column; gap: 7px; } +.utm-cap__card-tags li { font-size: 13px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } +.utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 6px; opacity: 0.6; } diff --git a/src/pages/utm/IntroPage.jsx b/src/pages/utm/IntroPage.jsx index a248627..09bf474 100644 --- a/src/pages/utm/IntroPage.jsx +++ b/src/pages/utm/IntroPage.jsx @@ -11,18 +11,20 @@ import { FileCheck, Database, Layers, + Navigation, + CheckCircle, + Radio, } from "lucide-react"; const ease = [0.22, 1, 0.36, 1]; const basePath = import.meta.env.BASE_URL; const INTRO_CARDS = [ - { label: "비행 계획", img: `${basePath}/images/utm_intro_icon1.png` }, - { label: "비행 승인", img: `${basePath}/images/utm_intro_icon2.png` }, - { label: "실시간 관제", img: `${basePath}/images/utm_intro_icon3.png` }, - { label: "데이터 관리", img: `${basePath}/images/utm_intro_icon4.png` }, + { label: "비행 계획", icon: Navigation }, + { label: "비행 승인", icon: CheckCircle }, + { label: "실시간 관제", icon: Radio }, + { label: "데이터 관리", icon: Database }, ]; - const UTM_WHAT_LEFT = [ { icon: MapPin, label: "실시간 위치 감시" }, { icon: ShieldAlert, label: "충돌 위험 사전 분석" }, @@ -61,7 +63,7 @@ const EVO_ITEMS = [ <> 무인기 교통관리 시스템 도입.
- 비행 경로 승인·충돌 방지· 공역 관리 체계화. + 비행 경로 승인·충돌 방지·공역 관리 체계화. ), tag: "공역 관리 시스템", @@ -99,6 +101,49 @@ const EVO_ITEMS = [ active: true, }, ]; + +const SECTORS = [ + { + id: 0, + num: "01", + name: "UAM 기체 운용", + color: "#E8193C", + tags: [ + "eVTOL 기체 직접 운용", + "실 운용 데이터 기반 검증", + "국내 유일 통합 사업자", + "안전 관리 체계 구축", + ], + }, + { + id: 1, + num: "02", + name: "UTM 관제 기술", + color: "#1A1F5E", + tags: [ + "실시간 공역 감시·관제", + "충돌 위험 사전 분석", + "비행 경로 승인 시스템", + "지오펜싱·공역 설정", + ], + }, + { + id: 2, + num: "03", + name: "통합 항공 데이터 플랫폼", + color: "#3D3D3D", + tags: [ + "비행 데이터 수집·분석", + "UAM·드론 시스템 연동", + "기상 정보 자동 연계", + "통합 데이터 관리", + ], + }, +]; + +/* ──────────────────────────────────────── + EvoItem +──────────────────────────────────────── */ function EvoItem({ item, index }) { const itemRef = useRef(null); const itemInView = useInView(itemRef, { once: true, margin: "-80px" }); @@ -140,8 +185,7 @@ function EvoItem({ item, index }) {
- {String(index + 1).padStart(2, "0")}{" "} - {/* 여기 span 추가 */} + {String(index + 1).padStart(2, "0")}
@@ -163,6 +207,10 @@ function EvoItem({ item, index }) { ); } + +/* ──────────────────────────────────────── + IntroPage +──────────────────────────────────────── */ function IntroPage() { const ref = useFadeIn(); const UTM_NAV = [ @@ -172,11 +220,17 @@ function IntroPage() { const introRef = useRef(null); const introInView = useInView(introRef, { once: true, margin: "-60px" }); + const whatRef = useRef(null); - const whatInView = useInView(whatRef, { once: true, margin: "-200px" }); + const whatInView = useInView(whatRef, { once: true, margin: "-100px" }); + const evoRef = useRef(null); const evoInView = useInView(evoRef, { once: true, margin: "-100px" }); const evoTrackRef = useRef(null); + + const capRef = useRef(null); + const capInView = useInView(capRef, { once: true, margin: "-80px" }); + const { scrollYProgress } = useScroll({ target: evoTrackRef, offset: ["start center", "end center"], @@ -196,6 +250,7 @@ function IntroPage() { />
+ {/* ── 01 Overview ── */}
@@ -215,7 +270,8 @@ function IntroPage() { > PAL Networks의 UTM/UATM은
- 도심 항공 관제의 새로운 기준입니다. + 도심 항공 관제의 {""} + 새로운 기준입니다. {String(i + 1).padStart(2, "0")} - {card.label} + + + + + + + + + + +

{card.label}

))} @@ -254,7 +326,7 @@ function IntroPage() {
- {/* ── UTM 소개 섹션 ── */} + {/* ── 02 What is UTM ── */}
UTM은 단순한 관제 시스템을 넘어, 도심 저고도 공역 전체를 - 디지털로 운영하는 통합 플랫폼입니다.
+ 디지털로 운영하는 통합 플랫폼입니다. +
실시간 감시부터 충돌 위험 분석, 기상 연계, 공역 관리까지 — 비행의 모든 순간을 안전하게 연결합니다. @@ -417,8 +490,8 @@ function IntroPage() {
+ {/* ── 03 Evolution ── */}
- {/* ── DRONE → UATM 진화 섹션 ── */}
+ + {/* ── 04 Capabilities ── */} +
+
+
+ + Capabilities + + + PAL Networks의
+ 세 가지 핵심 역량 + + + 기체 운용부터 관제, 데이터까지 — 하나의 사업자가 모두 보유한 + 통합 역량입니다. + +
+ +
    + {SECTORS.map((s, i) => ( + + {s.num} +
    + {s.name} +
      + {s.tags.map((tag) => ( +
    • {tag}
      • + ))} +
    +
    +     + ))} +
+
+
);