50 lines
1.8 KiB
TypeScript
50 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-body-2 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-caption leading-[15px] font-bold uppercase"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
© 2024 WING-OPS 해상 시스템
|
|
</span>
|
|
<span
|
|
className="text-[#22d3ee] font-korean text-caption leading-[15px] font-medium uppercase"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
전술 네비게이터 쉘 v2.4
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentsContent;
|