소개 첫 화면
서비스 소개 · 인사이트 페이지의 첫 화면이에요. 머리말 · 제목 · 한 줄 · 버튼 뒤로 AI 빛이 깔려요.
모바일PCPageAura · PageHero · HeroCta · Section
고르기#
- 이 이름은 소개 페이지 위쪽 바(PageTopBar · PageHero · MarketingFooter · ReadProgress)에 합쳤어요. 모양은 그대로이고, 새로 쓸 때는 정본을 써요.
소개 페이지 위쪽 바 문서 보기 →
인터페이스#
타입에서 자동으로 뽑은 표예요.
PageAura#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| tone | 'ai' | 'brand' | 'ai' | 색의 뜻이에요. |
PageHero#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| eyebrow* | - | string | 작은 머리말 - 무슨 페이지인지 한 단어로. |
| title* | - | string | string[] | 제목. 배열이면 줄마다 마스크 와이프가 순차로 걸린다(30~80ms 간격). |
| lead | - | ReactNode | |
| actions | - | ReactNode | |
| aside | - | ReactNode | 오른쪽(모바일에선 아래)에 놓을 것 - 목업·미리보기 등. |
HeroCta#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| href* | - | string | |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
| tone | 'solid' | 'ghost' | 'solid' | 'glow' | 색의 뜻이에요. |
| external | - | boolean |
Section#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| title | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| sub | - | ReactNode | 제목 아래 한 줄이에요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
| className | '' | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 제목은 h1이에요.
- 버튼(HeroCta)은 링크예요. 바깥 주소는 새 탭으로 열려요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |