Social Proof Phones
docs/hcs-asset/social-proof-phones.md
id: 'social-proof-phones' status: in-progress
Social Proof Phones
Reference
- URL: https://biodance.com/pages/more-than-hype
- 위치: 히어로 아래 두 번째 섹션 (Section 1)
- 구조: 2컬럼 — 스마트폰 목업 2개 (좌) + 서브타이틀/헤딩/설명 텍스트 (우)
- 디자인: 흰색 배경, 다크 폰 프레임 (border-radius: 28px), 노치 디테일, serif 헤딩
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/social-proof-phones/ - Status: implemented
- 반응형: 데스크톱 2컬럼 → 모바일 1컬럼 (폰 센터 정렬, 텍스트 센터)
- i18n: ko, en, ja
- Props: subtitle, heading, description, phones[] (imageUrl, imageAlt)
Prerequisites
makitt-server (shop-api)
| API | Method | Endpoint | Status |
|---|---|---|---|
| — | — | — | N/A (정적 콘텐츠) |
makitt-server (admin-api)
| API | Method | Endpoint | Status |
|---|---|---|---|
| — | — | — | N/A (정적 콘텐츠) |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|---|---|
| — | 정적 콘텐츠이므로 도메인 모델 불필요 | N/A |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|---|---|
| — | 정적 콘텐츠이므로 어드민 UI 불필요 | N/A |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|---|---|
section renderer | 섹션 컨테이너 | available |
container renderer | 폰 프레임, 레이아웃 컨테이너 | available |
heading renderer | 헤딩 텍스트 | available |
text renderer | 서브타이틀, 설명 | available |
image renderer | 폰 내부 이미지 | available |
HCS Conversion Notes
- 폰 프레임은
container(borderRadius: 28px, overflow: hidden, backgroundColor: #1a1a1a)로 구현 - 노치는
container(position: absolute, borderRadius: 12px)로 장식적 디테일 표현 - 폰 내부 콘텐츠는 이미지 (포스터 프레임)로 표현, 향후 비디오 타입 지원 시
video노드로 전환 가능 transform: translateX(-50%)는 HCS CSS에서 직접 지원