diff --git a/public/images/s1-01.jpg b/public/images/s1-01.jpg new file mode 100644 index 0000000..37b1519 Binary files /dev/null and b/public/images/s1-01.jpg differ diff --git a/public/images/s1-02.jpg b/public/images/s1-02.jpg new file mode 100644 index 0000000..d3d1936 Binary files /dev/null and b/public/images/s1-02.jpg differ diff --git a/public/images/s1-03.jpg b/public/images/s1-03.jpg new file mode 100644 index 0000000..569f359 Binary files /dev/null and b/public/images/s1-03.jpg differ diff --git a/public/images/s1-04.jpg b/public/images/s1-04.jpg new file mode 100644 index 0000000..362468e Binary files /dev/null and b/public/images/s1-04.jpg differ diff --git a/public/images/s1-05.jpg b/public/images/s1-05.jpg new file mode 100644 index 0000000..17bcf16 Binary files /dev/null and b/public/images/s1-05.jpg differ diff --git a/public/images/s1-06.jpg b/public/images/s1-06.jpg new file mode 100644 index 0000000..ad4d589 Binary files /dev/null and b/public/images/s1-06.jpg differ diff --git a/public/images/solution01.png b/public/images/solution01.png new file mode 100644 index 0000000..cc4d73b Binary files /dev/null and b/public/images/solution01.png differ diff --git a/src/css/common.css b/src/css/common.css index a01488d..97a6d35 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -82,9 +82,12 @@ body{overflow-x:hidden;} } @media (max-width:768px){ .sh4{padding:calc(var(--header-height) + 48px) 20px 20px;} - .sh4-nav{padding-left:20px;padding-right:20px;} - .sh4-nav-tab{padding:0 14px;font-size:13px;} - .sh4-title em{font-size:4rem} + .sh4-nav{padding-left:0;padding-right:0;flex-wrap: wrap;} + .sh4-nav-tab{padding:0 20px;font-size:13px;flex:0 0 50%;} + .sh4-title-line-inner{margin-top:2rem} + .sh4-title em{font-size:3rem;} + .sh4-nav-tab--active::after{left:0;right:0;} + } @media (max-width:1280px){.ab3-stats{padding-left:48px;padding-right:48px;}} @@ -517,4 +520,71 @@ body{overflow-x:hidden;} .cs-body {padding-left:0;} .cs-bg-num {font-size:120px;} .cs-item-title {font-size:22px;} +} + + +/* ════════════════════════════════ + FlightControlPage — common.css 추가분 +════════════════════════════════ */ + +.fc-eyebrow {display:block;font-size:2rem;font-weight:800;letter-spacing:-1px;text-transform:uppercase;margin-bottom:1.75rem;} + +/* ════════════════ + 1. 개요 +════════════════ */ +.fc-overview {display:flex;align-items:center;gap:4rem;padding:6rem 0 7rem;} +.fc-overview__text {flex:1;min-width:0;} +.fc-overview__desc {font-size:1rem;line-height:1.9;color:#3a3f5c;margin-top:1.2rem;} +.fc-overview__desc--sub {color:#777;font-size:.92rem;margin-top:.8rem;} + +/* 특징 배지 */ +.fc-badges {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;} +.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.78rem;font-weight:600;transition:background .2s,border-color .2s;} +.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);cursor:default;} + +/* 이미지 패널 */ +.fc-overview__panel {flex:0 0 460px;position:relative;} +.fc-overview__panel-inner {border-radius:1.25rem;padding:2rem;} +.fc-overview__img {width:100%;border-radius:.75rem;display:block;} + +/* ════════════════ + 2. 주요기능 +════════════════ */ +.fc-functions {padding-bottom:8rem;} +.fc-functions__grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;} + +.fc-func-card {position:relative;border-radius:1rem;overflow:hidden;border:1px solid var(--color-primary-soft-border);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);cursor:pointer;} +.fc-func-card__img-wrap {overflow:hidden;aspect-ratio:2/1;} +.fc-func-card__img {width:100%;height:100%;object-fit:cover;display:block;} +.fc-func-card__body {display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;} +.fc-func-card__num {font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--color-primary-border-strong);} +.fc-func-card__label {font-size:.85rem;font-weight:600;color:#2a2e52;line-height:1.4;} + +/* 호버 오버레이 — 네이비 반전 */ +.fc-func-card__overlay {position:absolute;inset:0;background:var(--color-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem;} +.fc-func-card__overlay-num {font-size:2.5rem;font-weight:800;color:rgba(255,255,255,.2);line-height:1;} +.fc-func-card__overlay-label {font-size:.9rem;font-weight:600;color:#fff;text-align:center;line-height:1.45;} + +/* ════════════════ + 반응형 +════════════════ */ +@media (max-width: 1024px) { + .fc-overview { + flex-direction: column; + gap: 3rem; + padding: 4rem 0 5rem; + } + .fc-overview__panel { + flex: none; + width: 100%; + } + .fc-functions__grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 640px) { + .fc-functions__grid { + grid-template-columns: 1fr; + } } \ No newline at end of file diff --git a/src/pages/company/HistoryPage.jsx b/src/pages/company/HistoryPage.jsx index 7b6d0df..76692ce 100644 --- a/src/pages/company/HistoryPage.jsx +++ b/src/pages/company/HistoryPage.jsx @@ -157,7 +157,7 @@ export default function HistoryPage() {

- 항공 IT 소프트웨어 개발부터 드론·UTM·UTM 미래 모빌리티까지, + 항공 IT 소프트웨어 개발부터 드론·UTM·UATM 미래 모빌리티까지,
하늘길을 개척해온 팔네트웍스의 10년 발자취를 담았습니다. diff --git a/src/pages/solution/FlightControlPage.jsx b/src/pages/solution/FlightControlPage.jsx index c1ea4ef..c49c5ba 100644 --- a/src/pages/solution/FlightControlPage.jsx +++ b/src/pages/solution/FlightControlPage.jsx @@ -1,52 +1,119 @@ +import { useRef, useState } from "react"; +import { motion, useInView, AnimatePresence } from "framer-motion"; +import { Radio, Puzzle, Network, Expand, Shield } from "lucide-react"; import SubHero from "../../components/SubHero"; import useFadeIn from "../../hooks/useFadeIn"; +const SOLUTION_NAV = [ + { label: "비행상황관리 시스템", to: "/solution/flight-control" }, + { label: "IBE", to: "/solution/ibe" }, + { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, + { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, +]; + +const FEATURES = [ + { icon: Radio, label: "실시간 모니터링" }, + { icon: Puzzle, label: "손쉬운 연계모듈" }, + { icon: Network, label: "네트워크 기반 방식" }, + { icon: Expand, label: "확장성 고려" }, + { icon: Shield, label: "안정적 서비스" }, +]; + +const FUNCTIONS = [ + { num: "01", img: "./images/s1-01.jpg", label: "비행가능 지역 및 공역표출" }, + { num: "02", img: "./images/s1-02.jpg", label: "비행체 위치 표출" }, + { num: "03", img: "./images/s1-03.jpg", label: "항공기 비행경로 및 히스토리 표출" }, + { num: "04", img: "./images/s1-04.jpg", label: "항공기 비행정보 표출" }, + { num: "05", img: "./images/s1-05.jpg", label: "비행계획서 조회" }, + { num: "06", img: "./images/s1-06.jpg", label: "비정상 상황의 경보 표출" }, +]; + +const ease = [0.22, 1, 0.36, 1]; + function FlightControlPage() { const ref = useFadeIn(); - const SOLUTION_NAV = [ - { label: "비행상황관리 시스템", to: "/solution/flight-control" }, - { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, - { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, - { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, - ]; + + const overviewRef = useRef(null); + const funcRef = useRef(null); + + const overviewInView = useInView(overviewRef, { once: true, margin: "-80px" }); + const funcInView = useInView(funcRef, { once: true, margin: "-80px" }); + return (
- - {/* 실시간 운항 관제 -
*/} - Flight Management - - } - // desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다." - navItems={SOLUTION_NAV} - /> + Flight Management} navItems={SOLUTION_NAV} />
-
- 비행상황관리 시스템 - {/*
-
-
-

비행상황관리 시스템

-

Flight Situation Management System

+
+ {/* ════════════════════════════ + 1. 개요 + 특징 배지 + ════════════════════════════ */} +
+ {/* 텍스트 + 배지 */} + + 비행상황 관리 시스템 +

항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템

+

각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.

+ + {/* 특징 배지 */} +
+ {FEATURES.map(({ icon: Icon, label }, i) => ( + + + {label} + + ))}
-
- -
-
-

실시간 비행 상황 통합 관제

-

- 항공기 운항 정보를 실시간으로 수집·분석하여 -
- 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다. -

+ + + {/* 이미지 패널 */} + +
+ 비행상황관리 시스템 화면
-
-
*/} -
+ + + + {/* ════════════════════════════ + 2. 주요기능 카드 + ════════════════════════════ */} +
+ + 비행상황관리 시스템 주요기능 + + +
+ {FUNCTIONS.map(({ num, img, label }, i) => ( + +
+ +
+
+ {num} + {label} +
+ + {num} + {label} + + + ))} +
+
+
); diff --git a/src/pages/solution/IbePage.jsx b/src/pages/solution/IbePage.jsx index e8f3e75..b0fb442 100644 --- a/src/pages/solution/IbePage.jsx +++ b/src/pages/solution/IbePage.jsx @@ -5,7 +5,7 @@ function IbePage() { const ref = useFadeIn(); const SOLUTION_NAV = [ { label: "비행상황관리 시스템", to: "/solution/flight-control" }, - { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, + { label: "IBE", to: "/solution/ibe" }, { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, ]; diff --git a/src/pages/solution/KtGcloudPage.jsx b/src/pages/solution/KtGcloudPage.jsx index f710c86..b476c67 100644 --- a/src/pages/solution/KtGcloudPage.jsx +++ b/src/pages/solution/KtGcloudPage.jsx @@ -5,7 +5,7 @@ function KtGcloudPage() { const ref = useFadeIn(); const SOLUTION_NAV = [ { label: "비행상황관리 시스템", to: "/solution/flight-control" }, - { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, + { label: "IBE", to: "/solution/ibe" }, { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, ]; diff --git a/src/pages/solution/SmartTourPage.jsx b/src/pages/solution/SmartTourPage.jsx index ec3c6cf..8a48776 100644 --- a/src/pages/solution/SmartTourPage.jsx +++ b/src/pages/solution/SmartTourPage.jsx @@ -5,7 +5,7 @@ function SmartTourPage() { const ref = useFadeIn(); const SOLUTION_NAV = [ { label: "비행상황관리 시스템", to: "/solution/flight-control" }, - { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, + { label: "IBE", to: "/solution/ibe" }, { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, ];