diff --git a/src/components/SubHero.jsx b/src/components/SubHero.jsx new file mode 100644 index 0000000..14ab6a9 --- /dev/null +++ b/src/components/SubHero.jsx @@ -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 ( + + + + ); +} + +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 ( + <> +
+
+ {/* Breadcrumb */} + + + {label && {label}} +

{title}

+ {desc &&

{desc}

} +
+
+ + {/* Sub Nav */} + {navItems && navItems.length > 1 && ( +
+ +
+ )} + + ); +} diff --git a/src/css/common.css b/src/css/common.css index b734f8d..ab82693 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -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;} } \ No newline at end of file diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..f6ae19f --- /dev/null +++ b/src/css/main.css @@ -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;} +} diff --git a/src/hooks/useFadeIn.js b/src/hooks/useFadeIn.js new file mode 100644 index 0000000..df01cfe --- /dev/null +++ b/src/hooks/useFadeIn.js @@ -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; +} diff --git a/src/main.jsx b/src/main.jsx index 39f371c..fd4a290 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -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( diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx index 8d50265..a4697b0 100644 --- a/src/pages/company/AboutPage.jsx +++ b/src/pages/company/AboutPage.jsx @@ -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: ( + + ), + }, + { + title: "신뢰와 책임", + desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼, 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", + icon: ( + + ), + }, + { + title: "파트너십", + desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", + icon: ( + + ), + }, + { + title: "전문성", + desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", + icon: ( + + ), + }, + { + title: "지속 성장", + desc: "UAM·UATM 등 차세대 항공 기술을 선행 연구하며, 산업 변화에 능동적으로 대응합니다.", + icon: ( + + ), + }, + { + title: "사회적 가치", + desc: "안전한 하늘길과 신뢰 가능한 IT 인프라를 통해 사회 전반에 기여하는 기업으로 성장합니다.", + icon: ( + + ), + }, +]; + +const AWARDS = [ + { title: "인천 항공산업 선도기업 유망기업 선정", desc: "인천시 · 인천테크노파크" }, + { title: "소프트웨어 품질인증 GS 인증 획득", desc: "한국정보통신기술협회(TTA)" }, + { title: "기업부설연구소 인정", desc: "한국산업기술진흥협회" }, + { title: "조달청 우수제품 지정", desc: "비행상황관제 시스템" }, +]; + +export default function AboutPage() { + const ref = useFadeIn(); + return ( -
-
-
-

회사소개

-

About PAL Networks

-
-
- -
-
-

기업 철학과 핵심 가치

-

- PAL Networks는 항공 데이터와 통합 관제 기술을 기반으로 -
- 안전한 하늘길과 신뢰할 수 있는 IT 서비스를 만들어갑니다. -

-
-
-
+
+ + +
+ + {/* 회사 개요 */} +
+
+
+ About PAL Networks +

항공산업의 기술혁신을 +선도하는 파트너

+

+ 팔네트웍스(PAL Networks)는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM(무인항공기 교통관리) 솔루션 등 항공 IT 분야의 핵심 기술을 개발·운영해 온 전문 기업입니다. +

+

+ 공공·민간 고객사의 시스템 구축부터 장기 운영·유지보수까지 전 과정을 책임지며, 인천광역시 로봇랜드에 본사를 두고 항공 미래 모빌리티(UAM/UATM) 기술을 선행 연구하고 있습니다. +

+
+ +
+
+ 2010 + 설립연도 +
+
+ 50+ + 완료 프로젝트 +
+
+ 15+ + 주요 고객사 +
+
+ 10+ + R&D 전문 인력 +
+
+
+
+ + {/* 핵심 가치 */} +
+ Core Values +

우리가 지키는 6가지 가치

+
+ {VALUES.map((v, i) => ( +
+
{v.icon}
+

{v.title}

+

{v.desc}

+
+ ))} +
+
+ + {/* 인증 및 수상 */} +
+ Certifications & Awards +

인증 및 수상 이력

+
+ {AWARDS.map((a, i) => ( +
+
+
+

{a.title}

+

{a.desc}

+
+
+ ))} +
+
+ +
+
); } - -export default AboutPage; diff --git a/src/pages/company/HistoryPage.jsx b/src/pages/company/HistoryPage.jsx index 04d7954..d13df14 100644 --- a/src/pages/company/HistoryPage.jsx +++ b/src/pages/company/HistoryPage.jsx @@ -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 ( -
-
-
-

연혁

-

History

-
-
+
+ + +
+
+ History +

연혁

-
-
-

주요 실적과 성장 과정

-

PAL Networks가 걸어온 길과 주요 성과를 소개합니다.

-
-
-
+
+ {HISTORY.map((group, gi) => ( +
+
{group.year}
+
+ {group.items.map((item, ii) => ( +
+ {item.month} +

{item.text}

+
+ ))} +
+
+ ))} +
+ + + ); } - -export default HistoryPage; diff --git a/src/pages/company/LocationPage.jsx b/src/pages/company/LocationPage.jsx index 4794652..f86aa64 100644 --- a/src/pages/company/LocationPage.jsx +++ b/src/pages/company/LocationPage.jsx @@ -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 ( + + ); +} +function IconPhone() { + return ( + + ); +} +function IconFax() { + return ( + + ); +} +function IconMail() { return ( -
-
-
-

찾아오시는 길

-

Location

-
-
- -
-
-

위치 및 연락처 안내

-

PAL Networks 본사 위치와 연락처를 안내드립니다.

-
-
-
+ ); } -export default LocationPage; +const INFO = [ + { + icon: , + label: "주소", + value: "인천광역시 서구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호", + }, + { + icon: , + label: "전화", + value: "032-727-5909", + href: "tel:032-727-5909", + }, + { + icon: , + label: "팩스", + value: "032-727-5908", + }, + { + icon: , + 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 ( +
+ + +
+
+
+ {/* 지도 */} +
+
+