From 8d8a6d14241a2b66aa71d33ffcc7abf1a85d5cd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?= Date: Thu, 28 May 2026 15:41:19 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=9A=8C=EC=82=AC=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 163 +++++++++++++ src/pages/company/AboutPage.jsx | 415 +++++++++++++++++++++++++++++++- 2 files changed, 572 insertions(+), 6 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index 97a6d35..93b2dd4 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -108,7 +108,170 @@ body{overflow-x:hidden;} /*ab about page*/ .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);} +.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895c0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } +.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1e2a5e; } +.about-section-label--light { color: rgba(255,255,255,0.4); } +.about-section-label--light::before { background: rgba(255,255,255,0.4); } +.about-company-section { padding: 100px 0 160px; } + +.about-company-inner { display: flex; gap: 60px; align-items: flex-start; } + +.about-company-text { flex: 1; min-width: 420px; } + +.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1a1a2e; margin-bottom: 32px; } +.about-company-heading .blue { color: #1e2a5e; } + +.about-company-body { font-size: 16px; color: #555; line-height: 2.1; margin-bottom: 20px; } + +.about-img-group { flex-shrink: 0; width: 42vw; max-width: 580px; display: flex; gap: 16px; align-items: flex-start; } + +.about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #f4f5fb; will-change: transform, border-radius; } +.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } + +.about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #eef0f8; will-change: transform, border-radius; } +.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } + +.about-tech-section { background: #0d1628; padding: 100px 0 120px; } + +.about-stats-row { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 72px; margin-bottom: 80px; } + +.about-stat-item { flex: 1; padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.08); } +.about-stat-item:last-child { border-right: none; padding-right: 0; padding-left: 40px; } +.about-stat-item:not(:first-child):not(:last-child) { padding-left: 40px; } + +.about-stat-num-wrap { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 12px; } + +.about-stat-num { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.02em; } + +.about-stat-suffix { font-size: 24px; font-weight: 700; color: #378ADD; margin-bottom: 6px; } + +.about-stat-label { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; } + +.about-tech-intro { margin-bottom: 56px; } + +.about-tech-heading { font-size: 40px; font-weight: 900; line-height: 1.3; color: #fff; margin-top: 16px; margin-bottom: 20px; letter-spacing: -0.02em; } +.about-tech-heading span { color: #378ADD; } + +.about-tech-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.9; max-width: 560px; } + +.about-tech-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } + +.about-tech-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 24px; } + +.about-tech-card-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(55,138,221,0.15); display: flex; align-items: center; justify-content: center; color: #378ADD; font-size: 22px; margin-bottom: 16px; } + +.about-tech-card-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; } + +.about-tech-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; } + +.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #f0f0f0; } + +.about-meaning-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 36px; } + +.about-meaning-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } +.about-meaning-card { border: 1px solid #e8eaf3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; } +.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1e2a5e; } +.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; } + +.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef0f8; display: flex; align-items: center; justify-content: center; color: #1e2a5e; font-size: 20px; margin-bottom: 14px; } + +.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; } + +.about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; } +.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; } + +.about-mission-inner { display: flex; gap: 100px; align-items: flex-start; } + +.about-mission-left { flex: 1; min-width: 360px; padding-top: 8px; } + +.about-mission-title { font-size: 30px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 24px; } + +.about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; } + +.about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; } + +.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #f0f0f0; } +.about-mission-item:first-child { border-top: none; } +.about-mission-item:last-child { border-bottom: none; } +.about-mission-item-num { font-size: 13px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; } + +.about-mission-item-body { flex: 1; } + +.about-mission-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } + +.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1a1a2e; } + +.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 3px 8px; } + +.about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; } + +.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; } + +.about-cert-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 28px; } + +.about-cert-patents { background: #f8f9fc; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; } + +.about-cert-patents-desc { font-size: 14px; color: #666; line-height: 1.9; } +.about-cert-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } + +.about-cert-card { border: 1px solid #e8eaf3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; } + +.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #eef0f8; margin-bottom: 8px; } + +.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895c0; letter-spacing: 0.05em; } + +.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1a1a2e; line-height: 1.4; } + +.about-cert-card-desc { font-size: 13px; color: #888; line-height: 1.7; } + +.about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0d1628; } +.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; } + +.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; } + +.about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; } + +.about-cta-desc { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; } + +.about-cta-buttons { display: flex; gap: 12px; justify-content: center; } + +.about-cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; } + +.about-cta-btn--primary { background: #fff; color: #0d1628; } +.about-cta-btn--primary:hover { background: #eef0f8; } + +.about-cta-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); } +.about-cta-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); } + +@media (max-width: 768px) { + .about-img-side-wrap { display: none; } + .about-company-section { padding: 64px 0 80px; } + .about-meaning-section { padding: 0 0 80px; } + .about-mission-section { padding: 64px 0 64px; } + .about-cert-section { padding: 64px 0 80px; } + .about-meaning-cards { grid-template-columns: 1fr; } + .about-mission-inner { flex-direction: column; gap: 48px; } + .about-mission-left { min-width: unset; } + .about-cert-cards { grid-template-columns: 1fr 1fr; } + .about-slogan-line { font-size: 36px; } + .about-company-inner { flex-direction: column; } + .about-company-text { min-width: unset; } + .about-img-group { width: 100%; max-width: unset; } + .about-stats-row { flex-direction: column; gap: 32px; } + .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); } + .about-stat-item:last-child { border-bottom: none; padding-bottom: 0; } + .about-tech-cards { grid-template-columns: 1fr 1fr; } + .about-cta-section { padding: 80px 24px; } + .about-cta-title { font-size: 28px; } + .about-cta-buttons { flex-direction: column; align-items: center; } +} + +@keyframes about-cta-move { + 0% { transform: translate(0%, 0%); } + 50% { transform: translate(-10%, 8%); } + 100% { transform: translate(10%, -8%); } +} /* ── Partners Page ── */ .partners-wrap {margin-top:-5rem;padding: 0 0 6rem 0; } diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx index 1d625d9..49f956b 100644 --- a/src/pages/company/AboutPage.jsx +++ b/src/pages/company/AboutPage.jsx @@ -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 ( -
- {/* ① 히어로 */} +
About Us } - // desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} - // rightSlot={heroRight} + rightSlot={heroRight} /> + +
+
+ +

+ Values First, +
+ + Trust in Every Stepe + +

+ + 가치를 존중하며, 신뢰를 바탕으로 실천하는 기업 + + + + {/* 회사 소개 */} +
+
+
+

About PAL Networks

+

+ 항공·전문 IT산업분야의 +
+ 소프트웨어 개발 전문 기업 +

+

+ 항공·전문 IT산업분야의 소프트웨어 개발 전문 기업으로써 개발, + 연구 & 컨설팅 등 기술력 기반으로 전문인력 중심으로 + 수행하고 있습니다. +

+

+ PAL은 모두 가깝게 오래 사귄 사람을 뜻하는 '친구'라는 의미와 + 좋은 친구 Good friend, 짝꿍 Mate란 의미입니다. +

+

+ PAL네트웍스는 사람에 따뜻한 가치를 존중하며, 신뢰를 바탕으로 + 실천하는 기업입니다. +

+
+ +
+
+
+
+
+
+ + {/* PALNETWORKS 의미 */} +
+

Brand Identity

+

PALNETWORKS의 의미

+
+
(meaningCardsRef.current[0] = el)} + > +
FRIENDSHIP
+

+ PAL — 친구 · Good friend · Mate +

+

+ 오래 사귄 친구처럼 고객과 함께 성장하는 파트너십을 추구합니다 +

+
+
(meaningCardsRef.current[1] = el)} + > +
RELIABILITY
+

신뢰 · Trust

+

+ 신뢰를 바탕으로 사람에게 따뜻한 가치를 존중하며 실천하는 + 기업입니다 +

+
+
+
+ + {/* 미션 */} +
+
+
+

Mission

+

+ 항공산업의 기술혁신 선도를 통한 +
+ 파트너 고객만족 지원 +

+

+ 미션은 효율적이고 혁신적인 기술로 항공산업에 이바지 하는 + 시스템과 관련기술을 구축 개발하여 대한민국의 현재와 미래 + 발전에 기여하는 것입니다. +

+
+ +
+ {[ + { + num: "01", + keyword: "INNOVATION", + title: "혁신", + desc: "효율적이고 혁신적인 기술로 항공산업 발전에 기여합니다", + }, + { + num: "02", + keyword: "TRUST", + title: "신뢰", + desc: "안전하고 신뢰할 수 있는 시스템을 구축합니다", + }, + { + num: "03", + keyword: "COOPERATION", + title: "협력", + desc: "파트너와 함께 성장하는 협력 생태계를 만들어갑니다", + }, + ].map((item, i) => ( +
(missionItemsRef.current[i] = el)} + > + {item.num} +
+
+

+ {item.title} +

+ + {item.keyword} + +
+

{item.desc}

+
+
+ ))} +
+
+
+ + {/* 인증 및 특허 */} +
+

Certification

+

인증 및 특허 현황

+ +
+

+ 벤처기업등록 · 기업부설연구소 · 소프트웨어등록증 · + 직접생산증명원 ADS-978(KC 인증) · + 비행정보통합관리시스템(특허출원) · 항공기의 지상 이동 소요시간 + 예측 시스템 및 방법(특허출원) +

+
+ +
+ {[ + { + 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) => ( +
(certCardsRef.current[i] = el)} + > +
+ {/* 아이콘 자리 */} +
+ {item.year} +

{item.title}

+

{item.desc}

+
+ ))} +
+
+
+
+ {/* CTA */} +
+
+ +
+

+ Contact +

+

+ PAL Networks와 +
+ 함께 시작해보세요 +

+

+ 항공 IT 솔루션에 대한 문의, 협력 제안 무엇이든 환영합니다. +
+ 전문 인력이 빠르게 답변드리겠습니다. +

+
+ + 찾아오시는 길 + + + 문의하기 + +
+
+
); }