Trustify - Giải Pháp Minh Bạch Từ Thiện

Một trang web hiện đại giới thiệu giải pháp minh bạch từ thiện dựa trên công nghệ blockchain, lấy cảm hứng từ Arbor Verification Tech. Dự án này sử dụng React, TypeScript, Vite, Tailwind CSS và Shadcn UI.

Tính Năng

• Thiết kế responsive cho điện thoại, máy tính bảng và máy tính để bàn
• Cấu trúc component mô-đun hóa
• Nội dung có thể cấu hình thông qua các file cấu hình
• Bảng màu và typography có thể tùy chỉnh
• Vị trí cho hình ảnh và logo
• Các phần:
  • Banner chào mừng
  • Giới thiệu công nghệ
  • Tính năng cho doanh nghiệp và nhà từ thiện
  • Cố vấn
  • Thành viên đội ngũ
  • Thông tin liên hệ

Bắt Đầu

Yêu Cầu

• Node.js (phiên bản 16 trở lên)
• npm hoặc yarn

Cài Đặt

1. Clone repository:

   git clone [đường-dẫn-repository]
   cd trustify-csr-landing-page

2. Cài đặt các gói phụ thuộc:

   npm install
   # hoặc
   yarn

3. Khởi động máy chủ phát triển:

   npm run dev
   # hoặc
   yarn dev

4. Mở trình duyệt và truy cập http://localhost:5173

Tùy Chỉnh

Cấu Hình Nội Dung

Tất cả nội dung trang web có thể cấu hình thông qua file cấu hình tại: src/config/site.ts. Bạn có thể chỉnh sửa:

• Tên và mô tả trang web
• Liên kết điều hướng
• Nội dung phần chào mừng
• Mô tả công nghệ
• Danh sách tính năng
• Thông tin cố vấn
• Chi tiết thành viên đội ngũ
• Thông tin liên hệ

Cấu Hình Giao Diện

Giao diện của trang web có thể tùy chỉnh thông qua file cấu hình tại: src/config/theme.ts. Bạn có thể chỉnh sửa:

• Bảng màu (chính, phụ, nhấn mạnh, v.v.)
• Typography (khi bạn đã quyết định font chữ thương hiệu)
• Khoảng cách
• Bo góc
• Đổ bóng
• Cài đặt logo (khi bạn đã có logo)

Thay Thế Hình Ảnh

Thay thế các hình ảnh mẫu trong thư mục public/images/ bằng hình ảnh thực tế của bạn. Các hình ảnh sau cần được cung cấp:

• hero-image.jpg - Hình ảnh banner chính
• mentor1.jpg và mentor2.jpg - Hình ảnh của các cố vấn
• team1.jpg đến team5.jpg - Hình ảnh của các thành viên đội ngũ

Thêm Logo

Khi bạn đã có logo, cập nhật phần logo trong src/config/theme.ts với đường dẫn, kích thước và văn bản thay thế cho logo của bạn.

Cấu Trúc Dự Án

.
├── public/                 # Tài nguyên tĩnh
│   └── images/             # Thư mục hình ảnh
├── src/                    # Mã nguồn
│   ├── components/         # Các thành phần UI
│   │   ├── contact/        # Phần liên hệ
│   │   ├── features/       # Phần tính năng
│   │   ├── footer/         # Thành phần footer
│   │   ├── header/         # Thành phần header
│   │   ├── hero/           # Phần chào mừng
│   │   ├── mentors/        # Phần cố vấn
│   │   ├── team/           # Phần đội ngũ
│   │   └── technology/     # Phần công nghệ
│   ├── config/             # File cấu hình
│   │   ├── site.ts         # Cấu hình nội dung trang web
│   │   └── theme.ts        # Cấu hình giao diện và style
│   ├── lib/                # Các hàm tiện ích
│   ├── App.css             # Style toàn cục
│   ├── App.tsx             # Component ứng dụng chính
│   ├── index.css           # Style cơ bản
│   └── main.tsx            # Điểm vào ứng dụng
├── package.json            # Các phụ thuộc và script
└── README.md               # File này

Công Nghệ Sử Dụng

• React - Thư viện JavaScript để xây dựng giao diện người dùng
• TypeScript - JavaScript với kiểu dữ liệu tĩnh
• Vite - Công cụ build nhanh và máy chủ phát triển
• Tailwind CSS - Framework CSS tiện ích
• Shadcn UI - Thư viện component UI
• Lucide React - Thư viện biểu tượng

Giấy Phép

Dự án này được cấp phép theo Giấy phép MIT.

Lời Cảm Ơn

Thiết kế lấy cảm hứng từ Arbor Verification Tech.