# Landing Pages

> Quản lý trang landing page mặc định (trang đăng nhập) cho hệ thống noova-client, bao gồm cấu hình giao diện, hero section, logo, thông báo, quick links và footer.

**Quyền truy cập:** `admin`, **Xem cài đặt website**, **Quản lý website** **Điều hướng:** `Website > Landing Page` hoặc `/manage/website/landing-pages`

***

## Tổng quan

Landing Pages cho phép quản trị viên tùy chỉnh giao diện trang đăng nhập của hệ thống noova-client. Hiện tại hệ thống hỗ trợ một landing page mặc định với slug `login`, hiển thị tại đường dẫn `/login` trên ứng dụng client. Trang này có thể được cấu hình với nhiều thành phần khác nhau như hero section, logo, tin nhắn chào mừng, thông báo công khai, quick links, footer và form đăng nhập.

***

## Giao diện

Trang quản lý Landing Pages gồm hai phần chính:

* **Landing Page mặc định (Trang đăng nhập):** Hiển thị thẻ xem trước với hình nền, tên trang, trạng thái (Hoạt động/Nháp/Lưu trữ), URL, layout và thời gian cập nhật cuối. Di chuột vào thẻ xem trước để hiện nút "Xem trước" và "Chỉnh sửa".
* **Landing Pages tùy chỉnh:** Tính năng đang phát triển, sẽ ra mắt trong phiên bản tiếp theo.

***

## Khởi tạo Landing Page mặc định

Nếu chưa có landing page mặc định, hệ thống hiển thị trạng thái trống với nút "Khởi tạo Landing Page mặc định".

### Các bước

1. Truy cập `Website > Landing Page`.
2. Nhấn nút **Khởi tạo Landing Page mặc định**.
3. Hệ thống tự động tạo trang với cấu hình mặc định (slug `login`, tên "Login Portal", trạng thái "Hoạt động").
4. Sau khi tạo xong, hệ thống chuyển đến trình chỉnh sửa landing page.

***

## Chỉnh sửa Landing Page

Giao diện chỉnh sửa landing page sử dụng sidebar điều hướng với các phần:

| Phần                 | Mô tả                                                                                   |
| -------------------- | --------------------------------------------------------------------------------------- |
| **Thông tin cơ bản** | Tên trang, slug, bố cục (chia đôi / căn giữa / toàn trang / tối giản), trạng thái       |
| **Hero Section**     | Phần đầu trang: kiểu nền (gradient / màu đơn / hình ảnh) với overlay, tiêu đề và phụ đề |
| **Thương hiệu**      | Logo, tên công ty, vị trí logo, nhãn "Powered by Noova"                                 |
| **Lời chào mừng**    | Tin nhắn chào mừng tùy chỉnh                                                            |
| **Thông báo**        | Thông báo công khai (hiển thị dạng sidebar, banner hoặc carousel)                       |
| **Liên kết nhanh**   | Danh sách liên kết nhanh tùy chỉnh                                                      |

Mỗi phần có nút **"Lưu thay đổi"** riêng biệt.

### Thông tin cơ bản

| Trường     | Bắt buộc | Mô tả                                                                                                                                |
| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Tên trang  | Co       | Tên hiển thị của trang (VD: "Login Portal")                                                                                          |
| Slug       | Co       | Đường dẫn URL, không thay đổi được khi đã tạo. Giá trị cho phép: `login`, `home`, `about`, `custom`                                  |
| Layout     | Khong    | Bố cục trang. Giá trị: `split` (chia đôi), `centered` (giữa), `full-hero` (hero toàn trang), `minimal` (tối giản). Mặc định: `split` |
| Trạng thái | Khong    | Trạng thái xuất bản: **Bản nháp**, **Đang hoạt động**, **Đã lưu trữ**. Mặc định: **Bản nháp**                                        |

### Hero Section

Cấu hình phần nền lớn phía trên trang đăng nhập.

| Trường                      | Bắt buộc | Mô tả                                                                    |
| --------------------------- | -------- | ------------------------------------------------------------------------ |
| Hiển thị Hero Section       | Khong    | Bật/tắt toàn bộ hero section                                             |
| Kiểu nền                    | Khong    | `Gradient` (chuyển màu), `Màu đơn`, `Hình ảnh`                           |
| Màu bắt đầu / Màu kết thúc  | Khong    | Chỉ hiển thị khi chọn kiểu nền Gradient. Mặc định: `#667eea` - `#764ba2` |
| Màu nền                     | Khong    | Chỉ hiển thị khi chọn kiểu nền Màu đơn                                   |
| Hình nền                    | Khong    | Chỉ hiển thị khi chọn kiểu nền Hình ảnh. Chọn từ Media Browser           |
| Màu overlay / Độ mờ overlay | Khong    | Lớp phủ trên ảnh nền, giúp text dễ đọc hơn. Mặc định: `#000000`, 50%     |
| Tiêu đề                     | Khong    | Tiêu đề lớn trên hero section                                            |
| Phụ đề                      | Khong    | Dòng phụ đề bên dưới tiêu đề                                             |

### Logo & Thuong hieu

| Trường                      | Bắt buộc | Mô tả                                                                         |
| --------------------------- | -------- | ----------------------------------------------------------------------------- |
| Logo công ty                | Khong    | Kích thước khuyến nghị: 200 x 60 px. Chọn từ Media Browser                    |
| Tên công ty                 | Khong    | Tên công ty hiển thị trên trang                                               |
| Vị trí logo                 | Khong    | `Trên form đăng nhập`, `Trên hero`, `Cả hai`. Mặc định: `Trên form đăng nhập` |
| Hiển thị "Powered by Noova" | Khong    | Bật/tắt dòng "Powered by Noova"                                               |

### Tin nhắn chào mừng

| Trường                      | Bắt buộc | Mô tả                                     |
| --------------------------- | -------- | ----------------------------------------- |
| Hiển thị tin nhắn chào mừng | Khong    | Bật/tắt khối chào mừng                    |
| Tiêu đề                     | Khong    | Tiêu đề tin nhắn (VD: "Xin chào!")        |
| Nội dung                    | Khong    | Nội dung chi tiết hiển thị cho người dùng |

### Thông báo công khai

Cấu hình cách hiển thị thông báo công khai trên landing page. Nội dung thông báo được quản lý tại mục "Thông báo công khai" riêng.

| Trường                   | Bắt buộc | Mô tả                                                         |
| ------------------------ | -------- | ------------------------------------------------------------- |
| Hiển thị thông báo       | Khong    | Bật/tắt khối thông báo trên landing page                      |
| Số lượng hiển thị tối đa | Khong    | Số thông báo tối đa hiển thị. Mặc định: 3                     |
| Vị trí hiển thị          | Khong    | `Thanh bên`, `Banner trên`, `Carousel`. Mặc định: `Thanh bên` |

### Quick Links

| Trường               | Bắt buộc | Mô tả                                                                                     |
| -------------------- | -------- | ----------------------------------------------------------------------------------------- |
| Hiển thị Quick Links | Khong    | Bật/tắt khối quick links                                                                  |
| Danh sách link       | Khong    | Mỗi link gồm Tiêu đề và URL. Nhấn "Thêm link" để thêm mới, nhấn biểu tượng xóa để loại bỏ |

### Footer

| Trường          | Bắt buộc | Mô tả                                        |
| --------------- | -------- | -------------------------------------------- |
| Hiển thị Footer | Khong    | Bật/tắt footer                               |
| Copyright       | Khong    | Dòng bản quyền (VD: "(c) 2025 Company Name") |
| Email liên hệ   | Khong    | Địa chỉ email hiển thị trên footer           |
| Số điện thoại   | Khong    | Số điện thoại liên hệ                        |
| Địa chỉ         | Khong    | Địa chỉ công ty                              |

### Form đăng nhập

| Trường                       | Bắt buộc | Mô tả                                             |
| ---------------------------- | -------- | ------------------------------------------------- |
| Tiêu đề form                 | Khong    | Tiêu đề hiển thị trên form. Mặc định: "Đăng nhập" |
| Placeholder Email            | Khong    | Gợi ý trong ô email. Mặc định: "Email của bạn"    |
| Placeholder Mật khẩu         | Khong    | Gợi ý trong ô mật khẩu. Mặc định: "Mật khẩu"      |
| Text nút đăng nhập           | Khong    | Nhãn trên nút submit. Mặc định: "Đăng nhập"       |
| Hiển thị "Quên mật khẩu"     | Khong    | Bật/tắt liên kết quên mật khẩu                    |
| Hiển thị "Ghi nhớ đăng nhập" | Khong    | Bật/tắt tùy chọn ghi nhớ                          |

### Lưu thay đổi

1. Nhấn nút **Lưu thay đổi** ở góc trên bên phải.
2. Hệ thống thông báo "Đã cập nhật landing page" nếu thành công.
3. Thay đổi được áp dụng ngay lập tức trên trang đăng nhập của noova-client.

### Banner cho ứng dụng nhân viên

Landing page hỗ trợ tạo banner hiển thị trên ứng dụng nhân viên:

| Thuộc tính             | Mô tả                                                                  |
| ---------------------- | ---------------------------------------------------------------------- |
| **Loại banner**        | Hero, Thông báo, Chiến dịch, Khuyến mãi                                |
| **Đối tượng**          | Tất cả, theo phòng ban, theo vai trò, hoặc danh sách người dùng cụ thể |
| **Nút hành động**      | Nút CTA chính và phụ với liên kết tùy chỉnh                            |
| **Thời gian hiển thị** | Ngày bắt đầu và kết thúc, mức ưu tiên                                  |
| **Tuỳ chọn**           | Ghim, cho phép ẩn                                                      |

***

## Xem trước trang

1. Tại trang danh sách, di chuột vào thẻ xem trước của landing page.
2. Nhấn nút **Xem trước**.
3. Hệ thống mở trang đăng nhập của noova-client trong tab mới.

***

## Lưu ý

* Trường Slug không thể thay đổi sau khi tạo trang.
* Cần có cả Tên trang và Slug để lưu được trang.
* Landing page mặc định luôn có slug là `login`.
* Tính năng Landing Pages tùy chỉnh (Page Builder) sẽ ra mắt trong phiên bản tiếp theo.
* Quyền **Quản lý website** cần thiết để tạo và chỉnh sửa. Quyền **Xem cài đặt website** chỉ cho phép xem.

***

## Xem thêm

* [Thông báo công khai](https://docs.noova.vn/truyen-thong-va-he-thong/22-website/thong-bao-cong-khai) -- Quản lý nội dung thông báo hiển thị trên landing page
* [Cài đặt website](https://docs.noova.vn/truyen-thong-va-he-thong/22-website/cai-dat) -- Cấu hình chung cho website
