UI Components

Bộ component đầy đủ — buttons · cards · forms · navigation · loaders. Đủ states (default/hover/active/disabled/focus/error). Sẵn sàng map sang shadcn/ui + Tailwind.

5 SECTION · 20+ COMPONENT · ALL STATES
SOITAROT.VN · 2026
01

Buttons

4 variant × 4 state. Click thật các button để xem hover/active. Cũng có row "frozen state" minh hoạ trạng thái tĩnh.

SEC 01 / 05
BUTTON
Primary btn.primary
CTA · MAIN
DEFAULT
HOVER
ACTIVE
DISABLED
// SIZES
// WITH ICON
Use: CTA chính ("Rút bài", "Đăng ký", "Bắt đầu"). Mỗi screen tối đa 1-2 primary button để giữ hierarchy.
Token: bg --color-accent · text --color-text-on-accent · hover --color-accent-hover + glow.
Secondary btn.secondary
ALT · SECONDARY
DEFAULT
HOVER
ACTIVE
DISABLED
Use: Action phụ đặt cạnh primary ("Sau", "Huỷ", "Tìm hiểu thêm"). Outline ivory mờ, hover tăng độ rõ viền.
Ghost btn.ghost
TERTIARY · LINK-LIKE
DEFAULT
HOVER
ACTIVE
DISABLED
Use: Action thứ ba / link inline, menu item, "Bỏ qua". Hover chuyển sang gold để báo interactive.
Icon btn.icon
TOOLBAR · UTILITY
DEFAULT
HOVER
ACTIVE
DISABLED
Use: Search trigger, save/bookmark, menu, close, share. aria-label bắt buộc (không có chữ).
02

Cards

4 loại card chính: tarot card (3:4 ratio) · article card · pillar card · compatibility card có % meter.

SEC 02 / 05
CARD
Tarot card card.tarot
3:4 RATIO · GAME ELEMENT
// FRONT · DEFAULT
XVII
Ngôi Sao
// FRONT · HOVER (glow)
XVII
Ngôi Sao
// BACK (úp)
// REVEALED + GLOW
0
Gã Khờ
Use: Lá bài tarot tương tác — rút bài, deck index. Front/back có cùng frame. Hover: lift -4px + gold glow.
Props: kind, name, roman, revealed (boolean), glow (boolean).
Article card card.article
BLOG · SEO INDEX
/ IMAGE PLACEHOLDER 16:9
TAROT · BỘ ẨN CHÍNH

Gã Khờ — khi bạn dám bắt đầu

Lá đầu tiên của bộ tarot — không phải về sự ngu ngốc, mà về niềm tin vào hành trình mới.

26.05.20265 PHÚT ĐỌC
/ IMAGE PLACEHOLDER 16:9
NUMEROLOGY

Số 11 · master number

Nếu ngày sinh cộng lại ra 11, đừng rút gọn. Đây là một trong 3 con số bậc thầy.

22.05.20267 PHÚT ĐỌC
Use: Blog index, related articles. Image 16:9 với checkered placeholder cho phase chưa có ảnh thật. Hover: viền chuyển sang gold soft, lift -3px.
Pillar card card.pillar
3-PILLAR FEATURE BLOCK
I · TAROT

78 lá bài · 78 chiếc gương

22 lá Ẩn Chính + 56 lá Ẩn Phụ. Mỗi lá một archetype để soi mình.

Khám phá Tarot →
II · NUMEROLOGY

Con số chủ đạo · từ ngày sinh

Pythagorean — số 1 đến 9 + master numbers 11/22/33.

Khám phá Numerology →
III · ASTRO

12 cung hoàng đạo modern

Sun · Moon · Rising. Archetype thay vì tử vi.

Khám phá Astro →
Use: Section "3 trụ" trên homepage. Mỗi card 1 trụ — gold/lav/ivory icon variant để phân biệt.
Compatibility card card.compat
% METER · ZODIAC MATCH
// ĐỘ HỢP
×
ZODIAC
Bạch Dương
21·03 — 19·04
Sư Tử
23·07 — 22·08
78%VERY HIGH

Cùng nguyên tố Hoả — năng lượng đồng điệu, dễ thúc đẩy nhau. Cần để ý cái tôi.

// ĐỘ HỢP
×
ZODIAC
Song Tử
21·05 — 20·06
Ma Kết
22·12 — 19·01
42%CHALLENGING

Phong và Thổ — khó nhịp đầu. Nếu hiểu nhau, bù trừ tốt: tốc độ × kỷ luật.

Use: Zodiac compatibility check page, "Bạn × Cung khác". Gold cho high match (≥70%), lavender cho mid/low.
Props: signA, signB, percent, label, note.
03

Form elements

Input · select · date picker · checkbox · radio · switch. Đủ states: default · focus · filled · error · disabled.

SEC 03 / 05
FORM
Input · text input
5 STATES
Mình sẽ gửi link đăng nhập qua email.
Email không hợp lệ. Kiểm tra lại nhé.
Focus ring: gold border + soft outer ring (3px rgba). Error: dusty rose, không "đỏ chợ".
Dropdown / Select select
CLOSED + OPEN
Closed dùng <select> native (mobile-friendly). Open menu là custom với arrow gold + check selected.
Date picker · ngày sinh datepicker
3 INPUT · DD · MM · YYYY
NGÀY
THÁNG
NĂM
Để tính con số chủ đạo + sun sign.
NGÀY
THÁNG
NĂM
3 input độc lập với inputmode="numeric" để mobile show numpad. Tự auto-focus next field khi đủ ký tự.
Checkbox · Radio · Switch check / radio / switch
ALL STATES
// CHECKBOX
// RADIO · GROUP
// SWITCH (BONUS)
Email khi có lá mới
Push notification
Lưu lịch sử rút bài
Check + radio: 20×20px, gold khi active. Switch: 44×26px theo iOS pattern, gold khi on.
04

Navigation

Header sticky (glassmorphism) · mobile menu overlay · footer có disclaimer · breadcrumb.

SEC 04 / 05
NAV
Header sticky · glassmorphism nav.header
DESKTOP · GLASS
Sticky: position: sticky; top: 16px. Glass: bg navy 65% + backdrop-blur 20px + border gold 15%. Pill-shape (border-radius 999) thay vì full-width — modern, premium.
Mobile menu · overlay nav.mobile
FULLSCREEN OVERLAY
Trigger: click hamburger. Overlay full-viewport, slide từ phải sang. Đóng bằng X hoặc click backdrop.
Breadcrumb nav.breadcrumb
SEO · DEEP PAGE
Mono font, all caps, gold cho current page. Quan trọng cho SEO programmatic — Google đọc structured breadcrumb.
Footer · với disclaimer nav.footer
FULL FOOTER
Disclaimer (bắt buộc) đặt nổi bật với left-border gold. Footer dùng --color-bg (void) đậm hơn page bg.
05

Loader · cosmic

3 loader để chọn cho từng context: sparkle pulse (đơn giản, inline) · compass rotate (medium loading) · orbit constellation (heavy operation).

SEC 05 / 05
LOADER
Loader · 3 variant loader.*
PURE CSS · NO JS
Đang xáo bài...
LOADER A · SPARKLE PULSE
Đang tính cung của bạn...
LOADER B · COMPASS ROTATE
Vũ trụ đang trả lời...
LOADER C · ORBIT CONSTELLATION
A · Sparkle: inline loading state cho button/input. B · Compass: page loading, ~1-3s. C · Orbit: heavy operation (đọc lá bài, API call), ≥3s.
Caption italic lavender — tone "tarot" hơn "loading...".