Vaiyakavin1970

Xây dựng một trang web showroom kỹ thuật số TVS Motor cao cấp, sẵn sàng đưa vào vận hành thực tế (production-ready). Đây là một sản phẩm thực thụ chứ không phải bản demo hay bản dựng giao diện (mockup). Sử dụng React + TypeScript + Vite, Tailwind, Framer Motion, React Three Fiber cho đồ họa 3D, cùng backend Node/Express hoặc FastAPI kết hợp với PostgreSQL. Tuyệt đối không sử dụng văn bản giữ chỗ (placeholder) hay lorem ipsum ở bất kỳ đâu.

NGÔN NGỮ THIẾT KẾ
- Phong cách ô tô - xe máy cao cấp mang đậm chất điện ảnh. Giao diện tối (dark theme) cho phần mở đầu (hero) và phần trưng bày xe (#0A0A0A làm màu nền), giao diện sáng (light theme - #F4F4F2) cho các phần câu chuyện kỹ thuật, so sánh xe và đặt lịch lái thử.
- Phông chữ không chân (sans-serif) dáng hẹp viết hoa toàn bộ cho thanh điều hướng và các tiêu đề (Barlow Condensed hoặc kiểu chữ DIN), phông chữ không chân gọn gàng cho văn bản nội dung. Đường kẻ phân cách mảnh 1px, khoảng trắng rộng rãi, các góc vuông vức sắc nét.
- Màu nhấn (Accent): sử dụng màu đỏ TVS một cách tiết chế cho các nút kêu gọi hành động (CTA) và các trạng thái đang kích hoạt (active states).
- Chỉ dùng hiệu ứng chuyển động tinh tế: hiệu ứng hiện dần khi cuộn trang (scroll reveals), hiệu ứng thị sai (parallax), và chuyển tiếp mượt mà giữa các phân đoạn.

THANH ĐIỀU HƯỚNG TOÀN CỤC (GLOBAL NAVBAR)
- Cố định khi cuộn (sticky), trong suốt khi nằm đè lên phần hero, và chuyển sang nền đặc khi cuộn trang xuống.
- Bên trái: logo TVS. Ở giữa: BIKES, COMPARE, ACCESSORIES, SERVICE, EXPERIENCE (mục đang chọn có gạch chân).
- Bên phải: Tìm kiếm (Search), Vị trí (Location), Tài khoản (Account), Giỏ hàng (Cart).
- Thu gọn thành menu toàn màn hình trên thiết bị di động.

PHẦN 1: MỞ ĐẦU (HERO)
- Phần hero tối màu toàn màn hình với hình ảnh chiếc mô tô được chiếu sáng kiểu phòng chụp trầm (low-key studio-lit, có ánh đèn pha phát sáng và hiệu ứng lóa ống kính - lens flare) cùng dòng tiêu đề lớn "THE NEXT RIDE IS HERE".
- Mũi tên trái và phải để chuyển đổi qua lại giữa các mẫu xe nổi bật, đi kèm thanh tiến trình tự động chuyển cảnh.
- Nút CTA "EXPLORE BIKES".
- Tải trước (preload) hình ảnh đầu tiên. Sử dụng video hoặc định dạng ảnh WebP làm phương án dự phòng (fallback).

PHẦN 2: TRƯNG BÀY XE (BIKE SHOWCASE)
- Phân đoạn nền tối với chiếc xe đặt ở chính giữa cùng các chấm điểm nóng (hotspot dots) nhấp nháy; khi nhấp vào sẽ mở ra các hộp chú thích (callouts) nối bằng đường kẻ mảnh chỉ tới thông số kỹ thuật (động cơ, phanh, hệ thống treo).
- Các thẻ thông số (spec chips) nằm ở bên trái (phân khối cc, công suất, mô-men xoắn, mức tiêu thụ nhiên liệu) và một nút viền "EXPLORE".

PHẦN 3: CÂU CHUYỆN KỸ THUẬT (ENGINEERING STORY)
- Phân đoạn nền sáng, dòng tiêu đề phụ đánh số phía trên ("03 — ENGINEERING"), tiêu đề lớn "Engineering Story", cùng một đoạn văn ngắn.
- Hình ảnh kết xuất chiếc xe kích thước lớn đi kèm 4 đến 5 hộp chú thích có ghi chú (Động cơ - Engine, Thân vỏ - Body, Khung gầm - Chassis, Thông tin kỹ thuật - Technical Info), mỗi chú thích có một đường kẻ mảnh dẫn hướng, tiêu đề và mô tả dài 2 dòng.
- Các hộp chú thích lần lượt xuất hiện bằng hiệu ứng hoạt họa khi người dùng cuộn trang.

PHẦN 4: SO SÁNH XE (COMPARISON)
- So sánh tối đa 3 mẫu xe đặt cạnh nhau. Các thẻ xe hiển thị hình ảnh, biểu tượng trái tim yêu thích (wishlist), và bộ chọn phiên bản (variant selector).
- Các hàng thông số kỹ thuật cho động cơ, công suất, mô-men xoắn, trọng lượng, mức tiêu thụ nhiên liệu, giá bán. Làm nổi bật giá trị vượt trội hơn ở mỗi hàng.
- Truy xuất toàn bộ thông số kỹ thuật và giá bán từ cơ sở dữ liệu, không gán cứng trong mã nguồn.

PHẦN 5: ĐẶT LỊCH LÁI THỬ (TEST RIDE BOOKING)
- Thanh tiến trình từng bước (Stepper): Chọn Xe (Select Bike) → Phiên bản (Variant) → Thành phố (City) → Showroom → Ngày (Date) → Giờ (Time).
- Bảng thông tin cố định bên phải "Customer Details" gồm họ tên, số điện thoại (có xác thực OTP), email và ghi chú.
- Nút "BOOK TEST RIDE", đi kèm màn hình xác nhận, gửi xác nhận qua email/SMS, và tính năng tải tệp lịch (.ics).

PHẦN 6: TRẢI NGHIỆM, TÍNH TRẢ GÓP (EMI) VÀ DỊCH VỤ
- Công cụ tính trả góp EMI (tiền trả trước, kỳ hạn vay, lãi suất) và công cụ ước tính giá lăn bánh theo từng thành phố.
- Danh mục phụ kiện, đặt lịch bảo dưỡng, hỗ trợ khách hàng và câu hỏi thường gặp (FAQ).

QUẢN TRỊ VÀ DỮ LIỆU (ADMIN AND DATA)
- Bảng điều khiển quản trị (Admin panel) cho phép tải lên tệp bảng tính Excel chứa bảng giá. Phân tích cú pháp và xác thực dữ liệu, cho phép xem trước các thay đổi, sau đó mới nhập vào cơ sở dữ liệu.
- Đầy đủ chức năng Thêm/Xem/Sửa/Xóa (CRUD) cho các mẫu xe, phiên bản, màu sắc, phụ kiện, hệ thống showroom và đơn đặt lịch lái thử.
- Trình xem 3D (định dạng GLB) có phương án dự phòng bằng chuỗi ảnh xoay 360° và dự phòng bằng ảnh tĩnh nếu WebGL gặp sự cố.

THIẾT BỊ DI ĐỘNG (MOBILE)
- Bố cục đáp ứng ưu tiên thiết bị di động (mobile-first responsive layout). Thanh "BOOK TEST RIDE" cố định ở cạnh dưới màn hình, băng chuyền (carousel) chọn xe hỗ trợ vuốt chạm, các khung thông số kỹ thuật có thể thu gọn (accordions).
- Điều hướng có thanh đường dẫn (breadcrumbs).

TIÊU CHUẨN CHẤT LƯỢNG (QUALITY BAR)
- Điểm Lighthouse đạt từ 90 trở lên ở các tiêu chí hiệu năng (performance), khả năng tiếp cận (accessibility) và SEO. Tải trễ (lazy-load) hình ảnh và khung cảnh 3D kèm theo khung xương tải trang (skeleton loaders) và chỉ báo trạng thái đang tải WebGL.
- Đạt chuẩn WCAG AA: trạng thái lấy tiêu điểm (focus) hiển thị rõ ràng, hỗ trợ điều hướng hoàn toàn bằng bàn phím, đầy đủ văn bản thay thế (alt text), nhãn ARIA, và hỗ trợ chế độ giảm chuyển động (reduced-motion).
- Xác thực biểu mẫu (form validation), trạng thái báo lỗi, trạng thái dữ liệu rỗng, trạng thái đang tải.
- Cấu trúc thư mục sạch sẽ, các thành phần (components) có khả năng tái sử dụng, cấu hình qua tệp .env, tệp README có hướng dẫn cài đặt chi tiết từng bước, và dữ liệu khởi tạo (seed data) sử dụng các mẫu xe TVS có thật (Apache RTR, Ronin, Raider, Jupiter, iQube).

ĐẦU RA (OUTPUT)
Hãy xây dựng dự án theo từng giai đoạn (phase by phase). Sau mỗi giai đoạn, hãy chạy thử ứng dụng, sửa sạch các lỗi và xác nhận nó hoạt động trơn tru trước khi chuyển sang giai đoạn tiếp theo. Bắt đầu từ hệ thống thiết kế (design system) và bố cục chung, sau đó lần lượt đến phần hero, trưng bày xe, câu chuyện kỹ thuật, so sánh xe, đặt lịch lái thử, trang quản trị, và cuối cùng là trau chuốt hoàn thiện.