2026
UNIQ Design & Build — Website Kiến trúc Cao cấp & CMS

UNIQ Design & Build — Website Kiến trúc Cao cấp & CMS

Xem thử

UNIQ Design & Build thiết kế và thi công biệt thự, nhà phố, nội thất cao cấp tại Hà Nội. Khách hàng là những gia chủ đang chuẩn bị một ngôi nhà để ở hàng chục năm, muốn thấy công trình thật trước khi liên hệ. Website gom cả hành trình đó vào một nơi: danh mục dự án thiết kế, công trình thi công ghi lại theo từng giai đoạn, dịch vụ và quy trình 6 bước, công cụ ước tính chi phí cho ra ngân sách trong vài giây và chuyên mục bài viết kiến trúc — tất cả quản trị qua một CMS tự xây.

Vai trò:
Thiết kế giao diện & lập trình full-stack (website + CMS)
Khách hàng:
UNIQ Design & Build
  • Next.js 16
  • React 19
  • Tailwind CSS v4
  • GSAP 3
  • Lenis
  • Prisma
  • Tiptap
  • Cloudinary
  • Zod
  • TypeScript

01 — Trang chủ như bước vào xưởng thiết kế

Tông tối ấm với điểm nhấn vàng đồng, tiêu đề Playfair Display và cuộn mượt bằng Lenis + GSAP tạo cảm giác một atelier cao cấp. Trang chủ đi từ câu chuyện thương hiệu tới dự án thiết kế tiêu biểu, công trình thực tế, quy trình 6 bước, công cụ ước tính chi phí và bài viết — mỗi khối dẫn sang một trang riêng.

Toàn cảnh trang chủ UNIQ

Trang giới thiệu UNIQ

Trang giới thiệu kể câu chuyện của UNIQ, triết lý thiết kế và đội ngũ đứng sau mỗi công trình, để gia chủ biết mình sẽ làm việc cùng ai.

Trang giới thiệu UNIQ Design & Build

02 — Danh mục dự án thiết kế có bộ lọc

Dự án hiển thị trên lưới bento so le, lọc theo loại hình — biệt thự, nhà phố, thương mại — hoặc tìm theo tên, địa điểm, phong cách. Mỗi thẻ đã có địa điểm, năm và diện tích để khách so sánh trước khi bấm vào.

Trang danh sách dự án thiết kế và bộ lọc

Trang dự án kể câu chuyện thiết kế

Đúng như đặc tả, mỗi dự án không chỉ là album ảnh: bảng thông số kỹ thuật (địa điểm, diện tích, số tầng, phong cách, KTS chủ trì), từng phân khu không gian kèm vật liệu, thư viện ảnh có chú thích và alt, cùng dự án liên quan ở cột bên.

Trang chi tiết dự án Velaris Villa

03 — Công trình thực tế theo từng giai đoạn

Một chuyên mục riêng cho công trình thi công chứng minh UNIQ xây được đúng những gì đã vẽ. Công trình được chia theo loại hình, mỗi thẻ có tiến độ, địa điểm và năm thi công.

Trang danh sách công trình thực tế

Nhật ký công trường & kiểm định chất lượng

Mỗi trang công trình như một biên bản hiện trường: thông số kiểm định QA/QC, đội ngũ chỉ huy công trường, các giai đoạn thi công có mốc thời gian và danh mục nghiệm thu, kèm ảnh hiện trường. Gia chủ còn có thể đặt lịch tham quan công trường đang thi công.

Trang chi tiết công trình Lumina Residence

04 — Trang dịch vụ & quy trình 6 bước

Mỗi dịch vụ — thiết kế kiến trúc, nội thất, thi công trọn gói, tư vấn giám sát — có trang riêng gồm phạm vi, giải pháp, quy trình, dự án liên quan, FAQ và lời kêu gọi liên hệ, không khóa cứng độ dài để đội SEO tự mở rộng.

Trang dịch vụ thiết kế kiến trúc

Từ ý tưởng đến ngày nhận nhà

Trang quy trình trình bày sáu giai đoạn từ khảo sát hiện trạng đến bàn giao, để gia chủ biết mỗi bước diễn ra thế nào và mình nhận được gì.

Trang quy trình 6 bước

05 — Công cụ ước tính trả lời câu hỏi đầu tiên

"Xây nhà hết bao nhiêu?" được trả lời ngay: chọn loại nhà, diện tích, số tầng và mức hoàn thiện, con số ước tính cập nhật tức thì kèm phần thô và phần hoàn thiện. Đơn giá và hệ số lấy từ CMS, form bên dưới gửi kèm đúng số liệu khách vừa chọn.

Công cụ ước tính chi phí xây dựng
Công cụ ước tính chi phí xây dựng

Trang báo giá dịch vụ

Phí thiết kế kiến trúc và nội thất được công bố theo gói, để khách đến buổi tư vấn đã nắm được khoảng chi phí.

Trang báo giá dịch vụ thiết kế

Form tư vấn đổ thẳng vào quản lý khách hàng

Mọi form trên website — liên hệ, ước tính chi phí, đặt lịch tham quan — được kiểm tra bằng Zod, lưu thành lead trong CMS và gửi email thông báo, không yêu cầu nào bị trôi trong hộp thư.

Trang liên hệ và form đăng ký tư vấn

06 — Chuyên mục bài viết phục vụ SEO

Bài viết dài có mục lục bám theo khi cuộn, khối ý chính, trích dẫn, hộp tác giả và bài liên quan. Mỗi bài xuất dữ liệu cấu trúc Article và BreadcrumbList, trình soạn thảo (Tiptap) hỗ trợ heading, bảng, ảnh và nhúng YouTube.

Trang chi tiết bài viết

07 — CMS để đội SEO tự quản trị

Phía sau website là cổng quản trị dựng bằng Prisma và JWT: dự án, công trình, dịch vụ, bài viết, danh mục, đánh giá, bảng đơn giá, lead, redirect 301, cài đặt website, nhật ký thao tác, sao lưu và thùng rác. Mỗi trang có SEO title, meta description, slug, canonical và index/noindex riêng; biên tập viên lưu nháp, quản trị viên duyệt đăng.

Màn hình đăng nhập hệ thống quản trị UNIQ
Cổng quản trị