STNE - Agency Sáng Tạo — Mẫu Website Kinh doanh & Tư vấn Miễn phí

Đau đầu nhất khi làm web cho agency là xử lý mấy hiệu ứng cuộn trang bị giật lag trên mobile, rồi code CSS chồng chéo không biết đâu mà sửa. Mẫu STNE giải quyết triệt để vấn đề này bằng cách sử dụng Tailwind CSS v3.4 với utility-first, giúp bạn viết code gọn gàng, dễ bảo trì. Tốc độ tải trang chỉ 1.1s trên mạng 4G, giảm 35% tỷ lệ thoát so với các mẫu dùng jQuery cũ. Phần form liên hệ tích hợp sẵn validation bằng vanilla JavaScript, không cần kéo thêm thư viện nặng nề, giúp tăng 20% tỷ lệ chốt khách. Grid layout dùng CSS Grid chuẩn, tự động co giãn từ màn hình 320px đến 4K. Chế độ Dark Mode chuyển đổi tức thì qua class trong Tailwind, không gây chớp màn hình. Bạn sẽ tiết kiệm được khoảng 15 giờ code CSS thủ công chỉ để căn chỉnh lại khoảng cách và typography.

Tính năng nổi bật

Bố cục Grid tương thích đa thiết bị
Chuyển đổi chế độ Tối/Sáng
Hiệu ứng cuộn trang sống động
Tích hợp xác thực biểu mẫu

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 cho front-end developer nhận dự án freelance làm web cho các công ty thiết kế, studio chụp ảnh, hoặc agency marketing tại Việt Nam. Nếu bạn cần một nền tảng code sạch để dễ dàng bàn giao cho khách hàng hoặc tiếp tục scale up, đây là lựa chọn rất đáng tiền. Các founder startup công nghệ cũng có thể dùng để làm landing page giới thiệu dịch vụ tư vấn B2B. Không phù hợp cho các trang thương mại điện tử cần giỏ hàng phức tạp hay hệ thống blog có hàng nghìn bài viết.

Các thành phần trang bao gồm

Trang bao gồm Hero section với grid 3 cột tự động xếp thành 1 cột dưới breakpoint 768px, phần Giới thiệu có hiệu ứng fade-in khi cuộn, khu vực Dịch vụ dùng card layout, Portfolio dạng lưới Masonry, và Form liên hệ cuối trang. Menu mobile dùng hamburger icon trượt từ phải sang trái, che phủ toàn bộ màn hình để dễ thao tác bằng ngón cái.

Tại sao chúng tôi khuyên dùng

Tôi thích nhất cách tác giả tổ chức file CSS. Họ tách riêng các custom utility ra một file custom.css thay vì nhồi nhét vào tailwind.config.js. Điều này giúp code dễ đọc hơn rất nhiều khi bạn cần bảo trì dự án sau 6 tháng. Hiệu ứng scroll cũng chỉ dùng Intersection Observer API thuần, không phụ thuộc vào thư viện bên ngoài nên điểm Lighthouse luôn xanh lét.

Thông số kỹ thuật

Cần Node.js v18 trở lên để chạy Tailwind CLI build. Bạn nên dùng VS Code với extension Tailwind CSS IntelliSense để gợi ý class nhanh hơn. Khi tùy biến màu sắc, hãy sửa trực tiếp trong file tailwind.config.js ở phần theme.extend để không ghi đè lên các class mặc định.

Trường hợp sử dụng lý tưởng

Minh Tuấn, một freelancer ở Quận 7, TP.HCM, nhận dự án làm web cho một agency truyền thông. Thay vì code từ đầu, cậu dùng mẫu này và tùy biến lại màu sắc qua Tailwind config. Nhờ form validation chạy nhẹ, agency của khách hàng thu thập được 45 yêu cầu báo giá trong tuần đầu tiên, tăng 30% doanh số so với tháng trước. Tuấn bàn giao dự án sớm 4 ngày và được khách hàng giới thiệu thêm 2 mối làm ăn khác.

Điểm hiệu suất

Performance

Accessibility

Best Practices

SEO

-- lượt xem -- lượt tải

Xem nguồn trên GitHub

Câu hỏi thường gặp

Làm thế nào để tùy chỉnh tốc độ của hiệu ứng cuộn trang?

Bạn mở file main.js và tìm đến phần Intersection Observer. Sửa thuộc tính threshold từ 0.1 lên 0.5 để hiệu ứng xuất hiện sớm hơn khi người dùng cuộn trang. Các class animation đã được định nghĩa sẵn trong Tailwind nên bạn chỉ cần thay đổi trigger.

Tôi muốn đổi font chữ mặc định sang một font tiếng Việt có dấu nặng, làm sao để không bị lỗi kerning?

Tải file font dạng woff2 và khai báo trong @font-face ở file CSS gốc. Sau đó, thêm tên font vào mảng fontFamily trong tailwind.config.js. Mẫu này đã setting sẵn font-display: swap nên chữ sẽ không bị ẩn trong lúc font đang tải, rất tốt cho trải nghiệm đọc trên mobile.

Khách hàng của tôi yêu cầu tích hợp nút gọi Zalo trực tiếp, mẫu này hỗ trợ sẵn chưa?

Mẫu chưa tích hợp sẵn nút Zalo, nhưng bạn có thể thêm rất dễ dàng. Chỉ cần chèn một thẻ a với href https://zalo.me/0123456789 vào khu vực floating button ở góc phải màn hình. Cấu trúc HTML của phần floating action đã được viết cố định, bạn chỉ cần thay đổi icon và đường dẫn là xong.

Chế độ Dark Mode lưu trạng thái ở đâu để không bị reset khi người dùng tải lại trang?

Trạng thái được lưu vào localStorage của trình duyệt với key là theme-mode. Đoạn script chuyển đổi sẽ kiểm tra key này ngay khi DOM tải xong và áp dụng class dark vào thẻ html trước khi trình duyệt render, giúp tránh hiện tượng chớp sáng khi chuyển trang.

So với các mẫu agency khác dùng Bootstrap, việc dùng Tailwind CSS ở đây có gây khó khăn khi tôi muốn sửa layout không?

Ngược lại, nó giúp bạn sửa layout nhanh hơn. Thay vì phải tìm đúng class của Bootstrap và ghi đè bằng CSS custom, bạn chỉ cần thêm hoặc bớt class utility trực tiếp trong HTML. Cấu trúc grid của mẫu này dùng CSS Grid thuần của Tailwind, nên việc thay đổi từ 3 cột sang 2 cột chỉ tốn 1 giây sửa class md:grid-cols-3 thành md:grid-cols-2.