Website dịch vụ visa chuyên nghiệp được xây dựng với Next.js 15, TypeScript và Tailwind CSS. Hỗ trợ tư vấn visa cho hơn 50 quốc gia với tỷ lệ thành công 99%.

🚀 Tính Năng

8 Trang Chính: Trang chủ, Giới thiệu, Dịch vụ, Visa, Quốc gia, Bảng giá, Blog, Liên hệ
Hệ Thống Đặt Lịch: Đặt lịch tư vấn với chuyên gia
Responsive Design: Tối ưu cho mọi thiết bị
JSON-Based Content: Dễ dàng quản lý nội dung
Interactive Components: Form, accordion, filter, modal
SEO Optimized: Metadata và structure tối ưu

🛠️ Công Nghệ Sử Dụng

Framework: Next.js 15 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Icons: Emoji icons
Deployment: Docker support

📁 Cấu Trúc Thư Mục

app/
├── components/          # Shared components
│   ├── Header.tsx      # Navigation header
│   └── Footer.tsx      # Site footer
├── about/              # Trang giới thiệu
│   ├── about.json      # Dữ liệu về công ty
│   └── page.tsx        # Component trang
├── services/           # Trang dịch vụ
│   ├── services.json   # Dữ liệu dịch vụ
│   └── page.tsx        # Component trang
├── visa/               # Trang visa
│   ├── visa.json       # Dữ liệu các loại visa
│   └── page.tsx        # Component trang
├── countries/          # Trang quốc gia
│   ├── countries.json  # Dữ liệu quốc gia
│   └── page.tsx        # Component trang
├── pricing/            # Trang bảng giá
│   ├── pricing.json    # Dữ liệu giá cả
│   └── page.tsx        # Component trang
├── blog/               # Trang blog
│   ├── blog.json       # Dữ liệu bài viết
│   └── page.tsx        # Component trang
├── contact/            # Trang liên hệ
│   ├── contact.json    # Thông tin liên hệ
│   └── page.tsx        # Component trang
├── appointment/        # Trang đặt lịch
│   ├── appointment.json # Dữ liệu booking
│   └── page.tsx        # Component trang
├── layout.tsx          # Root layout
├── page.tsx            # Trang chủ
└── globals.css         # Global styles

🚀 Hướng Dẫn Chạy Dự Án

Yêu Cầu Hệ Thống

Node.js 18+
npm, yarn, hoặc pnpm

Cài Đặt và Chạy

Clone repository

git clone <repository-url>
cd visa-service-website

Cài đặt dependencies

npm install
# hoặc
yarn install
# hoặc
pnpm install

Chạy development server

npm run dev
# hoặc
yarn dev
# hoặc
pnpm dev

Mở trình duyệt Truy cập http://localhost:3000 để xem website

Scripts Có Sẵn

npm run dev          # Chạy development server
npm run build        # Build production
npm run start        # Chạy production server
npm run lint         # Kiểm tra code style

🐳 Chạy Với Docker

Development với Docker

# Build và chạy container
docker-compose up --build

# Chạy ở background
docker-compose up -d

# Dừng container
docker-compose down

Production với Docker

# Build production image
docker build -t visa-service .

# Chạy container
docker run -p 3000:3000 visa-service

📝 Tùy Chỉnh Nội Dung

Cập Nhật Dữ Liệu

Mỗi trang có file JSON riêng chứa dữ liệu:

about/about.json - Thông tin công ty
services/services.json - Danh sách dịch vụ
visa/visa.json - Các loại visa
countries/countries.json - Quốc gia hỗ trợ
pricing/pricing.json - Bảng giá dịch vụ
blog/blog.json - Bài viết blog
contact/contact.json - Thông tin liên hệ
appointment/appointment.json - Cấu hình đặt lịch

Thêm Trang Mới

Tạo thư mục mới trong app/
Tạo file data.json chứa dữ liệu
Tạo file page.tsx với React component
Cập nhật navigation trong Header.tsx

Tùy Chỉnh Styling

Sử dụng Tailwind CSS classes
Tùy chỉnh theme trong tailwind.config.js
Global styles trong app/globals.css

🌐 Deployment

Vercel (Khuyến nghị)

Push code lên GitHub
Kết nối repository với Vercel
Deploy tự động

Netlify

Build project: npm run build
Upload thư mục out/ lên Netlify

VPS/Server

Build project: npm run build
Chạy: npm run start
Sử dụng PM2 hoặc Docker cho production

📱 Responsive Design

Website được tối ưu cho:

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

🔧 Cấu Hình Môi Trường

Tạo file .env.local (tùy chọn):

NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_CONTACT_EMAIL=info@visaservice.com
NEXT_PUBLIC_PHONE=1900-1234

🤝 Đóng Góp

Fork repository
Tạo feature branch: git checkout -b feature/new-feature
Commit changes: git commit -m 'Add new feature'
Push branch: git push origin feature/new-feature
Tạo Pull Request

📄 License

MIT License - xem file LICENSE để biết thêm chi tiết.

📞 Hỗ Trợ

Email: info@visaservice.com
Phone: 1900 1234
Website: visaservice.com

Phát triển bởi: VisaService Team
Phiên bản: 1.0.0
Cập nhật: January 2025