Bỏ qua tới nội dung
Case study · Ô tô điện · Website mẫu

VinFast Vạn Long

Web mẫu cho mô hình đại lý ô tô điện — dải xe VF 3 → VF 9 với giá niêm yết thật. Khác với web đại lý thường chỉ treo số hotline, web này để khách tự tính giá lăn bánh từng khu vực, ướm phương án trả góp, so sánh các dòng xe, đặt lịch lái thử và đặt cọc online — mỗi thao tác đều sinh mã hồ sơ để đại lý chăm sóc tiếp.

Xem website đang chạy vinfast.mauweb.dev
Loại dự án
Web đại lý ô tô (mẫu)
Ngành
Ô tô điện · showroom
Phạm vi
32 trang · 4 luồng chốt khách
Nền tảng
Next.js 16 · React 19
vinfast.mauweb.dev
Trang chủ web đại lý xe điện VinFast

Trang chủ — hero ảnh showroom thật, dải 6 dòng xe kèm giá, và lối vào thẳng ba công cụ: giá lăn bánh, lái thử, đặt cọc. (Cuộn trong khung để xem toàn trang)

Tính năng

Xe là món hàng lớn — website phải làm việc như tư vấn viên

Không ai mua ô tô bằng nút "thêm vào giỏ". Web đại lý ở Việt Nam phần lớn dừng ở danh sách xe + số điện thoại; web này được thiết kế lại theo đúng hành trình người mua xe: tìm hiểu → so sánh → ướm chi phí → lái thử → giữ suất. Mỗi chặng có một công cụ riêng, và mọi công cụ đều dẫn về một mã hồ sơ.

01 — Dải sản phẩm

Catalog 6 dòng xe với giá niêm yết thật

Đủ dải xe điện VF 3 → VF 9 với giá niêm yết cập nhật theo thời điểm (299 triệu → 1,7 tỷ, đã gồm pin). Khách lọc theo phân khúc, khoảng giá, sắp xếp theo tầm hoạt động — như duyệt một cửa hàng thật chứ không phải lướt brochure.

  • Bộ lọc phân khúc (Minicar → E-SUV) + khoảng giá + sắp xếp
  • Thẻ xe hiện đủ: giá từ, tầm hoạt động, chỗ ngồi, dung lượng pin
  • Ảnh xe thật dùng tư liệu giấy phép mở — bản quyền sạch
Trang dòng xe với bộ lọc phân khúc và giá
02 — Trang xe chi tiết

Chọn phiên bản, đổi màu — giá cập nhật theo từng lựa chọn

Mỗi dòng xe có trang riêng làm việc như một tư vấn viên: album ảnh phóng to được, bộ chọn phiên bản và màu sắc cập nhật giá tức thì, kèm dòng "trả góp từ ~X triệu/tháng" để khách ướm ngay khả năng tài chính trước khi nhấc máy.

  • Album ảnh bấm chuyển + phóng to toàn màn hình
  • Chọn phiên bản (Eco/Plus) và màu → giá niêm yết đổi theo
  • Dữ liệu có cấu trúc chuẩn ngành ô tô cho Google (xe + đại lý)
Trang chi tiết xe: gallery, phiên bản, màu sắc
03 — Giá lăn bánh & trả góp

Công cụ "ăn tiền" nhất: minh bạch tới từng khoản phí

Câu khách hỏi nhiều nhất khi mua xe là "lăn bánh hết bao nhiêu?" — và web đại lý thường bắt gọi điện mới có đáp án. Ở đây khách tự chọn xe, phiên bản, nơi đăng ký là thấy đủ từng khoản: trước bạ 0% của xe điện (kèm căn cứ pháp lý), biển số theo khu vực, đăng kiểm, bảo hiểm — cộng thêm phương án trả góp tính theo chuẩn dư nợ giảm dần của ngân hàng.

  • Nhấn đúng lợi thế xe điện: trước bạ 0%, tiết kiệm cả trăm triệu so xe xăng
  • Trả góp tuỳ chỉnh: mức trả trước 30–70% × kỳ hạn 4–8 năm → tiền/tháng
  • Nút sao chép báo giá dán thẳng vào Zalo + form nhận báo giá chính thức
Công cụ tính giá lăn bánh và trả góp xe điện
04 — So sánh dòng xe

Đặt 3 chiếc xe cạnh nhau, tiêu chí nào tốt nhất tự sáng lên

Phân vân giữa hai dòng xe là tâm lý phổ biến nhất của người mua. Trang so sánh cho chọn tối đa 3 dòng đặt cạnh nhau theo đúng các tiêu chí quyết định — giá, tầm hoạt động, công suất, pin, mức cọc — và tự đánh dấu "Tốt nhất" cho thông số dẫn đầu.

  • So sánh trực tiếp 2–3 dòng xe trên một bảng
  • Tự đánh dấu thông số tốt nhất giữa các xe được chọn
  • Từ bảng so sánh đi thẳng tới lái thử hoặc tính giá lăn bánh
Trang so sánh các dòng xe điện cạnh nhau
05 — Lái thử & đặt cọc online

Chốt khách bằng mã hồ sơ — không thu tiền vội

Form lái thử cho khách chọn xe bằng thẻ ảnh, chọn khung giờ bằng một chạm. Form đặt cọc chốt phiên bản, màu sắc và sinh mã hồ sơ ngay. Điểm thiết kế đáng giá: web cố tình không thu tiền — màn hình thành công mô tả quy trình 3 bước (gọi xác nhận → nhận QR chuyển khoản định danh theo mã hồ sơ qua Zalo → ký thoả thuận), đúng cách các đại lý lớn vận hành, an toàn cho cả khách lẫn chủ web.

  • Chọn xe lái thử bằng thẻ ảnh trực quan, đặt lịch theo khung giờ
  • Đặt cọc online sinh mã hồ sơ, hoàn cọc 100% trước khi ký hợp đồng
  • Quy trình QR định danh minh bạch — tiền chỉ về tài khoản công ty
Trang đặt cọc online với mã hồ sơ
06 — Nội dung & SEO

Chuyên mục tin tức viết như người trong nghề

Sáu bài mở màn chia ba nhóm — tư vấn mua xe, kiến thức pin & sạc, dịch vụ bảo dưỡng — viết theo chuẩn nội dung khắt khe: tiêu đề đa dạng không lặp khuôn, mỗi bài có bảng số liệu và ảnh chú thích đầy đủ, mục lục bám theo khi cuộn, liên kết nội bộ dẫn về đúng công cụ của web.

  • 3 chuyên mục có tab lọc; bài nổi bật trình bày dạng tạp chí
  • Mỗi bài ≥3 trực quan (bảng, ảnh có chú thích) + ảnh chia sẻ riêng
  • Dữ liệu có cấu trúc bài viết + meta chuẩn — nền móng SEO sẵn sàng
Bài viết với mục lục bám cuộn và bảng số liệu
07 — Website đầy đủ

Đủ trang nền tảng để một đại lý trông đáng tin

Giới thiệu kể mô hình 3S, liên hệ có bản đồ chỉ đường và form tư vấn, cùng 6 trang chính sách viết riêng theo ngành xe điện — bảo hành xe & pin, đặt cọc & hoàn cọc, giao xe & đăng ký, thanh toán & trả góp. Cả trang báo lỗi 404 cũng được thiết kế riêng.

  • 6 chính sách theo đúng đặc thù xe điện (pin, cọc, giao xe)
  • Trang liên hệ: thẻ kênh liên lạc + bản đồ nhúng + form tư vấn
  • Chân trang đầy đủ liên kết — không có trang "mồ côi"
Trang liên hệ với bản đồ và form tư vấn
Chốt khách

Bốn luồng, một đích: mã hồ sơ

Lái thử, đặt cọc, nhận báo giá hay nhắn tư vấn — mỗi luồng đều sinh mã hồ sơ riêng (LT · DC · BG · LH) để đại lý đối soát và chăm sóc, không một khách nào "rơi" giữa đường.

Lái thử chọn xe bằng thẻ ảnh Đặt cọc mã hồ sơ + QR định danh Báo giá sao chép gửi Zalo 1 chạm Tư vấn form + bản đồ chỉ đường
Responsive

Khách xem xe bằng điện thoại — web chiều theo

Từ thẻ xe, bộ chọn phiên bản tới bảng giá lăn bánh đều dồn gọn cho màn hình hẹp; bảng so sánh tự cuộn ngang, nút bấm đủ lớn cho ngón tay.

Trang chủ trên điện thoại
Trang chủ
Trang xe trên điện thoại
Trang xe
Giá lăn bánh trên điện thoại
Giá lăn bánh
Công nghệ

Nền tảng & công nghệ

Next.js 1632 trang dựng sẵn, tải rất nhanh
React 19 · TypeScriptMã chắc chắn, dễ bảo trì
Tailwind CSS v4Giao diện cao cấp, đồng bộ
Công cụ tự dựngGiá lăn bánh · trả góp · so sánh
4 luồng mã hồ sơLái thử · cọc · báo giá · tư vấn
Dữ liệu có cấu trúcXe · đại lý · bài viết
Hạ tầng đám mâyCDN toàn cầu · SSL tự động
ResponsiveTối ưu thao tác một tay
Ảnh giấy phép mởTư liệu xe thật, bản quyền sạch
Cam kết Web22

Bản dựng mẫu thật, do chính đội Web22 code

Đây là sản phẩm mẫu Web22 tự thiết kế và lập trình để thể hiện năng lực — không phải theme mua sẵn hay bản sao rập khuôn tràn lan ngoài thị trường. Toàn bộ giao diện và tính năng đều code tay, nên khi triển khai cho bạn, mọi thứ đều có thể tuỳ biến, thêm tính năng hay chỉnh sửa theo đúng thương hiệu riêng.

  • Code tay 100%, không dựng bằng mẫu rập khuôn
  • Tuỳ biến & thêm tính năng theo nhu cầu
  • Sản phẩm độc quyền của đội ngũ Web22
Bắt đầu

Bạn bán món hàng giá trị lớn và cần web biết chốt khách?

Web22 thiết kế website cho đại lý ô tô, bất động sản, nội thất — công cụ báo giá tự động, luồng giữ chỗ minh bạch, nội dung chuẩn SEO.