gahusb
6d73a075f7
topbar wrapper 제거, brand가 hero-content 직속 첫 자식이 됨. nav(오늘의 카드/타로 리딩/스프레드/가이드/마이 페이지) + account(프리미엄/로그인) 모두 제거 — brand 단독으로 좌상단 표시. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
75 lines
3.0 KiB
JavaScript
75 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import './Tarot.css';
|
|
|
|
export default function Tarot() {
|
|
return (
|
|
<div className="tarot tarot--landing">
|
|
<img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
|
|
<div className="tarot__hero-overlay" />
|
|
<div className="tarot__corner tarot__corner--left" aria-hidden />
|
|
<div className="tarot__corner tarot__corner--right" aria-hidden />
|
|
|
|
<div className="tarot__hero-content">
|
|
<header className="tarot__brand" aria-label="Arcana Tarot">
|
|
<span className="tarot__brand-spark" aria-hidden>✦</span>
|
|
<span className="tarot__brand-mark" aria-hidden>A</span>
|
|
<span className="tarot__brand-name">ARCANA TAROT</span>
|
|
<span className="tarot__brand-spark" aria-hidden>✦</span>
|
|
</header>
|
|
|
|
<section className="tarot__hero-copy" aria-labelledby="tarot-landing-title">
|
|
<h1 id="tarot-landing-title" className="tarot__h1">
|
|
당신의<br />
|
|
오늘을 비추는 타로
|
|
</h1>
|
|
<div className="tarot__ornament" aria-hidden>
|
|
<span />
|
|
<b>✶</b>
|
|
<span />
|
|
</div>
|
|
<p className="tarot__sub">
|
|
카드를 뽑고, 당신만을 위한 인사이트를 받아보세요.<br />
|
|
운명은 이미 당신 안에 있습니다.
|
|
</p>
|
|
|
|
<div className="tarot__cta-row">
|
|
<Link to="/tarot/reading" className="tarot__cta">
|
|
<span aria-hidden>✦</span>
|
|
지금 시작하기
|
|
<span className="tarot__cta-arrow" aria-hidden>→</span>
|
|
</Link>
|
|
<Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">
|
|
<span className="tarot__card-icon" aria-hidden />
|
|
오늘의 카드
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="tarot-guide" className="tarot__tier-row" aria-label="Tarot features">
|
|
<article className="tarot__tier">
|
|
<span className="tarot__tier-icon tarot__tier-icon--sun" aria-hidden />
|
|
<h3>오늘의 운세</h3>
|
|
<p>매일 한 장의 카드로<br />오늘의 흐름을 확인하세요.</p>
|
|
</article>
|
|
<article className="tarot__tier">
|
|
<span className="tarot__tier-icon tarot__tier-icon--cards" aria-hidden />
|
|
<h3>3장 스프레드</h3>
|
|
<p>과거·현재·미래를 통해<br />더 깊은 해답을 얻어보세요.</p>
|
|
</article>
|
|
<article className="tarot__tier">
|
|
<span className="tarot__tier-icon tarot__tier-icon--moon" aria-hidden />
|
|
<h3>AI 해석</h3>
|
|
<p>AI가 전하는 통찰로<br />나만의 리딩을 완성하세요.</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div className="tarot__scroll-cue" aria-hidden>
|
|
<span>SCROLL TO DISCOVER</span>
|
|
<b>⌄</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|