1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="min-h-screen w-full bg-[#121019] flex items-center justify-center p-10">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-4xl">
<div class="tarot-card group h-80 w-56 mx-auto">
<div class="tarot-card__inner">
<div class="tarot-card__face tarot-card__face--front">
<span class="tarot-card__numeral">I</span>
<svg class="tarot-card__glyph" viewBox="0 0 24 24" fill="none" stroke="#c9a24b" stroke-width="1.4">
<circle cx="12" cy="12" r="7.5"/>
<circle cx="12" cy="12" r="2"/>
</svg>
<h3 class="tarot-card__title">Focus</h3>
<span class="tarot-card__hint">hover to reveal</span>
</div>
<div class="tarot-card__face tarot-card__face--back">
<span class="tarot-card__numeral tarot-card__numeral--back">I</span>
<p class="tarot-card__desc">One task, held in the light, until it's finished. Everything else waits its turn.</p>
<span class="tarot-card__quote">"Where attention goes, the work follows."</span>
</div>
</div>
</div>
<div class="tarot-card group h-80 w-56 mx-auto">
<div class="tarot-card__inner">
<div class="tarot-card__face tarot-card__face--front">
<span class="tarot-card__numeral">II</span>
<svg class="tarot-card__glyph" viewBox="0 0 24 24" fill="none" stroke="#c9a24b" stroke-width="1.4">
<path d="M12 3v4M12 17v4M3 12h4M17 12h4" stroke-linecap="round"/>
<circle cx="12" cy="12" r="4.5"/>
</svg>
<h3 class="tarot-card__title">Rest</h3>
<span class="tarot-card__hint">hover to reveal</span>
</div>
<div class="tarot-card__face tarot-card__face--back">
<span class="tarot-card__numeral tarot-card__numeral--back">II</span>
<p class="tarot-card__desc">The pause is not a gap in the work. It's what makes the next stretch possible.</p>
<span class="tarot-card__quote">"Stillness has its own momentum."</span>
</div>
</div>
</div>
<div class="tarot-card group h-80 w-56 mx-auto">
<div class="tarot-card__inner">
<div class="tarot-card__face tarot-card__face--front">
<span class="tarot-card__numeral">III</span>
<svg class="tarot-card__glyph" viewBox="0 0 24 24" fill="none" stroke="#c9a24b" stroke-width="1.4">
<path d="M12 4l2.2 5.5L20 12l-5.8 2.5L12 20l-2.2-5.5L4 12l5.8-2.5z"/>
</svg>
<h3 class="tarot-card__title">Clarity</h3>
<span class="tarot-card__hint">hover to reveal</span>
</div>
<div class="tarot-card__face tarot-card__face--back">
<span class="tarot-card__numeral tarot-card__numeral--back">III</span>
<p class="tarot-card__desc">The moment the noise drops and the next right step is simply obvious.</p>
<span class="tarot-card__quote">"See it plainly, then move."</span>
</div>
</div>
</div>
</div>
</div>