diff --git a/public/images/utm_intro_icon1.png b/public/images/utm_intro_icon1.png new file mode 100644 index 0000000..88021a8 Binary files /dev/null and b/public/images/utm_intro_icon1.png differ diff --git a/public/images/utm_intro_icon2.png b/public/images/utm_intro_icon2.png new file mode 100644 index 0000000..190ed4e Binary files /dev/null and b/public/images/utm_intro_icon2.png differ diff --git a/public/images/utm_intro_icon3.png b/public/images/utm_intro_icon3.png new file mode 100644 index 0000000..e2ff6ce Binary files /dev/null and b/public/images/utm_intro_icon3.png differ diff --git a/public/images/utm_intro_icon4.png b/public/images/utm_intro_icon4.png new file mode 100644 index 0000000..c8a7a9d Binary files /dev/null and b/public/images/utm_intro_icon4.png differ diff --git a/public/images/utm_what_img.png b/public/images/utm_what_img.png new file mode 100644 index 0000000..3f98352 Binary files /dev/null and b/public/images/utm_what_img.png differ diff --git a/src/css/common.css b/src/css/common.css index 0e098a2..a0d638f 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1103,4 +1103,94 @@ body{overflow-x:hidden;} .mt-service-card:nth-child(n+2) { border-top:1px solid var(--color-primary-soft-border); } .mt-service-card:nth-child(5) { grid-column:span 1; } } - \ No newline at end of file + +/* ================================================================ + utm intro Page + ================================================================ */ + +.utm-intro { display: flex; flex-direction: column; gap: 52px; padding: 80px 0;} +.utm-intro__left { flex: 1; } +.utm-intro__top { max-width: 560px; } +.utm-intro__title { font-size: 38px; font-weight: 700; line-height: 1.4; color: #111; margin: 16px 0 18px; word-break: keep-all; } +.utm-intro__title em { color: var(--color-primary); font-style: normal; } +.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-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-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__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: block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #E8193C; margin-bottom: 20px; } +.utm-what__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #fff; margin-bottom: 24px; word-break: keep-all; } +.utm-what__desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.9; margin-bottom: 36px; word-break: keep-all; } +.utm-what__list { list-style: none; display: flex; flex-direction: column; gap: 14px; } +.utm-what__list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; } +.utm-what__list-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8193C; flex-shrink: 0; } +.utm-what__right { flex: 1; background-size: contain; background-position: center right; background-repeat: no-repeat; min-height: 620px; } +.utm-what__img { width: 100%; max-width: 480px; object-fit: cover; } + +.utm-what__img-wrap { position: relative; width: 100%; min-height: 620px; background-size: contain; background-position: center right; background-repeat: no-repeat; } +.utm-what__paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } +.drone { position: absolute; display: flex; align-items: center; justify-content: center; } +.drone--1 { top: 28%; left: 38%; animation: dronefloat1 6s ease-in-out infinite; } +.drone--2 { top: 55%; left: 60%; animation: dronefloat2 8s ease-in-out infinite; } +.drone--3 { top: 40%; left: 52%; animation: dronefloat3 7s ease-in-out infinite; } +.drone__bg { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } +.drone__bg--red { background: rgba(232,25,60,0.25); border: 1.5px solid rgba(232,25,60,0.8); box-shadow: 0 0 16px rgba(232,25,60,0.6), 0 0 32px rgba(232,25,60,0.3); } +.drone__bg--blue { background: rgba(59,130,246,0.25); border: 1.5px solid rgba(59,130,246,0.8); box-shadow: 0 0 16px rgba(59,130,246,0.6), 0 0 32px rgba(59,130,246,0.3); } +.drone__bg--purple { background: rgba(167,139,250,0.25); border: 1.5px solid rgba(59,130,246,0.8); box-shadow: 0 0 16px rgba(167,139,250,0.6), 0 0 32px rgba(167,139,250,0.3); } +.drone__ping { position: absolute; width: 48px; height: 48px; border-radius: 50%; z-index: 1; animation: ping 2.5s ease-out infinite; } +.drone__ping--red { border: 1.5px solid rgba(232,25,60,0.6); } +.drone__ping--blue { border: 1.5px solid rgba(59,130,246,0.6); } +.drone__ping--purple { border: 1.5px solid rgba(167,139,250,0.6); } +.drone__ping--delay { animation-delay: 1s; } + +.drone-alert { position: absolute; bottom: 120px; left: 198px; width: 200px; background: rgba(255,255,255,0.95); border-radius: 10px; padding: 12px 14px; backdrop-filter: blur(8px); display: flex; gap: 10px; align-items: flex-start; animation: alertAppear 0.5s ease forwards; opacity: 0; animation-delay: 1s; box-shadow: 0 0 20px rgba(232,25,60,0.2); } +.drone-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: #E8193C; flex-shrink: 0; margin-top: 3px; animation: dotBlink 1s ease-in-out infinite; } +.drone-alert__title { font-size: 12px; font-weight: 600; color: #E8193C; margin-bottom: 4px; } +.drone-alert__desc { font-size: 11px; color: #444; line-height: 1.5; margin-bottom: 4px; } +.drone-alert__pos { font-size: 10px; color: #888; font-variant-numeric: tabular-nums; } + +@keyframes alertAppear { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} } +@keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:0.2;} } +@keyframes dronefloat1 { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(12px,-10px) rotate(3deg);} 66%{transform:translate(-8px,6px) rotate(-2deg);} } +@keyframes dronefloat2 { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(-10px,-14px) rotate(-3deg);} 66%{transform:translate(8px,8px) rotate(2deg);} } +@keyframes dronefloat3 { 0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(10px,-12px) rotate(4deg);} } +@keyframes ping { 0%{transform:scale(1);opacity:0.8;} 100%{transform:scale(2.8);opacity:0;} } + +.utm-evo { display: flex; gap: 80px; align-items: flex-start; padding: 100px 48px; } +.utm-evo__left { flex: 0 0 420px; } +.utm-evo__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 2px; color: #E8193C; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } +.utm-evo__eyebrow::before { content: ''; width: 20px; height: 1.5px; background: #E8193C; } +.utm-evo__title { font-size: 36px; font-weight: 700; line-height: 1.35; color: #111; margin-bottom: 20px; word-break: keep-all; } +.utm-evo__title em { color: var(--color-primary); font-style: normal; } +.utm-evo__desc { font-size: 14px; color: #777; line-height: 1.85; margin-bottom: 32px; word-break: keep-all; } +.utm-evo__chip { display: inline-flex; align-items: center; gap: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 600; padding: 10px 18px; border-radius: 8px; } +.utm-evo__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #E8193C; flex-shrink: 0; } + +.utm-evo__right { flex: 1; } +.utm-evo__track { display: flex; flex-direction: column; position: relative; } +.utm-evo__track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #EBEBEB; transform: translateX(-50%); z-index: 0; } + +.utm-evo__item { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; padding: 20px 0; } +.utm-evo__empty { flex: 1; } +.utm-evo__card-wrap--left { padding-right: 28px; } +.utm-evo__card-wrap--right { padding-left: 28px; } + +.utm-evo__dot-wrap { display: flex; justify-content: center; align-items: center; z-index: 1; position: relative; } +.utm-evo__dot { width: 44px; height: 44px; border-radius: 50%; background: #F4F4F6; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #E0E0E0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #bbb; } +.utm-evo__item--active .utm-evo__dot { background: #E8193C; box-shadow: 0 0 0 8px rgba(232,25,60,0.1); color: #fff; } + +.utm-evo__card { background: #F8F8FC; border-radius: 14px; padding: 22px 20px; border: 1px solid #EBEBEB; } +.utm-evo__item--active .utm-evo__card { background: #fff; border-color: #E8193C; box-shadow: 0 6px 32px rgba(232,25,60,0.1); } +.utm-evo__card-name { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 6px; } +.utm-evo__item--active .utm-evo__card-name { color: #E8193C; } +.utm-evo__card-desc { font-size: 12px; color: #999; line-height: 1.7; } +.utm-evo__item--active .utm-evo__card-desc { color: #555; } +.utm-evo__card-tag { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 500; color: #bbb; background: #EFEFEF; padding: 3px 10px; border-radius: 20px; } +.utm-evo__item--active .utm-evo__card-tag { background: rgba(232,25,60,0.08); color: #E8193C; } +.utm-evo__pal-flag { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; font-weight: 600; color: #E8193C; } \ No newline at end of file diff --git a/src/pages/utm/IntroPage.jsx b/src/pages/utm/IntroPage.jsx index c954752..c82e5c9 100644 --- a/src/pages/utm/IntroPage.jsx +++ b/src/pages/utm/IntroPage.jsx @@ -1,12 +1,37 @@ +import { useRef } from "react"; import SubHero from "../../components/SubHero"; import useFadeIn from "../../hooks/useFadeIn"; +import { motion, useInView } from "framer-motion"; +import { MapPin, ShieldAlert, Network, BadgeCheck } 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` }, +]; + +const UTM_WHAT_LIST = [ + "실시간 비행체 위치 감시 및 추적", + "AI 기반 충돌 위험 사전 분석·경보", + "기상청 연계 기상 정보 자동 반영", + "동적 공역 설정 및 지오펜싱 관리", +]; function IntroPage() { const ref = useFadeIn(); const UTM_NAV = [ { label: "UTM/UATM 소개", to: "/utm/intro" }, { label: "도입사례", to: "/utm/case" }, ]; + const introRef = useRef(null); + const introInView = useInView(introRef, { once: true, margin: "-60px" }); + const whatRef = useRef(null); + const whatInView = useInView(whatRef, { once: true, margin: "-60px" }); + return (
-
- UTM/UATM 소개 - {/*
-
-
-

UTM/UATM 소개

-

Urban Air Mobility & UTM Air Traffic Management

-
-
+
+
+ {/* ── 상단 텍스트 블록 ── */} +
+ + Overview + + + + PAL Networks의 UTM/UATM은 +
+ 도심 항공 관제의 새로운 기준입니다. + -
-
-

도심 항공 모빌리티 핵심 기술

-

- 안전한 도심 상공 운항과 통합 관제를 실현하는 + + UAM 기체 운용과 UTM 관제 플랫폼을 동시에 보유한 국내 유일의 통합 + 사업자입니다. +
실 운용 데이터로 검증된 시스템으로{" "} + 안전한 저고도 공역 관리를 실현합니다. + +

+ + {/* ── 4개 카드 그리드 ── */} +
    + {INTRO_CARDS.map((card, i) => ( + + + {String(i + 1).padStart(2, "0")} + + {card.label} +

    {card.label}

    +     + ))} +
+
+
+ + {/* ── UTM 소개 섹션 ── */} +
+
+
+
+ + What is UTM + + + + UTM,
- PAL Networks의 UTM/UATM 기술을 소개합니다. -

+ 무엇을 할 수 있나요? + + + + UTM은 단순한 관제 시스템을 넘어, 도심 저고도 공역 전체를 + 디지털로 운영하는 통합 플랫폼입니다. 실시간 감시부터 충돌 위험 + 분석, 기상 연계, 공역 관리까지 — 비행의 모든 순간을 안전하게 + 연결합니다. + + + + {UTM_WHAT_LIST.map((item) => ( +
  • + + {item} +
    • + ))} +
    -
    -
    */} + +
    + {/* 드론들 */} + +
    +
    + + + + + + + + +
    +
    +
    +
    + +
    +
    + + + + + + + + +
    +
    +
    +
    + +
    +
    + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +

    ⚠ 불법 드론 감지

    +

    + 식별 불가 기체 접근 중
    GND-150m +

    +

    위치 37.5°N 126.9°E

    +
    +
    +
    + +
    +
    + +
    + {/* ── DRONE → UATM 진화 섹션 ── */} +
    +
    + {" "} + + Evolution + +

    + UTM에서 UATM으로, +
    + 하늘길의 패러다임이 바뀝니다 +

    +

    + 드론 한 대의 비행에서 시작된 기술이, 이제 도심 전체의 하늘을 + 통합 관제하는 UATM으로 진화했습니다. PAL Networks는 이 변화의 + 최전선에서 기체와 관제를 함께 운영합니다. +

    +
    + +
    +
    +
    +
    +
    +
    🚁 DRONE
    +
    + 개별 드론 운용 단계. 단순 비행 임무 수행 중심으로 체계적 + 관리 체계 부재. +
    + 단일 기체 운용 +
    +
    +
    +
    01
    +
    +
    +
    + +
    +
    +
    +
    02
    +
    +
    +
    +
    📡 UTM
    +
    + 무인기 교통관리 시스템 도입. 비행 경로 승인·충돌 + 방지·공역 관리 체계화. +
    + + 공역 관리 시스템 + +
    +
    +
    + +
    +
    +
    +
    ✈️ UAM
    +
    + 도심항공모빌리티 등장. 유인 eVTOL 기체가 도심 저고도 + 공역을 비행. +
    + + 도심 항공 모빌리티 + +
    +
    +
    +
    03
    +
    +
    +
    + +
    +
    +
    +
    04
    +
    +
    +
    +
    🛸 UATM
    +
    + UAM과 UTM의 완전한 통합. 기체 운용부터 관제까지 하나의 + 플랫폼으로 실현. +
    + + 통합 관제 플랫폼 + +
    + PAL Networks가 실현합니다 +
    +
    +
    +
    +
    +
    +
    +
    );