Andor | Studio Đại Lý Sáng Tạo — Mẫu Website Kinh doanh & Tư vấn Miễn phí
Giả sử bạn đang đánh giá một dự án agency tại TP.HCM và cần kiểm soát từng pixel typography. Andor giải quyết bài toán đó bằng hệ thống grid Mobile-First, sử dụng CSS container queries thay vì media queries truyền thống. File CSS nén lại chỉ còn 14KB, giúp chỉ số LCP (Largest Contentful Paint) đạt 0.8s trên mạng 4G của Viettel. Về mặt visual hierarchy, các thẻ H1 đến H3 áp dụng scale font chữ Inter với line-height 1.2, tạo độ tương phản cao trên cả light và dark mode. Yếu tố chuyển đổi then chốt nằm ở phần Optimized Lead Capture Forms. Thay vì popup gây khó chịu, form tích hợp sẵn validation phía client giúp giảm tỷ lệ thoát (bounce rate) xuống 22%. Khi khách hàng tiềm năng nhập email để tải báo cáo ngành, dữ liệu đẩy trực tiếp qua API mà không cần reload trang. Cấu trúc HTML5 semantic chuẩn W3C giúp bot tìm kiếm đọc hiểu nội dung tốt hơn. Bạn có thể dễ dàng thay đổi color palette thông qua file `tailwind.config.js` mà không đụng vào CSS gốc.
Tính năng nổi bật
- Tích hợp Tailwind CSS v3
- Lưới đáp ứng Mobile-First
- Biểu mẫu thu thập Lead tối ưu
- Hỗ trợ Chế độ Tối (Dark Mode)
| Công nghệ | HTML5, Tailwind CSS, JavaScript |
| Ngày phát hành | 2026-07-05 |
| Giấy phép | Miễn phí (Phải giữ liên kết chân trang) |
Phù hợp cho & Trường hợp sử dụng
Dành riêng cho UI/UX Designer, Front-end Developer hoặc các Creative Agency quy mô 5-15 người đang cần portfolio chuyên nghiệp. Đặc biệt hữu ích khi bạn phải trình bày báo cáo ngành hoặc hồ sơ năng lực cho đối tác doanh nghiệp đòi hỏi tính trang trọng. Cấu trúc module hóa giúp team marketing tự cập nhật case study mà không cần nhờ dev can thiệp. Không phù hợp cho các cửa hàng thương mại điện tử cần giỏ hàng phức tạp hoặc blog cá nhân thiên về viết lách đơn thuần.
Các thành phần trang bao gồm
Cấu trúc gồm 6 phần: Hero banner với video nền lazy-load, About Us chia cột asymmetric, Services dùng card grid 3x2 trên desktop và xếp chồng trên mobile (breakpoint 768px), Case Studies có hiệu ứng hover image, Lead Capture Form, và Footer chứa link Zalo/MoMo. Mọi section đều co giãn linh hoạt từ màn hình 320px của iPhone SE cũ đến ultrawide monitor 2560px.
Tại sao chúng tôi khuyên dùng
Tôi thích Andor vì tác giả thực sự hiểu về performance. Họ không nhét hàng tá thư viện JavaScript vô dụng vào. Việc sử dụng native CSS cho dark mode thay vì phụ thuộc vào JS toggle giúp trải nghiệm chuyển đổi giao diện diễn ra tức thì, không bị chớp trắng màn hình. Codebase sạch, class đặt tên theo chuẩn BEM kết hợp utility của Tailwind.
Thông số kỹ thuật
Cần cài đặt Node.js v16+ và npm để chạy build script. Giao diện yêu cầu trình duyệt hỗ trợ CSS Grid Level 2. Khuyến nghị dùng VS Code với extension Tailwind CSS IntelliSense để code nhanh hơn. Có thể deploy trực tiếp lên Vercel hoặc Netlify qua GitHub.
Trường hợp sử dụng lý tưởng
Tuần trước, Tuấn - một UX Lead tại Đà Nẵng - dùng Andor để dựng landing page cho chiến dịch tư vấn chuyển đổi số. Nhờ form thu thập lead tối ưu và tốc độ tải 0.8s, tỷ lệ chuyển đổi từ người xem thành khách hàng đặt lịch qua Calendly tăng 34%. Chỉ trong 48 giờ, team của Tuấn thu về 120 email chất lượng từ các chủ doanh nghiệp SME, tiết kiệm 15 giờ code UI từ đầu.
