{navItems.map((item) => (
-
+
{item.label}
))}
diff --git a/src/css/common.css b/src/css/common.css
index 4eb08ce..de8221c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -35,8 +35,8 @@ body{overflow-x:hidden;}
.sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:var(--navy);}
.sh4-title em{font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
-.sh4-title-line{display:block;}
-.sh4-char{display:inline-block;}
+.sh4-title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
+.sh4-title-line-inner{display:block;}
.sh4-desc{font-size:clamp(14px,1.2vw,17px);line-height:1.8;color:rgba(26,31,94,.42);word-break:keep-all;margin:0;opacity:0;transform:translateY(12px);animation:sh4Up .6s .5s cubic-bezier(.16,1,.3,1) forwards;}
/*sh4 split*/
@@ -75,20 +75,6 @@ body{overflow-x:hidden;}
.sh4-nav-tab{padding:0 14px;font-size:13px;}
}
-/*ab3 stats*/
-.ab3-stats{position:relative;padding:120px 80px;background:#fff;overflow:hidden;border-bottom:1px solid rgba(26,31,94,.06);}
-.ab3-stats-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
-.ab3-label{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:64px;}
-.ab3-label--light{color:rgba(255,255,255,.3);}
-.ab3-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(26,31,94,.08);}
-.ab3-si{position:relative;padding:52px 40px 40px 0;border-right:1px solid rgba(26,31,94,.06);overflow:hidden;}
-.ab3-si:last-child{border-right:0;}
-.ab3-si:not(:first-child){padding-left:40px;}
-.ab3-si-bg{position:absolute;top:-20px;left:-10px;font-size:clamp(100px,12vw,160px);font-weight:900;letter-spacing:-.08em;color:rgba(26,31,94,.03);line-height:1;pointer-events:none;white-space:nowrap;z-index:0;}
-.ab3-si-note{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;position:relative;z-index:1;}
-.ab3-si-num{display:block;font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--navy);position:relative;z-index:1;}
-.ab3-si-lbl{display:block;margin-top:10px;font-size:14px;font-weight:500;color:rgba(26,31,94,.38);position:relative;z-index:1;}
-
@media (max-width:1280px){.ab3-stats{padding-left:48px;padding-right:48px;}}
@media (max-width:1024px){
.ab3-stats{padding-left:32px;padding-right:32px;}
@@ -108,99 +94,3 @@ body{overflow-x:hidden;}
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);}
-/*② 소개*/
-.ab-intro{background:linear-gradient(135deg,#f8f7ff 0%,#fdf4fb 50%,#f5f7ff 100%);padding:120px 80px;}
-.ab-intro-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;}
-.ab-intro-title{font-size:clamp(40px,5vw,72px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:#111;margin:0;}
-.ab-intro-title em{font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
-.ab-intro-badge{display:inline-flex;flex-direction:column;gap:4px;padding:14px 20px;border-radius:12px;border:1px solid rgba(217,72,137,.15);background:rgba(217,72,137,.05);margin-bottom:28px;}
-.ab-intro-badge span{font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(26,31,94,.4);}
-.ab-intro-badge strong{font-size:15px;font-weight:800;color:var(--navy);}
-.ab-intro-text p{font-size:16px;line-height:1.9;color:rgba(26,31,94,.5);word-break:keep-all;margin:0 0 16px;}
-.ab-intro-text p:last-child{margin:0;}
-
-/*③ stats*/
-.ab-stats{background:linear-gradient(135deg,#0e1240 0%,#1a1f5e 50%,#141852 100%);padding:120px 80px;position:relative;overflow:hidden;}
-.ab-stats::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 20%,rgba(123,63,160,.2) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(217,72,137,.12) 0%,transparent 55%);pointer-events:none;}
-.ab-stats-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;}
-.ab-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);}
-.ab-si{position:relative;padding:52px 40px 40px 0;border-right:1px solid rgba(255,255,255,.06);overflow:hidden;}
-.ab-si:last-child{border-right:0;}
-.ab-si:not(:first-child){padding-left:40px;}
-.ab-si-bg{position:absolute;top:-10px;left:-5px;font-size:clamp(90px,10vw,140px);font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.04);line-height:1;pointer-events:none;white-space:nowrap;z-index:0;}
-.ab-si-note{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;position:relative;z-index:1;}
-.ab-si-num{display:block;font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:1;color:#fff;position:relative;z-index:1;}
-.ab-si-lbl{display:block;margin-top:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.35);position:relative;z-index:1;}
-
-/*④ 가치*/
-.ab-vals{background:#fff;padding:140px 80px;}
-.ab-vals-inner{max-width:1440px;margin:0 auto;}
-.ab-vals-head{margin-bottom:72px;}
-.ab-vals-title{font-size:clamp(36px,4vw,56px);font-weight:900;letter-spacing:-.055em;color:var(--navy);margin:0;}
-.ab-vals-list{display:flex;flex-direction:column;}
-.ab-val-row{display:grid;grid-template-columns:120px 1fr 1fr 32px;gap:32px;align-items:center;padding:40px 0;border-top:1px solid rgba(26,31,94,.07);transition:padding-left .3s ease;}
-.ab-val-row:last-child{border-bottom:1px solid rgba(26,31,94,.07);}
-.ab-val-row:hover{padding-left:12px;}
-.ab-val-row:hover .ab-val-arr{color:var(--pink);transform:translateX(6px);}
-.ab-val-left{display:flex;flex-direction:column;gap:4px;}
-.ab-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(26,31,94,.18);}
-.ab-val-en{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);}
-.ab-val-name{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.04em;color:var(--navy);margin:0;}
-.ab-val-desc{font-size:14px;line-height:1.85;color:rgba(26,31,94,.45);word-break:keep-all;margin:0;}
-.ab-val-arr{font-size:16px;color:rgba(26,31,94,.15);transition:color .3s,transform .3s;}
-
-/*⑤ 수상*/
-.ab-awds{background:linear-gradient(135deg,#fff5f9 0%,#fdf4fb 50%,#f8f5ff 100%);padding:140px 80px;}
-.ab-awds-inner{max-width:1440px;margin:0 auto;}
-.ab-awds-head{margin-bottom:64px;}
-.ab-awds-title{font-size:clamp(36px,4vw,56px);font-weight:900;letter-spacing:-.055em;color:var(--navy);margin:0;}
-.ab-awds-list{list-style:none;padding:0;margin:0;}
-.ab-awd-item{display:grid;grid-template-columns:80px 2px 1fr;gap:32px;align-items:center;padding:36px 0;border-top:1px solid rgba(26,31,94,.08);transition:padding-left .3s ease;}
-.ab-awd-item:last-child{border-bottom:1px solid rgba(26,31,94,.08);}
-.ab-awd-item:hover{padding-left:12px;}
-.ab-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(26,31,94,.3);}
-.ab-awd-line{width:2px;height:44px;background:linear-gradient(180deg,var(--purple),var(--pink));border-radius:999px;}
-.ab-awd-body{display:flex;flex-direction:column;gap:5px;}
-.ab-awd-name{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.02em;}
-.ab-awd-org{font-size:13px;color:rgba(26,31,94,.38);}
-
-/*⑥ CTA*/
-.ab-cta{background:linear-gradient(135deg,#0e1240 0%,#1a1f5e 50%,#141852 100%);padding:160px 80px;text-align:center;position:relative;overflow:hidden;}
-.ab-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 50%,rgba(217,72,137,.18) 0%,transparent 60%),radial-gradient(ellipse 40% 35% at 80% 20%,rgba(123,63,160,.14) 0%,transparent 55%);pointer-events:none;}
-.ab-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
-.ab-cta-chip{display:inline-block;padding:6px 18px;border-radius:999px;border:1px solid rgba(217,72,137,.35);background:rgba(217,72,137,.12);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:28px;}
-.ab-cta-title{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:20px;}
-.ab-cta-desc{font-size:16px;line-height:1.8;color:rgba(255,255,255,.38);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:8px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .25s,box-shadow .25s;}
-.ab-cta-btn--fill{background:var(--grad-brand-h);color:#fff;}
-.ab-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(217,72,137,.3);}
-.ab-cta-btn--line{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);}
-.ab-cta-btn--line:hover{border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-3px);}
-
-@media (max-width:1280px){
- .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:48px;padding-right:48px;}
-}
-@media (max-width:1024px){
- .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:32px;padding-right:32px;}
- .ab-intro-inner{grid-template-columns:1fr;gap:56px;}
- .ab-stats-grid{grid-template-columns:repeat(2,1fr);}
- .ab-si{padding-bottom:40px;}
- .ab-si:nth-child(2){border-right:0;}
- .ab-si:nth-child(3){border-top:1px solid rgba(255,255,255,.06);padding-left:0;}
- .ab-si:nth-child(4){border-top:1px solid rgba(255,255,255,.06);border-right:0;}
- .ab-val-row{grid-template-columns:100px 1fr;grid-template-rows:auto auto;gap:16px 24px;}
- .ab-val-desc{grid-column:1/-1;}
- .ab-val-arr{display:none;}
-}
-@media (max-width:768px){
- .ab-intro,.ab-vals,.ab-awds{padding-top:80px;padding-bottom:80px;}
- .ab-stats{padding-top:80px;padding-bottom:80px;}
- .ab-cta{padding-top:100px;padding-bottom:100px;}
- .ab-intro,.ab-stats,.ab-vals,.ab-awds,.ab-cta{padding-left:20px;padding-right:20px;}
- .ab-si{padding-right:20px;}
- .ab-si:not(:first-child){padding-left:20px;}
- .ab-awd-item{grid-template-columns:64px 2px 1fr;gap:20px;padding:28px 0;}
- .ab-cta-btns{flex-direction:column;width:100%;}
- .ab-cta-btn{width:100%;max-width:320px;}
-}
\ No newline at end of file
diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx
index 9512cfe..f87c349 100644
--- a/src/pages/company/AboutPage.jsx
+++ b/src/pages/company/AboutPage.jsx
@@ -16,162 +16,7 @@ const COMPANY_NAV = [
{ label: "찾아오시는 길", to: "/company/location" },
];
-const STATS = [
- { num: 2010, suffix: "", label: "설립연도", note: "FOUNDED" },
- { num: 50, suffix: "+", label: "완료 프로젝트", note: "PROJECTS" },
- { num: 15, suffix: "+", label: "주요 고객사", note: "CLIENTS" },
- { num: 10, suffix: "+", label: "R&D 전문인력", note: "EXPERTS" },
-];
-
-const VALUES = [
- {
- idx: "01",
- title: "기술 혁신",
- en: "Innovation",
- desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.",
- },
- {
- idx: "02",
- title: "신뢰와 책임",
- en: "Trust",
- desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.",
- },
- {
- idx: "03",
- title: "파트너십",
- en: "Partnership",
- desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.",
- },
- {
- idx: "04",
- title: "전문성",
- en: "Expertise",
- desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.",
- },
-];
-
-const AWARDS = [
- {
- year: "2022",
- title: "인천 항공산업 선도기업 유망기업 선정",
- org: "인천시 · 인천테크노파크",
- },
- {
- year: "2021",
- title: "소프트웨어 품질인증 GS 인증 획득",
- org: "한국정보통신기술협회(TTA)",
- },
- { year: "2021", title: "기업부설연구소 인정", org: "한국산업기술진흥협회" },
- { 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, 4);
- el.textContent = Math.floor(from + (target - from) * ease) + suffix;
- if (p < 1) requestAnimationFrame(step);
- };
- requestAnimationFrame(step);
-}
-
export default function AboutPage() {
- const statRefs = useRef([]);
-
- useEffect(() => {
- const ctx = gsap.context(() => {
- /* stats 카운터 */
- ScrollTrigger.create({
- trigger: ".ab-stats",
- start: "top 75%",
- toggleActions: "play none none reset",
- onEnter: () => {
- statRefs.current.forEach((el, i) => {
- if (!el) return;
- setTimeout(
- () => animateCount(el, STATS[i].num, STATS[i].suffix),
- i * 100,
- );
- });
- },
- });
-
- /* stats 스태거 */
- gsap.fromTo(
- ".ab-si",
- { opacity: 0, y: 40 },
- {
- opacity: 1,
- y: 0,
- stagger: 0.12,
- duration: 0.8,
- ease: "power3.out",
- scrollTrigger: { trigger: ".ab-stats", start: "top 78%" },
- },
- );
-
- /* 소개 */
- gsap.fromTo(
- ".ab-intro-text > *",
- { opacity: 0, y: 32 },
- {
- opacity: 1,
- y: 0,
- stagger: 0.1,
- duration: 0.9,
- ease: "power3.out",
- scrollTrigger: { trigger: ".ab-intro", start: "top 70%" },
- },
- );
-
- /* 가치 */
- gsap.fromTo(
- ".ab-val-row",
- { opacity: 0, x: -32 },
- {
- opacity: 1,
- x: 0,
- stagger: 0.1,
- duration: 0.8,
- ease: "power3.out",
- scrollTrigger: { trigger: ".ab-vals", start: "top 72%" },
- },
- );
-
- /* 수상 */
- gsap.fromTo(
- ".ab-awd-item",
- { opacity: 0, y: 24 },
- {
- opacity: 1,
- y: 0,
- stagger: 0.09,
- duration: 0.7,
- ease: "power2.out",
- scrollTrigger: { trigger: ".ab-awds", start: "top 75%" },
- },
- );
-
- /* CTA */
- gsap.fromTo(
- ".ab-cta-inner > *",
- { opacity: 0, y: 32 },
- {
- opacity: 1,
- y: 0,
- stagger: 0.12,
- duration: 0.9,
- ease: "power2.out",
- scrollTrigger: { trigger: ".ab-cta", start: "top 75%" },
- },
- );
- });
- return () => ctx.revert();
- }, []);
-
return (
{/* ① 히어로 */}
@@ -187,133 +32,6 @@ export default function AboutPage() {
navItems={COMPANY_NAV}
rightSlot={heroRight}
/>
-
- {/* ② 소개 — 흰 배경, 히어로와 자연스럽게 연결 */}
-
-
-
- Our Philosophy
-
- 항공산업의
-
- 기술혁신을
-
- 선도합니다.
-
-
-
-
- 2010년 설립 이후
- 항공 IT 한 길
-
-
- 팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제
- 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히
- 개발해왔습니다.
-
-
- 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하며 안전한
- 하늘길을 만들어가고 있습니다.
-
-
-
-
-
- {/* ③ Stats — 연한 네이비 배경 */}
-
-
-
- PAL Networks in Numbers
-
-
- {STATS.map((s, i) => (
-
-
- {s.num}
- {s.suffix}
-
- {s.note}
- (statRefs.current[i] = el)}
- >
- {s.num}
- {s.suffix}
-
- {s.label}
-
- ))}
-
-
-
-
- {/* ④ 핵심가치 — 흰 배경 */}
-
-
-
- Core Values
-
우리가 지키는 가치
-
-
- {VALUES.map((v) => (
-
-
- {v.idx}
- {v.en}
-
-
{v.title}
-
{v.desc}
-
→
-
- ))}
-
-
-
-
- {/* ⑤ 수상/인증 — 연한 배경 */}
-
-
-
- Certifications & Awards
-
인증 및 수상
-
-
- {AWARDS.map((a, i) => (
- -
- {a.year}
-
-
- {a.title}
- {a.org}
-
-
- ))}
-
-
-
-
- {/* ⑥ CTA — 네이비 배경 */}
-
-
-
Contact Us
-
- 팔네트웍스와
-
- 함께하세요
-
-
- 파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.
-
-
-
- 문의하기
-
-
- 채용 안내
-
-
-
-
);
}