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
ca656b666d
commit
319cd320eb
4 changed files with 356 additions and 170 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. 124
      src/components/SubHero.jsx
  2. 177
      src/css/common.css
  3. 13
      src/css/main.css
  4. 204
      src/pages/company/AboutPage.jsx

124
src/components/SubHero.jsx
Unescape View File

@ -2,39 +2,29 @@ import { useEffect, useRef, useState } from "react";
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
const menuMap = { const menuMap = {
"/company": { label: "Company", color: "dark" }, "/company": { label: "Company" },
"/uam": { label: "UAM / UATM", color: "dark" }, "/uam": { label: "UAM / UATM" },
"/business": { label: "Business", color: "dark" }, "/business": { label: "Business" },
"/solution": { label: "Solution", color: "dark" }, "/solution": { label: "Solution" },
"/contact": { label: "Contact Us", color: "dark" }, "/contact": { label: "Contact Us" },
}; };
export default function SubHero({ title, desc, navItems, bgImage }) { export default function SubHero({ title, desc, navItems, bgImage }) {
const { pathname } = useLocation(); const { pathname } = useLocation();
const topPath = "/" + pathname.split("/")[1]; const topPath = "/" + pathname.split("/")[1];
const topLabel = menuMap[topPath]?.label || ""; const topLabel = menuMap[topPath]?.label || "";
const currentLabel = navItems?.find((n) => n.to === pathname)?.label || ""; const curLabel = navItems?.find((n) => n.to === pathname)?.label || "";
const [dropOpen, setDropOpen] = useState(false); const [dropOpen, setDropOpen] = useState(false);
const bgRef = useRef(null); const [scrollY, setScrollY] = useState(0);
const txtRef = useRef(null);
const lineRef = useRef(null);
const fl1Ref = useRef(null);
const fl2Ref = useRef(null);
const descRef = useRef(null);
const dropRef = useRef(null); const dropRef = useRef(null);
// 히어로 진입 애니
useEffect(() => { useEffect(() => {
const t1 = setTimeout(() => bgRef.current?.classList.add("sh-bg--zoomed"), 80); const onScroll = () => setScrollY(window.scrollY);
const t2 = setTimeout(() => lineRef.current?.classList.add("sh-line--drawn"), 600); window.addEventListener("scroll", onScroll, { passive: true });
const t3 = setTimeout(() => fl1Ref.current?.classList.add("sh-fill--on"), 200); return () => window.removeEventListener("scroll", onScroll);
const t4 = setTimeout(() => fl2Ref.current?.classList.add("sh-fill--on"), 480); }, []);
const t5 = setTimeout(() => descRef.current?.classList.add("sh-desc--on"), 900);
return () => [t1, t2, t3, t4, t5].forEach(clearTimeout);
}, [pathname]);
// 외부 클릭 시 드롭다운 닫기
useEffect(() => { useEffect(() => {
const handler = (e) => { const handler = (e) => {
if (!dropRef.current?.contains(e.target)) setDropOpen(false); if (!dropRef.current?.contains(e.target)) setDropOpen(false);
@ -43,75 +33,85 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
return () => document.removeEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler);
}, []); }, []);
const parallaxY = scrollY * 0.45;
const fadeOpacity = Math.max(0, 1 - scrollY / 420);
const titleLines = typeof title === "string" ? title.split("\n") : [title]; const titleLines = typeof title === "string" ? title.split("\n") : [title];
return ( return (
<> <>
{/* 히어로 */} <section className="sh2">
<section className="sh"> <div
<div className="sh-bg" ref={bgRef} style={bgImage ? { backgroundImage: `linear-gradient(105deg,rgba(5,12,31,.97) 0%,rgba(5,12,31,.82) 38%,rgba(8,18,52,.65) 62%,rgba(5,12,31,.78) 100%),url(${bgImage})` } : {}} /> className="sh2-bg"
<div className="sh-glow" /> style={{
<div className="sh-dim" /> backgroundImage: bgImage ? `url(${bgImage})` : "none",
transform: `translateY(${parallaxY}px) scale(1.18)`,
<div className="sh-inner"> }}
{/* 브레드크럼 */} />
<nav className="sh-bc" aria-label="breadcrumb"> <div className="sh2-dim" />
<Link to="/main" className="sh-bc-static"> <div className="sh2-grain" />
Home <div className="sh2-glow" />
</Link> <div className="sh2-vline sh2-vline--l" />
<span className="sh-bc-sep">›</span> <div className="sh2-vline sh2-vline--r" />
{/* 드롭다운 */} <div className="sh2-inner" style={{ opacity: fadeOpacity }}>
<div className="sh-bc-drop" ref={dropRef}> <nav className="sh2-bc" aria-label="breadcrumb">
<button className="sh-bc-btn" onClick={() => setDropOpen((v) => !v)} aria-expanded={dropOpen} aria-haspopup="listbox"> <Link to="/main" className="sh2-bc-item">Home</Link>
<span className="sh2-bc-sep">—</span>
<div className="sh2-bc-drop" ref={dropRef}>
<button
className="sh2-bc-btn"
onClick={() => setDropOpen((v) => !v)}
aria-expanded={dropOpen}
>
{topLabel} {topLabel}
<svg className={`sh-bc-arrow${dropOpen ? " sh-bc-arrow--open" : ""}`} width="10" height="10" viewBox="0 0 10 10" fill="none"> <svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`}
<path d="M2 3.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> width="10" height="6" viewBox="0 0 10 6" fill="none">
<path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round"/>
</svg> </svg>
</button> </button>
{dropOpen && ( {dropOpen && (
<div className="sh-bc-menu" role="listbox"> <div className="sh2-bc-menu" role="listbox">
{navItems?.map((item) => ( {navItems?.map((item) => (
<Link key={item.to} to={item.to} className={`sh-bc-menu-item${item.to === pathname ? " sh-bc-menu-item--cur" : ""}`} onClick={() => setDropOpen(false)} role="option"> <Link key={item.to} to={item.to} role="option"
<span className="sh-bc-menu-dot" /> className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`}
onClick={() => setDropOpen(false)}>
{item.label} {item.label}
</Link> </Link>
))} ))}
</div> </div>
)} )}
</div> </div>
<span className="sh2-bc-sep">—</span>
<span className="sh-bc-sep">›</span> <span className="sh2-bc-cur">{curLabel}</span>
<span className="sh-bc-now" aria-current="page">
{currentLabel}
</span>
</nav> </nav>
{/* 타이틀 */} <div className="sh2-title-wrap">
<h2 className="sh-title">
{titleLines.map((line, i) => ( {titleLines.map((line, i) => (
<span key={i} className="sh-fill" ref={i === 0 ? fl1Ref : fl2Ref}> <h1 key={i} className="sh2-title" style={{ animationDelay: `${i * 0.14}s` }}>
{line} {line}
</span> </h1>
))} ))}
</h2>
{desc && (
<p className="sh-desc" ref={descRef}>
{desc}
</p>
)}
</div> </div>
<div className="sh-line" ref={lineRef} /> {desc && <p className="sh2-desc">{desc}</p>}
<div className="sh2-accent-line" />
</div>
<div className="sh2-scroll-hint">
<span>scroll</span>
<div className="sh2-scroll-bar" />
</div>
</section> </section>
{/* 서브 탭 네비 */}
{navItems?.length > 1 && ( {navItems?.length > 1 && (
<nav className="sh-nav" aria-label="Sub Navigation"> <nav className="sh2-nav" aria-label="Sub Navigation">
<div className="sh-nav-inner"> <div className="sh2-nav-inner">
{navItems.map((item) => ( {navItems.map((item) => (
<Link key={item.to} to={item.to} className={`sh-nav-tab${pathname === item.to ? " sh-nav-tab--active" : ""}`}> <Link key={item.to} to={item.to}
className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}>
{item.label} {item.label}
{pathname === item.to && <span className="sh2-nav-pip" />}
</Link> </Link>
))} ))}
</div> </div>

177
src/css/common.css
Unescape View File

@ -9,6 +9,21 @@
--color-primary-border:rgba(58,64,129,.2); --color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24); --color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18); --color-primary-shadow:rgba(58,64,129,.18);
/* ── Bold & Editorial 확장 팔레트 (로고 그라디언트 추출) ── */
--ink:#08080f;
--ink-2:#0e0e1a;
--ink-3:#161625;
--pink:#d94889;
--pink-light:#e58fb5;
--purple:#7b3fa0;
--purple-dark:#593a84;
--sky:#198dc7;
--grad-brand:linear-gradient(135deg,#d94889 0%,#7b3fa0 40%,#3A4081 75%,#198dc7 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%);
--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;}
@ -17,7 +32,6 @@ 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;}
@ -271,3 +285,164 @@ 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{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-bg{position:absolute;inset:-18% 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-grain{position:absolute;inset:0;opacity:.045;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-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--l{left: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-bc{display:flex;align-items:center;gap:0;margin-bottom:48px;}
.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-sep{margin:0 10px;font-size:10px;color:rgba(255,255,255,.12);letter-spacing:.05em;}
.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:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
.sh2-bc-arrow{transition:transform .22s ease;color:rgba(255,255,255,.3);}
.sh2-bc-arrow--open{transform:rotate(180deg);}
.sh2-bc-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:rgba(12,12,24,.95);backdrop-filter:blur(24px);border:1px solid rgba(123,63,160,.2);border-radius:10px;padding:6px;z-index:200;animation:sh2MenuIn .18s ease;}
.sh2-bc-menu-item{display:block;padding:9px 14px;font-size:13px;font-weight:500;color:rgba(255,255,255,.48);border-radius:7px;text-decoration:none;transition:background .15s,color .15s;}
.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-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{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-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-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-scroll-hint{position:absolute;bottom:36px;left: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-bar{width:40px;height:1px;background:rgba(255,255,255,.12);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-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-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:hover{color:rgba(255,255,255,.7);}
.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;}
@keyframes sh2MenuIn{
from{opacity:0;transform:translateY(-6px) scale(.97);}
to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes sh2TitleIn{
to{opacity:1;transform:translateY(0);}
}
@keyframes sh2FadeUp{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes sh2ScrollBar{
0%{left:-100%;}
50%{left:0;}
100%{left:100%;}
}
/*ab2 about page bold editorial*/
.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;}
.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);}
.ab2-stats-inner{max-width:1440px;margin:0 auto;}
.ab2-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(17,17,17,.06);}
.ab2-si{padding:40px 40px 40px 0;border-right:1px solid rgba(17,17,17,.06);position:relative;}
.ab2-si:last-child{border-right:0;}
.ab2-si:not(:first-child){padding-left:40px;}
.ab2-si-note{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;}
.ab2-si-num{display:block;font-size:clamp(52px,5.5vw,88px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--ink);}
.ab2-si-lbl{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.35);}
.ab2-vid{height:520px;position:relative;overflow:hidden;background:var(--ink);}
.ab2-vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;}
.ab2-vid-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,15,.1) 0%,rgba(8,8,15,.72) 100%);}
.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;}
.ab2-vid-kicker{font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:20px;}
.ab2-vid-title{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:18px;}
.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;}
.ab2-phil-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.ab2-phil-words{display:flex;flex-direction:column;gap:4px;}
.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);}
.ab2-phil-word--grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ab2-phil-body{padding-top:16px;}
.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;}
.ab2-phil-badge span{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.3);}
.ab2-phil-badge strong{font-size:15px;font-weight:800;color:#fff;}
.ab2-phil-text{font-size:15px;line-height:2;color:rgba(255,255,255,.32);word-break:keep-all;}
.ab2-vals{background:#fff;padding:140px 80px;}
.ab2-vals-inner{max-width:1440px;margin:0 auto;}
.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;}
.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;}
.ab2-val-row:last-child{border-bottom:1px solid rgba(17,17,17,.07);}
.ab2-val-row:hover .ab2-val-arrow{color:var(--pink);transform:translateX(6px);}
.ab2-val-row:hover .ab2-val-divider{background:var(--pink);}
.ab2-val-left{display:flex;align-items:center;gap:16px;}
.ab2-val-idx{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(17,17,17,.15);}
.ab2-val-divider{flex:1;height:1px;background:rgba(17,17,17,.08);transition:background .3s;}
.ab2-val-en{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:6px;}
.ab2-val-name{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:0;}
.ab2-val-desc{font-size:14px;line-height:1.85;color:rgba(17,17,17,.44);word-break:keep-all;margin:0;}
.ab2-val-arrow{font-size:18px;color:rgba(17,17,17,.15);transition:color .3s,transform .3s;}
.ab2-awds{background:var(--ink-2);padding:140px 80px;}
.ab2-awds-inner{max-width:1440px;margin:0 auto;}
.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;}
.ab2-awds-list{list-style:none;padding:0;margin:0;}
.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);}
.ab2-awd-row:last-child{border-bottom:1px solid rgba(255,255,255,.05);}
.ab2-awd-yr{font-size:13px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.22);}
.ab2-awd-pip{width:2px;height:40px;background:linear-gradient(180deg,transparent,var(--pink),transparent);border-radius:999px;}
.ab2-awd-body{display:flex;flex-direction:column;gap:5px;}
.ab2-awd-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.ab2-awd-org{font-size:13px;color:rgba(255,255,255,.28);}
.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;}
.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;}
.ab2-cta-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.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;}
.ab2-cta-title{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.06em;color:#fff;margin-bottom:20px;}
.ab2-cta-desc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.38);margin-bottom:52px;word-break:keep-all;}
.ab2-cta-btns{display:flex;align-items:center;gap:14px;}
.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;}
.ab2-cta-btn--fill{background:var(--grad-brand-h);color:#fff;}
.ab2-cta-btn--fill:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(217,72,137,.3);}
.ab2-cta-btn--line{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);}
.ab2-cta-btn--line:hover{border-color:rgba(255,255,255,.3);color:#fff;transform:translateY(-3px);}
@media (max-width:1280px){
.sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:48px;padding-right:48px;}
.sh2-vline--l{left:48px;}
.sh2-vline--r{right:48px;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:48px;padding-right:48px;}
.ab2-val-row{grid-template-columns:72px 200px 1fr 32px;gap:24px;}
}
@media (max-width:1024px){
.sh2-inner,.sh2-scroll-hint,.sh2-nav-inner{padding-left:32px;padding-right:32px;}
.sh2-vline{display:none;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds,.ab2-cta{padding-left:32px;padding-right:32px;}
.ab2-stats-grid{grid-template-columns:repeat(2,1fr);}
.ab2-si{padding-bottom:40px;border-bottom:1px solid rgba(17,17,17,.06);}
.ab2-si:nth-child(2n){border-right:0;}
.ab2-si:nth-child(3),.ab2-si:nth-child(4){border-bottom:0;}
.ab2-phil-inner{grid-template-columns:1fr;gap:56px;}
.ab2-val-row{grid-template-columns:60px 1fr;grid-template-rows:auto auto;gap:16px;}
.ab2-val-desc{grid-column:1/-1;}
.ab2-val-arrow{display:none;}
}
@media (max-width:768px){
.sh2{max-height:680px;}
.sh2-inner{padding-left:20px;padding-right:20px;}
.sh2-title{font-size:clamp(40px,12vw,64px);}
.sh2-scroll-hint{left:20px;}
.sh2-nav-inner{padding-left:20px;padding-right:20px;}
.sh2-nav-tab{padding:0 14px;font-size:12px;}
.ab2-stats,.ab2-phil,.ab2-vals,.ab2-awds{padding:80px 20px;}
.ab2-cta{padding:100px 20px;}
.ab2-stats-grid{grid-template-columns:1fr 1fr;}
.ab2-val-row{padding:30px 0;}
.ab2-awd-row{grid-template-columns:60px 2px 1fr;gap:20px;padding:28px 0;}
.ab2-cta-btns{flex-direction:column;width:100%;}
.ab2-cta-btn{width:100%;max-width:320px;}
}

13
src/css/main.css
Unescape View File

@ -1,4 +1,15 @@
: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);} :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;} html{scrollbar-gutter:inherit;}
body{overflow-x:hidden;} body{overflow-x:hidden;}

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

@ -14,17 +14,17 @@ const COMPANY_NAV = [
]; ];
const STATS = [ const STATS = [
{ num: 2010, suffix: "", label: "설립연도" }, { num: 2010, suffix: "", label: "설립연도", note: "FOUNDED" },
{ num: 50, suffix: "+", label: "완료 프로젝트" }, { num: 50, suffix: "+", label: "완료 프로젝트", note: "PROJECTS" },
{ num: 15, suffix: "+", label: "주요 고객사" }, { num: 15, suffix: "+", label: "주요 고객사", note: "CLIENTS" },
{ num: 10, suffix: "+", label: "R&D 전문인력" }, { num: 10, suffix: "+", label: "R&D 전문인력", note: "EXPERTS" },
]; ];
const VALUES = [ const VALUES = [
{ num: "01", title: "기술 혁신", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다.", img: "/images/img1.jpg" }, { idx: "01", title: "기술 혁신", en: "Innovation", desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며 미래 모빌리티 시대를 선도합니다." },
{ num: "02", title: "신뢰와 책임", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다.", img: "/images/img2.jpg" }, { idx: "02", title: "신뢰와 책임", en: "Trust", desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼 모든 서비스에 안전과 신뢰를 최우선으로 합니다." },
{ num: "03", title: "파트너십", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.", img: "/images/img3.jpg" }, { idx: "03", title: "파트너십", en: "Partnership", desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다." },
{ num: "04", title: "전문성", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.", img: "/images/img4.jpg" }, { idx: "04", title: "전문성", en: "Expertise", desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다." },
]; ];
const AWARDS = [ const AWARDS = [
@ -55,44 +55,29 @@ export default function AboutPage() {
useEffect(() => { useEffect(() => {
const ctx = gsap.context(() => { const ctx = gsap.context(() => {
// 영상 패럴랙스 /* 영상 패럴랙스 */
gsap.to(videoRef.current, { gsap.to(videoRef.current, {
scale: 1.1, scale: 1.12,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 }, scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "bottom top", scrub: 2 },
}); });
gsap.to(".ab-vid-txt", { gsap.to(".ab2-vid-txt", {
y: -80, y: -90,
opacity: 0, opacity: 0,
scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "55% top", scrub: 1 }, scrollTrigger: { trigger: videoSecRef.current, start: "top top", end: "60% top", scrub: 1 },
}); });
// 철학 텍스트 라인 /* 숫자 카운터 + 페이드 */
gsap.fromTo(".ab-phil-line", { opacity: 0, x: -40 }, { opacity: 1, x: 0, stagger: 0.18, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
// 철학 오른쪽
gsap.fromTo(".ab-phil-right", { opacity: 0, x: 50 }, { opacity: 1, x: 0, duration: 1.1, ease: "power3.out", scrollTrigger: { trigger: ".ab-phil", start: "top 68%" } });
gsap.fromTo(".ab-phil-body", { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-phil", start: "top 55%" } });
// 핵심가치
gsap.fromTo(".ab-val-item", { opacity: 0, y: 40 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.7, ease: "power3.out", scrollTrigger: { trigger: ".ab-vals", start: "top 72%" } });
// 수상
gsap.fromTo(".ab-awd-row", { opacity: 0, y: 22 }, { opacity: 1, y: 0, stagger: 0.1, duration: 0.6, ease: "power2.out", scrollTrigger: { trigger: ".ab-awds", start: "top 76%" } });
// CTA
gsap.fromTo(".ab-cta-inner > *", { opacity: 0, y: 28 }, { opacity: 1, y: 0, stagger: 0.14, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: ".ab-cta", start: "top 75%" } });
// stats fade
gsap.fromTo( gsap.fromTo(
".ab-si", ".ab2-si",
{ opacity: 0, y: 32 }, { opacity: 0, y: 40 },
{ {
opacity: 1, opacity: 1,
y: 0, y: 0,
stagger: 0.1, stagger: 0.1,
duration: 0.7, duration: 0.8,
ease: "power3.out", ease: "power3.out",
scrollTrigger: { scrollTrigger: {
trigger: ".ab-stats", trigger: ".ab2-stats",
start: "top 78%", start: "top 78%",
onEnter: () => { onEnter: () => {
if (statDone.current) return; if (statDone.current) return;
@ -105,8 +90,20 @@ export default function AboutPage() {
}, },
}, },
); );
});
/* 철학 */
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(".ab2-phil-body", { opacity: 0, x: 40 }, { opacity: 1, x: 0, duration: 1, ease: "power3.out", scrollTrigger: { trigger: ".ab2-phil", start: "top 62%" } });
/* 핵심가치 */
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(".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%" } });
/* 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%" } });
});
return () => ctx.revert(); return () => ctx.revert();
}, []); }, []);
@ -114,37 +111,37 @@ export default function AboutPage() {
<article> <article>
<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 ── */}
<section className="ab-stats"> <section className="ab2-stats">
<div className="ab-stats-inner"> <div className="ab2-stats-inner">
<span className="ab-stats-ew">PAL Networks in Numbers</span> <p className="ab2-eyebrow">PAL Networks in Numbers</p>
<div className="ab-stats-grid"> <div className="ab2-stats-grid">
{STATS.map((s, i) => ( {STATS.map((s, i) => (
<div className="ab-si" key={s.label}> <div className="ab2-si" key={s.label}>
<strong className="ab-si-num" ref={(el) => (statRefs.current[i] = el)}> <span className="ab2-si-note">{s.note}</span>
<strong className="ab2-si-num" ref={(el) => (statRefs.current[i] = el)}>
{s.num} {s.num}
{s.suffix} {s.suffix}
</strong> </strong>
<span className="ab-si-lbl">{s.label}</span> <span className="ab2-si-lbl">{s.label}</span>
<span className="ab-si-bar" />
</div> </div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
{/* 영상 */} {/* ── VIDEO ── */}
<section className="ab-vid" ref={videoSecRef}> <section className="ab2-vid" ref={videoSecRef}>
<video ref={videoRef} className="ab-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline /> <video ref={videoRef} className="ab2-vid-bg" src="/images/uam.mp4" autoPlay muted loop playsInline />
<div className="ab-vid-overlay" /> <div className="ab2-vid-overlay" />
<div className="ab-vid-txt"> <div className="ab2-vid-txt">
<span className="ab-vid-kicker">PAL Networks × UAM</span> <span className="ab2-vid-kicker">PAL Networks × UAM</span>
<h2 className="ab-vid-title"> <h2 className="ab2-vid-title">
미래의 하늘을 미래의 하늘을
<br /> <br />
설계합니다 설계합니다
</h2> </h2>
<p className="ab-vid-desc"> <p className="ab2-vid-desc">
도심항공교통(UAM)의 안전한 운항을 위한 도심항공교통(UAM)의 안전한 운항을 위한
<br /> <br />
통합 관제 기술을 연구·개발합니다 통합 관제 기술을 연구·개발합니다
@ -152,63 +149,66 @@ export default function AboutPage() {
</div> </div>
</section> </section>
{/* 철학 */} {/* ── PHILOSOPHY ── */}
<section className="ab-phil"> <section className="ab2-phil">
<div className="ab-phil-inner"> <div className="ab2-phil-inner">
<div className="ab-phil-left"> <div className="ab2-phil-left">
<span className="ab-phil-ew">Our Philosophy</span> <p className="ab2-eyebrow ab2-eyebrow--light">Our Philosophy</p>
<span className="ab-phil-line">항공산업의</span> <div className="ab2-phil-words">
<span className="ab-phil-line">기술혁신을</span> {["항공산업의", "기술혁신을", "선도합니다."].map((w, i) => (
<span className="ab-phil-line ab-phil-line--pt">선도합니다.</span> <span key={i} className={`ab2-phil-word${i === 2 ? " ab2-phil-word--grad" : ""}`}>
</div> {w}
<div className="ab-phil-right"> </span>
<div className="ab-phil-img-wrap"> ))}
<img src="/images/img1.jpg" alt="항공 관제" className="ab-phil-img" /> </div>
<div className="ab-phil-badge"> </div>
<div className="ab2-phil-body">
<div className="ab2-phil-badge">
<span>2010년 설립 이후</span> <span>2010년 설립 이후</span>
<strong>항공 IT 한 길</strong> <strong>항공 IT 한 길</strong>
</div> </div>
</div> <p className="ab2-phil-text">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
<p className="ab-phil-body">팔네트웍스는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM 솔루션까지 항공 IT 분야의 핵심 기술을 꾸준히 개발해왔습니다. 인천광역시 로봇랜드에서 UAM/UATM 미래 기술을 선행 연구하고 있습니다.</p>
</div> </div>
</div> </div>
</section> </section>
{/* 핵심가치 */} {/* ── CORE VALUES ── */}
<section className="ab-vals"> <section className="ab2-vals">
<div className="ab-vals-inner"> <div className="ab2-vals-inner">
<span className="ab-vals-ew">Core Values</span> <p className="ab2-eyebrow">Core Values</p>
<h2 className="ab-vals-title">우리가 지키는 가치</h2> <h2 className="ab2-vals-title">우리가 지키는 가치</h2>
<div className="ab-vals-list"> <div className="ab2-vals-list">
{VALUES.map((v) => ( {VALUES.map((v) => (
<div className="ab-val-item" key={v.num}> <div className="ab2-val-row" key={v.idx}>
<span className="ab-val-num">{v.num}</span> <div className="ab2-val-left">
<div className="ab-val-body"> <span className="ab2-val-idx">{v.idx}</span>
<h3 className="ab-val-name">{v.title}</h3> <div className="ab2-val-divider" />
<p className="ab-val-desc">{v.desc}</p>
</div> </div>
<div className="ab-val-img-wrap"> <div className="ab2-val-body">
<img src={v.img} alt={v.title} className="ab-val-img" /> <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>
<div className="ab2-val-arrow">→</div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
{/* 수상 */} {/* ── AWARDS ── */}
<section className="ab-awds"> <section className="ab2-awds">
<div className="ab-awds-inner"> <div className="ab2-awds-inner">
<span className="ab-awds-ew">Certifications & Awards</span> <p className="ab2-eyebrow ab2-eyebrow--light">Certifications & Awards</p>
<h2 className="ab-awds-title">인증 및 수상</h2> <h2 className="ab2-awds-title">인증 및 수상</h2>
<ul className="ab-awds-list"> <ul className="ab2-awds-list">
{AWARDS.map((a, i) => ( {AWARDS.map((a, i) => (
<li className="ab-awd-row" key={i}> <li className="ab2-awd-row" key={i}>
<span className="ab-awd-yr">{a.year}</span> <span className="ab2-awd-yr">{a.year}</span>
<div className="ab-awd-bar" /> <div className="ab2-awd-pip" />
<div> <div className="ab2-awd-body">
<strong className="ab-awd-name">{a.title}</strong> <strong className="ab2-awd-name">{a.title}</strong>
<span className="ab-awd-org">{a.org}</span> <span className="ab2-awd-org">{a.org}</span>
</div> </div>
</li> </li>
))} ))}
@ -216,23 +216,23 @@ export default function AboutPage() {
</div> </div>
</section> </section>
{/* CTA */} {/* ── CTA ── */}
<section className="ab-cta"> <section className="ab2-cta">
<div className="ab-cta-bg" /> <div className="ab2-cta-noise" />
<div className="ab-cta-glow" /> <div className="ab2-cta-glow" />
<div className="ab-cta-inner"> <div className="ab2-cta-inner">
<span className="ab-cta-chip">Contact Us</span> <span className="ab2-cta-chip">Contact Us</span>
<h2 className="ab-cta-title"> <h2 className="ab2-cta-title">
팔네트웍스와 팔네트웍스와
<br /> <br />
함께하세요 함께하세요
</h2> </h2>
<p className="ab-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p> <p className="ab2-cta-desc">파트너십 문의, 채용, 사업 협력 등 무엇이든 편하게 연락주세요.</p>
<div className="ab-cta-btns"> <div className="ab2-cta-btns">
<Link to="/contact/inquiry" className="ab-cta-btn ab-cta-btn--w"> <Link to="/contact/inquiry" className="ab2-cta-btn ab2-cta-btn--fill">
문의하기 문의하기
</Link> </Link>
<Link to="/contact/recruit" className="ab-cta-btn ab-cta-btn--g"> <Link to="/contact/recruit" className="ab2-cta-btn ab2-cta-btn--line">
채용 안내 채용 안내
</Link> </Link>
</div> </div>

Write Preview
Loading…
Cancel
Save