Bản vẽ kiến trúc · Website doanh nghiệpCÔNG TY TNHH VẬN TẢI DỊCH VỤ ĐỨC LỘC

Website giới thiệu năng lực của Công ty TNHH Vận tải Dịch vụ Đức Lộc (Phong Cốc, Quảng Yên, Quảng Ninh), đơn vị thi công nạo vét kênh mương, ao hồ bằng máy xúc đặt phao nổi, san lấp mặt bằng, vận tải và cho thuê máy xúc. Mục tiêu: khách hàng (chủ đầu tư, UBND xã/phường, hộ nuôi thủy sản, nhà thầu) tìm thấy công ty trên Google và Zalo, xem được năng lực thiết bị có đăng kiểm, rồi gọi hotline hoặc gửi yêu cầu báo giá.

flowchart LR
  U[Khách hàng
điện thoại / máy tính] -->|HTTPS| CF[Cloudflare Edge
DNS · SSL · WAF · Cache]
  CF --> P[Cloudflare Pages
index.html · img/ · _headers]
  CF -->|POST /api/lien-he| F[Pages Function
lien-he.js]
  F -->|REST| R[Resend API
gửi email]
  F -.->|tuỳ chọn| T[Telegram Bot]
  R --> M[Hộp thư công ty]
  U -->|tel:| H[Hotline 0936 516 887]
  U -->|zalo.me| Z[Zalo OA / cá nhân]
  P --> G[Google Maps embed]
  Dev[Quản trị viên] -->|kéo thả thư mục
hoặc git push| P
  

flowchart TD
  A["/ (index.html)"] --> A0[Hero + thẻ 4 chỉ số]
  A --> A2[#dich-vu
6 dịch vụ]
  A --> A1[#gioi-thieu
Pháp nhân · giá trị]
  A --> A3[#nang-luc
Thiết bị · năng suất · nhân sự · địa bàn]
  A --> A4[#du-an
6 thẻ ảnh + bảng 12 công trình]
  A --> A5[#quy-trinh
5 bước]
  A --> A6[#phap-ly
Chứng nhận]
  A --> A7[#lien-he
Bản đồ · Form]
  A --> B["/kien-truc.html
(noindex)"]
  A --> D["/tai-lieu/ho-so-nang-luc-duc-loc-2026.pdf"]
  A7 --> C["/api/lien-he (POST)"]
  

website/
├── index.html              trang chủ (HTML + CSS + JS trong 1 tệp)
├── kien-truc.html          tài liệu này
├── img/logo-mark.png
├── robots.txt · sitemap.xml
├── _headers                header bảo mật + cache cho Cloudflare Pages
├── wrangler.toml           cấu hình khi deploy bằng CLI / chạy thử local
├── README.md               hướng dẫn deploy & cập nhật nội dung
├── img/                    ảnh đã nén ≤ 1600 px + logo
│   ├── logo-full.png  logo-white.png  logo-mark.png (favicon)
│   ├── nao-vet-kenh-kobelco.jpg  yanmar-phao-noi.jpg  kobelco-can-dai.jpg
│   ├── komatsu-san-lap.jpg  pha-do-nha-xuong.jpg  xe-tai-van-chuyen.jpg …
│   └── dang-kiem-sk130ur.jpg  dang-kiem-sk130ur-2.jpg  giay-dkkd.jpg
├── tai-lieu/
│   └── ho-so-nang-luc-duc-loc-2026.pdf   bản PDF 29 trang cho khách tải
└── functions/
    └── api/
        └── lien-he.js      POST /api/lien-he → Resend / Telegram

Quy ước: tên tệp không dấu, chữ thường, gạch ngang. Mọi chỗ cần người dùng điền được đánh dấu lớp .todo (viền cam đứt) trong HTML và chú thích [CẬP NHẬT]; trước khi lên sóng chỉ cần tìm chuỗi todo để rà hết.

sequenceDiagram
  participant K as Khách
  participant B as Trình duyệt
  participant F as Pages Function
  participant R as Resend
  K->>B: Bấm "Gửi yêu cầu"
  B->>F: POST /api/lien-he (FormData)
  F->>F: honeypot · validate SĐT · cắt độ dài
  F->>R: POST /emails (Bearer RESEND_API_KEY)
  R-->>F: 200 OK
  F-->>B: {ok:true}
  B-->>K: "Đã nhận yêu cầu"
  Note over B,K: Nếu lỗi → link zalo.me kèm nội dung
  

Không có cơ sở dữ liệu. Toàn bộ nội dung nằm trong HTML; yêu cầu báo giá được lưu tại hộp thư nhận (và Telegram). Dữ liệu pháp nhân đã đối chiếu:

1. Bản 1 – One‑page với dữ liệu từ hồ sơ pháp lý, 5 ảnh công trường, form liên hệ.
2. Bản 1.1 – Đã nạp logo, 9 ảnh, 6 dịch vụ, 16 dòng thiết bị, 12 công trình, nhân sự, địa bàn, PDF hồ sơ từ Hồ sơ năng lực 2026. Sẵn sàng deploy lên *.pages.dev. Còn lại: email, tên miền → gắn tên miền; cấu hình Resend; bật Web Analytics.
3. Bản 1.2 (hiện tại) – Bố cục lại theo mẫu centralcons.vn: nền trắng, dải xám kẻ chéo xen kẽ, thanh menu trắng chữ in hoa, thẻ chỉ số đè lên hero; hệ màu xanh sáng (#0f5bd0) + cam (#f28c28); gộp Thiết bị + Nhân sự thành mục Năng lực.
4. Bản 1.2 – Trang con cho từng dịch vụ (SEO), thư viện ảnh/video công trường, JSON‑LD LocalBusiness, Google Business Profile.
5. Bản 2 – Tách dữ liệu ra JSON hoặc dùng Decap CMS / Cloudflare D1 để người không biết code tự thêm dự án; trang "Hồ sơ năng lực" tải PDF tự sinh.
6. Bản 2.1 – Turnstile chống spam, Rate Limiting, theo dõi chuyển đổi (số lượt bấm gọi, Zalo) qua Cloudflare Analytics Engine.