leedano
d0491c3f0f
- react-router-dom 도입, /design 경로에 디자인 토큰/컴포넌트 카탈로그 페이지 추가 - SCAT 지도에서 하드코딩된 제주 해안선 좌표 제거, 인접 구간 기반 동적 방향 계산으로 전환 - @/ path alias 추가, SVG 아이콘 에셋 추가
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { ButtonCatalogSection } from './components/ButtonCatalogSection';
|
|
import { IconBadgeSection } from './components/IconBadgeSection';
|
|
import { CardSection } from './components/CardSection';
|
|
|
|
export const ComponentsContent = () => {
|
|
return (
|
|
<div className="pt-20 px-8 pb-16 flex flex-col gap-[121.5px] items-start justify-start max-w-[1440px]">
|
|
{/* 헤더 */}
|
|
<div className="flex flex-col gap-2 items-start justify-start self-stretch">
|
|
<h1
|
|
className="text-[#dfe2f3] font-korean text-3xl leading-9 font-medium self-stretch"
|
|
style={{ letterSpacing: '-0.75px' }}
|
|
>
|
|
시스템 컴포넌트 카탈로그
|
|
</h1>
|
|
<p className="text-[#bcc9cd] font-korean text-sm leading-5 font-medium max-w-2xl">
|
|
WING-OPS 해상 물류를 위한 시각적 아이덴티티 시스템입니다. 정밀도와 미션 크리티컬한 운영을 위해 설계된 고밀도 산업용 인터페이스입니다.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 섹션 */}
|
|
<ButtonCatalogSection />
|
|
<IconBadgeSection />
|
|
<CardSection />
|
|
|
|
{/* 푸터 */}
|
|
<div
|
|
className="border-t border-solid border-[rgba(22,78,99,0.10)] p-8 flex flex-row items-center justify-between self-stretch"
|
|
style={{ opacity: 0.4 }}
|
|
>
|
|
<span
|
|
className="text-[#64748b] font-sans text-[10px] leading-[15px] font-bold uppercase"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
© 2024 WING-OPS 해상 시스템
|
|
</span>
|
|
<span
|
|
className="text-[#22d3ee] font-korean text-[10px] leading-[15px] font-medium uppercase"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
전술 네비게이터 쉘 v2.4
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentsContent;
|