feat(gyeol): IntroStep — CONTOUR 로고 그라데이션 + 부제 + 시작 버튼

영문 단독 브랜드, 한글 부제 "나를 더 선명하게 이해하는 3분".
보라/시안 그라데이션 텍스트, 7 질문 안내.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-16 05:23:40 +09:00
parent b54e34feba
commit 454b7abf88

View File

@@ -0,0 +1,44 @@
'use client';
interface Props {
onStart: () => void;
}
/**
* 인트로 step — CONTOUR 로고 + 한글 부제 + 시작 버튼.
* spec design PNG 1번째 화면 참조.
*/
export default function IntroStep({ onStart }: Props) {
return (
<div className="min-h-screen flex flex-col items-center justify-center px-6 text-center text-white">
{/* 로고 */}
<div className="mb-10">
<h1
className="kx-display text-5xl md:text-7xl font-black tracking-[0.15em] mb-4"
style={{
background: 'linear-gradient(135deg, #cc97ff 0%, #53ddfc 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
}}
>
CONTOUR
</h1>
<p className="text-base md:text-lg text-white/70 leading-relaxed">
3
</p>
</div>
{/* 시작 버튼 */}
<button
type="button"
onClick={onStart}
className="kx-btn-primary px-10 py-3 rounded-full text-base font-bold"
>
</button>
<p className="mt-6 text-xs text-white/40 font-mono">7 · 3</p>
</div>
);
}