You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
18 KiB
506 lines
18 KiB
import { gsap } from "gsap"; |
|
import { ScrollTrigger } from "gsap/ScrollTrigger"; |
|
import SubHero from "../../components/SubHero"; |
|
import FloatingKeywords from "../../components/FloatingKeywords"; |
|
import { useEffect, useRef } from "react"; |
|
import { motion } from "framer-motion"; |
|
import { Link } from "react-router-dom"; |
|
import { useLanguage } from "../../context/LanguageContext"; |
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
const heroRight = <FloatingKeywords />; |
|
|
|
const COMPANY_NAV_KO = [ |
|
{ label: "회사소개", to: "/company/about" }, |
|
{ label: "인증 및 특허현황", to: "/company/cert" }, |
|
{ label: "연혁", to: "/company/history" }, |
|
{ label: "고객 및 협력사", to: "/company/partners" }, |
|
{ label: "찾아오시는 길", to: "/company/location" }, |
|
]; |
|
|
|
const COMPANY_NAV_EN = [ |
|
{ label: "About Us", to: "/company/about" }, |
|
{ label: "Certifications & Patents", to: "/company/cert" }, |
|
{ label: "History", to: "/company/history" }, |
|
{ label: "Clients & Partners", to: "/company/partners" }, |
|
{ label: "Location", to: "/company/location" }, |
|
]; |
|
|
|
const STATS = [ |
|
{ num: 160000, suffix: "대+", label: "국내 등록 드론 현황" }, |
|
{ num: 1500, suffix: "억$+", label: "UAM 시장 규모 (2040)" }, |
|
{ num: 300, suffix: "%+", label: "UAS·UAV 수요 증가율" }, |
|
]; |
|
|
|
const TECH_CARDS = [ |
|
{ |
|
icon: "ti-layers-intersect", |
|
title: "장애물 제한 표면 검토", |
|
desc: "비행 경로 상의 장애물 제한 표면을 정밀하게 분석하고 검토합니다.", |
|
}, |
|
{ |
|
icon: "ti-mountain", |
|
title: "지형 및 장애물 정보", |
|
desc: "실시간 지형 데이터와 장애물 정보를 통합하여 안전한 비행을 지원합니다.", |
|
}, |
|
{ |
|
icon: "ti-arrows-up", |
|
title: "비행가능 고도 표출", |
|
desc: "공역별 비행 가능한 고도 정보를 직관적으로 시각화합니다.", |
|
}, |
|
{ |
|
icon: "ti-map-pin", |
|
title: "NOTAM 및 지오펜스", |
|
desc: "항공 고시보와 지오펜스 정보를 실시간으로 반영하여 안전 공역을 관리합니다.", |
|
}, |
|
]; |
|
|
|
const MISSION_ITEMS_KO = [ |
|
{ |
|
num: "01", |
|
keyword: "INNOVATION", |
|
title: "혁신", |
|
desc: "효율적이고 혁신적인 기술로 항공산업 발전에 기여합니다.", |
|
}, |
|
{ |
|
num: "02", |
|
keyword: "TRUST", |
|
title: "신뢰", |
|
desc: "안전하고 신뢰할 수 있는 시스템을 구축합니다.", |
|
}, |
|
{ |
|
num: "03", |
|
keyword: "COOPERATION", |
|
title: "협력", |
|
desc: "파트너와 함께 성장하는 협력 생태계를 만들어갑니다", |
|
}, |
|
]; |
|
|
|
const MISSION_ITEMS_EN = [ |
|
{ |
|
num: "01", |
|
keyword: "INNOVATION", |
|
title: "Innovation", |
|
desc: "We contribute to the advancement of the aviation industry through efficient, innovative technology.", |
|
}, |
|
{ |
|
num: "02", |
|
keyword: "TRUST", |
|
title: "Trust", |
|
desc: "We build safe and reliable systems.", |
|
}, |
|
{ |
|
num: "03", |
|
keyword: "COOPERATION", |
|
title: "Cooperation", |
|
desc: "We build a collaborative ecosystem that grows together with our partners.", |
|
}, |
|
]; |
|
|
|
const PAGE_TEXT = { |
|
ko: { |
|
heroSub: "가치를 존중하며 신뢰를 바탕으로, 고객과 함께 지속 가능한 미래를 만들어갑니다.", |
|
companyLabel: "About PAL Networks", |
|
companyHeadingBlue: "항공·전문 IT산업분야의", |
|
companyHeadingPlain: "소프트웨어 개발 전문 기업", |
|
companyBody1: "항공·전문 IT산업분야의 소프트웨어 개발 전문 기업으로써 개발, 연구 & 컨설팅 등 기술력 기반으로 전문인력 중심으로 수행하고 있습니다.", |
|
companyBody2: "PAL은 모두 가깝게 오래 사귄 사람을 뜻하는 '친구'라는 의미와 좋은 친구 Good friend, 짝꿍 Mate란 의미입니다.", |
|
companyBody3: "PAL네트웍스는 사람에 따뜻한 가치를 존중하며, 신뢰를 바탕으로 실천하는 기업입니다.", |
|
companyImgAlt: "PAL Networks 소개", |
|
meaningLabel: "Brand Identity", |
|
meaningTitle: "PALNETWORKS의 의미", |
|
meaningCard1Title: "PAL — 친구 · Good friend · Mate", |
|
meaningCard1Desc: "오래 사귄 친구처럼 고객과 함께 성장하는 파트너십을 추구합니다", |
|
meaningCard2Title: "신뢰 · Trust", |
|
meaningCard2Desc: "신뢰를 바탕으로 사람에게 따뜻한 가치를 존중하며 실천하는 기업입니다", |
|
missionLabel: "Mission", |
|
missionTitle: ( |
|
<> |
|
항공산업의 기술혁신 선도를 통한 |
|
<br /> |
|
파트너 고객만족 지원 |
|
</> |
|
), |
|
missionDesc: "미션은 효율적이고 혁신적인 기술로 항공산업에 이바지 하는 시스템과 관련기술을 구축 개발하여 대한민국의 현재와 미래 발전에 기여하는 것입니다.", |
|
ctaTitle: ( |
|
<> |
|
PAL Networks와 |
|
<br /> |
|
함께 시작해보세요 |
|
</> |
|
), |
|
ctaDesc: ( |
|
<> |
|
항공 IT 솔루션에 대한 문의, 협력 제안 무엇이든 환영합니다. |
|
<br /> |
|
전문 인력이 빠르게 답변드리겠습니다. |
|
</> |
|
), |
|
ctaLocation: "찾아오시는 길", |
|
ctaInquiry: "문의하기", |
|
}, |
|
en: { |
|
heroSub: "Respecting values and building on trust, we create a sustainable future together with our customers.", |
|
companyLabel: "About PAL Networks", |
|
companyHeadingBlue: "In the Aviation & IT Industry,", |
|
companyHeadingPlain: "A Software Development Specialist", |
|
companyBody1: "As a software development specialist in the aviation and specialized IT industry, we carry out development, research, and consulting driven by technical expertise and skilled professionals.", |
|
companyBody2: "PAL means \u2018friend\u2019 \u2014 someone close who has stayed by your side for a long time \u2014 as well as Good Friend and Mate.", |
|
companyBody3: "PAL Networks is a company that respects the warm value of people and acts on a foundation of trust.", |
|
companyImgAlt: "About PAL Networks", |
|
meaningLabel: "Brand Identity", |
|
meaningTitle: "The Meaning of PALNETWORKS", |
|
meaningCard1Title: "PAL — Friend · Good Friend · Mate", |
|
meaningCard1Desc: "We pursue a partnership that grows together with our customers, like a long-time friend.", |
|
meaningCard2Title: "Trust", |
|
meaningCard2Desc: "We are a company built on trust, respecting and practicing warm values toward people.", |
|
missionLabel: "Mission", |
|
missionTitle: ( |
|
<> |
|
Leading Technology Innovation |
|
<br /> |
|
for Partner Satisfaction |
|
</> |
|
), |
|
missionDesc: "Our mission is to build and develop systems and related technologies that contribute to the aviation industry through efficient, innovative technology, helping advance Korea's present and future.", |
|
ctaTitle: ( |
|
<> |
|
Get Started |
|
<br /> |
|
with PAL Networks |
|
</> |
|
), |
|
ctaDesc: ( |
|
<> |
|
Inquiries about aviation IT solutions or partnership proposals are always welcome. |
|
<br /> |
|
Our specialists will respond quickly. |
|
</> |
|
), |
|
ctaLocation: "Location", |
|
ctaInquiry: "Inquiry", |
|
}, |
|
}; |
|
|
|
export default function AboutPage() { |
|
const { lang, withLang } = useLanguage(); |
|
const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO; |
|
const MISSION_ITEMS = lang === "en" ? MISSION_ITEMS_EN : MISSION_ITEMS_KO; |
|
const t = PAGE_TEXT[lang]; |
|
|
|
const basePath = import.meta.env.BASE_URL; |
|
|
|
const ref = useRef(null); |
|
const meaningCardsRef = useRef([]); |
|
const missionItemsRef = useRef([]); |
|
const certCardsRef = useRef([]); |
|
const imgMainRef = useRef(null); |
|
const imgSideRef = useRef(null); |
|
const companyTextRef = useRef(null); |
|
|
|
useEffect(() => { |
|
const ctx = gsap.context(() => { |
|
// 메인 이미지: 원 → 사각형 |
|
gsap.fromTo( |
|
imgMainRef.current, |
|
{ borderRadius: "50%", scale: 0.65, opacity: 0 }, |
|
{ |
|
scrollTrigger: { |
|
trigger: imgMainRef.current, |
|
start: "top 80%", |
|
toggleActions: "play none none none", |
|
}, |
|
borderRadius: "20px", |
|
scale: 1, |
|
opacity: 1, |
|
duration: 1.2, |
|
ease: "power2.out", |
|
}, |
|
); |
|
|
|
// 사이드 이미지: 원 → 사각형 |
|
gsap.fromTo( |
|
imgSideRef.current, |
|
{ borderRadius: "50%", scale: 0.5, opacity: 0 }, |
|
{ |
|
scrollTrigger: { |
|
trigger: imgSideRef.current, |
|
start: "top 85%", |
|
toggleActions: "play none none none", |
|
}, |
|
borderRadius: "20px", |
|
scale: 1, |
|
opacity: 1, |
|
duration: 1.5, |
|
ease: "power2.out", |
|
}, |
|
); |
|
|
|
// 텍스트 페이드인 |
|
gsap.from(companyTextRef.current, { |
|
scrollTrigger: { |
|
trigger: companyTextRef.current, |
|
start: "top 80%", |
|
toggleActions: "play none none none", |
|
}, |
|
x: -40, |
|
opacity: 0, |
|
duration: 0.9, |
|
ease: "power3.out", |
|
}); |
|
|
|
// 의미 카드: 왼쪽/오른쪽에서 슬라이드인 |
|
meaningCardsRef.current.forEach((card, i) => { |
|
gsap.from(card, { |
|
scrollTrigger: { |
|
trigger: card, |
|
start: "top 85%", |
|
toggleActions: "play none none none", |
|
}, |
|
x: i === 0 ? -50 : 50, |
|
opacity: 0, |
|
duration: 0.8, |
|
ease: "power3.out", |
|
}); |
|
}); |
|
|
|
// 미션 아이템: stagger 페이드인 |
|
gsap.from(missionItemsRef.current, { |
|
scrollTrigger: { |
|
trigger: missionItemsRef.current[0], |
|
start: "top 85%", |
|
toggleActions: "play none none none", |
|
}, |
|
y: 30, |
|
opacity: 0, |
|
duration: 0.7, |
|
stagger: 0.15, |
|
ease: "power3.out", |
|
}); |
|
|
|
// 특허 텍스트 박스 |
|
gsap.from(".about-cert-patents", { |
|
scrollTrigger: { |
|
trigger: ".about-cert-patents", |
|
start: "top 85%", |
|
toggleActions: "play none none none", |
|
}, |
|
y: 24, |
|
opacity: 0, |
|
duration: 0.7, |
|
ease: "power3.out", |
|
}); |
|
|
|
// 인증 카드: 아래서 위로 stagger |
|
gsap.from(certCardsRef.current, { |
|
scrollTrigger: { |
|
trigger: ".about-cert-section", |
|
start: "top 60%", |
|
toggleActions: "play none none none", |
|
}, |
|
y: 30, |
|
opacity: 0, |
|
duration: 0.8, |
|
stagger: { |
|
amount: 0.6, |
|
ease: "power1.out", |
|
}, |
|
ease: "power2.out", |
|
clearProps: "all", |
|
}); |
|
|
|
gsap.from(".about-cta-inner", { |
|
scrollTrigger: { |
|
trigger: ".about-cta-section", |
|
start: "top 80%", |
|
toggleActions: "play none none none", |
|
}, |
|
y: 40, |
|
opacity: 0, |
|
duration: 0.9, |
|
ease: "power3.out", |
|
}); |
|
}, ref); |
|
|
|
return () => ctx.revert(); |
|
}, []); |
|
|
|
return ( |
|
<article ref={ref}> |
|
<SubHero |
|
label="Company" |
|
title={ |
|
<> |
|
<em>About Us</em> |
|
</> |
|
} |
|
navItems={COMPANY_NAV} |
|
rightSlot={heroRight} |
|
/> |
|
|
|
<div className="sub-content"> |
|
<div className="inner-wrap"> |
|
<motion.div className="ht-header" initial={{ opacity: 0, y: 32 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}> |
|
<p className="ht-header-title"> |
|
Values First, |
|
<br /> |
|
<em> |
|
<span>Trust</span> <b>in Every Stepe</b> |
|
</em> |
|
</p> |
|
<em className="ht-header-sub">{t.heroSub}</em> |
|
</motion.div> |
|
|
|
{/* 회사 소개 */} |
|
<section className="about-company-section"> |
|
<div className="about-company-inner"> |
|
<div className="about-company-text" ref={companyTextRef}> |
|
<p className="about-section-label">{t.companyLabel}</p> |
|
<h3 className="about-company-heading"> |
|
<span className="blue">{t.companyHeadingBlue}</span> |
|
<br /> |
|
{t.companyHeadingPlain} |
|
</h3> |
|
<p className="about-company-body">{t.companyBody1}</p> |
|
<p className="about-company-body">{t.companyBody2}</p> |
|
<p className="about-company-body">{t.companyBody3}</p> |
|
</div> |
|
|
|
<div className="about-img-group"> |
|
<div className="about-img-main-wrap" ref={imgMainRef}> |
|
<img src={`${basePath}images/aboutImg1.png`} alt={t.companyImgAlt} />{" "} |
|
</div> |
|
<div className="about-img-side-wrap" ref={imgSideRef}> |
|
<img src={`${basePath}images/aboutImg1.png`} alt={t.companyImgAlt} /> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
{/* PALNETWORKS 의미 */} |
|
<section className="about-meaning-section"> |
|
<p className="about-section-label">{t.meaningLabel}</p> |
|
<h3 className="about-meaning-title">{t.meaningTitle}</h3> |
|
<div className="about-meaning-cards"> |
|
<div className="about-meaning-card" ref={(el) => (meaningCardsRef.current[0] = el)}> |
|
<div className="about-meaning-card-keyword">FRIENDSHIP</div> |
|
<h4 className="about-meaning-card-title">{t.meaningCard1Title}</h4> |
|
<p className="about-meaning-card-desc">{t.meaningCard1Desc}</p> |
|
</div> |
|
<div className="about-meaning-card" ref={(el) => (meaningCardsRef.current[1] = el)}> |
|
<div className="about-meaning-card-keyword">RELIABILITY</div> |
|
<h4 className="about-meaning-card-title">{t.meaningCard2Title}</h4> |
|
<p className="about-meaning-card-desc">{t.meaningCard2Desc}</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
{/* 미션 */} |
|
<section className="about-mission-section"> |
|
<div className="about-mission-inner"> |
|
<div className="about-mission-left"> |
|
<p className="about-section-label">{t.missionLabel}</p> |
|
<h3 className="about-mission-title">{t.missionTitle}</h3> |
|
<p className="about-mission-desc">{t.missionDesc}</p> |
|
</div> |
|
|
|
<div className="about-mission-right"> |
|
{MISSION_ITEMS.map((item, i) => ( |
|
<div key={i} className="about-mission-item" ref={(el) => (missionItemsRef.current[i] = el)}> |
|
<span className="about-mission-item-num">{item.num}</span> |
|
<div className="about-mission-item-body"> |
|
<div className="about-mission-item-top"> |
|
<h4 className="about-mission-item-title">{item.title}</h4> |
|
<span className="about-mission-item-keyword">{item.keyword}</span> |
|
</div> |
|
<p className="about-mission-item-desc">{item.desc}</p> |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
</div> |
|
</section> |
|
|
|
{/* 인증 및 특허 */} |
|
{/* <section className="about-cert-section"> |
|
<p className="about-section-label">Certification</p> |
|
<h3 className="about-cert-title">인증 및 특허 현황</h3> |
|
|
|
<div className="about-cert-patents"> |
|
<p className="about-cert-patents-desc"> |
|
벤처기업등록 · 기업부설연구소 · 소프트웨어등록증 · |
|
직접생산증명원 ADS-978(KC 인증) · |
|
비행정보통합관리시스템(특허출원) · 항공기의 지상 이동 소요시간 |
|
예측 시스템 및 방법(특허출원) |
|
</p> |
|
</div> |
|
|
|
<div className="about-cert-cards"> |
|
{[ |
|
{ |
|
year: "2018. 04", |
|
title: "관광 사업 등록증", |
|
desc: "관광 사업 등록", |
|
}, |
|
{ |
|
year: "2018. 07", |
|
title: "벤처기업 확인서", |
|
desc: "벤처기업 인증", |
|
}, |
|
{ |
|
year: "2018. 12", |
|
title: "인천시 항공 유망 기업 인증", |
|
desc: "인천시 항공 유망기업으로 선정", |
|
}, |
|
{ |
|
year: "2020. 06", |
|
title: "인천 관광벤처 인증", |
|
desc: "인천 관광벤처 인증", |
|
}, |
|
|
|
{ |
|
year: "2021. 03", |
|
title: "KT 클라우드 총판", |
|
desc: "KT 클라우드 인천 총판 등록", |
|
}, |
|
].map((item, i) => ( |
|
<div |
|
key={i} |
|
className="about-cert-card" |
|
ref={(el) => (certCardsRef.current[i] = el)} |
|
> |
|
<div className="about-cert-card-icon"> |
|
<img |
|
src={`${basePath}images/aboutIcon${i + 1}.png`} |
|
alt="" |
|
/> |
|
</div> |
|
<span className="about-cert-card-year">{item.year}</span> |
|
<h4 className="about-cert-card-title">{item.title}</h4> |
|
<p className="about-cert-card-desc">{item.desc}</p> |
|
</div> |
|
))} |
|
</div> |
|
</section> */} |
|
</div> |
|
</div> |
|
{/* CTA */} |
|
<section className="about-cta-section"> |
|
<div className="about-cta-bg" /> |
|
<div className="about-cta-img" style={{ backgroundImage: `url(${basePath}images/about_banner.png)` }} /> |
|
<div className="about-cta-inner"> |
|
<h3 className="about-cta-title">{t.ctaTitle}</h3> |
|
<p className="about-cta-desc">{t.ctaDesc}</p> |
|
<div className="about-cta-buttons"> |
|
<Link to={withLang("/company/location")} className="about-cta-btn about-cta-btn--primary"> |
|
{t.ctaLocation} |
|
</Link> |
|
<Link to={withLang("/contact")} className="about-cta-btn about-cta-btn--outline"> |
|
{t.ctaInquiry} |
|
</Link> |
|
</div> |
|
</div> |
|
</section> |
|
</article> |
|
); |
|
}
|
|
|