🌸 Trung tâm tiếng Nhật Quang Dũng

Landing Page hiện đại, responsive cho trung tâm dạy tiếng Nhật hàng đầu

📋 Tổng quan

Trung tâm tiếng Nhật Quang Dũng là website landing page được xây dựng bằng React + Vite + TypeScript, tối ưu cho việc thu hút và chuyển đổi học viên. Trang web hỗ trợ đa ngôn ngữ (Tiếng Việt, 日本語, English) với thiết kế lấy cảm hứng từ văn hóa Nhật Bản.

✨ Tính năng chính

🌓 Dark/Light Mode - Chuyển đổi giao diện mượt mà
🌐 Đa ngôn ngữ - Hỗ trợ 3 ngôn ngữ (VI/JP/EN)
📱 Responsive - Tối ưu trên mọi thiết bị
🎨 UI/UX hiện đại - Thiết kế theo phong cách Nhật Bản
📊 Google Sheets Integration - Lưu trữ dữ liệu đăng ký
📧 Email Notifications - Thông báo tự động
🚀 SEO Optimized - Tối ưu công cụ tìm kiếm
⚡ Performance - Tải nhanh, trải nghiệm mượt mà

🛠 Công nghệ sử dụng

Frontend: React 18 + TypeScript + Vite
Styling: TailwindCSS + shadcn/ui
Animation: Framer Motion + CSS Animations
Internationalization: i18next + react-i18next
Form Handling: React Hook Form + Zod
Theme: next-themes
Icons: Lucide React
Notifications: Sonner (Toast)

🚀 Bắt đầu nhanh

Yêu cầu hệ thống

Node.js >= 18.0.0
npm >= 9.0.0 hoặc yarn >= 1.22.0

Cài đặt

# Clone repository
git clone https://github.com/yourusername/quang-dung-japanese-center.git
cd quang-dung-japanese-center

# Cài đặt dependencies
npm install

# Chạy development server
npm run dev

# Mở trình duyệt tại http://localhost:5173

Scripts có sẵn

npm run dev          # Khởi chạy development server
npm run build        # Build production
npm run preview      # Preview production build
npm run lint         # Kiểm tra code với ESLint

📊 Tích hợp Google Sheets

Bước 1: Tạo Google Apps Script

Truy cập Google Apps Script
Tạo project mới và paste code sau:

function doPost(e) {
  try {
    const data = JSON.parse(e.postData.contents);
    const sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getActiveSheet();
    
    // Thêm dữ liệu vào sheet
    sheet.appendRow([
      new Date(),
      data.name,
      data.email,
      data.phone,
      data.course,
      data.message || ''
    ]);
    
    // Gửi email thông báo (tùy chọn)
    MailApp.sendEmail({
      to: '[email protected]',
      subject: 'Đăng ký khóa học mới',
      body: `
        Học viên mới đăng ký:
        - Họ tên: ${data.name}
        - Email: ${data.email}
        - Điện thoại: ${data.phone}
        - Khóa học: ${data.course}
        - Tin nhắn: ${data.message}
      `
    });
    
    return ContentService.createTextOutput(JSON.stringify({
      status: 'success',
      message: 'Đăng ký thành công!'
    })).setMimeType(ContentService.MimeType.JSON);
    
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({
      status: 'error',
      message: error.toString()
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

Bước 2: Cấu hình Google Sheet

Tạo Google Sheet mới với các cột:
- A: Thời gian
- B: Họ tên
- C: Email
- D: Điện thoại
- E: Khóa học
- F: Tin nhắn
Sao chép Sheet ID từ URL (đoạn giữa /d/ và /edit)

Bước 3: Deploy Apps Script

Trong Apps Script, click Deploy → New deployment
Chọn type: Web app
Execute as: Me
Who has access: Anyone
Click Deploy và copy Web app URL

Bước 4: Cập nhật Frontend

Tạo file .env.local trong thư mục root:

VITE_GOOGLE_SCRIPT_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec

🎨 Tùy chỉnh thiết kế

Colors & Theme

Chỉnh sửa file src/index.css và tailwind.config.ts:

/* src/index.css */
:root {
  --sakura: 350 75% 65%;     /* Màu hoa anh đào */
  --sunrise: 15 85% 60%;     /* Màu mặt trời mọc */
  --forest: 145 25% 25%;     /* Màu rừng xanh */
}

Fonts

Project sử dụng 2 font chính:

Inter: Font chính cho nội dung
Noto Sans JP: Font hỗ trợ tiếng Nhật

🌐 Quản lý nội dung đa ngôn ngữ

Thêm ngôn ngữ mới

Tạo file translation trong src/i18n/locales/
Cập nhật src/i18n/i18n.ts
Thêm flag icon trong LanguageToggle

Cấu trúc translation

{
  "nav": {
    "home": "Trang chủ",
    "about": "Giới thiệu",
    "courses": "Khóa học"
  },
  "hero": {
    "title": "Trung tâm tiếng Nhật Quang Dũng",
    "subtitle": "Biến việc học thành hành trình khám phá thú vị"
  }
}

📱 SEO & Performance

Meta Tags

File index.html đã được tối ưu với:

Title tags có từ khóa chính
Meta description dưới 160 ký tự
Open Graph tags cho social media
Structured data (JSON-LD)

Performance Optimization

⚡ Vite - Build tool cực nhanh
🖼️ Image Optimization - Lazy loading, WebP format
📦 Code Splitting - React.lazy() cho các components lớn
🗜️ Bundle Analysis - Tối ưu bundle size

Lighthouse Score

Target scores:

Performance: 95+
Accessibility: 100
Best Practices: 100
SEO: 100

🚀 Deploy lên Vercel

Tự động (Recommended)

Push code lên GitHub/GitLab
Kết nối repository với Vercel
Vercel sẽ tự động deploy mọi lần commit

Manual Deployment

# Cài đặt Vercel CLI
npm i -g vercel

# Build project
npm run build

# Deploy
vercel --prod

Environment Variables

Trong Vercel Dashboard, thêm các biến môi trường:

VITE_GOOGLE_SCRIPT_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec
VITE_SITE_URL=https://your-domain.com

Custom Domain

Trong Vercel Dashboard → Settings → Domains
Thêm domain của bạn
Cấu hình DNS records theo hướng dẫn

📧 Email Marketing Integration

Mailchimp

// src/utils/mailchimp.js
export const subscribeToNewsletter = async (email) => {
  const response = await fetch('/api/mailchimp', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email })
  });
  return response.json();
};

SendGrid

// src/utils/sendgrid.js
export const sendWelcomeEmail = async (userData) => {
  const response = await fetch('/api/send-email', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  return response.json();
};

🔧 Troubleshooting

Lỗi thường gặp

1. Build fails với TypeScript errors

npm run build -- --mode development

2. i18n không load được translations

# Kiểm tra đường dẫn file
ls src/i18n/locales/

3. Google Sheets không nhận được data

Kiểm tra CORS settings trong Apps Script
Verify Web app permissions
Test với Postman trước

Performance Issues

# Analyze bundle size
npm install --save-dev webpack-bundle-analyzer
npm run build
npx webpack-bundle-analyzer dist/assets/*.js

🤝 Contributing

Fork repository
Tạo feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Tạo Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

📞 Liên hệ

Trung tâm tiếng Nhật Quang Dũng

📧 Email: [email protected]
📱 Điện thoại: +84 123 456 789
🌐 Website: https://quangdungjapanese.com
📍 Địa chỉ: 123 Đường ABC, Quận 1, TP.HCM

⭐ Nếu project này hữu ích, hãy star repository để ủng hộ chúng tôi!

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
public		public
src		src
supabase		supabase
.env		.env
.gitignore		.gitignore
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

longqt124010124034-png/sakura-journey-hub

Folders and files

Latest commit

History

Repository files navigation