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

test

remotes/origin/main
김지은 1 month ago
parent
e6a2feac76
commit
edf7cc0db3
2 changed files with 287 additions and 234 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 247
      src/css/common.css
  2. 274
      src/pages/company/AboutPage.jsx

247
src/css/common.css
Unescape View File

@ -23,7 +23,6 @@
--grad-brand-h:linear-gradient(90deg,#d94889 0%,#7b3fa0 50%,#3A4081 100%); --grad-brand-h:linear-gradient(90deg,#d94889 0%,#7b3fa0 50%,#3A4081 100%);
--grad-text:linear-gradient(100deg,#fff 0%,#e58fb5 35%,#b07fd4 65%,#6B78B5 100%); --grad-text:linear-gradient(100deg,#fff 0%,#e58fb5 35%,#b07fd4 65%,#6B78B5 100%);
--noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
} }
html{scrollbar-gutter:inherit;} html{scrollbar-gutter:inherit;}
@ -32,6 +31,7 @@ body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} .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);} .sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
/*sub common*/ /*sub common*/
.sub-hero{position:relative;background:#f5f6fa;border-bottom:1px solid rgba(58,64,129,.08);overflow:hidden;} .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::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;}
@ -286,20 +286,20 @@ body{overflow-x:hidden;}
@media (max-width:1024px){.location-wrap{grid-template-columns:1fr;gap:28px;}.location-map{height:440px;}.location-info-card{position:relative;top:auto;}} @media (max-width:1024px){.location-wrap{grid-template-columns:1fr;gap:28px;}.location-map{height:440px;}.location-info-card{position:relative;top:auto;}}
@media (max-width:768px){.location-map{height:340px;border-radius:22px;}.location-transport{padding:24px;border-radius:22px;}.location-transport-item{grid-template-columns:1fr;gap:10px;padding:16px;}.location-info-card{padding:26px 22px;border-radius:24px;}.location-info-card h3{font-size:24px;}.location-info-item{grid-template-columns:44px 1fr;}.location-info-icon{width:44px;height:44px;border-radius:14px;}.location-info-value{font-size:14px;}} @media (max-width:768px){.location-map{height:340px;border-radius:22px;}.location-transport{padding:24px;border-radius:22px;}.location-transport-item{grid-template-columns:1fr;gap:10px;padding:16px;}.location-info-card{padding:26px 22px;border-radius:24px;}.location-info-card h3{font-size:24px;}.location-info-item{grid-template-columns:44px 1fr;}.location-info-icon{width:44px;height:44px;border-radius:14px;}.location-info-value{font-size:14px;}}
/*sh2 subhero bold editorial*/ /*sh2 subhero*/
.sh2{position:relative;height:100svh;min-height:560px;max-height:860px;overflow:hidden;background:var(--ink);margin-top:calc(-1 * var(--header-height));display:flex;align-items:center;} .sh2{position:relative;height:65vh;min-height:480px;max-height:680px;overflow:hidden;background:var(--ink);margin-top:calc(-1 * var(--header-height));display:flex;align-items:flex-end;}
.sh2-bg{position:absolute;inset:-18% 0;background-size:cover;background-position:center;will-change:transform;} .sh2-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;will-change:transform;}
.sh2-dim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,8,15,.97) 0%,rgba(8,8,15,.82) 40%,rgba(8,8,15,.62) 70%,rgba(8,8,15,.8) 100%);pointer-events:none;} .sh2-dim{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,8,15,.92) 0%,rgba(8,8,15,.7) 45%,rgba(8,8,15,.85) 100%);pointer-events:none;}
.sh2-grain{position:absolute;inset:0;opacity:.045;background-image:var(--noise);background-size:180px 180px;pointer-events:none;mix-blend-mode:overlay;} .sh2-grain{position:absolute;inset:0;opacity:.04;background-image:var(--noise);background-size:180px 180px;pointer-events:none;mix-blend-mode:overlay;}
.sh2-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 72% 44%,rgba(123,63,160,.22) 0%,transparent 60%),radial-gradient(ellipse 35% 45% at 15% 75%,rgba(217,72,137,.12) 0%,transparent 55%);pointer-events:none;} .sh2-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 75% 40%,rgba(123,63,160,.28) 0%,transparent 60%),radial-gradient(ellipse 30% 40% at 10% 80%,rgba(217,72,137,.14) 0%,transparent 55%);pointer-events:none;}
.sh2-vline{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,transparent);pointer-events:none;} .sh2-vline{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.05) 30%,rgba(255,255,255,.05) 70%,transparent);pointer-events:none;}
.sh2-vline--l{left:80px;} .sh2-vline--l{left:80px;}
.sh2-vline--r{right:80px;} .sh2-vline--r{right:80px;}
.sh2-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding:0 80px;padding-top:var(--header-height);transition:opacity .1s linear;} .sh2-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding:0 80px 64px;padding-top:var(--header-height);transition:opacity .1s linear;}
.sh2-bc{display:flex;align-items:center;gap:0;margin-bottom:48px;} .sh2-bc{display:flex;align-items:center;margin-bottom:32px;}
.sh2-bc-item{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);text-decoration:none;transition:color .2s;} .sh2-bc-item{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);text-decoration:none;transition:color .2s;}
.sh2-bc-item:hover{color:rgba(255,255,255,.6);} .sh2-bc-item:hover{color:rgba(255,255,255,.6);}
.sh2-bc-sep{margin:0 10px;font-size:10px;color:rgba(255,255,255,.12);letter-spacing:.05em;} .sh2-bc-sep{margin:0 10px;font-size:10px;color:rgba(255,255,255,.12);}
.sh2-bc-drop{position:relative;} .sh2-bc-drop{position:relative;}
.sh2-bc-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);cursor:pointer;padding:5px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);transition:background .2s,border-color .2s,color .2s;} .sh2-bc-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);cursor:pointer;padding:5px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);transition:background .2s,border-color .2s,color .2s;}
.sh2-bc-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);} .sh2-bc-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
@ -310,20 +310,20 @@ body{overflow-x:hidden;}
.sh2-bc-menu-item:hover{background:rgba(123,63,160,.25);color:#fff;} .sh2-bc-menu-item:hover{background:rgba(123,63,160,.25);color:#fff;}
.sh2-bc-menu-item--cur{color:#fff;font-weight:700;background:rgba(123,63,160,.18);} .sh2-bc-menu-item--cur{color:#fff;font-weight:700;background:rgba(123,63,160,.18);}
.sh2-bc-cur{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);} .sh2-bc-cur{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.sh2-title-wrap{margin-bottom:28px;} .sh2-title-wrap{margin-bottom:20px;}
.sh2-title{display:block;font-size:clamp(48px,7.5vw,108px);font-weight:900;line-height:1;letter-spacing:-.055em;color:#fff;opacity:0;transform:translateY(36px);animation:sh2TitleIn .85s cubic-bezier(.16,1,.3,1) forwards;} .sh2-title{display:block;font-size:clamp(40px,6vw,88px);font-weight:900;line-height:1.0;letter-spacing:-.055em;color:#fff;opacity:0;transform:translateY(36px);animation:sh2TitleIn .85s cubic-bezier(.16,1,.3,1) forwards;}
.sh2-desc{font-size:clamp(14px,1.3vw,17px);line-height:1.75;color:rgba(255,255,255,.38);max-width:520px;word-break:keep-all;opacity:0;animation:sh2FadeUp .8s .55s cubic-bezier(.16,1,.3,1) forwards;} .sh2-desc{font-size:clamp(13px,1.2vw,16px);line-height:1.75;color:rgba(255,255,255,.38);max-width:480px;word-break:keep-all;opacity:0;animation:sh2FadeUp .8s .55s cubic-bezier(.16,1,.3,1) forwards;}
.sh2-accent-line{margin-top:36px;width:48px;height:3px;background:var(--grad-brand-h);border-radius:999px;opacity:0;animation:sh2FadeUp .7s .7s cubic-bezier(.16,1,.3,1) forwards;} .sh2-accent-line{margin-top:28px;width:40px;height:3px;background:var(--grad-brand-h);border-radius:999px;opacity:0;animation:sh2FadeUp .7s .7s cubic-bezier(.16,1,.3,1) forwards;}
.sh2-scroll-hint{position:absolute;bottom:36px;left:80px;display:flex;align-items:center;gap:12px;z-index:3;} .sh2-scroll-hint{position:absolute;bottom:28px;right:80px;display:flex;align-items:center;gap:12px;z-index:3;}
.sh2-scroll-hint span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);} .sh2-scroll-hint span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.18);}
.sh2-scroll-bar{width:40px;height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;} .sh2-scroll-bar{width:36px;height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;}
.sh2-scroll-bar::after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--pink);animation:sh2ScrollBar 1.8s 1s ease-in-out infinite;} .sh2-scroll-bar::after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--pink);animation:sh2ScrollBar 1.8s 1s ease-in-out infinite;}
.sh2-nav{position:sticky;top:var(--header-height);z-index:50;background:rgba(8,8,15,.88);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06);} .sh2-nav{position:sticky;top:var(--header-height);z-index:50;background:rgba(8,8,15,.92);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06);}
.sh2-nav-inner{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;} .sh2-nav-inner{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;}
.sh2-nav-tab{position:relative;display:inline-flex;align-items:center;height:54px;padding:0 22px;font-size:13px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.28);text-decoration:none;transition:color .25s;white-space:nowrap;} .sh2-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:13px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.28);text-decoration:none;transition:color .25s;white-space:nowrap;}
.sh2-nav-tab:hover{color:rgba(255,255,255,.7);} .sh2-nav-tab:hover{color:rgba(255,255,255,.7);}
.sh2-nav-tab--active{color:#fff;} .sh2-nav-tab--active{color:#fff;}
.sh2-nav-pip{position:absolute;bottom:0;left:22px;right:22px;height:2px;background:var(--grad-brand-h);border-radius:999px;} .sh2-nav-pip{position:absolute;bottom:0;left:20px;right:20px;height:2px;background:var(--grad-brand-h);border-radius:999px;}
@keyframes sh2MenuIn{ @keyframes sh2MenuIn{
from{opacity:0;transform:translateY(-6px) scale(.97);} from{opacity:0;transform:translateY(-6px) scale(.97);}
@ -342,107 +342,128 @@ body{overflow-x:hidden;}
100%{left:100%;} 100%{left:100%;}
} }
/*ab2 about page bold editorial*/ /*ab3 about page*/
.ab2-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(58,64,129,.55);margin-bottom:40px;} .ab3{background:#fff;}
.ab2-eyebrow--light{color:rgba(255,255,255,.2);}
.ab2-stats{background:#fff;padding:100px 80px;border-bottom:1px solid rgba(17,17,17,.06);} /*stats — 진한 그라디언트 배경*/
.ab2-stats-inner{max-width:1440px;margin:0 auto;} .ab3-stats{position:relative;padding:120px 80px;overflow:hidden;}
.ab2-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(17,17,17,.06);} .ab3-stats-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0d0e1f 0%,#1a1040 30%,#2a1060 55%,#1a0a30 75%,#080812 100%);z-index:0;}
.ab2-si{padding:40px 40px 40px 0;border-right:1px solid rgba(17,17,17,.06);position:relative;} .ab3-stats-bg::after{content:"";position:absolute;inset:0;background:url('/images/cloud-network.png') center/cover no-repeat;opacity:.08;mix-blend-mode:screen;}
.ab2-si:last-child{border-right:0;} .ab3-stats-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;}
.ab2-si:not(:first-child){padding-left:40px;} .ab3-label{display:block;font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:56px;}
.ab2-si-note{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;} .ab3-label--light{color:rgba(255,255,255,.2);}
.ab2-si-num{display:block;font-size:clamp(52px,5.5vw,88px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--ink);} .ab3-label--dark{color:rgba(17,17,17,.3);}
.ab2-si-lbl{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.35);} .ab3-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.08);}
.ab2-vid{height:520px;position:relative;overflow:hidden;background:var(--ink);} .ab3-si{padding:48px 40px 48px 0;border-right:1px solid rgba(255,255,255,.06);}
.ab2-vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;} .ab3-si:last-child{border-right:0;}
.ab2-vid-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,15,.1) 0%,rgba(8,8,15,.72) 100%);} .ab3-si:not(:first-child){padding-left:40px;}
.ab2-vid-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;padding:0 40px;will-change:transform,opacity;} .ab3-si-note{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;}
.ab2-vid-kicker{font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:20px;} .ab3-si-num{display:block;font-size:clamp(56px,6vw,96px);font-weight:900;letter-spacing:-.06em;line-height:1;color:#fff;}
.ab2-vid-title{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:18px;} .ab3-si-lbl{display:block;margin-top:10px;font-size:13px;font-weight:500;color:rgba(255,255,255,.28);}
.ab2-vid-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.4);word-break:keep-all;}
.ab2-phil{background:var(--ink);padding:140px 80px;} /*philosophy — 영상 배경*/
.ab2-phil-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} .ab3-phil{position:relative;overflow:hidden;padding:160px 80px;}
.ab2-phil-words{display:flex;flex-direction:column;gap:4px;} .ab3-phil-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform;}
.ab2-phil-word{display:block;font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.08;letter-spacing:-.055em;color:rgba(255,255,255,.75);} .ab3-phil-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,4,14,.95) 0%,rgba(4,4,14,.88) 40%,rgba(4,4,14,.75) 70%,rgba(4,4,14,.9) 100%);}
.ab2-phil-word--grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .ab3-phil-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center;}
.ab2-phil-body{padding-top:16px;} .ab3-phil-words{display:flex;flex-direction:column;gap:0;}
.ab2-phil-badge{display:inline-flex;flex-direction:column;gap:3px;padding:14px 20px;border-radius:10px;border:1px solid rgba(217,72,137,.2);background:rgba(217,72,137,.07);margin-bottom:28px;} .ab3-phil-line{display:block;font-size:clamp(52px,6.5vw,96px);font-weight:900;line-height:1.0;letter-spacing:-.06em;color:rgba(255,255,255,.85);}
.ab2-phil-badge span{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.3);} .ab3-phil-line--accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ab2-phil-badge strong{font-size:15px;font-weight:800;color:#fff;} .ab3-phil-sub{display:flex;flex-direction:column;gap:32px;}
.ab2-phil-text{font-size:15px;line-height:2;color:rgba(255,255,255,.32);word-break:keep-all;} .ab3-phil-badge{display:inline-flex;flex-direction:column;gap:4px;padding:16px 22px;border-radius:12px;border:1px solid rgba(217,72,137,.22);background:rgba(217,72,137,.08);width:fit-content;}
.ab2-vals{background:#fff;padding:140px 80px;} .ab3-phil-badge span{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.3);}
.ab2-vals-inner{max-width:1440px;margin:0 auto;} .ab3-phil-badge strong{font-size:16px;font-weight:800;color:#fff;}
.ab2-vals-title{font-size:clamp(40px,4.5vw,64px);font-weight:900;letter-spacing:-.055em;color:var(--ink);margin-bottom:72px;line-height:1.05;} .ab3-phil-body{font-size:15px;line-height:2;color:rgba(255,255,255,.35);word-break:keep-all;}
.ab2-vals-list{display:flex;flex-direction:column;}
.ab2-val-row{display:grid;grid-template-columns:80px 220px 1fr 40px;gap:32px;align-items:center;padding:40px 0;border-top:1px solid rgba(17,17,17,.07);cursor:default;} /*values — 흰 배경 + 호버 이미지*/
.ab2-val-row:last-child{border-bottom:1px solid rgba(17,17,17,.07);} .ab3-vals{background:#fff;padding:140px 80px;}
.ab2-val-row:hover .ab2-val-arrow{color:var(--pink);transform:translateX(6px);} .ab3-vals-inner{max-width:1440px;margin:0 auto;}
.ab2-val-row:hover .ab2-val-divider{background:var(--pink);} .ab3-vals-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:80px;}
.ab2-val-left{display:flex;align-items:center;gap:16px;} .ab3-vals-title{font-size:clamp(48px,5.5vw,80px);font-weight:900;letter-spacing:-.06em;color:#0a0a14;line-height:1.0;margin:0;}
.ab2-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(17,17,17,.15);} .ab3-vals-list{display:flex;flex-direction:column;}
.ab2-val-divider{flex:1;height:1px;background:rgba(17,17,17,.08);transition:background .3s;} .ab3-val-row{position:relative;display:grid;grid-template-columns:100px 200px 1fr 40px;gap:40px;align-items:center;padding:40px 0;border-top:1px solid rgba(17,17,17,.07);overflow:hidden;cursor:default;transition:padding-left .4s cubic-bezier(.16,1,.3,1);}
.ab2-val-en{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:6px;} .ab3-val-row:last-child{border-bottom:1px solid rgba(17,17,17,.07);}
.ab2-val-name{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:0;} .ab3-val-img{position:absolute;inset:0;background-image:var(--val-img);background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .5s ease;}
.ab2-val-desc{font-size:14px;line-height:1.85;color:rgba(17,17,17,.44);word-break:keep-all;margin:0;} .ab3-val-img::after{content:"";position:absolute;inset:0;background:rgba(8,8,15,.72);}
.ab2-val-arrow{font-size:18px;color:rgba(17,17,17,.15);transition:color .3s,transform .3s;} .ab3-val-row:hover .ab3-val-img{opacity:1;transform:scale(1);}
.ab2-awds{background:var(--ink-2);padding:140px 80px;} .ab3-val-row:hover{padding-left:20px;}
.ab2-awds-inner{max-width:1440px;margin:0 auto;} .ab3-val-row:hover .ab3-val-name{color:#fff;}
.ab2-awds-title{font-size:clamp(40px,4.5vw,64px);font-weight:900;letter-spacing:-.055em;color:#fff;margin-bottom:72px;line-height:1.05;} .ab3-val-row:hover .ab3-val-desc{color:rgba(255,255,255,.5);}
.ab2-awds-list{list-style:none;padding:0;margin:0;} .ab3-val-row:hover .ab3-val-arr{color:var(--pink);transform:translateX(6px);}
.ab2-awd-row{display:grid;grid-template-columns:80px 2px 1fr;gap:32px;align-items:center;padding:36px 0;border-top:1px solid rgba(255,255,255,.05);} .ab3-val-meta{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;}
.ab2-awd-row:last-child{border-bottom:1px solid rgba(255,255,255,.05);} .ab3-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(17,17,17,.18);transition:color .3s;}
.ab2-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.22);} .ab3-val-row:hover .ab3-val-idx{color:rgba(255,255,255,.3);}
.ab2-awd-pip{width:2px;height:40px;background:linear-gradient(180deg,transparent,var(--pink),transparent);border-radius:999px;} .ab3-val-en{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);}
.ab2-awd-body{display:flex;flex-direction:column;gap:5px;} .ab3-val-name{position:relative;z-index:1;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.04em;color:#0a0a14;margin:0;transition:color .3s;}
.ab2-awd-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.02em;} .ab3-val-desc{position:relative;z-index:1;font-size:14px;line-height:1.85;color:rgba(17,17,17,.44);word-break:keep-all;margin:0;transition:color .3s;}
.ab2-awd-org{font-size:13px;color:rgba(255,255,255,.28);} .ab3-val-arr{position:relative;z-index:1;font-size:18px;color:rgba(17,17,17,.15);transition:color .3s,transform .3s;}
.ab2-cta{background:var(--ink);padding:160px 80px;text-align:center;position:relative;overflow:hidden;}
.ab2-cta-noise{position:absolute;inset:0;opacity:.03;background-image:var(--noise);background-size:180px 180px;pointer-events:none;} /*awards — hero2 패럴랙스 배경*/
.ab2-cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 50%,rgba(217,72,137,.22) 0%,transparent 60%),radial-gradient(ellipse 45% 35% at 20% 80%,rgba(123,63,160,.14) 0%,transparent 55%);pointer-events:none;} .ab3-awds{position:relative;overflow:hidden;padding:140px 80px;}
.ab2-cta-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;} .ab3-awds-bg{position:absolute;inset:-20% 0;background:url('/images/hero2.png') center/cover no-repeat;transform:scale(1.1);filter:brightness(.18) saturate(1.4);will-change:transform;}
.ab2-cta-chip{display:inline-block;padding:6px 18px;border-radius:999px;border:1px solid rgba(217,72,137,.3);background:rgba(217,72,137,.1);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:28px;} .ab3-awds-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(58,64,129,.55) 0%,rgba(123,63,160,.35) 50%,rgba(217,72,137,.2) 100%);}
.ab2-cta-title{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:20px;} .ab3-awds-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;}
.ab2-cta-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.38);margin-bottom:52px;word-break:keep-all;} .ab3-awds-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:72px;}
.ab2-cta-btns{display:flex;align-items:center;gap:14px;} .ab3-awds-title{font-size:clamp(44px,5vw,72px);font-weight:900;letter-spacing:-.06em;color:#fff;line-height:1.0;margin:0;}
.ab2-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 40px;border-radius:6px;font-size:15px;font-weight:800;text-decoration:none;letter-spacing:.01em;transition:transform .25s,box-shadow .25s,opacity .25s;} .ab3-awds-list{list-style:none;padding:0;margin:0;}
.ab2-cta-btn--fill{background:var(--grad-brand-h);color:#fff;} .ab3-awd-item{display:grid;grid-template-columns:80px 1px 1fr;gap:36px;align-items:center;padding:36px 0;border-top:1px solid rgba(255,255,255,.07);transition:background .3s;}
.ab2-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(217,72,137,.3);} .ab3-awd-item:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
.ab2-cta-btn--line{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);} .ab3-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.22);}
.ab2-cta-btn--line:hover{border-color:rgba(255,255,255,.3);color:#fff;transform:translateY(-3px);} .ab3-awd-line{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--pink),transparent);}
.ab3-awd-body{display:flex;flex-direction:column;gap:6px;}
.ab3-awd-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.ab3-awd-org{font-size:13px;color:rgba(255,255,255,.28);}
/*cta*/
.ab3-cta{position:relative;overflow:hidden;padding:160px 80px;text-align:center;}
.ab3-cta-bg{position:absolute;inset:0;background:linear-gradient(160deg,#08080f 0%,#160830 35%,#2a0a50 55%,#08080f 100%);}
.ab3-cta-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(217,72,137,.28) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 20%,rgba(123,63,160,.2) 0%,transparent 55%);}
.ab3-cta-bg::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:180px 180px;opacity:.03;}
.ab3-cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.ab3-cta-chip{display:inline-block;padding:6px 18px;border-radius:999px;border:1px solid rgba(217,72,137,.35);background:rgba(217,72,137,.12);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:28px;}
.ab3-cta-title{font-size:clamp(48px,6.5vw,88px);font-weight:900;line-height:1.0;letter-spacing:-.06em;color:#fff;margin-bottom:20px;}
.ab3-cta-desc{font-size:16px;line-height:1.8;color:rgba(255,255,255,.35);margin-bottom:52px;word-break:keep-all;}
.ab3-cta-btns{display:flex;align-items:center;gap:14px;}
.ab3-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 44px;border-radius:8px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .25s,box-shadow .25s;}
.ab3-cta-btn--fill{background:var(--grad-brand-h);color:#fff;}
.ab3-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(217,72,137,.32);}
.ab3-cta-btn--line{background:transparent;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.16);}
.ab3-cta-btn--line:hover{border-color:rgba(255,255,255,.35);color:#fff;transform:translateY(-3px);}
@media (max-width:1280px){ @media (max-width:1280px){
.sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:48px;padding-right:48px;} .sh2-inner,.sh2-nav-inner{padding-left:48px;padding-right:48px;}
.sh2-scroll-hint{right:48px;}
.sh2-vline--l{left:48px;} .sh2-vline--l{left:48px;}
.sh2-vline--r{right:48px;} .sh2-vline--r{right:48px;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:48px;padding-right:48px;} .ab3-stats,.ab3-phil,.ab3-vals,.ab3-awds,.ab3-cta{padding-left:48px;padding-right:48px;}
.ab2-val-row{grid-template-columns:72px 200px 1fr 32px;gap:24px;} .ab3-val-row{grid-template-columns:80px 180px 1fr 32px;gap:28px;}
} }
@media (max-width:1024px){ @media (max-width:1024px){
.sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:32px;padding-right:32px;} .sh2-inner,.sh2-nav-inner{padding-left:32px;padding-right:32px;}
.sh2-vline{display:none;} .sh2-vline{display:none;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:32px;padding-right:32px;} .sh2-scroll-hint{right:32px;}
.ab2-stats-grid{grid-template-columns:repeat(2,1fr);} .ab3-stats,.ab3-phil,.ab3-vals,.ab3-awds,.ab3-cta{padding-left:32px;padding-right:32px;}
.ab2-si{padding-bottom:40px;border-bottom:1px solid rgba(17,17,17,.06);} .ab3-stats-grid{grid-template-columns:repeat(2,1fr);}
.ab2-si:nth-child(2n){border-right:0;} .ab3-si{padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.06);}
.ab2-si:nth-child(3),.ab2-si:nth-child(4){border-bottom:0;} .ab3-si:nth-child(2n){border-right:0;}
.ab2-phil-inner{grid-template-columns:1fr;gap:56px;} .ab3-si:nth-child(3),.ab3-si:nth-child(4){border-bottom:0;}
.ab2-val-row{grid-template-columns:60px 1fr;grid-template-rows:auto auto;gap:16px;} .ab3-phil-inner{grid-template-columns:1fr;gap:64px;}
.ab2-val-desc{grid-column:1/-1;} .ab3-vals-head{grid-template-columns:1fr;}
.ab2-val-arrow{display:none;} .ab3-val-row{grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:16px 24px;}
.ab3-val-desc{grid-column:1/-1;}
.ab3-val-arr{display:none;}
.ab3-awds-head{grid-template-columns:1fr;}
} }
@media (max-width:768px){ @media (max-width:768px){
.sh2{max-height:680px;} .sh2{height:55vh;min-height:400px;}
.sh2-inner{padding-left:20px;padding-right:20px;} .sh2-inner{padding-left:20px;padding-right:20px;padding-bottom:48px;}
.sh2-title{font-size:clamp(40px,12vw,64px);}
.sh2-scroll-hint{left:20px;}
.sh2-nav-inner{padding-left:20px;padding-right:20px;} .sh2-nav-inner{padding-left:20px;padding-right:20px;}
.sh2-nav-tab{padding:0 14px;font-size:12px;} .sh2-nav-tab{padding:0 14px;font-size:12px;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds{padding:80px 20px;} .sh2-scroll-hint{right:20px;}
.ab2-cta{padding:100px 20px;} .ab3-stats,.ab3-phil,.ab3-vals,.ab3-awds{padding:80px 20px;}
.ab2-stats-grid{grid-template-columns:1fr 1fr;} .ab3-cta{padding:100px 20px;}
.ab2-val-row{padding:30px 0;} .ab3-val-row{padding:30px 0;}
.ab2-awd-row{grid-template-columns:60px 2px 1fr;gap:20px;padding:28px 0;} .ab3-awd-item{grid-template-columns:64px 1px 1fr;gap:20px;padding:28px 0;}
.ab2-cta-btns{flex-direction:column;width:100%;} .ab3-cta-btns{flex-direction:column;width:100%;}
.ab2-cta-btn{width:100%;max-width:320px;} .ab3-cta-btn{width:100%;max-width:320px;}
} }

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

@ -21,10 +21,10 @@ const STATS = [
]; ];
const VALUES = [ const VALUES = [
{ idx: "01", title: "기술 혁신", en: "Innovation", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다." }, { idx: "01", title: "기술 혁신", en: "Innovation", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.", img: "/images/img1.jpg" },
{ idx: "02", title: "신뢰와 책임", en: "Trust", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다." }, { idx: "02", title: "신뢰와 책임", en: "Trust", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", img: "/images/img2.jpg" },
{ idx: "03", title: "파트너십", en: "Partnership", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다." }, { idx: "03", title: "파트너십", en: "Partnership", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", img: "/images/img3.jpg" },
{ idx: "04", title: "전문성", en: "Expertise", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다." }, { idx: "04", title: "전문성", en: "Expertise", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", img: "/images/img4.jpg" },
]; ];
const AWARDS = [ const AWARDS = [
@ -34,13 +34,13 @@ const AWARDS = [
{ year: "2020", title: "조달청 우수제품 지정", org: "비행상황관제 시스템" }, { year: "2020", title: "조달청 우수제품 지정", org: "비행상황관제 시스템" },
]; ];
function animateCount(el, target, suffix, duration = 1600) { function animateCount(el, target, suffix, duration = 1800) {
const from = target > 100 ? target - 4 : 0; const from = target > 100 ? target - 4 : 0;
let start = null; let start = null;
const step = (ts) => { const step = (ts) => {
if (!start) start = ts; if (!start) start = ts;
const p = Math.min((ts - start) / duration, 1); const p = Math.min((ts - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3); const ease = 1 - Math.pow(1 - p, 4);
el.textContent = Math.floor(from + (target - from) * ease) + suffix; el.textContent = Math.floor(from + (target - from) * ease) + suffix;
if (p < 1) requestAnimationFrame(step); if (p < 1) requestAnimationFrame(step);
}; };
@ -48,148 +48,178 @@ function animateCount(el, target, suffix, duration = 1600) {
} }
export default function AboutPage() { export default function AboutPage() {
const videoRef = useRef(null);
const videoSecRef = useRef(null);
const statRefs = useRef([]); const statRefs = useRef([]);
const statDone = useRef(false); const statDone = useRef(false);
useEffect(() => { useEffect(() => {
const ctx = gsap.context(() => { const ctx = gsap.context(() => {
/* 영상 패럴랙스 */ /* ── 숫자 섹션 카운터 ── */
gsap.to(videoRef.current, { ScrollTrigger.create({
scale: 1.12, trigger: ".ab3-stats",
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 }, start: "top 75%",
}); onEnter: () => {
gsap.to(".ab2-vid-txt", { if (statDone.current) return;
y: -90, statDone.current = true;
opacity: 0, statRefs.current.forEach((el, i) => {
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "60% top", scrub: 1 }, if (!el) return;
setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 100);
});
},
}); });
/* 숫자 카운터 + 페이드 */ /* ── 숫자 카드 스태거 ── */
gsap.fromTo( gsap.fromTo(
".ab2-si", ".ab3-si",
{ opacity: 0, y: 40 }, { opacity: 0, y: 50 },
{ {
opacity: 1, opacity: 1,
y: 0, y: 0,
stagger: 0.1, stagger: 0.12,
duration: 0.8, duration: 0.9,
ease: "power3.out", ease: "power3.out",
scrollTrigger: { scrollTrigger: { trigger: ".ab3-stats", start: "top 78%" },
trigger: ".ab2-stats",
start: "top 78%",
onEnter: () => {
if (statDone.current) return;
statDone.current = true;
statRefs.current.forEach((el, i) => {
if (!el) return;
setTimeout(() => animateCount(el, STATS[i].num, STATS[i].suffix), i * 80);
});
},
},
}, },
); );
/* 철학 */ /* ── 철학 섹션 핀 + 텍스트 순차 reveal ── */
gsap.fromTo(".ab2-phil-word", { opacity: 0, y: 60 }, { opacity: 1, y: 0, stagger: 0.08, duration: 0.9, ease: "power4.out", scrollTrigger: { trigger: ".ab2-phil", start: "top 70%" } }); gsap.fromTo(
gsap.fromTo(".ab2-phil-body", { opacity: 0, x: 40 }, { opacity: 1, x: 0, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab2-phil", start: "top 62%" } }); ".ab3-phil-line",
{ opacity: 0, y: 80 },
{
opacity: 1,
y: 0,
stagger: 0.15,
duration: 1.1,
ease: "power4.out",
scrollTrigger: { trigger: ".ab3-phil", start: "top 65%" },
},
);
gsap.fromTo(
".ab3-phil-sub",
{ opacity: 0, x: 40 },
{
opacity: 1,
x: 0,
duration: 1,
ease: "power3.out",
scrollTrigger: { trigger: ".ab3-phil", start: "top 55%" },
},
);
/* 핵심가치 */ /* ── 가치 섹션 라인 애니 ── */
gsap.fromTo(".ab2-val-row", { opacity: 0, x: -36 }, { opacity: 1, x: 0, stagger: 0.12, duration: 0.8, ease: "power3.out", scrollTrigger: { trigger: ".ab2-vals", start: "top 74%" } }); gsap.fromTo(
".ab3-val-row",
{ opacity: 0, x: -40 },
{
opacity: 1,
x: 0,
stagger: 0.1,
duration: 0.8,
ease: "power3.out",
scrollTrigger: { trigger: ".ab3-vals", start: "top 72%" },
},
);
/* 수상 */ /* ── 수상 ── */
gsap.fromTo(".ab2-awd-row", { opacity: 0, y: 24 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power2.out", scrollTrigger: { trigger: ".ab2-awds", start: "top 76%" } }); gsap.fromTo(
".ab3-awd-item",
{ opacity: 0, y: 30 },
{
opacity: 1,
y: 0,
stagger: 0.1,
duration: 0.7,
ease: "power2.out",
scrollTrigger: { trigger: ".ab3-awds", start: "top 75%" },
},
);
/* CTA */ /* ── CTA ── */
gsap.fromTo(".ab2-cta-inner > *", { opacity: 0, y: 32 }, { opacity: 1, y: 0, stagger: 0.13, duration: 0.9, ease: "power2.out", scrollTrigger: { trigger: ".ab2-cta", start: "top 75%" } }); gsap.fromTo(
".ab3-cta-inner > *",
{ opacity: 0, y: 40 },
{
opacity: 1,
y: 0,
stagger: 0.12,
duration: 0.9,
ease: "power2.out",
scrollTrigger: { trigger: ".ab3-cta", start: "top 75%" },
},
);
}); });
return () => ctx.revert(); return () => ctx.revert();
}, []); }, []);
return ( return (
<article> <article className="ab3">
<SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" /> <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" />
{/* ── STATS ── */} {/* ── STATS ── */}
<section className="ab2-stats"> <section className="ab3-stats">
<div className="ab2-stats-inner"> <div className="ab3-stats-bg" />
<p className="ab2-eyebrow">PAL Networks in Numbers</p> <div className="ab3-stats-inner">
<div className="ab2-stats-grid"> <p className="ab3-label">PAL Networks in Numbers</p>
<div className="ab3-stats-grid">
{STATS.map((s, i) => ( {STATS.map((s, i) => (
<div className="ab2-si" key={s.label}> <div className="ab3-si" key={s.note}>
<span className="ab2-si-note">{s.note}</span> <span className="ab3-si-note">{s.note}</span>
<strong className="ab2-si-num" ref={(el) => (statRefs.current[i] = el)}> <strong className="ab3-si-num" ref={(el) => (statRefs.current[i] = el)}>
{s.num} {s.num}
{s.suffix} {s.suffix}
</strong> </strong>
<span className="ab2-si-lbl">{s.label}</span> <span className="ab3-si-lbl">{s.label}</span>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
{/* ── VIDEO ── */} {/* ── PHILOSOPHY (영상 배경 + 텍스트) ── */}
<section className="ab2-vid" ref={videoSecRef}> <section className="ab3-phil">
<video ref={videoRef} className="ab2-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline /> <video className="ab3-phil-vid" src="/images/uam.mp4" autoPlay muted loop playsInline />
<div className="ab2-vid-overlay" /> <div className="ab3-phil-overlay" />
<div className="ab2-vid-txt"> <div className="ab3-phil-inner">
<span className="ab2-vid-kicker">PAL Networks × UAM</span> <div className="ab3-phil-left">
<h2 className="ab2-vid-title"> <p className="ab3-label ab3-label--light">Our Philosophy</p>
미래의 하늘을 <div className="ab3-phil-words">
<br /> <span className="ab3-phil-line">항공산업의</span>
설계합니다 <span className="ab3-phil-line">기술혁신을</span>
</h2> <span className="ab3-phil-line ab3-phil-line--accent">선도합니다.</span>
<p className="ab2-vid-desc">
도심항공교통(UAM)의 안전한 운항을 위한
<br />
통합 관제 기술을 연구·개발합니다
</p>
</div>
</section>
{/* ── PHILOSOPHY ── */}
<section className="ab2-phil">
<div className="ab2-phil-inner">
<div className="ab2-phil-left">
<p className="ab2-eyebrow ab2-eyebrow--light">Our Philosophy</p>
<div className="ab2-phil-words">
{["항공산업의", "기술혁신을", "선도합니다."].map((w, i) => (
<span key={i} className={`ab2-phil-word${i === 2 ? " ab2-phil-word--grad" : ""}`}>
{w}
</span>
))}
</div> </div>
</div> </div>
<div className="ab2-phil-body"> <div className="ab3-phil-sub">
<div className="ab2-phil-badge"> <div className="ab3-phil-badge">
<span>2010년 설립 이후</span> <span>2010년 설립 이후</span>
<strong>항공 IT 한 길</strong> <strong>항공 IT 한 길</strong>
</div> </div>
<p className="ab2-phil-text">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p> <p className="ab3-phil-body">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
</div> </div>
</div> </div>
</section> </section>
{/* ── CORE VALUES ── */} {/* ── CORE VALUES ── */}
<section className="ab2-vals"> <section className="ab3-vals">
<div className="ab2-vals-inner"> <div className="ab3-vals-inner">
<p className="ab2-eyebrow">Core Values</p> <div className="ab3-vals-head">
<h2 className="ab2-vals-title">우리가 지키는 가치</h2> <p className="ab3-label">Core Values</p>
<div className="ab2-vals-list"> <h2 className="ab3-vals-title">
우리가
<br />
지키는 가치
</h2>
</div>
<div className="ab3-vals-list">
{VALUES.map((v) => ( {VALUES.map((v) => (
<div className="ab2-val-row" key={v.idx}> <div className="ab3-val-row" key={v.idx} style={{ "--val-img": `url(${v.img})` }}>
<div className="ab2-val-left"> <div className="ab3-val-img" />
<span className="ab2-val-idx">{v.idx}</span> <div className="ab3-val-meta">
<div className="ab2-val-divider" /> <span className="ab3-val-idx">{v.idx}</span>
</div> <span className="ab3-val-en">{v.en}</span>
<div className="ab2-val-body">
<span className="ab2-val-en">{v.en}</span>
<h3 className="ab2-val-name">{v.title}</h3>
</div> </div>
<p className="ab2-val-desc">{v.desc}</p> <h3 className="ab3-val-name">{v.title}</h3>
<div className="ab2-val-arrow">→</div> <p className="ab3-val-desc">{v.desc}</p>
<span className="ab3-val-arr">→</span>
</div> </div>
))} ))}
</div> </div>
@ -197,18 +227,21 @@ export default function AboutPage() {
</section> </section>
{/* ── AWARDS ── */} {/* ── AWARDS ── */}
<section className="ab2-awds"> <section className="ab3-awds">
<div className="ab2-awds-inner"> <div className="ab3-awds-bg" />
<p className="ab2-eyebrow ab2-eyebrow--light">Certifications & Awards</p> <div className="ab3-awds-inner">
<h2 className="ab2-awds-title">인증 및 수상</h2> <div className="ab3-awds-head">
<ul className="ab2-awds-list"> <p className="ab3-label ab3-label--light">Certifications & Awards</p>
<h2 className="ab3-awds-title">인증 및 수상</h2>
</div>
<ul className="ab3-awds-list">
{AWARDS.map((a, i) => ( {AWARDS.map((a, i) => (
<li className="ab2-awd-row" key={i}> <li className="ab3-awd-item" key={i}>
<span className="ab2-awd-yr">{a.year}</span> <span className="ab3-awd-yr">{a.year}</span>
<div className="ab2-awd-pip" /> <div className="ab3-awd-line" />
<div className="ab2-awd-body"> <div className="ab3-awd-body">
<strong className="ab2-awd-name">{a.title}</strong> <strong className="ab3-awd-name">{a.title}</strong>
<span className="ab2-awd-org">{a.org}</span> <span className="ab3-awd-org">{a.org}</span>
</div> </div>
</li> </li>
))} ))}
@ -217,22 +250,21 @@ export default function AboutPage() {
</section> </section>
{/* ── CTA ── */} {/* ── CTA ── */}
<section className="ab2-cta"> <section className="ab3-cta">
<div className="ab2-cta-noise" /> <div className="ab3-cta-bg" />
<div className="ab2-cta-glow" /> <div className="ab3-cta-inner">
<div className="ab2-cta-inner"> <span className="ab3-cta-chip">Contact Us</span>
<span className="ab2-cta-chip">Contact Us</span> <h2 className="ab3-cta-title">
<h2 className="ab2-cta-title">
팔네트웍스와 팔네트웍스와
<br /> <br />
함께하세요 함께하세요
</h2> </h2>
<p className="ab2-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p> <p className="ab3-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
<div className="ab2-cta-btns"> <div className="ab3-cta-btns">
<Link to="/contact/inquiry" className="ab2-cta-btn ab2-cta-btn--fill"> <Link to="/contact/inquiry" className="ab3-cta-btn ab3-cta-btn--fill">
문의하기 문의하기
</Link> </Link>
<Link to="/contact/recruit" className="ab2-cta-btn ab2-cta-btn--line"> <Link to="/contact/recruit" className="ab3-cta-btn ab3-cta-btn--line">
채용 안내 채용 안내
</Link> </Link>
</div> </div>

Write Preview
Loading…
Cancel
Save