Hugging Face's logo

Spaces:
valentinabmt85
/
test
Running

App Files Community
valentinabmt85 commited on
Commit
945840d
·
verified ·
1 Parent(s): 98288c5

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +457 -310
index.html CHANGED
@@ -3,361 +3,508 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Quản Lý Công Việc | Ví dụ về khả năng của tôi</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .task-item:hover .task-actions {
11
- opacity: 1;
12
  }
13
 
14
- @keyframes fadeIn {
15
- from { opacity: 0; transform: translateY(10px); }
16
- to { opacity: 1; transform: translateY(0); }
17
  }
18
 
19
- .fade-in {
20
- animation: fadeIn 0.3s ease-out forwards;
 
21
  }
22
 
23
- .priority-high {
24
- border-left: 4px solid #ef4444;
 
 
25
  }
26
 
27
- .priority-medium {
28
- border-left: 4px solid #f59e0b;
29
  }
30
 
31
- .priority-low {
32
- border-left: 4px solid #10b981;
33
  }
34
  </style>
35
  </head>
36
- <body class="bg-gray-100 min-h-screen">
37
- <div class="container mx-auto px-4 py-8 max-w-4xl">
38
- <!-- Header -->
39
- <header class="mb-8 text-center">
40
- <h1 class="text-4xl font-bold text-indigo-700 mb-2">Quản Lý Công Việc</h1>
41
- <p class="text-gray-600">Một ví dụ về những gì tôi có thể tạo ra với HTML, CSS và JavaScript</p>
42
- </header>
43
-
44
- <!-- Thống kê -->
45
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
46
- <div class="bg-white rounded-lg shadow p-4 flex items-center">
47
- <div class="bg-indigo-100 p-3 rounded-full mr-4">
48
- <i class="fas fa-tasks text-indigo-600 text-xl"></i>
49
  </div>
50
- <div>
51
- <p class="text-gray-500 text-sm">Tổng công việc</p>
52
- <h3 class="text-2xl font-bold" id="total-tasks">0</h3>
 
 
 
 
 
 
 
 
 
 
 
53
  </div>
54
  </div>
55
- <div class="bg-white rounded-lg shadow p-4 flex items-center">
56
- <div class="bg-green-100 p-3 rounded-full mr-4">
57
- <i class="fas fa-check-circle text-green-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
58
  </div>
59
- <div>
60
- <p class="text-gray-500 text-sm">Đã hoàn thành</p>
61
- <h3 class="text-2xl font-bold" id="completed-tasks">0</h3>
62
  </div>
63
  </div>
64
- <div class="bg-white rounded-lg shadow p-4 flex items-center">
65
- <div class="bg-red-100 p-3 rounded-full mr-4">
66
- <i class="fas fa-exclamation-circle text-red-600 text-xl"></i>
 
 
 
 
 
 
 
67
  </div>
68
- <div>
69
- <p class="text-gray-500 text-sm">Cần làm</p>
70
- <h3 class="text-2xl font-bold" id="pending-tasks">0</h3>
71
  </div>
72
- </div>
73
- </div>
74
-
75
- <!-- Form thêm công việc -->
76
- <div class="bg-white rounded-lg shadow p-6 mb-8">
77
- <h2 class="text-xl font-semibold mb-4 text-gray-800">Thêm công việc mới</h2>
78
- <div class="flex flex-col md:flex-row gap-4">
79
- <div class="flex-grow">
80
- <input type="text" id="task-input" placeholder="Nhập công việc..."
81
- class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
82
  </div>
83
- <div class="w-full md:w-48">
84
- <select id="priority-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
85
- <option value="low">Ưu tiên thấp</option>
86
- <option value="medium">Ưu tiên trung bình</option>
87
- <option value="high">Ưu tiên cao</option>
88
- </select>
89
  </div>
90
- <button id="add-task-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition duration-200 flex items-center justify-center">
91
- <i class="fas fa-plus mr-2"></i> Thêm
92
- </button>
93
  </div>
94
  </div>
95
-
96
- <!-- Bộ lọc và tìm kiếm -->
97
- <div class="flex flex-col md:flex-row justify-between items-center mb-6">
98
- <div class="flex space-x-2 mb-4 md:mb-0">
99
- <button class="filter-btn px-4 py-1 rounded-full bg-indigo-600 text-white" data-filter="all">Tất cả</button>
100
- <button class="filter-btn px-4 py-1 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="pending">Cần làm</button>
101
- <button class="filter-btn px-4 py-1 rounded-full bg-gray-200 hover:bg-gray-300" data-filter="completed">Hoàn thành</button>
 
102
  </div>
103
- <div class="relative w-full md:w-64">
104
- <input type="text" id="search-input" placeholder="Tìm kiếm..."
105
- class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
106
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
  </div>
109
-
110
- <!-- Danh sách công việc -->
111
- <div class="bg-white rounded-lg shadow overflow-hidden">
112
- <ul id="task-list" class="divide-y divide-gray-200">
113
- <!-- Các công việc sẽ được thêm vào đây bằng JavaScript -->
114
- <li class="p-4 text-center text-gray-500">Chưa có công việc nào. Hãy thêm công việc đầu tiên!</li>
115
- </ul>
116
- </div>
117
- </div>
118
 
119
- <script>
120
- document.addEventListener('DOMContentLoaded', function() {
121
- // Biến lưu trữ danh sách công việc
122
- let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
123
- let currentFilter = 'all';
124
- let currentSearch = '';
125
-
126
- // Các phần tử DOM
127
- const taskInput = document.getElementById('task-input');
128
- const prioritySelect = document.getElementById('priority-select');
129
- const addTaskBtn = document.getElementById('add-task-btn');
130
- const taskList = document.getElementById('task-list');
131
- const filterButtons = document.querySelectorAll('.filter-btn');
132
- const searchInput = document.getElementById('search-input');
133
- const totalTasksEl = document.getElementById('total-tasks');
134
- const completedTasksEl = document.getElementById('completed-tasks');
135
- const pendingTasksEl = document.getElementById('pending-tasks');
136
 
137
- // Hiển thị danh sách công việc ban đầu
138
- renderTasks();
139
- updateStats();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
 
141
- // Thêm công việc mới
142
- addTaskBtn.addEventListener('click', addTask);
143
- taskInput.addEventListener('keypress', function(e) {
144
- if (e.key === 'Enter') addTask();
145
- });
 
 
 
 
 
 
 
 
146
 
147
- // Bộ lọc công việc
148
- filterButtons.forEach(button => {
149
- button.addEventListener('click', function() {
150
- filterButtons.forEach(btn => {
151
- btn.classList.remove('bg-indigo-600', 'text-white');
152
- btn.classList.add('bg-gray-200', 'hover:bg-gray-300');
153
- });
154
-
155
- this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
156
- this.classList.add('bg-indigo-600', 'text-white');
157
-
158
- currentFilter = this.dataset.filter;
159
- renderTasks();
160
- });
161
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
 
163
- // Tìm kiếm công việc
164
- searchInput.addEventListener('input', function() {
165
- currentSearch = this.value.toLowerCase();
166
- renderTasks();
167
- });
 
 
 
 
 
 
 
 
168
 
169
- // Hàm thêm công việc
170
- function addTask() {
171
- const taskText = taskInput.value.trim();
172
- if (!taskText) return;
173
-
174
- const newTask = {
175
- id: Date.now(),
176
- text: taskText,
177
- priority: prioritySelect.value,
178
- completed: false,
179
- createdAt: new Date().toISOString()
180
- };
 
 
 
 
 
 
 
 
 
 
 
181
 
182
- tasks.unshift(newTask);
183
- saveTasks();
184
- taskInput.value = '';
185
- renderTasks();
186
- updateStats();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
187
 
188
- // Hiệu ứng thêm mới
189
- const taskElements = document.querySelectorAll('.task-item');
190
- if (taskElements.length > 0) {
191
- taskElements[0].classList.add('fade-in');
192
- }
193
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
 
195
- // Hàm hiển thị danh sách công việc
196
- function renderTasks() {
197
- // Lọc công việc theo bộ lọc và tìm kiếm
198
- let filteredTasks = tasks.filter(task => {
199
- const matchesFilter = currentFilter === 'all' ||
200
- (currentFilter === 'completed' && task.completed) ||
201
- (currentFilter === 'pending' && !task.completed);
202
-
203
- const matchesSearch = task.text.toLowerCase().includes(currentSearch);
204
-
205
- return matchesFilter && matchesSearch;
206
- });
207
 
208
- if (filteredTasks.length === 0) {
209
- taskList.innerHTML = '<li class="p-4 text-center text-gray-500">Không tìm thấy công việc nào phù hợp</li>';
210
- return;
211
- }
 
 
 
 
 
 
212
 
213
- taskList.innerHTML = '';
 
 
 
 
 
 
 
 
 
214
 
215
- filteredTasks.forEach(task => {
216
- const taskElement = document.createElement('li');
217
- taskElement.className = `task-item p-4 hover:bg-gray-50 transition duration-150 ease-in-out priority-${task.priority}`;
218
- taskElement.dataset.id = task.id;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
219
 
220
- taskElement.innerHTML = `
221
- <div class="flex items-center">
222
- <div class="flex items-center mr-4">
223
- <input type="checkbox" ${task.completed ? 'checked' : ''}
224
- class="complete-checkbox w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500">
225
- </div>
226
- <div class="flex-grow">
227
- <p class="${task.completed ? 'line-through text-gray-400' : 'text-gray-800'}">${task.text}</p>
228
- <div class="flex items-center mt-1 text-sm text-gray-500">
229
- <span class="priority-badge mr-2 ${getPriorityBadgeClass(task.priority)}">
230
- ${getPriorityText(task.priority)}
231
- </span>
232
- <span>${formatDate(task.createdAt)}</span>
233
- </div>
234
  </div>
235
- <div class="task-actions opacity-0 transition-opacity duration-200 flex space-x-2">
236
- <button class="edit-btn p-1 text-gray-400 hover:text-indigo-600">
237
- <i class="fas fa-edit"></i>
238
- </button>
239
- <button class="delete-btn p-1 text-gray-400 hover:text-red-600">
240
- <i class="fas fa-trash"></i>
241
- </button>
242
  </div>
243
  </div>
244
- `;
245
-
246
- taskList.appendChild(taskElement);
247
-
248
- // Thêm sự kiện cho các nút
249
- const completeCheckbox = taskElement.querySelector('.complete-checkbox');
250
- const editBtn = taskElement.querySelector('.edit-btn');
251
- const deleteBtn = taskElement.querySelector('.delete-btn');
252
-
253
- completeCheckbox.addEventListener('change', function() {
254
- toggleTaskComplete(task.id, this.checked);
255
- });
256
-
257
- editBtn.addEventListener('click', function() {
258
- editTask(task.id);
259
- });
260
-
261
- deleteBtn.addEventListener('click', function() {
262
- deleteTask(task.id);
263
- });
264
- });
265
- }
266
-
267
- // Hàm chuyển đổi trạng thái hoàn thành
268
- function toggleTaskComplete(id, completed) {
269
- const taskIndex = tasks.findIndex(task => task.id === id);
270
- if (taskIndex !== -1) {
271
- tasks[taskIndex].completed = completed;
272
- saveTasks();
273
- updateStats();
274
-
275
- // Cập nhật giao diện
276
- const taskElement = document.querySelector(`.task-item[data-id="${id}"]`);
277
- if (taskElement) {
278
- const taskText = taskElement.querySelector('p');
279
- if (completed) {
280
- taskText.classList.add('line-through', 'text-gray-400');
281
- taskText.classList.remove('text-gray-800');
282
- } else {
283
- taskText.classList.remove('line-through', 'text-gray-400');
284
- taskText.classList.add('text-gray-800');
285
- }
286
- }
287
- }
288
- }
289
-
290
- // Hàm chỉnh sửa công việc
291
- function editTask(id) {
292
- const task = tasks.find(task => task.id === id);
293
- if (!task) return;
294
-
295
- const newText = prompt('Chỉnh sửa công việc:', task.text);
296
- if (newText !== null && newText.trim() !== '') {
297
- task.text = newText.trim();
298
- saveTasks();
299
- renderTasks();
300
- }
301
- }
302
-
303
- // Hàm xóa công việc
304
- function deleteTask(id) {
305
- if (confirm('Bạn có chắc chắn muốn xóa công việc này?')) {
306
- tasks = tasks.filter(task => task.id !== id);
307
- saveTasks();
308
- renderTasks();
309
- updateStats();
310
- }
311
- }
312
-
313
- // Hàm lưu công việc vào localStorage
314
- function saveTasks() {
315
- localStorage.setItem('tasks', JSON.stringify(tasks));
316
- }
317
-
318
- // Hàm cập nhật thống kê
319
- function updateStats() {
320
- const total = tasks.length;
321
- const completed = tasks.filter(task => task.completed).length;
322
- const pending = total - completed;
323
-
324
- totalTasksEl.textContent = total;
325
- completedTasksEl.textContent = completed;
326
- pendingTasksEl.textContent = pending;
327
- }
328
-
329
- // Hàm trợ giúp - lấy văn bản ưu tiên
330
- function getPriorityText(priority) {
331
- switch(priority) {
332
- case 'high': return 'Ưu tiên cao';
333
- case 'medium': return 'Ưu tiên trung bình';
334
- case 'low': return 'Ưu tiên thấp';
335
- default: return '';
336
- }
337
- }
338
-
339
- // Hàm trợ giúp - lấy class badge ưu tiên
340
- function getPriorityBadgeClass(priority) {
341
- switch(priority) {
342
- case 'high': return 'bg-red-100 text-red-800 px-2 py-0.5 rounded-full text-xs';
343
- case 'medium': return 'bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs';
344
- case 'low': return 'bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs';
345
- default: return '';
346
- }
347
- }
348
-
349
- // Hàm định dạng ngày tháng
350
- function formatDate(isoString) {
351
- const date = new Date(isoString);
352
- return date.toLocaleDateString('vi-VN', {
353
- day: '2-digit',
354
- month: '2-digit',
355
- year: 'numeric',
356
- hour: '2-digit',
357
- minute: '2-digit'
358
- });
359
- }
360
- });
361
- </script>
362
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=valentinabmt85/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
363
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Coaching - Phát triển bản thân với trí tuệ nhân tạo</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
12
  }
13
 
14
+ .feature-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
  }
18
 
19
+ .testimonial-card {
20
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
21
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
22
  }
23
 
24
+ @keyframes float {
25
+ 0% { transform: translateY(0px); }
26
+ 50% { transform: translateY(-10px); }
27
+ 100% { transform: translateY(0px); }
28
  }
29
 
30
+ .floating {
31
+ animation: float 6s ease-in-out infinite;
32
  }
33
 
34
+ .pricing-card:hover {
35
+ transform: scale(1.03);
36
  }
37
  </style>
38
  </head>
39
+ <body class="font-sans antialiased text-gray-800">
40
+ <!-- Header/Navigation -->
41
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
42
+ <div class="container mx-auto px-6 py-4">
43
+ <div class="flex items-center justify-between">
44
+ <div class="flex items-center">
45
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl mr-3">AI</div>
46
+ <span class="text-xl font-bold text-indigo-600">AI Coach</span>
 
 
 
 
 
47
  </div>
48
+
49
+ <nav class="hidden md:flex space-x-8">
50
+ <a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Tính năng</a>
51
+ <a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 transition">Cách hoạt động</a>
52
+ <a href="#pricing" class="text-gray-600 hover:text-indigo-600 transition">Gói dịch vụ</a>
53
+ <a href="#testimonials" class="text-gray-600 hover:text-indigo-600 transition">Đánh giá</a>
54
+ </nav>
55
+
56
+ <div class="flex items-center space-x-4">
57
+ <a href="#contact" class="hidden md:block px-4 py-2 text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition">Liên hệ</a>
58
+ <a href="#pricing" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Dùng thử miễn phí</a>
59
+ <button class="md:hidden text-gray-600">
60
+ <i class="fas fa-bars text-xl"></i>
61
+ </button>
62
  </div>
63
  </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Hero Section -->
68
+ <section class="hero-gradient text-white">
69
+ <div class="container mx-auto px-6 py-20 md:py-32">
70
+ <div class="flex flex-col md:flex-row items-center">
71
+ <div class="md:w-1/2 mb-12 md:mb-0">
72
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Phát triển bản thân với AI Coach cá nhân</h1>
73
+ <p class="text-xl mb-8 opacity-90">Công nghệ AI tiên tiến giúp bạn đạt được mục tiêu cá nhân, cải thiện kỹ năng và phát triển sự nghiệp một cách thông minh.</p>
74
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
75
+ <a href="#pricing" class="px-8 py-3 bg-white text-indigo-600 rounded-lg font-semibold text-center hover:bg-gray-100 transition">Bắt đầu ngay</a>
76
+ <a href="#how-it-works" class="px-8 py-3 border border-white rounded-lg font-semibold text-center hover:bg-white hover:bg-opacity-10 transition">Tìm hiểu thêm</a>
77
+ </div>
78
  </div>
79
+ <div class="md:w-1/2 flex justify-center">
80
+ <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="AI Coaching Illustration" class="w-full max-w-md floating">
 
81
  </div>
82
  </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Trusted By Section -->
87
+ <section class="bg-gray-50 py-12">
88
+ <div class="container mx-auto px-6">
89
+ <p class="text-center text-gray-500 mb-8">Được tin dùng bởi các cá nhân và tổ chức hàng đầu</p>
90
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
91
+ <div class="w-24 h-12 flex items-center">
92
+ <i class="fab fa-google text-3xl text-gray-600"></i>
93
  </div>
94
+ <div class="w-24 h-12 flex items-center">
95
+ <i class="fab fa-microsoft text-3xl text-gray-600"></i>
 
96
  </div>
97
+ <div class="w-24 h-12 flex items-center">
98
+ <i class="fab fa-slack text-3xl text-gray-600"></i>
 
 
 
 
 
 
 
 
99
  </div>
100
+ <div class="w-24 h-12 flex items-center">
101
+ <i class="fab fa-airbnb text-3xl text-gray-600"></i>
102
+ </div>
103
+ <div class="w-24 h-12 flex items-center">
104
+ <i class="fab fa-spotify text-3xl text-gray-600"></i>
 
105
  </div>
 
 
 
106
  </div>
107
  </div>
108
+ </section>
109
+
110
+ <!-- Features Section -->
111
+ <section id="features" class="py-20 bg-white">
112
+ <div class="container mx-auto px-6">
113
+ <div class="text-center mb-16">
114
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">AI Coach - Người đồng hành thông minh</h2>
115
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Công nghệ AI được thiết kế riêng để giúp bạn phát triển bản thân và đạt được mục tiêu cá nhân</p>
116
  </div>
117
+
118
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
119
+ <!-- Feature 1 -->
120
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
121
+ <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
122
+ <i class="fas fa-brain text-2xl text-indigo-600"></i>
123
+ </div>
124
+ <h3 class="text-xl font-bold mb-3">Phân tích thông minh</h3>
125
+ <p class="text-gray-600">AI phân tích điểm mạnh, điểm yếu và đề xuất lộ trình phát triển cá nhân phù hợp nhất với bạn.</p>
126
+ </div>
127
+
128
+ <!-- Feature 2 -->
129
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
130
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
131
+ <i class="fas fa-chart-line text-2xl text-purple-600"></i>
132
+ </div>
133
+ <h3 class="text-xl font-bold mb-3">Theo dõi tiến độ</h3>
134
+ <p class="text-gray-600">Hệ thống theo dõi và đánh giá tiến độ của bạn, điều chỉnh kế hoạch khi cần thiết để đảm bảo hiệu quả.</p>
135
+ </div>
136
+
137
+ <!-- Feature 3 -->
138
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
139
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
140
+ <i class="fas fa-comments text-2xl text-blue-600"></i>
141
+ </div>
142
+ <h3 class="text-xl font-bold mb-3">Tương tác 24/7</h3>
143
+ <p class="text-gray-600">Luôn có mặt khi bạn cần, trả lời mọi thắc mắc và đưa ra lời khuyên phù hợp với tình huống cụ thể.</p>
144
+ </div>
145
+
146
+ <!-- Feature 4 -->
147
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
148
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
149
+ <i class="fas fa-book text-2xl text-green-600"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold mb-3">Nội dung cá nhân hóa</h3>
152
+ <p class="text-gray-600">Bài học, bài tập và tài liệu được điều chỉnh theo nhu cầu, trình độ và phong cách học tập của bạn.</p>
153
+ </div>
154
+
155
+ <!-- Feature 5 -->
156
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
157
+ <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
158
+ <i class="fas fa-bullseye text-2xl text-yellow-600"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold mb-3">Đặt mục tiêu thông minh</h3>
161
+ <p class="text-gray-600">Giúp bạn xác định và chia nhỏ mục tiêu thành các bước hành động cụ thể, khả thi và đo lường được.</p>
162
+ </div>
163
+
164
+ <!-- Feature 6 -->
165
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
166
+ <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
167
+ <i class="fas fa-lock text-2xl text-red-600"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold mb-3">Bảo mật tuyệt đối</h3>
170
+ <p class="text-gray-600">Mọi thông tin cá nhân và dữ liệu của bạn được mã hóa và bảo vệ nghiêm ngặt.</p>
171
+ </div>
172
  </div>
173
  </div>
174
+ </section>
 
 
 
 
 
 
 
 
175
 
176
+ <!-- How It Works Section -->
177
+ <section id="how-it-works" class="py-20 bg-gray-50">
178
+ <div class="container mx-auto px-6">
179
+ <div class="text-center mb-16">
180
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Cách AI Coach hoạt động</h2>
181
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Chỉ với 3 bước đơn giản để bắt đầu hành trình phát triển cùng AI</p>
182
+ </div>
 
 
 
 
 
 
 
 
 
 
183
 
184
+ <div class="flex flex-col md:flex-row items-center justify-between">
185
+ <!-- Step 1 -->
186
+ <div class="md:w-1/3 mb-12 md:mb-0 px-6 text-center">
187
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
188
+ <span class="text-2xl font-bold text-indigo-600">1</span>
189
+ </div>
190
+ <h3 class="text-xl font-bold mb-3">Đăng ký & Đánh giá</h3>
191
+ <p class="text-gray-600">Tạo tài khoản và hoàn thành bài đánh giá năng lực ban đầu để AI hiểu rõ về bạn.</p>
192
+ </div>
193
+
194
+ <!-- Arrow -->
195
+ <div class="hidden md:block">
196
+ <i class="fas fa-arrow-right text-2xl text-gray-400"></i>
197
+ </div>
198
+
199
+ <!-- Step 2 -->
200
+ <div class="md:w-1/3 mb-12 md:mb-0 px-6 text-center">
201
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
202
+ <span class="text-2xl font-bold text-purple-600">2</span>
203
+ </div>
204
+ <h3 class="text-xl font-bold mb-3">Nhận kế hoạch cá nhân</h3>
205
+ <p class="text-gray-600">AI sẽ phân tích và đề xuất lộ trình phát triển phù hợp với mục tiêu của bạn.</p>
206
+ </div>
207
+
208
+ <!-- Arrow -->
209
+ <div class="hidden md:block">
210
+ <i class="fas fa-arrow-right text-2xl text-gray-400"></i>
211
+ </div>
212
+
213
+ <!-- Step 3 -->
214
+ <div class="md:w-1/3 px-6 text-center">
215
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
216
+ <span class="text-2xl font-bold text-blue-600">3</span>
217
+ </div>
218
+ <h3 class="text-xl font-bold mb-3">Bắt đầu hành trình</h3>
219
+ <p class="text-gray-600">Tương tác hàng ngày với AI Coach, theo dõi tiến độ và điều chỉnh khi cần.</p>
220
+ </div>
221
+ </div>
222
 
223
+ <div class="mt-16 text-center">
224
+ <a href="#pricing" class="px-8 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition inline-block">Bắt đầu ngay</a>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Pricing Section -->
230
+ <section id="pricing" class="py-20 bg-white">
231
+ <div class="container mx-auto px-6">
232
+ <div class="text-center mb-16">
233
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Chọn gói phù hợp với bạn</h2>
234
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Đầu tư thông minh cho sự phát triển bản thân</p>
235
+ </div>
236
 
237
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
238
+ <!-- Basic Plan -->
239
+ <div class="pricing-card bg-white rounded-xl border border-gray-200 p-8 transition duration-300">
240
+ <div class="mb-6">
241
+ <h3 class="text-xl font-bold mb-2">Cơ bản</h3>
242
+ <p class="text-gray-600">Phù hợp với người mới bắt đầu</p>
243
+ </div>
244
+ <div class="mb-6">
245
+ <span class="text-4xl font-bold">299.000đ</span>
246
+ <span class="text-gray-500">/tháng</span>
247
+ </div>
248
+ <ul class="mb-8 space-y-3">
249
+ <li class="flex items-center">
250
+ <i class="fas fa-check text-green-500 mr-2"></i>
251
+ <span>5 buổi coaching AI/tháng</span>
252
+ </li>
253
+ <li class="flex items-center">
254
+ <i class="fas fa-check text-green-500 mr-2"></i>
255
+ <span>Theo dõi 3 mục tiêu</span>
256
+ </li>
257
+ <li class="flex items-center">
258
+ <i class="fas fa-check text-green-500 mr-2"></i>
259
+ <span>Tài liệu cơ bản</span>
260
+ </li>
261
+ <li class="flex items-center text-gray-400">
262
+ <i class="fas fa-times text-gray-300 mr-2"></i>
263
+ <span>Không có hỗ trợ ưu tiên</span>
264
+ </li>
265
+ </ul>
266
+ <a href="#" class="block w-full py-3 px-4 text-center border border-indigo-600 text-indigo-600 rounded-lg font-medium hover:bg-indigo-50 transition">Chọn gói</a>
267
+ </div>
268
+
269
+ <!-- Pro Plan (Featured) -->
270
+ <div class="pricing-card bg-white rounded-xl border-2 border-indigo-600 shadow-lg p-8 transition duration-300 relative">
271
+ <div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">PHỔ BIẾN</div>
272
+ <div class="mb-6">
273
+ <h3 class="text-xl font-bold mb-2">Chuyên nghiệp</h3>
274
+ <p class="text-gray-600">Lựa chọn tốt nhất cho cá nhân</p>
275
+ </div>
276
+ <div class="mb-6">
277
+ <span class="text-4xl font-bold">699.000đ</span>
278
+ <span class="text-gray-500">/tháng</span>
279
+ </div>
280
+ <ul class="mb-8 space-y-3">
281
+ <li class="flex items-center">
282
+ <i class="fas fa-check text-green-500 mr-2"></i>
283
+ <span>15 buổi coaching AI/tháng</span>
284
+ </li>
285
+ <li class="flex items-center">
286
+ <i class="fas fa-check text-green-500 mr-2"></i>
287
+ <span>Theo dõi không giới hạn mục tiêu</span>
288
+ </li>
289
+ <li class="flex items-center">
290
+ <i class="fas fa-check text-green-500 mr-2"></i>
291
+ <span>Tài liệu nâng cao</span>
292
+ </li>
293
+ <li class="flex items-center">
294
+ <i class="fas fa-check text-green-500 mr-2"></i>
295
+ <span>Hỗ trợ ưu tiên 24/7</span>
296
+ </li>
297
+ </ul>
298
+ <a href="#" class="block w-full py-3 px-4 text-center bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Chọn gói</a>
299
+ </div>
300
+
301
+ <!-- Enterprise Plan -->
302
+ <div class="pricing-card bg-white rounded-xl border border-gray-200 p-8 transition duration-300">
303
+ <div class="mb-6">
304
+ <h3 class="text-xl font-bold mb-2">Doanh nghiệp</h3>
305
+ <p class="text-gray-600">Dành cho tổ chức, công ty</p>
306
+ </div>
307
+ <div class="mb-6">
308
+ <span class="text-4xl font-bold">Liên hệ</span>
309
+ </div>
310
+ <ul class="mb-8 space-y-3">
311
+ <li class="flex items-center">
312
+ <i class="fas fa-check text-green-500 mr-2"></i>
313
+ <span>Coaching AI không giới hạn</span>
314
+ </li>
315
+ <li class="flex items-center">
316
+ <i class="fas fa-check text-green-500 mr-2"></i>
317
+ <span>Quản lý nhóm & báo cáo</span>
318
+ </li>
319
+ <li class="flex items-center">
320
+ <i class="fas fa-check text-green-500 mr-2"></i>
321
+ <span>Tài liệu đặc biệt</span>
322
+ </li>
323
+ <li class="flex items-center">
324
+ <i class="fas fa-check text-green-500 mr-2"></i>
325
+ <span>Hỗ trợ chuyên dụng</span>
326
+ </li>
327
+ </ul>
328
+ <a href="#contact" class="block w-full py-3 px-4 text-center border border-indigo-600 text-indigo-600 rounded-lg font-medium hover:bg-indigo-50 transition">Liên hệ</a>
329
+ </div>
330
+ </div>
331
 
332
+ <div class="mt-12 text-center">
333
+ <p class="text-gray-600">Bạn cần gói tùy chỉnh? <a href="#contact" class="text-indigo-600 hover:underline">Liên hệ với chúng tôi</a></p>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Testimonials Section -->
339
+ <section id="testimonials" class="py-20 bg-gray-50">
340
+ <div class="container mx-auto px-6">
341
+ <div class="text-center mb-16">
342
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Khách hàng nói gì về chúng tôi</h2>
343
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Hàng nghìn cá nhân đã thay đổi nhờ AI Coach</p>
344
+ </div>
345
 
346
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
347
+ <!-- Testimonial 1 -->
348
+ <div class="testimonial-card rounded-xl p-6">
349
+ <div class="flex items-center mb-4">
350
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
351
+ <i class="fas fa-user text-indigo-600"></i>
352
+ </div>
353
+ <div>
354
+ <h4 class="font-bold">Nguyễn Thị Mai</h4>
355
+ <p class="text-sm text-gray-500">Nhân viên Marketing</p>
356
+ </div>
357
+ </div>
358
+ <div class="mb-4">
359
+ <div class="flex text-yellow-400">
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ </div>
366
+ </div>
367
+ <p class="text-gray-600">"AI Coach đã giúp tôi vượt qua sự trì hoãn và quản lý thời gian hiệu quả hơn. Sau 3 tháng, năng suất làm việc của tôi tăng 40%."</p>
368
+ </div>
369
 
370
+ <!-- Testimonial 2 -->
371
+ <div class="testimonial-card rounded-xl p-6">
372
+ <div class="flex items-center mb-4">
373
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
374
+ <i class="fas fa-user text-purple-600"></i>
375
+ </div>
376
+ <div>
377
+ <h4 class="font-bold">Trần Văn Nam</h4>
378
+ <p class="text-sm text-gray-500">Startup Founder</p>
379
+ </div>
380
+ </div>
381
+ <div class="mb-4">
382
+ <div class="flex text-yellow-400">
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ </div>
389
+ </div>
390
+ <p class="text-gray-600">"Lời khuyên từ AI Coach về quản lý đội nhóm và phát triển sản phẩm cực kỳ chính xác. Nhờ đó, startup của tôi đã kêu gọi được vốn Series A."</p>
391
+ </div>
392
 
393
+ <!-- Testimonial 3 -->
394
+ <div class="testimonial-card rounded-xl p-6">
395
+ <div class="flex items-center mb-4">
396
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
397
+ <i class="fas fa-user text-blue-600"></i>
398
+ </div>
399
+ <div>
400
+ <h4 class="font-bold">Lê Hoàng Anh</h4>
401
+ <p class="text-sm text-gray-500">Sinh viên</p>
402
+ </div>
403
+ </div>
404
+ <div class="mb-4">
405
+ <div class="flex text-yellow-400">
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star-half-alt"></i>
411
+ </div>
412
+ </div>
413
+ <p class="text-gray-600">"AI Coach như một người bạn đồng hành thông minh, giúp tôi lập kế hoạch học tập và đạt điểm cao hơn trong kỳ thi vừa rồi."</p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </section>
418
+
419
+ <!-- CTA Section -->
420
+ <section class="py-16 bg-indigo-600 text-white">
421
+ <div class="container mx-auto px-6 text-center">
422
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Sẵn sàng thay đổi bản thân?</h2>
423
+ <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Đăng ký ngay để trải nghiệm 7 ngày miễn phí với AI Coach cá nhân của bạn.</p>
424
+ <a href="#pricing" class="inline-block px-8 py-3 bg-white text-indigo-600 rounded-lg font-semibold hover:bg-gray-100 transition">Bắt đầu miễn phí</a>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- FAQ Section -->
429
+ <section class="py-20 bg-white">
430
+ <div class="container mx-auto px-6 max-w-4xl">
431
+ <div class="text-center mb-16">
432
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Câu hỏi thường gặp</h2>
433
+ <p class="text-xl text-gray-600">Chúng tôi sẵn sàng giải đáp mọi thắc mắc của bạn</p>
434
+ </div>
435
 
436
+ <div class="space-y-6">
437
+ <!-- FAQ 1 -->
438
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
439
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
440
+ <span class="text-lg font-medium">AI Coach có thực sự hiệu quả như huấn luyện viên con người?</span>
441
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
442
+ </button>
443
+ <div class="faq-content hidden px-6 pb-6 pt-0">
444
+ <p class="text-gray-600">AI Coach mang lại hiệu quả khác biệt nhưng bổ sung cho huấn luyện viên con người. Với khả năng phân tích dữ liệu khách quan, theo dõi liên tục 24/7 và chi phí hợp lý, AI Coach là giải pháp tối ưu cho phát triển cá nhân. Nhiều người dùng kết hợp cả hai để đạt kết quả tốt nhất.</p>
445
+ </div>
446
+ </div>
 
447
 
448
+ <!-- FAQ 2 -->
449
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
450
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
451
+ <span class="text-lg font-medium">Dữ liệu cá nhân của tôi có được bảo mật?</span>
452
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
453
+ </button>
454
+ <div class="faq-content hidden px-6 pb-6 pt-0">
455
+ <p class="text-gray-600">Chúng tôi sử dụng công nghệ mã hóa tiên tiến nhất để bảo vệ dữ liệu của bạn. Mọi thông tin cá nhân chỉ được sử dụng để cải thiện trải nghiệm coaching và không bao giờ được chia sẻ với bên thứ ba mà không có sự đồng ý của bạn.</p>
456
+ </div>
457
+ </div>
458
 
459
+ <!-- FAQ 3 -->
460
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
461
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
462
+ <span class="text-lg font-medium">Tôi có thể hủy gói dịch vụ bất cứ lúc nào?</span>
463
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
464
+ </button>
465
+ <div class="faq-content hidden px-6 pb-6 pt-0">
466
+ <p class="text-gray-600">Đúng vậy! Bạn có thể hủy gói dịch vụ bất cứ lúc nào và không phải chịu bất kỳ phí phạt nào. Chúng tôi tin rằng bạn sẽ thấy giá trị từ dịch vụ và tiếp tục sử dụng mà không cần ràng buộc hợp đồng.</p>
467
+ </div>
468
+ </div>
469
 
470
+ <!-- FAQ 4 -->
471
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
472
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
473
+ <span class="text-lg font-medium">AI Coach phù hợp với những lĩnh vực nào?</span>
474
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
475
+ </button>
476
+ <div class="faq-content hidden px-6 pb-6 pt-0">
477
+ <p class="text-gray-600">AI Coach của chúng tôi hiện tập trung vào các lĩnh vực: phát triển sự nghiệp, quản lý thời gian, kỹ năng lãnh đạo, giao tiếp, sáng tạo và phát triển thói quen tích cực. Chúng tôi liên tục cập nhật thêm các lĩnh vực mới dựa trên nhu cầu người dùng.</p>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Contact Section -->
485
+ <section id="contact" class="py-20 bg-gray-50">
486
+ <div class="container mx-auto px-6">
487
+ <div class="flex flex-col md:flex-row">
488
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
489
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Liên hệ với chúng tôi</h2>
490
+ <p class="text-xl text-gray-600 mb-8">Đội ngũ chuyên gia của chúng tôi luôn sẵn sàng hỗ trợ bạn.</p>
491
 
492
+ <div class="space-y-6">
493
+ <div class="flex items-start">
494
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
495
+ <i class="fas fa-envelope text-indigo-600"></i>
 
 
 
 
 
 
 
 
 
 
496
  </div>
497
+ <div>
498
+ <h4 class="font-bold mb-1">Email</h4>
499
+ <p class="text-gray-600">[email protected]</p>
 
 
 
 
500
  </div>
501
  </div>
502
+
503
+ <div class="flex items-start">
504
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
505
+ <i class="fas fa-phone-alt text-purple-600"></i>
506
+ </div>
507
+ <div>
508
+ <h4 class="font-bold mb-1">Điện thoại</h4>
509
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
510
  </html>