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