palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

D

remotes/origin/main
김지은 2 months ago
parent
920f7c0f70
commit
1793381e57
7 changed files with 484 additions and 261 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/images/uam.mp4
  2. 8
      src/App.jsx
  3. 22
      src/components/ScrollToTop.jsx
  4. 132
      src/components/SubHero.jsx
  5. 237
      src/css/common.css
  6. 7
      src/css/header.css
  7. 307
      src/pages/company/AboutPage.jsx

BIN
public/images/uam.mp4
View File

Binary file not shown.

8
src/App.jsx
Unescape View File

@ -1,7 +1,13 @@
import Router from "./Router"; import Router from "./Router";
import ScrollToTop from "./components/ScrollToTop";
function App() { function App() {
return <Router />; return (
<>
<ScrollToTop />
<Router />
</>
);
} }
export default App; export default App;

22
src/components/ScrollToTop.jsx
Unescape View File

@ -0,0 +1,22 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
// 이전 페이지 ScrollTrigger 전부 정리 (핀 잔재 제거)
ScrollTrigger.getAll().forEach((t) => t.kill());
ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";
// 맨 위로 이동
window.scrollTo({ top: 0, behavior: "instant" });
// DOM 안정화 후 refresh
requestAnimationFrame(() => ScrollTrigger.refresh());
}, [pathname]);
return null;
}

132
src/components/SubHero.jsx
Unescape View File

@ -1,71 +1,121 @@
import { useEffect, useRef, useState } from "react";
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
const menuMap = { const menuMap = {
"/company": "Company", "/company": { label: "Company", color: "dark" },
"/uam": "UAM / UATM", "/uam": { label: "UAM / UATM", color: "dark" },
"/business": "Business", "/business": { label: "Business", color: "dark" },
"/solution": "Solution", "/solution": { label: "Solution", color: "dark" },
"/contact": "Contact Us", "/contact": { label: "Contact Us", color: "dark" },
}; };
function ChevronIcon() { export default function SubHero({ title, desc, navItems, bgImage }) {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
<path d="M4.5 3l3 3-3 3" />
</svg>
);
}
export default function SubHero({ label, title, desc, navItems }) {
const { pathname } = useLocation(); const { pathname } = useLocation();
// 현재 경로에서 상위 메뉴 추출 ("/company/about" → "/company")
const topPath = "/" + pathname.split("/")[1]; const topPath = "/" + pathname.split("/")[1];
const topLabel = menuMap[topPath] || ""; const topLabel = menuMap[topPath]?.label || "";
const currentLabel = navItems?.find((n) => n.to === pathname)?.label || "";
const [dropOpen, setDropOpen] = useState(false);
const bgRef = useRef(null);
const txtRef = useRef(null);
const lineRef = useRef(null);
const fl1Ref = useRef(null);
const fl2Ref = useRef(null);
const descRef = useRef(null);
const dropRef = useRef(null);
// 현재 페이지 label // 히어로 진입 애니
const currentLabel = navItems?.find((n) => n.to === pathname)?.label || label; useEffect(() => {
const t1 = setTimeout(() => bgRef.current?.classList.add("sh-bg--zoomed"), 80);
const t2 = setTimeout(() => lineRef.current?.classList.add("sh-line--drawn"), 600);
const t3 = setTimeout(() => fl1Ref.current?.classList.add("sh-fill--on"), 200);
const t4 = setTimeout(() => fl2Ref.current?.classList.add("sh-fill--on"), 480);
const t5 = setTimeout(() => descRef.current?.classList.add("sh-desc--on"), 900);
return () => [t1, t2, t3, t4, t5].forEach(clearTimeout);
}, [pathname]);
// 외부 클릭 시 드롭다운 닫기
useEffect(() => {
const handler = (e) => {
if (!dropRef.current?.contains(e.target)) setDropOpen(false);
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, []);
const titleLines = typeof title === "string" ? title.split("\n") : [title];
return ( return (
<> <>
<section className="sub-hero"> {/* 히어로 */}
<div className="sub-hero-inner"> <section className="sh">
{/* Breadcrumb */} <div className="sh-bg" ref={bgRef} style={bgImage ? { backgroundImage: `linear-gradient(105deg,rgba(5,12,31,.97) 0%,rgba(5,12,31,.82) 38%,rgba(8,18,52,.65) 62%,rgba(5,12,31,.78) 100%),url(${bgImage})` } : {}} />
<nav className="sub-breadcrumb" aria-label="breadcrumb"> <div className="sh-glow" />
<Link to="/main" className="sub-breadcrumb-item"> <div className="sh-dim" />
<div className="sh-inner">
{/* 브레드크럼 */}
<nav className="sh-bc" aria-label="breadcrumb">
<Link to="/main" className="sh-bc-static">
Home Home
</Link> </Link>
<span className="sub-breadcrumb-sep" aria-hidden="true"> <span className="sh-bc-sep">›</span>
<ChevronIcon />
</span> {/* 드롭다운 */}
<Link to={topPath} className="sub-breadcrumb-item"> <div className="sh-bc-drop" ref={dropRef}>
<button className="sh-bc-btn" onClick={() => setDropOpen((v) => !v)} aria-expanded={dropOpen} aria-haspopup="listbox">
{topLabel} {topLabel}
<svg className={`sh-bc-arrow${dropOpen ? " sh-bc-arrow--open" : ""}`} width="10" height="10" viewBox="0 0 10 10" fill="none">
<path d="M2 3.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
{dropOpen && (
<div className="sh-bc-menu" role="listbox">
{navItems?.map((item) => (
<Link key={item.to} to={item.to} className={`sh-bc-menu-item${item.to === pathname ? " sh-bc-menu-item--cur" : ""}`} onClick={() => setDropOpen(false)} role="option">
<span className="sh-bc-menu-dot" />
{item.label}
</Link> </Link>
<span className="sub-breadcrumb-sep" aria-hidden="true"> ))}
<ChevronIcon /> </div>
</span> )}
<span className="sub-breadcrumb-item is-current" aria-current="page"> </div>
<span className="sh-bc-sep">›</span>
<span className="sh-bc-now" aria-current="page">
{currentLabel} {currentLabel}
</span> </span>
</nav> </nav>
{label && <span className="sub-hero-label">{label}</span>} {/* 타이틀 */}
<h2 className="sub-hero-title">{title}</h2> <h2 className="sh-title">
{desc && <p className="sub-hero-desc">{desc}</p>} {titleLines.map((line, i) => (
<span key={i} className="sh-fill" ref={i === 0 ? fl1Ref : fl2Ref}>
{line}
</span>
))}
</h2>
{desc && (
<p className="sh-desc" ref={descRef}>
{desc}
</p>
)}
</div> </div>
<div className="sh-line" ref={lineRef} />
</section> </section>
{/* Sub Nav */} {/* 서브 탭 네비 */}
{navItems && navItems.length > 1 && ( {navItems?.length > 1 && (
<div className="sub-nav-wrap"> <nav className="sh-nav" aria-label="Sub Navigation">
<nav className="sub-nav" aria-label="Sub Navigation"> <div className="sh-nav-inner">
{navItems.map((item) => ( {navItems.map((item) => (
<Link key={item.to} to={item.to} className={`sub-nav-item${pathname === item.to ? " is-active" : ""}`}> <Link key={item.to} to={item.to} className={`sh-nav-tab${pathname === item.to ? " sh-nav-tab--active" : ""}`}>
{item.label} {item.label}
</Link> </Link>
))} ))}
</nav>
</div> </div>
</nav>
)} )}
</> </>
); );

237
src/css/common.css
Unescape View File

@ -1,14 +1,14 @@
:root{ :root{
--header-height:96px; --header-height:96px;
--color-primary:#3A4081; --color-primary:#3A4081;
--color-primary-hover:#2F5DAA; --color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5; --color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08); --color-primary-soft:rgba(58,64,129,.08);
--color-primary-soft-strong:rgba(58,64,129,.12); --color-primary-soft-strong:rgba(58,64,129,.12);
--color-primary-soft-border:rgba(58,64,129,.16); --color-primary-soft-border:rgba(58,64,129,.16);
--color-primary-border:rgba(58,64,129,.2); --color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24); --color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18); --color-primary-shadow:rgba(58,64,129,.18);
} }
html{scrollbar-gutter:inherit;} html{scrollbar-gutter:inherit;}
@ -46,95 +46,150 @@ body{overflow-x:hidden;}
.sub-fade-in{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease;} .sub-fade-in{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease;}
.sub-fade-in.is-visible{opacity:1;transform:translateY(0);} .sub-fade-in.is-visible{opacity:1;transform:translateY(0);}
/*sub about*/ /*about page*/
.about-overview{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:80px;} .sh{height:520px;position:relative;overflow:hidden;background:#050c1f;}
.about-overview-text .sub-section-lead{max-width:100%;} .sh-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.12);transition:transform 2s cubic-bezier(.16,1,.3,1);will-change:transform;}
.about-overview-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid rgba(17,17,17,.08);border-radius:20px;overflow:hidden;} .sh-bg--zoomed{transform:scale(1);}
.about-stat{padding:32px 28px;background:#fafafa;} .sh-glow{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 68% 42%,rgba(58,64,129,.32) 0%,transparent 62%);pointer-events:none;}
.about-stat:nth-child(1){background:var(--color-primary);} .sh-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,31,.05) 0%,rgba(5,12,31,.55) 100%);pointer-events:none;}
.about-stat:nth-child(1) .about-stat-num,.about-stat:nth-child(1) .about-stat-unit,.about-stat:nth-child(1) .about-stat-label{color:#fff;} .sh-line{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(107,120,181,.5) 25%,rgba(58,64,129,.85) 50%,rgba(107,120,181,.5) 75%,transparent);transform:scaleX(0);transform-origin:center;transition:transform 1.8s cubic-bezier(.16,1,.3,1);}
.about-stat:nth-child(1) .about-stat-label{color:rgba(255,255,255,.7);} .sh-line--drawn{transform:scaleX(1);}
.about-stat-num{font-size:40px;font-weight:800;letter-spacing:-.04em;color:#0d1117;line-height:1;} .sh-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:0 80px;height:100%;display:flex;flex-direction:column;justify-content:center;}
.about-stat-unit{font-size:20px;font-weight:700;color:#0d1117;margin-left:2px;} .sh-bc{display:flex;align-items:center;gap:0;margin-bottom:36px;position:relative;z-index:20;}
.about-stat-label{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.45);letter-spacing:.01em;} .sh-bc-static{font-size:12px;font-weight:500;color:rgba(255,255,255,.28);}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;} .sh-bc-sep{font-size:11px;color:rgba(255,255,255,.15);margin:0 7px;}
.about-value-card{padding:36px 32px;background:#fff;border:1px solid rgba(17,17,17,.07);border-radius:20px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;} .sh-bc-drop{position:relative;}
.about-value-card:hover{border-color:rgba(58,64,129,.2);transform:translateY(-4px);box-shadow:0 20px 40px rgba(58,64,129,.08);} .sh-bc-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:rgba(255,255,255,.52);cursor:pointer;padding:5px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s;}
.about-value-icon{width:48px;height:48px;margin-bottom:20px;border-radius:14px;background:rgba(58,64,129,.07);display:flex;align-items:center;justify-content:center;} .sh-bc-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);}
.about-value-icon svg{width:24px;height:24px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .sh-bc-arrow{transition:transform .22s ease;color:rgba(255,255,255,.32);}
.about-value-card h3{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#0d1117;} .sh-bc-arrow--open{transform:rotate(180deg);}
.about-value-card p{margin:0;font-size:14px;line-height:1.75;color:rgba(17,17,17,.55);word-break:keep-all;} .sh-bc-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:172px;background:rgba(8,14,38,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(107,120,181,.18);border-radius:12px;padding:6px;z-index:100;animation:shMenuIn .18s ease;}
.about-awards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px;}
.about-award-item{display:flex;align-items:flex-start;gap:16px;padding:24px;background:#fff;border:1px solid rgba(17,17,17,.07);border-radius:16px;}
.about-award-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--color-primary);margin-top:6px;}
.about-award-item h4{margin:0 0 4px;font-size:15px;font-weight:700;color:#0d1117;letter-spacing:-.01em;}
.about-award-item p{margin:0;font-size:13px;color:rgba(17,17,17,.5);line-height:1.6;}
/*sub history*/ @keyframes shMenuIn{
.history-timeline{position:relative;margin-top:56px;} from{opacity:0;transform:translateY(-6px) scale(.97);}
.history-year-group{margin-bottom:64px;} to{opacity:1;transform:translateY(0) scale(1);}
.history-year-group:last-child{margin-bottom:0;} }
.history-year{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;margin-bottom:28px;background:var(--color-primary);border-radius:999px;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;}
.history-items{display:grid;grid-template-columns:1fr;gap:0;border-left:2px solid rgba(58,64,129,.12);margin-left:12px;padding-left:32px;}
.history-item{position:relative;padding:0 0 28px;}
.history-item:last-child{padding-bottom:0;}
.history-item::before{content:"";position:absolute;left:-38px;top:6px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--color-primary);}
.history-item-month{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--color-primary);}
.history-item-text{font-size:15px;font-weight:500;color:#0d1117;line-height:1.6;letter-spacing:-.01em;word-break:keep-all;}
/*sub partners*/
.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;}
.partner-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;padding:24px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:16px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
.partner-card:hover{border-color:rgba(58,64,129,.2);transform:translateY(-3px);box-shadow:0 16px 32px rgba(58,64,129,.07);}
.partner-card-name{font-size:14px;font-weight:700;color:rgba(17,17,17,.6);text-align:center;line-height:1.4;letter-spacing:-.01em;word-break:keep-all;}
.partner-card-type{margin-top:4px;font-size:11px;font-weight:500;color:rgba(17,17,17,.35);letter-spacing:.06em;text-transform:uppercase;}
/*sub location*/ .sh-bc-menu-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:500;color:rgba(255,255,255,.5);border-radius:8px;cursor:pointer;transition:background .18s,color .18s;text-decoration:none;}
.location-wrap{display:grid;grid-template-columns:1fr 480px;gap:48px;align-items:start;margin-top:48px;} .sh-bc-menu-item:hover{background:rgba(58,64,129,.3);color:#fff;}
.location-map{border-radius:20px;overflow:hidden;background:#e8eaf0;aspect-ratio:16/10;border:1px solid rgba(17,17,17,.08);} .sh-bc-menu-item--cur{color:#fff;font-weight:700;background:rgba(58,64,129,.22);}
.location-map iframe{width:100%;height:100%;border:0;display:block;} .sh-bc-menu-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;}
.location-info-card{background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:20px;padding:36px 32px;} .sh-bc-menu-item--cur .sh-bc-menu-dot{background:#6B78B5;}
.location-info-card h3{margin:0 0 24px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:#0d1117;} .sh-bc-now{font-size:12px;font-weight:600;color:rgba(255,255,255,.62);}
.location-info-list{list-style:none;padding:0;margin:0;} .sh-title{font-size:clamp(40px,5.5vw,70px);font-weight:800;line-height:1.06;letter-spacing:-.05em;margin-bottom:22px;}
.location-info-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.06);} .sh-fill{display:block;background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.15) 50%);background-size:202% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transform:translateX(-28px);transition:background-position 2.6s cubic-bezier(.16,1,.3,1),opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);}
.location-info-item:last-child{border-bottom:0;padding-bottom:0;} .sh-fill--on{background-position:0% 0;opacity:1;transform:translateX(0);}
.location-info-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(58,64,129,.07);display:flex;align-items:center;justify-content:center;} .sh-fill:nth-child(2){transition-delay:0s,0.28s,0.28s;}
.location-info-icon svg{width:18px;height:18px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .sh-desc{font-size:clamp(14px,1.3vw,16px);line-height:1.75;color:rgba(255,255,255,.4);max-width:480px;word-break:keep-all;opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease;}
.location-info-label{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(17,17,17,.35);} .sh-desc--on{opacity:1;transform:translateY(0);}
.location-info-value{font-size:14px;font-weight:500;color:#0d1117;line-height:1.6;word-break:keep-all;} .sh-nav{position:sticky;top:var(--header-height);z-index:50;background:rgba(255,255,255,.3);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);border-bottom:1px solid rgba(17,17,17,.06);box-shadow:0 10px 30px rgba(15,23,42,.04);}
.location-info-value a{color:var(--color-primary);text-decoration:none;transition:opacity .2s;} .sh-nav-inner{max-width:1440px;margin:0 auto;padding:0 40px;display:flex;align-items:center;}
.location-info-value a:hover{opacity:.7;} .sh-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:14px;font-weight:700;color:rgba(17,17,17,.45);text-decoration:none;transition:color .3s ease,transform .3s ease;letter-spacing:-.02em;white-space:nowrap;}
.location-transport{margin-top:40px;} .sh-nav-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-primary);border-radius:999px;transform:scaleX(0);transform-origin:center;transition:transform .32s ease;}
.location-transport-title{margin:0 0 20px;font-size:15px;font-weight:700;color:#0d1117;letter-spacing:-.01em;} .sh-nav-tab:hover{color:var(--color-primary);}
.location-transport-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;} .sh-nav-tab--active{color:var(--color-primary);}
.location-transport-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#f5f6fa;border-radius:12px;} .sh-nav-tab--active::after{transform:scaleX(1);}
.location-transport-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--color-primary);color:#fff;} .ab-stats{background:#f2f3fa;padding:100px 80px;}
.location-transport-text{font-size:13px;color:rgba(17,17,17,.65);line-height:1.6;word-break:keep-all;} .ab-stats-inner{max-width:1440px;margin:0 auto;}
.ab-stats-ew{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(58,64,129,.38);display:block;margin-bottom:52px;}
.ab-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(58,64,129,.1);}
.ab-si{padding-top:40px;padding-right:40px;border-right:1px solid rgba(58,64,129,.08);}
.ab-si:last-child{border-right:0;}
.ab-si:not(:first-child){padding-left:40px;}
.ab-si-num{display:block;font-size:clamp(48px,5.5vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1;color:#3A4081;}
.ab-si-lbl{display:block;margin-top:10px;font-size:13px;font-weight:500;color:rgba(17,17,17,.32);}
.ab-si-bar{display:block;height:2px;width:0;margin-top:18px;background:linear-gradient(90deg,#3A4081,#6B78B5,#a0b0e8);border-radius:2px;transition:width 1.2s cubic-bezier(.16,1,.3,1);}
.ab-vid{height:480px;position:relative;overflow:hidden;background:#040912;}
.ab-vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;}
.ab-vid-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,18,.15) 0%,rgba(4,9,18,.65) 100%);}
.ab-vid-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;padding:0 40px;will-change:transform,opacity;}
.ab-vid-kicker{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:20px;}
.ab-vid-title{font-size:clamp(36px,5.5vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.05em;color:#fff;margin-bottom:18px;}
.ab-vid-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.42);word-break:keep-all;}
.ab-phil{background:#050c1f;padding:140px 80px;}
.ab-phil-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;}
.ab-phil-ew{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.18);display:block;margin-bottom:30px;}
.ab-phil-line{display:block;font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1.1;letter-spacing:-.04em;color:rgba(255,255,255,.7);}
.ab-phil-line--pt{background:linear-gradient(90deg,#6B78B5,#94a8e8,#bcceff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ab-phil-img-wrap{position:relative;border-radius:20px;overflow:hidden;}
.ab-phil-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:brightness(.78);}
.ab-phil-badge{position:absolute;bottom:20px;left:20px;padding:12px 18px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:12px;}
.ab-phil-badge span{display:block;font-size:10px;color:rgba(255,255,255,.38);margin-bottom:3px;letter-spacing:.06em;}
.ab-phil-badge strong{display:block;font-size:14px;font-weight:700;color:#fff;}
.ab-phil-body{font-size:15px;line-height:1.95;color:rgba(255,255,255,.33);margin-top:32px;word-break:keep-all;}
.ab-vals{background:#fff;padding:140px 80px;}
.ab-vals-inner{max-width:1440px;margin:0 auto;}
.ab-vals-ew{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(58,64,129,.45);display:block;margin-bottom:12px;}
.ab-vals-title{font-size:clamp(36px,4vw,56px);font-weight:800;letter-spacing:-.04em;color:#0d1117;margin-bottom:80px;}
.ab-vals-list{display:grid;grid-template-columns:1fr;gap:0;}
.ab-val-item{display:grid;grid-template-columns:72px 1fr 360px;gap:48px;align-items:center;padding:52px 0;border-top:1px solid rgba(17,17,17,.06);}
.ab-val-item:last-child{border-bottom:1px solid rgba(17,17,17,.06);}
.ab-val-num{font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(17,17,17,.15);}
.ab-val-name{font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.03em;color:#0d1117;margin:0 0 12px;}
.ab-val-desc{font-size:14px;line-height:1.85;color:rgba(17,17,17,.44);max-width:400px;word-break:keep-all;margin:0;}
.ab-val-img-wrap{border-radius:14px;overflow:hidden;}
.ab-val-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.ab-val-item:hover .ab-val-img{transform:scale(1.05);}
.ab-awds{background:#f2f3fa;padding:140px 80px;}
.ab-awds-inner{max-width:1440px;margin:0 auto;}
.ab-awds-ew{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(58,64,129,.45);display:block;margin-bottom:12px;}
.ab-awds-title{font-size:clamp(36px,4vw,56px);font-weight:800;letter-spacing:-.04em;color:#0d1117;margin-bottom:64px;}
.ab-awds-list{list-style:none;padding:0;margin:0;}
.ab-awd-row{display:grid;grid-template-columns:72px 1px 1fr;gap:36px;align-items:center;padding:34px 0;border-top:1px solid rgba(58,64,129,.09);}
.ab-awd-row:last-child{border-bottom:1px solid rgba(58,64,129,.09);}
.ab-awd-yr{font-size:13px;font-weight:700;color:rgba(58,64,129,.4);letter-spacing:.06em;}
.ab-awd-bar{width:1px;height:40px;background:linear-gradient(180deg,transparent,rgba(58,64,129,.28),transparent);}
.ab-awd-name{display:block;font-size:17px;font-weight:700;color:#0d1117;letter-spacing:-.02em;margin-bottom:5px;}
.ab-awd-org{font-size:13px;color:rgba(17,17,17,.3);}
.ab-cta{padding:160px 80px;text-align:center;background:#050c1f;position:relative;overflow:hidden;}
.ab-cta-bg{position:absolute;inset:-8%;background:linear-gradient(135deg,rgba(5,12,31,.96) 0%,rgba(5,12,31,.82) 35%,rgba(8,18,52,.68) 65%,rgba(5,12,31,.88) 100%),url('/images/hero2.png') center/cover no-repeat;filter:blur(3px);}
.ab-cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(58,64,129,.38),transparent 65%);}
.ab-cta-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.ab-cta-chip{display:inline-block;padding:6px 16px;border-radius:999px;border:1px solid rgba(107,120,181,.28);background:rgba(58,64,129,.14);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46);margin-bottom:28px;}
.ab-cta-title{font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1.1;letter-spacing:-.05em;color:#fff;margin-bottom:20px;}
.ab-cta-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.42);margin-bottom:52px;word-break:keep-all;}
.ab-cta-btns{display:flex;align-items:center;gap:14px;}
.ab-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 40px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s;}
.ab-cta-btn--w{background:#fff;color:#3A4081;}
.ab-cta-btn--w:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(0,0,0,.3);}
.ab-cta-btn--g{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);}
.ab-cta-btn--g:hover{background:rgba(255,255,255,.15);transform:translateY(-3px);}
@media (max-width:1280px){ @media (max-width:1280px){
.sub-hero-inner,.sub-content{padding-left:48px;padding-right:48px;} .sh-inner,.ab-stats,.ab-phil,.ab-vals,.ab-awds,.ab-cta{padding-left:48px;padding-right:48px;}
.sub-nav{padding-left:48px;padding-right:48px;} .sh-nav-inner{padding-left:48px;padding-right:48px;}
.about-values{grid-template-columns:repeat(2,1fr);} .ab-val-item{grid-template-columns:60px 1fr 280px;gap:36px;}
.about-overview{gap:48px;} .ab-phil-inner{gap:64px;}
.partners-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:1024px){
.sh-inner,.ab-stats,.ab-phil,.ab-vals,.ab-awds,.ab-cta{padding-left:32px;padding-right:32px;}
.sh-nav-inner{padding-left:32px;padding-right:32px;}
.ab-stats-grid{grid-template-columns:repeat(2,1fr);}
.ab-si{padding-bottom:40px;border-bottom:1px solid rgba(58,64,129,.08);}
.ab-si:nth-child(2n){border-right:0;}
.ab-si:nth-child(3),.ab-si:nth-child(4){border-bottom:0;}
.ab-phil-inner{grid-template-columns:1fr;gap:56px;}
.ab-val-item{grid-template-columns:52px 1fr;gap:24px;}
.ab-val-img-wrap{display:none;}
.ab-awd-row{gap:20px;}
} }
@media (max-width:1024px){ @media (max-width:1024px){
.sub-hero-inner,.sub-content{padding-left:32px;padding-right:32px;} .sh-nav{top:82px;}
.sub-nav{padding-left:32px;padding-right:32px;} .sh-nav-inner{padding-left:20px;padding-right:20px;}
.about-overview{grid-template-columns:1fr;gap:48px;}
.about-awards{grid-template-columns:1fr;}
.location-wrap{grid-template-columns:1fr;}
.location-map{aspect-ratio:16/9;}
} }
@media (max-width:768px){ @media (max-width:768px){
.sub-hero-inner{padding:calc(var(--header-height) + 36px) 20px 40px;} .sh{height:440px;}
.sub-content{padding:48px 20px 80px;} .sh-inner{padding-left:20px;padding-right:20px;}
.sub-nav{padding:0 20px;} .sh-nav-inner{padding-left:20px;padding-right:20px;}
.about-values{grid-template-columns:1fr;} .sh-nav-tab{padding:0 12px;font-size:13px;}
.about-overview-stats{grid-template-columns:1fr 1fr;} .ab-stats,.ab-phil,.ab-vals,.ab-awds{padding:80px 20px;}
.partners-grid{grid-template-columns:repeat(2,1fr);} .ab-cta{padding:100px 20px;}
.history-year-group{margin-bottom:48px;} .ab-stats-grid{grid-template-columns:1fr 1fr;}
.location-info-card{padding:24px 20px;} .ab-val-item{padding:36px 0;grid-template-columns:40px 1fr;gap:16px;}
.ab-awd-row{grid-template-columns:56px 1px 1fr;padding:24px 0;}
.ab-cta-btns{flex-direction:column;width:100%;}
.ab-cta-btn{width:100%;max-width:320px;}
} }

7
src/css/header.css
Unescape View File

@ -1,8 +1,9 @@
/*header.*/ /*header.*/
.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:box-shadow .35s ease;} .pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:box-shadow .45s cubic-bezier(.22,1,.36,1);}
.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .35s ease;} .pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.3);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),backdrop-filter .45s cubic-bezier(.22,1,.36,1);}
.pal-header.is-scrolled::before,.pal-header.is-open::before,.pal-header.is-mobile-open::before{opacity:1;} .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-header.is-open,.pal-header.is-mobile-open{box-shadow:0 10px 30px rgba(15,23,42,.04);}
.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-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{flex:0 0 auto;margin:0;font-size:0;line-height:1;}

307
src/pages/company/AboutPage.jsx
Unescape View File

@ -1,5 +1,10 @@
import { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SubHero from "../../components/SubHero"; import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
gsap.registerPlugin(ScrollTrigger);
const COMPANY_NAV = [ const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" }, { label: "회사소개", to: "/company/about" },
@ -8,150 +13,234 @@ const COMPANY_NAV = [
{ label: "찾아오시는 길", to: "/company/location" }, { label: "찾아오시는 길", to: "/company/location" },
]; ];
const STATS = [
{ num: 2010, suffix: "", label: "설립연도" },
{ num: 50, suffix: "+", label: "완료 프로젝트" },
{ num: 15, suffix: "+", label: "주요 고객사" },
{ num: 10, suffix: "+", label: "R&D 전문인력" },
];
const VALUES = [ const VALUES = [
{ { num: "01", title: "기술 혁신", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.", img: "/images/img1.jpg" },
title: "기술 혁신", { num: "02", title: "신뢰와 책임", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", img: "/images/img2.jpg" },
desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며, 미래 모빌리티 시대를 선도합니다.", { num: "03", title: "파트너십", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", img: "/images/img3.jpg" },
icon: ( { num: "04", title: "전문성", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", img: "/images/img4.jpg" },
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
),
},
{
title: "신뢰와 책임",
desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼, 모든 서비스에 안전과 신뢰를 최우선으로 합니다.",
icon: (
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
),
},
{
title: "파트너십",
desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.",
icon: (
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
),
},
{
title: "전문성",
desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.",
icon: (
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
),
},
{
title: "지속 성장",
desc: "UAM·UATM 등 차세대 항공 기술을 선행 연구하며, 산업 변화에 능동적으로 대응합니다.",
icon: (
<svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
),
},
{
title: "사회적 가치",
desc: "안전한 하늘길과 신뢰 가능한 IT 인프라를 통해 사회 전반에 기여하는 기업으로 성장합니다.",
icon: (
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
),
},
]; ];
const AWARDS = [ const AWARDS = [
{ title: "인천 항공산업 선도기업 유망기업 선정", desc: "인천시 · 인천테크노파크" }, { year: "2022", title: "인천 항공산업 선도기업 유망기업 선정", org: "인천시 · 인천테크노파크" },
{ title: "소프트웨어 품질인증 GS 인증 획득", desc: "한국정보통신기술협회(TTA)" }, { year: "2021", title: "소프트웨어 품질인증 GS 인증 획득", org: "한국정보통신기술협회(TTA)" },
{ title: "기업부설연구소 인정", desc: "한국산업기술진흥협회" }, { year: "2021", title: "기업부설연구소 인정", org: "한국산업기술진흥협회" },
{ title: "조달청 우수제품 지정", desc: "비행상황관제 시스템" }, { year: "2020", title: "조달청 우수제품 지정", org: "비행상황관제 시스템" },
]; ];
function animateCount(el, target, suffix, duration = 1600) {
const from = target > 100 ? target - 4 : 0;
let start = null;
const step = ts => {
if (!start) start = ts;
const p = Math.min((ts - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3);
el.textContent = Math.floor(from + (target - from) * ease) + suffix;
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}
export default function AboutPage() { export default function AboutPage() {
const ref = useFadeIn(); const videoRef = useRef(null);
const videoSecRef = useRef(null);
const statRefs = useRef([]);
const statDone = useRef(false);
useEffect(() => {
const ctx = gsap.context(() => {
// 영상 패럴랙스
gsap.to(videoRef.current, {
scale: 1.1,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 },
});
gsap.to(".ab-vid-txt", {
y: -80, opacity: 0,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 },
});
// 철학 텍스트 라인
gsap.fromTo(".ab-phil-line",
{ opacity: 0, x: -40 },
{ opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
// 철학 오른쪽
gsap.fromTo(".ab-phil-right",
{ opacity: 0, x: 50 },
{ opacity: 1, x: 0, duration: 1.1, ease: "power3.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } }
);
gsap.fromTo(".ab-phil-body",
{ opacity: 0, y: 24 },
{ opacity: 1, y: 0, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } }
);
// 핵심가치
gsap.fromTo(".ab-val-item",
{ opacity: 0, y: 40 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out",
scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } }
);
// 수상
gsap.fromTo(".ab-awd-row",
{ opacity: 0, y: 22 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out",
scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } }
);
// CTA
gsap.fromTo(".ab-cta-inner > *",
{ opacity: 0, y: 28 },
{ opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out",
scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } }
);
// stats fade
gsap.fromTo(".ab-si",
{ opacity: 0, y: 32 },
{ opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out",
scrollTrigger: {
trigger: ".ab-stats",
start: "top 78%",
onEnter: () => {
if (statDone.current) return;
statDone.current = true;
statRefs.current.forEach((el, i) => {
if (!el) return;
setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 80);
});
}
}
}
);
});
return () => ctx.revert();
}, []);
return ( return (
<article ref={ref}> <article>
<SubHero <SubHero
label="Company" title={"가치를 실천하는\n항공 IT 전문기업"}
title="가치를 실천하는 desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다."
항공 IT 전문기업"
desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길과 신뢰할 수 있는 IT 서비스를 만들어갑니다."
navItems={COMPANY_NAV} navItems={COMPANY_NAV}
bgImage="/images/hero1.png"
/> />
<div className="sub-content"> {/* 수치 */}
<section className="ab-stats">
{/* 회사 개요 */} <div className="ab-stats-inner">
<section className="sub-section"> <span className="ab-stats-ew">PAL Networks in Numbers</span>
<div className="about-overview"> <div className="ab-stats-grid">
<div className="about-overview-text sub-fade-in"> {STATS.map((s, i) => (
<span className="sub-section-eyebrow">About PAL Networks</span> <div className="ab-si" key={s.label}>
<h2 className="sub-section-title">항공산업의 기술혁신을 <strong className="ab-si-num" ref={el => statRefs.current[i] = el}>{s.num}{s.suffix}</strong>
선도하는 파트너</h2> <span className="ab-si-lbl">{s.label}</span>
<p className="sub-section-lead"> <span className="ab-si-bar" />
팔네트웍스(PAL Networks)는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM(무인항공기 교통관리) 솔루션 등 항공 IT 분야의 핵심 기술을 개발·운영해 온 전문 기업입니다.
</p>
<p className="sub-section-lead" style={{ marginTop: "16px" }}>
공공·민간 고객사의 시스템 구축부터 장기 운영·유지보수까지 전 과정을 책임지며, 인천광역시 로봇랜드에 본사를 두고 항공 미래 모빌리티(UAM/UATM) 기술을 선행 연구하고 있습니다.
</p>
</div> </div>
))}
</div>
</div>
</section>
<div className="about-overview-stats sub-fade-in"> {/* 영상 */}
<div className="about-stat"> <section className="ab-vid" ref={videoSecRef}>
<span className="about-stat-num">2010</span> <video ref={videoRef} className="ab-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline />
<span className="about-stat-label">설립연도</span> <div className="ab-vid-overlay" />
<div className="ab-vid-txt">
<span className="ab-vid-kicker">PAL Networks × UAM</span>
<h2 className="ab-vid-title">미래의 하늘을<br />설계합니다</h2>
<p className="ab-vid-desc">도심항공교통(UAM)의 안전한 운항을 위한<br />통합 관제 기술을 연구·개발합니다</p>
</div> </div>
<div className="about-stat"> </section>
<span className="about-stat-num">50<span className="about-stat-unit">+</span></span>
<span className="about-stat-label">완료 프로젝트</span> {/* 철학 */}
<section className="ab-phil">
<div className="ab-phil-inner">
<div className="ab-phil-left">
<span className="ab-phil-ew">Our Philosophy</span>
<span className="ab-phil-line">항공산업의</span>
<span className="ab-phil-line">기술혁신을</span>
<span className="ab-phil-line ab-phil-line--pt">선도합니다.</span>
</div> </div>
<div className="about-stat"> <div className="ab-phil-right">
<span className="about-stat-num">15<span className="about-stat-unit">+</span></span> <div className="ab-phil-img-wrap">
<span className="about-stat-label">주요 고객사</span> <img src="/images/img1.jpg" alt="항공 관제" className="ab-phil-img" />
<div className="ab-phil-badge">
<span>2010년 설립 이후</span>
<strong>항공 IT 한 길</strong>
</div> </div>
<div className="about-stat">
<span className="about-stat-num">10<span className="about-stat-unit">+</span></span>
<span className="about-stat-label">R&D 전문 인력</span>
</div> </div>
<p className="ab-phil-body">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
</div> </div>
</div> </div>
</section> </section>
{/* 핵심 가치 */} {/* 핵심가치 */}
<section className="sub-section"> <section className="ab-vals">
<span className="sub-section-eyebrow sub-fade-in">Core Values</span> <div className="ab-vals-inner">
<h2 className="sub-section-title sub-fade-in">우리가 지키는 6가지 가치</h2> <span className="ab-vals-ew">Core Values</span>
<div className="about-values"> <h2 className="ab-vals-title">우리가 지키는 가치</h2>
{VALUES.map((v, i) => ( <div className="ab-vals-list">
<div {VALUES.map(v => (
key={v.title} <div className="ab-val-item" key={v.num}>
className="about-value-card sub-fade-in" <span className="ab-val-num">{v.num}</span>
style={{ transitionDelay: `${i * 60}ms` }} <div className="ab-val-body">
> <h3 className="ab-val-name">{v.title}</h3>
<div className="about-value-icon">{v.icon}</div> <p className="ab-val-desc">{v.desc}</p>
<h3>{v.title}</h3> </div>
<p>{v.desc}</p> <div className="ab-val-img-wrap">
<img src={v.img} alt={v.title} className="ab-val-img" />
</div>
</div> </div>
))} ))}
</div> </div>
</div>
</section> </section>
{/* 인증 및 수상 */} {/* 수상 */}
<section className="sub-section"> <section className="ab-awds">
<span className="sub-section-eyebrow sub-fade-in">Certifications & Awards</span> <div className="ab-awds-inner">
<h2 className="sub-section-title sub-fade-in">인증 및 수상 이력</h2> <span className="ab-awds-ew">Certifications & Awards</span>
<div className="about-awards"> <h2 className="ab-awds-title">인증 및 수상</h2>
<ul className="ab-awds-list">
{AWARDS.map((a, i) => ( {AWARDS.map((a, i) => (
<div <li className="ab-awd-row" key={i}>
key={a.title} <span className="ab-awd-yr">{a.year}</span>
className="about-award-item sub-fade-in" <div className="ab-awd-bar" />
style={{ transitionDelay: `${i * 80}ms` }}
>
<div className="about-award-dot" />
<div> <div>
<h4>{a.title}</h4> <strong className="ab-awd-name">{a.title}</strong>
<p>{a.desc}</p> <span className="ab-awd-org">{a.org}</span>
</div>
</div> </div>
</li>
))} ))}
</ul>
</div> </div>
</section> </section>
{/* CTA */}
<section className="ab-cta">
<div className="ab-cta-bg" />
<div className="ab-cta-glow" />
<div className="ab-cta-inner">
<span className="ab-cta-chip">Contact Us</span>
<h2 className="ab-cta-title">팔네트웍스와<br />함께하세요</h2>
<p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
<div className="ab-cta-btns">
<Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w">문의하기</Link>
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g">채용 안내</Link>
</div> </div>
</div>
</section>
</article> </article>
); );
} }

Write Preview
Loading…
Cancel
Save