|
|
|
|
@ -1,9 +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 FloatingKeywords from "../../components/FloatingKeywords"; |
|
|
|
|
import { useEffect, useRef } from "react"; |
|
|
|
|
import { motion } from "framer-motion"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
|
|
|
|
@ -16,20 +17,422 @@ const COMPANY_NAV = [
|
|
|
|
|
{ label: "찾아오시는 길", 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: "항공 고시보와 지오펜스 정보를 실시간으로 반영하여 안전 공역을 관리합니다.", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
export default function AboutPage() { |
|
|
|
|
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> |
|
|
|
|
{/* ① 히어로 */} |
|
|
|
|
<article ref={ref}> |
|
|
|
|
<SubHero |
|
|
|
|
label="Company" |
|
|
|
|
title={ |
|
|
|
|
<> |
|
|
|
|
<em>About Us</em> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
// desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." |
|
|
|
|
navItems={COMPANY_NAV} |
|
|
|
|
// rightSlot={heroRight} |
|
|
|
|
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"> |
|
|
|
|
가치를 존중하며, 신뢰를 바탕으로 실천하는 기업 |
|
|
|
|
</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">About PAL Networks</p> |
|
|
|
|
<h3 className="about-company-heading"> |
|
|
|
|
<span className="blue">항공·전문 IT산업분야의</span> |
|
|
|
|
<br /> |
|
|
|
|
소프트웨어 개발 전문 기업 |
|
|
|
|
</h3> |
|
|
|
|
<p className="about-company-body"> |
|
|
|
|
항공·전문 IT산업분야의 소프트웨어 개발 전문 기업으로써 개발, |
|
|
|
|
연구 & 컨설팅 등 기술력 기반으로 전문인력 중심으로 |
|
|
|
|
수행하고 있습니다. |
|
|
|
|
</p> |
|
|
|
|
<p className="about-company-body"> |
|
|
|
|
PAL은 모두 가깝게 오래 사귄 사람을 뜻하는 '친구'라는 의미와 |
|
|
|
|
좋은 친구 Good friend, 짝꿍 Mate란 의미입니다. |
|
|
|
|
</p> |
|
|
|
|
<p className="about-company-body"> |
|
|
|
|
PAL네트웍스는 사람에 따뜻한 가치를 존중하며, 신뢰를 바탕으로 |
|
|
|
|
실천하는 기업입니다. |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="about-img-group"> |
|
|
|
|
<div className="about-img-main-wrap" ref={imgMainRef} /> |
|
|
|
|
<div className="about-img-side-wrap" ref={imgSideRef} /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* PALNETWORKS 의미 */} |
|
|
|
|
<section className="about-meaning-section"> |
|
|
|
|
<p className="about-section-label">Brand Identity</p> |
|
|
|
|
<h3 className="about-meaning-title">PALNETWORKS의 의미</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"> |
|
|
|
|
PAL — 친구 · Good friend · Mate |
|
|
|
|
</h4> |
|
|
|
|
<p className="about-meaning-card-desc"> |
|
|
|
|
오래 사귄 친구처럼 고객과 함께 성장하는 파트너십을 추구합니다 |
|
|
|
|
</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">신뢰 · Trust</h4> |
|
|
|
|
<p className="about-meaning-card-desc"> |
|
|
|
|
신뢰를 바탕으로 사람에게 따뜻한 가치를 존중하며 실천하는 |
|
|
|
|
기업입니다 |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* 미션 */} |
|
|
|
|
<section className="about-mission-section"> |
|
|
|
|
<div className="about-mission-inner"> |
|
|
|
|
<div className="about-mission-left"> |
|
|
|
|
<p className="about-section-label">Mission</p> |
|
|
|
|
<h3 className="about-mission-title"> |
|
|
|
|
항공산업의 기술혁신 선도를 통한 |
|
|
|
|
<br /> |
|
|
|
|
파트너 고객만족 지원 |
|
|
|
|
</h3> |
|
|
|
|
<p className="about-mission-desc"> |
|
|
|
|
미션은 효율적이고 혁신적인 기술로 항공산업에 이바지 하는 |
|
|
|
|
시스템과 관련기술을 구축 개발하여 대한민국의 현재와 미래 |
|
|
|
|
발전에 기여하는 것입니다. |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="about-mission-right"> |
|
|
|
|
{[ |
|
|
|
|
{ |
|
|
|
|
num: "01", |
|
|
|
|
keyword: "INNOVATION", |
|
|
|
|
title: "혁신", |
|
|
|
|
desc: "효율적이고 혁신적인 기술로 항공산업 발전에 기여합니다", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "02", |
|
|
|
|
keyword: "TRUST", |
|
|
|
|
title: "신뢰", |
|
|
|
|
desc: "안전하고 신뢰할 수 있는 시스템을 구축합니다", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
num: "03", |
|
|
|
|
keyword: "COOPERATION", |
|
|
|
|
title: "협력", |
|
|
|
|
desc: "파트너와 함께 성장하는 협력 생태계를 만들어갑니다", |
|
|
|
|
}, |
|
|
|
|
].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. 12", |
|
|
|
|
title: "인천시 항공 유망 기업 인증", |
|
|
|
|
desc: "인천시 항공 유망기업으로 선정", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
year: "2020. 06", |
|
|
|
|
title: "인천 관광벤처 인증", |
|
|
|
|
desc: "인천 관광벤처 인증", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
year: "2018. 04", |
|
|
|
|
title: "관광 사업 등록증", |
|
|
|
|
desc: "관광 사업 등록", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
year: "2018. 07", |
|
|
|
|
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"> |
|
|
|
|
{/* 아이콘 자리 */} |
|
|
|
|
</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-inner"> |
|
|
|
|
<p className="about-section-label about-section-label--light"> |
|
|
|
|
Contact |
|
|
|
|
</p> |
|
|
|
|
<h3 className="about-cta-title"> |
|
|
|
|
PAL Networks와 |
|
|
|
|
<br /> |
|
|
|
|
함께 시작해보세요 |
|
|
|
|
</h3> |
|
|
|
|
<p className="about-cta-desc"> |
|
|
|
|
항공 IT 솔루션에 대한 문의, 협력 제안 무엇이든 환영합니다. |
|
|
|
|
<br /> |
|
|
|
|
전문 인력이 빠르게 답변드리겠습니다. |
|
|
|
|
</p> |
|
|
|
|
<div className="about-cta-buttons"> |
|
|
|
|
<Link |
|
|
|
|
to="/company/location" |
|
|
|
|
className="about-cta-btn about-cta-btn--primary" |
|
|
|
|
> |
|
|
|
|
찾아오시는 길 |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to="/contact" |
|
|
|
|
className="about-cta-btn about-cta-btn--outline" |
|
|
|
|
> |
|
|
|
|
문의하기 |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
