LUMEN Residences — Mẫu landing page căn hộ cao cấp

Bán cảm giác sống, không bán bảng thông số

Phần lớn landing page bất động sản mở đầu bằng banner chữ đỏ và bảng giá. Mẫu này đi ngược lại: chữ serif lớn, nhiều khoảng trống, ảnh full-bleed và nhịp cuộn chậm — kiểu trình bày mà khách mua căn hộ cao cấp chờ đợi. Thông tin vẫn đầy đủ (tiện ích, mặt bằng, vị trí, số liệu dự án, form đặt lịch), chỉ được đưa ra theo thứ tự kể chuyện thay vì dồn một lúc.

Tám phần, mỗi phần một hiệu ứng riêng

Hero chữ trượt lên từng dòng, ảnh nền thu dần khi cuộn. Đoạn giới thiệu sáng lên theo từng chữ. Ảnh phòng mở rộng từ khung nhỏ ra tràn màn hình. Tiện ích được ghim lại, ảnh thay nhau bằng clip-path và tự hít về từng mục khi dừng cuộn. Năm loại căn hộ kéo ngang, mỗi căn có sơ đồ mặt bằng vẽ bằng SVG. Bản đồ vị trí vẽ dòng sông rồi thả từng điểm mốc. Số liệu đếm tăng dần. Thư viện ảnh ba cột parallax khác tốc độ. Cuối trang là khối đặt lịch nền tối với dải chữ chạy vô tận.

Chỉnh chuyển động mà không cần đọc GSAP

Mọi thông số animation — thời lượng, độ trễ, tỉ lệ zoom, tốc độ parallax, có snap hay không — nằm trong lib/motion.ts, mỗi dòng có chú thích tiếng Việt. Muốn trang chậm hơn hay bớt hiệu ứng thì đổi số ở đó, không phải mở component.

Nội dung nằm gọn trong một tệp

Tên dự án, hotline, địa chỉ nhà mẫu, bốn tiện ích, năm loại căn kèm sơ đồ phòng, sáu điểm mốc trên bản đồ, bốn số liệu, sáu ảnh thư viện và form đặt lịch — tất cả trong lib/content.ts. Sơ đồ mặt bằng khai báo bằng toạ độ từng phòng, nên thêm một loại căn là thêm một phần tử vào mảng.

Nhẹ tay trên điện thoại, tôn trọng giảm chuyển động

Trên điện thoại, phần ghim tiện ích và parallax thư viện tự tắt, chỉ giữ hiệu ứng hiện dần. Bật "giảm chuyển động" trong hệ điều hành thì toàn bộ GSAP và smooth scroll không chạy, trang hiện ra tĩnh và đủ nội dung.

Xuất tĩnh được

Ảnh dùng loader riêng trỏ thẳng CDN của Unsplash nên không cần server tối ưu ảnh. Bản demo ở trên chính là bản xuất tĩnh, chạy trên nginx thuần không có tiến trình Node nào.