danghong.me Design

Theme: danghong. Lõi: Core. Trang này chỉ ghi component và quy tắc riêng của danghong.me.

1. Component

1.1. Card chuẩn

Viền 0.5px, bo góc 12px, shadow nhẹ.
Benefits/Needs Box: nền Secondary (Beige), viền dashed 1px, danh sách căn trái có chấm hoặc dấu tích.

Blur nền (backdrop-filter) trên tone Beige, sticky trên cùng, thu nhỏ khi cuộn.
Tối giản kiểu YC (logo + link chữ), nhiều khoảng trắng kiểu Apple.
5 mục Mega Menu (About, Masters, Products, Hồng's List, Safe Zone), nút "Newsletter" dạng outline và nút "Chat với Hồng" dạng solid. Cấu trúc ở sitemap.

1.3. Outcome Card (YC Evidence x Apple Layout)

Phẳng, viền mảnh, bo góc 12px.
Real Image First: người thật, môi trường làm việc thật. Không stock, không minh hoạ AI.
Data overlay: nhãn công cụ [n8n], [AI] (font mono) và chỉ số nổi bật trên ảnh.

1.4. Hero chuẩn của mỗi trang

Khung max-w-5xl hoặc max-w-4xl. Padding pt-12 pb-8 (laptop), pt-10 pb-6 (mobile).
Tiêu đề hai phần: tiếng Anh (chính) và tiếng Việt (phụ), hai màu Charcoal và Crimson. text-3xl md:text-5xl, font-extrabold, tracking-tight.
Phụ đề text-lg md:text-xl, font-medium, opacity-40, max-w-2xl mx-auto. Căn giữa.

1.5. Community Gallery

Cuộn ngang thay vì dọc để tạo dòng chảy thị giác.
Tên ảnh chuẩn SEO: community-name-description-index.jpg.

Link mạng xã hội và kênh nội dung dài (Substack, Facebook).

"Trang trước / Trang sau" dạng chữ và mũi tên cuối mỗi trang (website/src/components/PageNavigation.tsx). Quy tắc ở sitemap §2.2.

2. Chiến lược trải nghiệm

Aha moment: người xem thấy sản phẩm chạy được (demo) trước khi đọc lý thuyết.
Trust builder: nhật ký nâng cấp (Build Logs, trang /updates) cho thấy quá trình fail-forward.

Việc còn mở

#	Việc
WD1	Chưa có footer hệ sinh thái (Core §5) và link tới các subdomain mới.

Lịch sử

2026-10-23: Tách từ mục 4 và 6 của B5_Design_System.md.