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

css

remotes/origin/main
김지은 2 months ago
parent
e4d4ac7b70
commit
920f7c0f70
9 changed files with 935 additions and 330 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      src/components/SubHero.jsx
  2. 368
      src/css/common.css
  3. 129
      src/css/main.css
  4. 36
      src/hooks/useFadeIn.js
  5. 1
      src/main.jsx
  6. 176
      src/pages/company/AboutPage.jsx
  7. 127
      src/pages/company/HistoryPage.jsx
  8. 201
      src/pages/company/LocationPage.jsx
  9. 155
      src/pages/company/PartnersPage.jsx

72
src/components/SubHero.jsx
Unescape View File

@ -0,0 +1,72 @@
import { Link, useLocation } from "react-router-dom";
const menuMap = {
"/company": "Company",
"/uam": "UAM / UATM",
"/business": "Business",
"/solution": "Solution",
"/contact": "Contact Us",
};
function ChevronIcon() {
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();
// 현재 경로에서 상위 메뉴 추출 ("/company/about" → "/company")
const topPath = "/" + pathname.split("/")[1];
const topLabel = menuMap[topPath] || "";
// 현재 페이지 label
const currentLabel = navItems?.find((n) => n.to === pathname)?.label || label;
return (
<>
<section className="sub-hero">
<div className="sub-hero-inner">
{/* Breadcrumb */}
<nav className="sub-breadcrumb" aria-label="breadcrumb">
<Link to="/main" className="sub-breadcrumb-item">
Home
</Link>
<span className="sub-breadcrumb-sep" aria-hidden="true">
<ChevronIcon />
</span>
<Link to={topPath} className="sub-breadcrumb-item">
{topLabel}
</Link>
<span className="sub-breadcrumb-sep" aria-hidden="true">
<ChevronIcon />
</span>
<span className="sub-breadcrumb-item is-current" aria-current="page">
{currentLabel}
</span>
</nav>
{label && <span className="sub-hero-label">{label}</span>}
<h2 className="sub-hero-title">{title}</h2>
{desc && <p className="sub-hero-desc">{desc}</p>}
</div>
</section>
{/* Sub Nav */}
{navItems && navItems.length > 1 && (
<div className="sub-nav-wrap">
<nav className="sub-nav" aria-label="Sub Navigation">
{navItems.map((item) => (
<Link key={item.to} to={item.to} className={`sub-nav-item${pathname === item.to ? " is-active" : ""}`}>
{item.label}
</Link>
))}
</nav>
</div>
)}
</>
);
}

368
src/css/common.css
Unescape View File

@ -17,270 +17,124 @@ body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/*main visual*/
.main-page{width:100%;overflow:hidden;}
.main-section{position:relative;height:100vh;}
.main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:750px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
.hero-video{width:100%;height:100%;object-fit:cover;}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
.main-visible-haze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,78vw);height:min(460px,40vw);z-index:2;pointer-events:none;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 16%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 64%);filter:blur(28px);opacity:.56;animation:visibleHaze 4.8s ease-in-out infinite;}
.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
.text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
.main-text .text-change{opacity:0;}
.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}
.main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 14px rgba(255,255,255,.28);}
.main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
.main-scroll-text{font-size:11px;line-height:1;letter-spacing:.28em;font-weight:600;color:rgba(255,255,255,.78);}
@keyframes scrollLine{
0%{transform:translateY(0);opacity:.35;}
50%{transform:translateY(6px);opacity:1;}
100%{transform:translateY(0);opacity:.35;}
}
@keyframes visibleAtmo1{
0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
}
@keyframes visibleAtmo2{
0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
}
@keyframes visibleBeam1{
0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
8%{opacity:.32;}
36%{opacity:.95;}
58%{opacity:.48;}
100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
}
@keyframes visibleBeam2{
0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
10%{opacity:.22;}
40%{opacity:.72;}
62%{opacity:.34;}
100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
}
@keyframes visibleHaze{
0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
}
@keyframes gridShift{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,18px,0);}
}
/*sub common*/
.sub-hero{position:relative;background:#f5f6fa;border-bottom:1px solid rgba(58,64,129,.08);overflow:hidden;}
.sub-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(58,64,129,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(58,64,129,.04) 0%,transparent 60%);pointer-events:none;}
.sub-hero-inner{position:relative;max-width:1440px;margin:0 auto;padding:calc(var(--header-height) + 56px) 80px 56px;z-index:1;}
.sub-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:24px;}
.sub-breadcrumb-item{font-size:13px;font-weight:500;color:rgba(17,17,17,.4);text-decoration:none;transition:color .2s ease;line-height:1;}
.sub-breadcrumb-item:hover{color:var(--color-primary);}
.sub-breadcrumb-item.is-current{color:var(--color-primary);font-weight:600;}
.sub-breadcrumb-sep{display:flex;align-items:center;color:rgba(17,17,17,.25);font-size:12px;}
.sub-hero-label{display:inline-block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);}
.sub-hero-title{margin:0 0 12px;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.04em;color:#0d1117;}
.sub-hero-desc{margin:0;font-size:clamp(15px,1.4vw,17px);font-weight:400;line-height:1.7;color:rgba(17,17,17,.55);max-width:560px;word-break:keep-all;}
.sub-nav-wrap{position:sticky;top:var(--header-height);z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(17,17,17,.07);}
.sub-nav{display:flex;max-width:1440px;margin:0 auto;padding:0 80px;gap:0;}
.sub-nav-item{position:relative;display:inline-flex;align-items:center;height:56px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.45);text-decoration:none;transition:color .2s ease;letter-spacing:-.01em;}
.sub-nav-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-primary);border-radius:2px 2px 0 0;transform:scaleX(0);transition:transform .25s ease;}
.sub-nav-item:hover{color:var(--color-primary);}
.sub-nav-item.is-active{color:var(--color-primary);}
.sub-nav-item.is-active::after{transform:scaleX(1);}
.sub-content{max-width:1440px;margin:0 auto;padding:80px 80px 120px;}
.sub-section{margin-bottom:100px;}
.sub-section:last-child{margin-bottom:0;}
.sub-section-eyebrow{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);}
.sub-section-title{margin:0 0 16px;font-size:clamp(24px,2.4vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.03em;color:#0d1117;}
.sub-section-lead{margin:0;font-size:16px;line-height:1.75;color:rgba(17,17,17,.6);max-width:640px;word-break:keep-all;}
.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 about*/
.about-overview{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:80px;}
.about-overview-text .sub-section-lead{max-width:100%;}
.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;}
.about-stat{padding:32px 28px;background:#fafafa;}
.about-stat:nth-child(1){background:var(--color-primary);}
.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;}
.about-stat:nth-child(1) .about-stat-label{color:rgba(255,255,255,.7);}
.about-stat-num{font-size:40px;font-weight:800;letter-spacing:-.04em;color:#0d1117;line-height:1;}
.about-stat-unit{font-size:20px;font-weight:700;color:#0d1117;margin-left:2px;}
.about-stat-label{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.45);letter-spacing:.01em;}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.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;}
.about-value-card:hover{border-color:rgba(58,64,129,.2);transform:translateY(-4px);box-shadow:0 20px 40px rgba(58,64,129,.08);}
.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;}
.about-value-icon svg{width:24px;height:24px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.about-value-card h3{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#0d1117;}
.about-value-card p{margin:0;font-size:14px;line-height:1.75;color:rgba(17,17,17,.55);word-break:keep-all;}
.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*/
.history-timeline{position:relative;margin-top:56px;}
.history-year-group{margin-bottom:64px;}
.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*/
.location-wrap{display:grid;grid-template-columns:1fr 480px;gap:48px;align-items:start;margin-top:48px;}
.location-map{border-radius:20px;overflow:hidden;background:#e8eaf0;aspect-ratio:16/10;border:1px solid rgba(17,17,17,.08);}
.location-map iframe{width:100%;height:100%;border:0;display:block;}
.location-info-card{background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:20px;padding:36px 32px;}
.location-info-card h3{margin:0 0 24px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:#0d1117;}
.location-info-list{list-style:none;padding:0;margin:0;}
.location-info-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.06);}
.location-info-item:last-child{border-bottom:0;padding-bottom: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;}
.location-info-icon svg{width:18px;height:18px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.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);}
.location-info-value{font-size:14px;font-weight:500;color:#0d1117;line-height:1.6;word-break:keep-all;}
.location-info-value a{color:var(--color-primary);text-decoration:none;transition:opacity .2s;}
.location-info-value a:hover{opacity:.7;}
.location-transport{margin-top:40px;}
.location-transport-title{margin:0 0 20px;font-size:15px;font-weight:700;color:#0d1117;letter-spacing:-.01em;}
.location-transport-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.location-transport-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#f5f6fa;border-radius:12px;}
.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;}
.location-transport-text{font-size:13px;color:rgba(17,17,17,.65);line-height:1.6;word-break:keep-all;}
@media (max-width:1280px){
.main-bg{width:calc(100vw - 48px);height:540px;}
.main-grid{background-size:56px 56px;}
.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
.main-visible-beam{width:82%;}
}
@media (max-width:768px){
.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
.main-visible-atmo1{filter:blur(18px);opacity:.44;}
.main-visible-atmo2{filter:blur(20px);opacity:.28;}
.main-visible-beam{width:118%;}
.main-visible-beam1{filter:blur(8px);}
.main-visible-beam2{filter:blur(10px);}
.main-visible-haze{width:90vw;height:42vw;filter:blur(22px);opacity:.46;}
.main-grid{background-size:34px 34px;opacity:.12;}
.text-left-bottom{left:24px;right:24px;bottom:96px;max-width:none;font-size:32px;}
.text-center-hero{width:calc(100% - 40px);font-size:28px;line-height:1.34;}
.main-progress{bottom:28px;width:180px;}
.main-scroll-indicator{bottom:58px;}
.main-scroll-line{height:22px;}
.main-scroll-text{font-size:10px;letter-spacing:.22em;}
.sub-hero-inner,.sub-content{padding-left:48px;padding-right:48px;}
.sub-nav{padding-left:48px;padding-right:48px;}
.about-values{grid-template-columns:repeat(2,1fr);}
.about-overview{gap:48px;}
.partners-grid{grid-template-columns:repeat(3,1fr);}
}
/*main utm*/
:root{--header-height:100px;}
.main-utm-section{background:#fff;}
.main-utm-inner{max-width:1440px;margin:0 auto;padding:calc(var(--header-height) + 40px) 80px 120px;}
.main-utm-head{max-width:800px;margin-bottom:100px;}
.main-utm-eyebrow{font-size:14px;font-weight:700;letter-spacing:.2em;color:#3A4081;margin-bottom:12px;}
.main-utm-title{font-size:clamp(36px,4vw,64px);font-weight:700;line-height:1.1;margin:0;}
.main-utm-desc{font-size:18px;color:#555;margin-top:16px;}
.main-utm-item{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;margin-bottom:160px;}
.main-utm-item.reverse{direction:rtl;}
.main-utm-item.reverse .main-utm-text{direction:ltr;}
.main-utm-text{max-width:420px;}
.main-utm-step{font-size:14px;color:#3A4081;font-weight:700;letter-spacing:.2em;}
.main-utm-text h3{font-size:32px;margin:16px 0;}
.main-utm-text p{font-size:16px;color:#555;line-height:1.6;}
.main-utm-visual img{width:100%;border-radius:20px;}
.main-utm-final{text-align:center;margin-top:120px;}
.main-utm-final p{color:#3A4081;margin-bottom:12px;}
.main-utm-final h3{font-size:clamp(28px,3vw,48px);}
@media (max-width:1024px){
.main-utm-item{grid-template-columns:1fr;gap:40px;}
.main-utm-item.reverse{direction:ltr;}
}
/*main uam*/
.uam-section{position:relative;width:100%;height:100vh;background:#f7f9ff;overflow:hidden;}
.uam-bg-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(58,64,129,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(58,64,129,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);opacity:.7;}
.uam-bg-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);}
.uam-bg-glow--a{width:640px;height:640px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(58,64,129,.12) 0%,rgba(58,64,129,0) 70%);}
.uam-bg-glow--b{width:500px;height:500px;bottom:-100px;left:-60px;background:radial-gradient(circle,rgba(112,180,255,.1) 0%,rgba(112,180,255,0) 70%);}
.uam-inner{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:0 40px;}
.uam-header{position:absolute;top:clamp(48px,7vh,80px);left:50%;transform:translateX(-50%);text-align:center;z-index:4;pointer-events:none;width:min(760px,calc(100% - 80px));}
.uam-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--color-primary);will-change:transform,opacity,filter;}
.uam-eyebrow-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-primary);opacity:.7;}
.uam-title{margin:0;font-size:clamp(32px,3.6vw,58px);font-weight:700;line-height:1.14;letter-spacing:-.05em;color:#0e1120;will-change:transform,opacity,filter;}
.uam-title em{font-style:normal;color:var(--color-primary);}
.uam-sub{margin:14px 0 0;font-size:15px;line-height:1.6;color:#7a8198;letter-spacing:-.01em;will-change:transform,opacity;}
.uam-stage{position:absolute;inset:0;z-index:3;}
.uam-aircraft-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);z-index:5;will-change:transform,opacity;pointer-events:none;}
.uam-aircraft-img{display:block;width:clamp(320px,42vw,640px);height:auto;object-fit:contain;filter:drop-shadow(0 32px 64px rgba(14,17,32,.18)) drop-shadow(0 8px 18px rgba(58,64,129,.14));user-select:none;}
.uam-aircraft-shadow{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:68%;height:28px;background:radial-gradient(ellipse,rgba(14,17,32,.16) 0%,transparent 72%);filter:blur(8px);border-radius:50%;}
.uam-point-group{position:absolute;inset:0;pointer-events:none;}
.uam-dot{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);z-index:6;will-change:transform,opacity;}
.uam-dot-ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(58,64,129,.35);animation:uamDotPulse 2.4s ease-in-out infinite;}
.uam-dot-core{position:absolute;inset:2px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px rgba(58,64,129,.5);}
.uam-line{position:absolute;height:1px;width:44px;top:0;background:linear-gradient(90deg,var(--color-primary),rgba(58,64,129,.25));z-index:5;will-change:transform,opacity;}
.uam-line--left{transform:translate(-44px,-50%);transform-origin:right center;}
.uam-line--right{transform:translate(0,-50%);transform-origin:left center;}
.uam-card{position:absolute;width:clamp(210px,16vw,264px);padding:18px 20px 20px;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);border:1px solid rgba(58,64,129,.1);box-shadow:0 4px 6px rgba(14,17,32,.04),0 16px 40px rgba(14,17,32,.08),inset 0 1px 0 rgba(255,255,255,.9);z-index:6;will-change:transform,opacity,filter;transition:box-shadow .3s ease;}
.uam-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 60%);pointer-events:none;}
.uam-card--left{transform:translate(calc(-100% - 30px),-50%);}
.uam-card--right{transform:translate(30px,-50%);}
.uam-card-index{display:inline-flex;align-items:center;justify-content:center;width:28px;height:18px;margin-bottom:10px;border-radius:999px;background:rgba(58,64,129,.08);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--color-primary);}
.uam-card-label{font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(58,64,129,.6);margin-bottom:6px;text-transform:uppercase;}
.uam-card-title{display:block;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:#0e1120;margin-bottom:10px;}
.uam-card-desc{margin:0 0 14px;font-size:12.5px;line-height:1.72;color:#667085;word-break:keep-all;}
.uam-card-stat{display:flex;align-items:baseline;gap:7px;padding-top:12px;border-top:1px solid rgba(58,64,129,.08);}
.uam-card-stat-value{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--color-primary);line-height:1;}
.uam-card-stat-label{font-size:11px;font-weight:600;color:#a0a9bc;letter-spacing:.04em;}
@keyframes uamDotPulse{
0%{transform:scale(1);opacity:.5;}
50%{transform:scale(1.6);opacity:0;}
100%{transform:scale(1);opacity:.5;}
}
@media (max-width:1280px){
.uam-aircraft-img{width:clamp(280px,40vw,520px);}
.uam-card{width:clamp(190px,15vw,240px);padding:16px 18px 18px;}
.uam-card--left{transform:translate(calc(-100% - 24px),-50%);}
.uam-card--right{transform:translate(24px,-50%);}
.uam-card-title{font-size:15px;}
.uam-card-desc{font-size:12px;}
.uam-card-stat-value{font-size:20px;}
}
@media (max-width:991px){
.uam-title{font-size:clamp(28px,5vw,42px);}
.uam-aircraft-img{width:clamp(240px,52vw,400px);}
.uam-card{width:clamp(170px,22vw,210px);padding:14px 15px 16px;}
.uam-card--left{transform:translate(calc(-100% - 18px),-50%);}
.uam-card--right{transform:translate(18px,-50%);}
.uam-card-title{font-size:14px;}
.uam-card-desc{font-size:11.5px;line-height:1.62;}
.uam-card-stat-value{font-size:18px;}
.sub-hero-inner,.sub-content{padding-left:32px;padding-right:32px;}
.sub-nav{padding-left:32px;padding-right:32px;}
.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){
.uam-inner{padding:0 16px;}
.uam-header{top:clamp(36px,5vh,52px);width:calc(100% - 32px);}
.uam-title{font-size:clamp(26px,7vw,36px);}
.uam-sub{font-size:13px;margin-top:10px;}
.uam-aircraft-img{width:clamp(200px,72vw,340px);}
.uam-aircraft-wrap{top:50%;transform:translate(-50%,-46%);}
.uam-dot{width:10px;height:10px;}
.uam-line{width:26px;}
.uam-line--left{transform:translate(-26px,-50%);}
.uam-card{width:clamp(148px,38vw,180px);padding:12px 13px 14px;border-radius:16px;}
.uam-card--left{transform:translate(calc(-100% - 12px),-50%);}
.uam-card--right{transform:translate(12px,-50%);}
.uam-card-index{width:24px;height:16px;font-size:9px;}
.uam-card-label{font-size:9px;}
.uam-card-title{font-size:12px;margin-bottom:7px;}
.uam-card-desc{font-size:10.5px;line-height:1.58;margin-bottom:10px;}
.uam-card-stat-value{font-size:16px;}
.uam-card-stat-label{font-size:10px;}
.sub-hero-inner{padding:calc(var(--header-height) + 36px) 20px 40px;}
.sub-content{padding:48px 20px 80px;}
.sub-nav{padding:0 20px;}
.about-values{grid-template-columns:1fr;}
.about-overview-stats{grid-template-columns:1fr 1fr;}
.partners-grid{grid-template-columns:repeat(2,1fr);}
.history-year-group{margin-bottom:48px;}
.location-info-card{padding:24px 20px;}
}

129
src/css/main.css
Unescape View File

@ -0,0 +1,129 @@
:root{
--header-height:96px;
--color-primary:#3A4081;
--color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08);
--color-primary-soft-strong:rgba(58,64,129,.12);
--color-primary-soft-border:rgba(58,64,129,.16);
--color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18);
}
html{scrollbar-gutter:inherit;}
body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/*main visual*/
.main-page{width:100%;overflow:hidden;}
.main-section{position:relative;height:100vh;}
.main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:750px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
.hero-video{width:100%;height:100%;object-fit:cover;}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
.main-visible-haze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,78vw);height:min(460px,40vw);z-index:2;pointer-events:none;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 16%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 64%);filter:blur(28px);opacity:.56;animation:visibleHaze 4.8s ease-in-out infinite;}
.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
.text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
.main-text .text-change{opacity:0;}
.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}
.main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 14px rgba(255,255,255,.28);}
.main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
.main-scroll-text{font-size:11px;line-height:1;letter-spacing:.28em;font-weight:600;color:rgba(255,255,255,.78);}
@keyframes scrollLine{
0%{transform:translateY(0);opacity:.35;}
50%{transform:translateY(6px);opacity:1;}
100%{transform:translateY(0);opacity:.35;}
}
@keyframes visibleAtmo1{
0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
}
@keyframes visibleAtmo2{
0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
}
@keyframes visibleBeam1{
0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
8%{opacity:.32;}
36%{opacity:.95;}
58%{opacity:.48;}
100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
}
@keyframes visibleBeam2{
0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
10%{opacity:.22;}
40%{opacity:.72;}
62%{opacity:.34;}
100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
}
@keyframes visibleHaze{
0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
}
@keyframes gridShift{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,18px,0);}
}
@media (max-width:1280px){
.main-bg{width:calc(100vw - 48px);height:540px;}
.main-grid{background-size:56px 56px;}
.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
.main-visible-beam{width:82%;}
}
@media (max-width:768px){
.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
.main-visible-atmo1{filter:blur(18px);opacity:.44;}
.main-visible-atmo2{filter:blur(20px);opacity:.28;}
.main-visible-beam{width:118%;}
.main-visible-beam1{filter:blur(8px);}
.main-visible-beam2{filter:blur(10px);}
.main-visible-haze{width:90vw;height:42vw;filter:blur(22px);opacity:.46;}
.main-grid{background-size:34px 34px;opacity:.12;}
.text-left-bottom{left:24px;right:24px;bottom:96px;max-width:none;font-size:32px;}
.text-center-hero{width:calc(100% - 40px);font-size:28px;line-height:1.34;}
.main-progress{bottom:28px;width:180px;}
.main-scroll-indicator{bottom:58px;}
.main-scroll-line{height:22px;}
.main-scroll-text{font-size:10px;letter-spacing:.22em;}
}

36
src/hooks/useFadeIn.js
Unescape View File

@ -0,0 +1,36 @@
import { useEffect, useRef } from "react";
/**
* useFadeIn
* className="sub-fade-in" 엘리먼트들을 IntersectionObserver로 감지해
* is-visible 클래스를 추가합니다.
*
* @param {string} selector - 감지할 셀렉터 (기본: ".sub-fade-in")
* @param {object} options - IntersectionObserver 옵션
*/
export default function useFadeIn(selector = ".sub-fade-in", options = {}) {
const containerRef = useRef(null);
useEffect(() => {
const root = containerRef.current || document;
const els = root.querySelectorAll(selector);
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.12, ...options }
);
els.forEach((el) => observer.observe(el));
return () => observer.disconnect();
}, [selector, options]);
return containerRef;
}

1
src/main.jsx
Unescape View File

@ -6,6 +6,7 @@ import "./css/reset.css";
import "./css/common.css";
import "./css/header.css";
import "./css/footer.css";
import "./css/main.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>

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

@ -1,25 +1,157 @@
function AboutPage() {
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" },
{ label: "연혁", to: "/company/history" },
{ label: "고객 및 협력사", to: "/company/partners" },
{ label: "찾아오시는 길", to: "/company/location" },
];
const VALUES = [
{
title: "기술 혁신",
desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며, 미래 모빌리티 시대를 선도합니다.",
icon: (
<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 = [
{ title: "인천 항공산업 선도기업 유망기업 선정", desc: "인천시 · 인천테크노파크" },
{ title: "소프트웨어 품질인증 GS 인증 획득", desc: "한국정보통신기술협회(TTA)" },
{ title: "기업부설연구소 인정", desc: "한국산업기술진흥협회" },
{ title: "조달청 우수제품 지정", desc: "비행상황관제 시스템" },
];
export default function AboutPage() {
const ref = useFadeIn();
return (
<main className="sub-page">
<section className="sub-visual">
<div className="inner">
<h2>회사소개</h2>
<p>About PAL Networks</p>
</div>
</section>
<section className="sub-content-section">
<div className="inner">
<h3>기업 철학과 핵심 가치</h3>
<p>
PAL Networks는 항공 데이터와 통합 관제 기술을 기반으로
<br />
안전한 하늘길과 신뢰할 수 있는 IT 서비스를 만들어갑니다.
</p>
</div>
</section>
</main>
<article ref={ref}>
<SubHero
label="Company"
title="가치를 실천하는
항공 IT 전문기업"
desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길과 신뢰할 수 있는 IT 서비스를 만들어갑니다."
navItems={COMPANY_NAV}
/>
<div className="sub-content">
{/* 회사 개요 */}
<section className="sub-section">
<div className="about-overview">
<div className="about-overview-text sub-fade-in">
<span className="sub-section-eyebrow">About PAL Networks</span>
<h2 className="sub-section-title">항공산업의 기술혁신을
선도하는 파트너</h2>
<p className="sub-section-lead">
팔네트웍스(PAL Networks)는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM(무인항공기 교통관리) 솔루션 등 항공 IT 분야의 핵심 기술을 개발·운영해 온 전문 기업입니다.
</p>
<p className="sub-section-lead" style={{ marginTop: "16px" }}>
공공·민간 고객사의 시스템 구축부터 장기 운영·유지보수까지 전 과정을 책임지며, 인천광역시 로봇랜드에 본사를 두고 항공 미래 모빌리티(UAM/UATM) 기술을 선행 연구하고 있습니다.
</p>
</div>
<div className="about-overview-stats sub-fade-in">
<div className="about-stat">
<span className="about-stat-num">2010</span>
<span className="about-stat-label">설립연도</span>
</div>
<div className="about-stat">
<span className="about-stat-num">50<span className="about-stat-unit">+</span></span>
<span className="about-stat-label">완료 프로젝트</span>
</div>
<div className="about-stat">
<span className="about-stat-num">15<span className="about-stat-unit">+</span></span>
<span className="about-stat-label">주요 고객사</span>
</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>
</div>
</section>
{/* 핵심 가치 */}
<section className="sub-section">
<span className="sub-section-eyebrow sub-fade-in">Core Values</span>
<h2 className="sub-section-title sub-fade-in">우리가 지키는 6가지 가치</h2>
<div className="about-values">
{VALUES.map((v, i) => (
<div
key={v.title}
className="about-value-card sub-fade-in"
style={{ transitionDelay: `${i * 60}ms` }}
>
<div className="about-value-icon">{v.icon}</div>
<h3>{v.title}</h3>
<p>{v.desc}</p>
</div>
))}
</div>
</section>
{/* 인증 및 수상 */}
<section className="sub-section">
<span className="sub-section-eyebrow sub-fade-in">Certifications & Awards</span>
<h2 className="sub-section-title sub-fade-in">인증 및 수상 이력</h2>
<div className="about-awards">
{AWARDS.map((a, i) => (
<div
key={a.title}
className="about-award-item sub-fade-in"
style={{ transitionDelay: `${i * 80}ms` }}
>
<div className="about-award-dot" />
<div>
<h4>{a.title}</h4>
<p>{a.desc}</p>
</div>
</div>
))}
</div>
</section>
</div>
</article>
);
}
export default AboutPage;

127
src/pages/company/HistoryPage.jsx
Unescape View File

@ -1,21 +1,114 @@
function HistoryPage() {
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" },
{ label: "연혁", to: "/company/history" },
{ label: "고객 및 협력사", to: "/company/partners" },
{ label: "찾아오시는 길", to: "/company/location" },
];
const HISTORY = [
{
year: "2024",
items: [
{ month: "11월", text: "UAM 통합 교통관리 시스템(UATM) 1단계 연구개발 착수" },
{ month: "06월", text: "KT G-cloud 인천 총판 계약 체결" },
{ month: "03월", text: "비행상황관제 시스템 v3.0 고도화 완료" },
],
},
{
year: "2023",
items: [
{ month: "09월", text: "인천광역시 로봇랜드 14층 본사 이전" },
{ month: "07월", text: "스마트 관광 예약 플랫폼 제주도관광공사 구축 완료" },
{ month: "04월", text: "기업부설연구소 인정 (한국산업기술진흥협회)" },
{ month: "01월", text: "UTM 드론 비행 승인 시스템 실증 사업 참여" },
],
},
{
year: "2022",
items: [
{ month: "11월", text: "인천 항공산업 선도기업 유망기업 선정" },
{ month: "06월", text: "IBE(인터넷 부킹 엔진) v2 고도화 완료" },
{ month: "03월", text: "국방부 산하 항공 운영 시스템 구축 SI 수주" },
],
},
{
year: "2021",
items: [
{ month: "10월", text: "비행상황관제 시스템 조달청 우수제품 지정" },
{ month: "05월", text: "소프트웨어 품질인증 GS 인증 획득 (TTA)" },
],
},
{
year: "2019",
items: [
{ month: "08월", text: "인천국제공항공사 항공 운영 시스템 유지보수 계약" },
{ month: "03월", text: "드론 관제 및 비행 계획 승인 시스템 프로토타입 개발" },
],
},
{
year: "2017",
items: [
{ month: "09월", text: "스마트 관광 예약 플랫폼 1.0 출시" },
{ month: "04월", text: "IBE(인터넷 부킹 엔진) 첫 상용화" },
],
},
{
year: "2015",
items: [
{ month: "06월", text: "비행상황관제 시스템 초기 버전 개발 완료" },
{ month: "02월", text: "한국공항공사 MRO 시스템 구축 참여" },
],
},
{
year: "2010",
items: [
{ month: "05월", text: "주식회사 팔네트웍스 설립" },
{ month: "05월", text: "항공 IT 소프트웨어 개발 전문 기업으로 사업 시작" },
],
},
];
export default function HistoryPage() {
const ref = useFadeIn();
return (
<main className="sub-page">
<section className="sub-visual">
<div className="inner">
<h2>연혁</h2>
<p>History</p>
</div>
</section>
<article ref={ref}>
<SubHero
label="Company"
title="14년의 기술 여정"
desc="항공 IT의 기초부터 UAM/UATM 미래 기술까지, 팔네트웍스가 걸어온 발자취입니다."
navItems={COMPANY_NAV}
/>
<div className="sub-content">
<section className="sub-section">
<span className="sub-section-eyebrow sub-fade-in">History</span>
<h2 className="sub-section-title sub-fade-in">연혁</h2>
<section className="sub-content-section">
<div className="inner">
<h3>주요 실적과 성장 과정</h3>
<p>PAL Networks가 걸어온 길과 주요 성과를 소개합니다.</p>
</div>
</section>
</main>
<div className="history-timeline">
{HISTORY.map((group, gi) => (
<div
key={group.year}
className="history-year-group sub-fade-in"
style={{ transitionDelay: `${gi * 60}ms` }}
>
<div className="history-year">{group.year}</div>
<div className="history-items">
{group.items.map((item, ii) => (
<div key={ii} className="history-item">
<span className="history-item-month">{item.month}</span>
<p className="history-item-text">{item.text}</p>
</div>
))}
</div>
</div>
))}
</div>
</section>
</div>
</article>
);
}
export default HistoryPage;

201
src/pages/company/LocationPage.jsx
Unescape View File

@ -1,21 +1,188 @@
function LocationPage() {
import { useEffect } from "react";
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" },
{ label: "연혁", to: "/company/history" },
{ label: "고객 및 협력사", to: "/company/partners" },
{ label: "찾아오시는 길", to: "/company/location" },
];
// 아이콘 모음
function IconPin() {
return (
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
);
}
function IconPhone() {
return (
<svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.13 6.13l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
);
}
function IconFax() {
return (
<svg viewBox="0 0 24 24"><polyline points="22 17 22 11 16 11"/><path d="M21.73 11l-5.73-7H2v18h12.27l5-7z"/></svg>
);
}
function IconMail() {
return (
<main className="sub-page">
<section className="sub-visual">
<div className="inner">
<h2>찾아오시는 길</h2>
<p>Location</p>
</div>
</section>
<section className="sub-content-section">
<div className="inner">
<h3>위치 및 연락처 안내</h3>
<p>PAL Networks 본사 위치와 연락처를 안내드립니다.</p>
</div>
</section>
</main>
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
);
}
export default LocationPage;
const INFO = [
{
icon: <IconPin />,
label: "주소",
value: "인천광역시 서구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호",
},
{
icon: <IconPhone />,
label: "전화",
value: "032-727-5909",
href: "tel:032-727-5909",
},
{
icon: <IconFax />,
label: "팩스",
value: "032-727-5908",
},
{
icon: <IconMail />,
label: "이메일",
value: "help@palnet.co.kr",
href: "mailto:help@palnet.co.kr",
},
];
const TRANSPORT = [
{
badge: "지하철",
text: "인천 1호선 검암역 하차 → 도보 약 15분 또는 택시 5분 (로봇랜드 방면)",
},
{
badge: "버스",
text: "검암역 환승센터에서 서구 방면 버스 탑승 → 로봇랜드 하차",
},
{
badge: "자가용",
text: "제2경인고속도로 검단IC 진출 → 로봇랜드로 방면 직진 약 5분",
},
];
// 카카오맵 위도/경도: 인천 로봇랜드 좌표
const MAP_SRC =
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.8!2d126.6854!3d37.5613!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7f6e5a5cfc7f%3A0x0!2z7Iuc7LKc7Jy87Lanb-qzoOq1rOyGjA!5e0!3m2!1sko!2skr!4v1700000000000";
export default function LocationPage() {
const ref = useFadeIn();
return (
<article ref={ref}>
<SubHero
label="Company"
title="찾아오시는 길"
desc="인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다."
navItems={COMPANY_NAV}
/>
<div className="sub-content">
<section className="sub-section">
<div className="location-wrap">
{/* 지도 */}
<div className="sub-fade-in">
<div className="location-map">
<iframe
src={MAP_SRC}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="팔네트웍스 본사 위치"
/>
</div>
{/* 교통편 */}
<div className="location-transport" style={{ marginTop: "28px" }}>
<h3 className="location-transport-title">교통편 안내</h3>
<ul className="location-transport-list">
{TRANSPORT.map((t) => (
<li key={t.badge} className="location-transport-item">
<span className="location-transport-badge">{t.badge}</span>
<span className="location-transport-text">{t.text}</span>
</li>
))}
</ul>
</div>
</div>
{/* 연락처 카드 */}
<div className="location-info-card sub-fade-in" style={{ transitionDelay: "100ms" }}>
<h3>(주) PALNETWORKS</h3>
<ul className="location-info-list">
{INFO.map((item) => (
<li key={item.label} className="location-info-item">
<div className="location-info-icon">{item.icon}</div>
<div>
<span className="location-info-label">{item.label}</span>
{item.href ? (
<a className="location-info-value" href={item.href}>
{item.value}
</a>
) : (
<p className="location-info-value" style={{ margin: 0, whiteSpace: "pre-line" }}>
{item.value}
</p>
)}
</div>
</li>
))}
</ul>
{/* 운영시간 */}
<div style={{
marginTop: "28px",
padding: "20px",
background: "#f5f6fa",
borderRadius: "12px",
}}>
<p style={{ margin: "0 0 10px", fontSize: "11px", fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(17,17,17,.4)" }}>
운영 시간
</p>
<p style={{ margin: 0, fontSize: "14px", fontWeight: 600, color: "#0d1117", lineHeight: 1.7 }}>
평일 09:00 – 18:00<br />
<span style={{ fontWeight: 400, color: "rgba(17,17,17,.5)", fontSize: "13px" }}>
토·일·공휴일 휴무
</span>
</p>
</div>
<a
href="/contact/inquiry"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: "20px",
height: "50px",
background: "var(--color-primary)",
borderRadius: "12px",
fontSize: "15px",
fontWeight: 700,
color: "#fff",
textDecoration: "none",
letterSpacing: "-.01em",
transition: "opacity .2s",
}}
onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
>
문의하기
</a>
</div>
</div>
</section>
</div>
</article>
);
}

155
src/pages/company/PartnersPage.jsx
Unescape View File

@ -1,21 +1,142 @@
function PartnersPage() {
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
const COMPANY_NAV = [
{ label: "회사소개", to: "/company/about" },
{ label: "연혁", to: "/company/history" },
{ label: "고객 및 협력사", to: "/company/partners" },
{ label: "찾아오시는 길", to: "/company/location" },
];
const CLIENTS = [
{ name: "인천국제공항공사", type: "공공기관" },
{ name: "한국공항공사", type: "공공기관" },
{ name: "국방부", type: "정부기관" },
{ name: "인천광역시", type: "지방자치단체" },
{ name: "제주도관광공사", type: "공공기관" },
{ name: "항공안전기술원", type: "공공기관" },
{ name: "한국항공우주연구원", type: "연구기관" },
{ name: "국토교통부", type: "정부기관" },
];
const PARTNERS = [
{ name: "KT", type: "클라우드 파트너" },
{ name: "마이크로소프트", type: "기술 파트너" },
{ name: "오라클", type: "기술 파트너" },
{ name: "삼성SDS", type: "SI 파트너" },
{ name: "한화시스템", type: "방산·항공" },
{ name: "LG CNS", type: "SI 파트너" },
];
function PartnerCard({ name, type }) {
return (
<main className="sub-page">
<section className="sub-visual">
<div className="inner">
<h2>고객 및 협력사</h2>
<p>Clients &amp; Partners</p>
</div>
</section>
<section className="sub-content-section">
<div className="inner">
<h3>주요 고객과 협력 네트워크</h3>
<p>다양한 산업의 고객사 및 협력사와 함께 성장하고 있습니다.</p>
</div>
</section>
</main>
<div className="partner-card">
<span className="partner-card-name">{name}</span>
<span className="partner-card-type">{type}</span>
</div>
);
}
export default PartnersPage;
export default function PartnersPage() {
const ref = useFadeIn();
return (
<article ref={ref}>
<SubHero
label="Company"
title="함께하는 고객과 파트너"
desc="공공·항공·국방 분야 주요 기관과의 신뢰를 바탕으로 성장해왔습니다."
navItems={COMPANY_NAV}
/>
<div className="sub-content">
{/* 주요 고객사 */}
<section className="sub-section">
<span className="sub-section-eyebrow sub-fade-in">Clients</span>
<h2 className="sub-section-title sub-fade-in">주요 고객사</h2>
<p className="sub-section-lead sub-fade-in">
인천국제공항공사, 국방부 등 항공·공공 분야 핵심 기관들과 장기 파트너십을 유지하며 안정적인 IT 서비스를 제공합니다.
</p>
<div className="partners-grid" style={{ marginTop: "40px" }}>
{CLIENTS.map((c, i) => (
<div
key={c.name}
className="sub-fade-in"
style={{ transitionDelay: `${i * 50}ms` }}
>
<PartnerCard {...c} />
</div>
))}
</div>
</section>
{/* 협력사 */}
<section className="sub-section">
<span className="sub-section-eyebrow sub-fade-in">Partners</span>
<h2 className="sub-section-title sub-fade-in">기술 협력사</h2>
<p className="sub-section-lead sub-fade-in">
국내외 선도 IT 기업들과의 협력을 통해 최적의 기술 솔루션을 고객에게 제공합니다.
</p>
<div className="partners-grid" style={{ marginTop: "40px" }}>
{PARTNERS.map((p, i) => (
<div
key={p.name}
className="sub-fade-in"
style={{ transitionDelay: `${i * 50}ms` }}
>
<PartnerCard {...p} />
</div>
))}
</div>
</section>
{/* 협력 제안 CTA */}
<section className="sub-section sub-fade-in">
<div style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "24px",
padding: "48px 56px",
background: "var(--color-primary)",
borderRadius: "24px",
}}>
<div>
<p style={{ margin: "0 0 8px", fontSize: "13px", fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(255,255,255,.65)" }}>
Become a Partner
</p>
<h3 style={{ margin: 0, fontSize: "clamp(22px,2.2vw,30px)", fontWeight: 800, color: "#fff", letterSpacing: "-.03em", lineHeight: 1.25 }}>
팔네트웍스와 함께 성장할<br />파트너를 찾습니다
</h3>
</div>
<a
href="/contact/inquiry"
style={{
display: "inline-flex",
alignItems: "center",
height: "52px",
padding: "0 28px",
background: "#fff",
borderRadius: "999px",
fontSize: "15px",
fontWeight: 700,
color: "var(--color-primary)",
textDecoration: "none",
whiteSpace: "nowrap",
letterSpacing: "-.01em",
flexShrink: 0,
}}
>
협력 문의하기
</a>
</div>
</section>
</div>
</article>
);
}

Write Preview
Loading…
Cancel
Save