feat(gyeol): IntroStep — CONTOUR 로고 그라데이션 + 부제 + 시작 버튼
영문 단독 브랜드, 한글 부제 "나를 더 선명하게 이해하는 3분". 보라/시안 그라데이션 텍스트, 7 질문 안내. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
44
app/gyeol/components/IntroStep.tsx
Normal file
44
app/gyeol/components/IntroStep.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user