4 changed files with 161 additions and 12 deletions
@ -1,23 +1,117 @@
|
||||
import { Link } from "react-router-dom"; |
||||
|
||||
const footerNav = [ |
||||
{ |
||||
title: "COMPANY", |
||||
items: [ |
||||
{ label: "회사소개", to: "/company/about" }, |
||||
{ label: "연혁", to: "/company/history" }, |
||||
{ label: "고객 및 협력사", to: "/company/partners" }, |
||||
{ label: "찾아오시는 길", to: "/company/location" }, |
||||
], |
||||
}, |
||||
{ |
||||
title: "UAM/UATM", |
||||
items: [ |
||||
{ label: "소개", to: "/uam/intro" }, |
||||
{ label: "도입사례", to: "/uam/case" }, |
||||
], |
||||
}, |
||||
{ |
||||
title: "BUSINESS", |
||||
items: [ |
||||
{ label: "System Integration", to: "/business/si" }, |
||||
{ label: "R&D", to: "/business/rnd" }, |
||||
{ label: "운영 · 유지보수", to: "/business/maintenance" }, |
||||
], |
||||
}, |
||||
{ |
||||
title: "SOLUTION", |
||||
items: [ |
||||
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
||||
{ label: "IBE", to: "/solution/ibe" }, |
||||
{ label: "스마트 관광 예약", to: "/solution/smart-tour" }, |
||||
{ label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, |
||||
], |
||||
}, |
||||
{ |
||||
title: "CONTACT", |
||||
items: [ |
||||
{ label: "문의하기", to: "/contact/inquiry" }, |
||||
{ label: "채용정보", to: "/contact/recruit" }, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
function Footer() { |
||||
return ( |
||||
<footer className="site-footer"> |
||||
<div className="footer-inner"> |
||||
<div className="footer-left"> |
||||
<strong className="footer-logo">PALNETWORKS</strong> |
||||
<p className="footer-copy">© 2026 PALNETWORKS. All rights reserved.</p> |
||||
<div className="footer-top"> |
||||
<div className="footer-brand"> |
||||
<Link to="/main" className="footer-logo"> |
||||
<img src="./images/pal_logo_wh.png" alt="PAL Networks" /> |
||||
</Link> |
||||
</div> |
||||
|
||||
<nav className="footer-nav" aria-label="Footer Navigation"> |
||||
{footerNav.map((group) => ( |
||||
<div className="footer-nav-group" key={group.title}> |
||||
<h5>{group.title}</h5> |
||||
<ul> |
||||
{group.items.map((item) => ( |
||||
<li key={item.label}> |
||||
<Link to={item.to}>{item.label}</Link> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
))} |
||||
</nav> |
||||
</div> |
||||
|
||||
<div className="footer-mid"> |
||||
<div className="footer-info"> |
||||
<p> |
||||
<span className="info-item strong">(주) PALNETWORKS</span> |
||||
<span className="sep">|</span> |
||||
<span className="info-item">대표. 최현식</span> |
||||
<span className="sep">|</span> |
||||
<span className="info-item">사업자등록번호. 393-81-00110</span> |
||||
</p> |
||||
<p> |
||||
<span className="info-item">인천광역시 서구 로봇랜드로 155-11 로봇랜드 14층 1401~2호</span> |
||||
</p> |
||||
<p> |
||||
<span className="info-item"> |
||||
<span className="strong">TEL.</span> 032-727-5909 |
||||
</span> |
||||
<span className="sep">|</span> |
||||
<span className="info-item"> |
||||
<span className="strong">FAX.</span> 032-727-5908 |
||||
</span> |
||||
<span className="sep">|</span> |
||||
<span className="info-item"> |
||||
<span className="strong">E-mail.</span> <a href="mailto:help@palnet.co.kr">help@palnet.co.kr</a> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="footer-right"> |
||||
<a href="#none" className="footer-link"> |
||||
Privacy Policy |
||||
</a> |
||||
<a href="#none" className="footer-link"> |
||||
Terms of Use |
||||
</a> |
||||
<div className="footer-bot"> |
||||
<p className="footer-copy">Copyright © (주) PALNETWORKS. All rights reserved.</p> |
||||
<ul className="footer-policy"> |
||||
<li> |
||||
<a href="#none">Privacy Policy</a> |
||||
</li> |
||||
<li> |
||||
<a href="#none">Terms of Use</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
) |
||||
); |
||||
} |
||||
|
||||
export default Footer |
||||
export default Footer; |
||||
|
||||
@ -0,0 +1,44 @@
|
||||
.site-footer{background:#0a0a0a;color:rgba(255,255,255,.55);} |
||||
.footer-inner{max-width:1440px;margin:0 auto;padding:60px 40px 28px;} |
||||
|
||||
.footer-top{display:grid;grid-template-columns:1.2fr 3.8fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);}.footer-logo{display:inline-block;width:fit-content;} |
||||
.footer-logo{min-width:200px} |
||||
.footer-logo img{display:block;height:40px;width:auto;} |
||||
.footer-tagline{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);letter-spacing:.2px;} |
||||
|
||||
.footer-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;} |
||||
.footer-nav-group h5{margin:0 0 14px;font-size:12px;font-weight:600;color:#fff;letter-spacing:.6px;} |
||||
.footer-nav-group ul{list-style:none;padding:0;margin:0;} |
||||
.footer-nav-group li{margin-bottom:8px;} |
||||
.footer-nav-group a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;} |
||||
.footer-nav-group a:hover{color:#fff;} |
||||
|
||||
.footer-mid{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);} |
||||
.footer-info p{margin:0 0 4px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.5);} |
||||
.footer-info p:last-child{margin-bottom:0;} |
||||
.footer-info .strong{color:rgba(255,255,255,.85);font-weight:500;} |
||||
.footer-info .sep{display:inline-block;margin:0 10px;color:rgba(255,255,255,.2);} |
||||
.footer-info a{color:inherit;text-decoration:none;} |
||||
.footer-info a:hover{color:#fff;} |
||||
|
||||
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;} |
||||
.footer-copy{margin:0;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.2px;} |
||||
.footer-policy{list-style:none;padding:0;margin:0;display:flex;gap:20px;} |
||||
.footer-policy a{font-size:12px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;} |
||||
.footer-policy a:hover{color:#fff;} |
||||
|
||||
@media (max-width:1024px){ |
||||
.footer-inner{padding:48px 24px 24px;} |
||||
.footer-top{grid-template-columns:1fr;gap:32px;padding-bottom:28px;} |
||||
.footer-nav{grid-template-columns:repeat(3,1fr);gap:24px 16px;} |
||||
.footer-bot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px;} |
||||
} |
||||
@media (max-width:640px){ |
||||
.footer-nav{grid-template-columns:repeat(2,1fr);} |
||||
} |
||||
@media (max-width:540px){ |
||||
.footer-info p{margin-bottom:14px;} |
||||
.footer-info p:last-child{margin-bottom:0;} |
||||
.footer-info .sep{display:none;} |
||||
.footer-info .info-item{display:block;line-height:1.9;} |
||||
} |
||||
Loading…
Reference in new issue