From 1387d91ac59d805649d62732e795733b722fd067 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 24 May 2026 00:43:48 +0900
Subject: [PATCH] =?UTF-8?q?feat(tarot):=20=EB=9E=9C=EB=94=A9=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20Tarot.jsx=20(T13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/tarot/Tarot.jsx | 68 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/pages/tarot/Tarot.jsx

diff --git a/src/pages/tarot/Tarot.jsx b/src/pages/tarot/Tarot.jsx
new file mode 100644
index 0000000..1d3d727
--- /dev/null
+++ b/src/pages/tarot/Tarot.jsx
@@ -0,0 +1,68 @@
+import React, { useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import './Tarot.css';
+
+export default function Tarot() {
+  const videoRef = useRef(null);
+  useEffect(() => {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const saveData = navigator.connection?.saveData;
+    if ((reduced || saveData) && videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.style.display = 'none';
+    }
+  }, []);
+
+  return (
+    <div className="tarot tarot--landing">
+      <video
+        ref={videoRef}
+        className="tarot__hero-video"
+        src="/videos/tarot_hero.mp4"
+        autoPlay loop muted playsInline preload="metadata"
+        poster="/images/tarot_background.png"
+      />
+      <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
+      <div className="tarot__hero-overlay" />
+
+      <div className="tarot__hero-content">
+        <header className="tarot__brand">
+          <span>✦</span>
+          <span>ARCANA TAROT</span>
+        </header>
+
+        <nav className="tarot__nav" aria-label="Tarot navigation">
+          <Link to="/tarot/today">오늘의 카드</Link>
+          <Link to="/tarot/reading">타로 리딩</Link>
+          <Link to="/tarot/history">히스토리</Link>
+        </nav>
+
+        <h1 className="tarot__h1">당신의 오늘을<br />비추는 타로</h1>
+        <p className="tarot__sub">
+          카드를 펼쳐, 당신만의 인사이트를 받아보세요.
+          라이더-웨이트 덱과 Claude Sonnet 4.6 해석이 함께합니다.
+        </p>
+
+        <div className="tarot__cta-row">
+          <Link to="/tarot/reading" className="tarot__cta">지금 시작하기 →</Link>
+          <Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">오늘의 카드</Link>
+        </div>
+
+        <div className="tarot__tier-row">
+          <article className="tarot__tier">
+            <h3>🌙 오늘의 운세</h3>
+            <p>매일 1장의 카드로 오늘의 흐름을 확인하세요.</p>
+          </article>
+          <article className="tarot__tier">
+            <h3>🃏 3장 스프레드</h3>
+            <p>과거·현재·미래의 흐름을 한눈에 읽어봅니다.</p>
+          </article>
+          <article className="tarot__tier">
+            <h3>✨ AI 해석</h3>
+            <p>Claude Sonnet 4.6이 카드 의미·위치·상호작용을 근거로 풀어줍니다.</p>
+          </article>
+        </div>
+      </div>
+    </div>
+  );
+}