From 454b7abf885c9f0e2e875b0fa50b677af91d12ce Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 05:23:40 +0900
Subject: [PATCH] =?UTF-8?q?feat(gyeol):=20IntroStep=20=E2=80=94=20CONTOUR?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B3=A0=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20+=20=EB=B6=80=EC=A0=9C=20+=20=EC=8B=9C=EC=9E=91=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/gyeol/components/IntroStep.tsx | 44 ++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 app/gyeol/components/IntroStep.tsx

diff --git a/app/gyeol/components/IntroStep.tsx b/app/gyeol/components/IntroStep.tsx
new file mode 100644
index 0000000..2118d0b
--- /dev/null
+++ b/app/gyeol/components/IntroStep.tsx
@@ -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>
+  );
+}