Spaces:
Running
Running
File size: 43,498 Bytes
8c1c42a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 |
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FBSocialTool VIP - Công Cụ Facebook Marketing Cao Cấp</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.vip-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(45deg, #f59e0b, #f97316);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.pricing-card:hover {
transform: scale(1.03);
}
.feature-list li:before {
content: "✓";
color: #10b981;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.ai-feature {
border-left: 4px solid #8b5cf6;
background-color: #f5f3ff;
}
.vip-feature {
background: linear-gradient(45deg, #f5f3ff, #e9d8fd);
border-left: 4px solid #8b5cf6;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fab fa-facebook-square text-3xl"></i>
<h1 class="text-2xl font-bold">FBSocialTool VIP</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-gray-200 transition">Tính năng</a>
<a href="#tools" class="hover:text-gray-200 transition">Công cụ</a>
<a href="#pricing" class="hover:text-gray-200 transition">Bảng giá</a>
<a href="#faq" class="hover:text-gray-200 transition">FAQ</a>
</nav>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 rounded-full bg-white text-blue-600 font-semibold hover:bg-gray-100 transition" id="login-button">Đăng nhập</button>
<button class="md:hidden text-2xl" id="mobile-menu-button">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-indigo-800 py-4 px-4" id="mobile-menu">
<div class="flex flex-col space-y-3">
<a href="#features" class="text-white hover:text-gray-200">Tính năng</a>
<a href="#tools" class="text-white hover:text-gray-200">Công cụ</a>
<a href="#pricing" class="text-white hover:text-gray-200">Bảng giá</a>
<a href="#faq" class="text-white hover:text-gray-200">FAQ</a>
</div>
</div>
</header>
<!-- Login Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="login-modal">
<div class="bg-white rounded-xl p-8 w-full max-w-md">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Đăng nhập</h3>
<button class="text-gray-500 hover:text-gray-700" id="close-login-modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<button class="w-full flex items-center justify-center space-x-3 bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition">
<i class="fab fa-facebook-f"></i>
<span>Đăng nhập với Facebook</span>
</button>
<button class="w-full flex items-center justify-center space-x-3 bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition">
<i class="fab fa-google"></i>
<span>Đăng nhập với Google</span>
</button>
<button class="w-full flex items-center justify-center space-x-3 bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700 transition">
<i class="fab fa-zalo"></i>
<span>Đăng nhập với Zalo</span>
</button>
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-300"></div>
<span class="flex-shrink mx-4 text-gray-500">hoặc</span>
<div class="flex-grow border-t border-gray-300"></div>
</div>
<div>
<label class="block text-gray-700 mb-2">Email</label>
<input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 mb-2">Mật khẩu</label>
<input type="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition">Đăng nhập</button>
<div class="text-center text-sm text-gray-600">
<a href="#" class="text-blue-600 hover:underline">Quên mật khẩu?</a> |
<a href="#" class="text-blue-600 hover:underline">Đăng ký tài khoản</a>
</div>
</div>
</div>
</div>
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Nâng Tầm Chiến Dịch Facebook Của Bạn</h2>
<p class="text-xl mb-8 text-gray-100">Công cụ AI mạnh mẽ giúp bạn tìm kiếm khách hàng tiềm năng, phân tích thông tin và tự động hóa tiếp thị trên Facebook.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="px-8 py-3 bg-white text-blue-600 rounded-full font-bold hover:bg-gray-100 transition">Bắt đầu ngay</button>
<button class="px-8 py-3 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:text-blue-600 transition">Khám phá tính năng</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative bg-white rounded-xl shadow-2xl p-4 w-full max-w-md">
<div class="absolute -top-4 -right-4 bg-yellow-500 text-white px-4 py-1 rounded-full font-bold text-sm">VIP</div>
<img src="https://via.placeholder.com/500x300" alt="Dashboard Preview" class="rounded-lg w-full">
<div class="mt-4 flex justify-between items-center">
<div>
<h3 class="font-bold text-gray-800">Bảng điều khiển AI</h3>
<p class="text-gray-600 text-sm">Phân tích khách hàng & tự động hóa</p>
</div>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Truy cập</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tính Năng Độc Quyền VIP</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Công nghệ AI tiên tiến giúp bạn tiếp cận khách hàng mục tiêu hiệu quả hơn bao giờ hết.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- AI Feature 1 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-search-dollar text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Tìm Kiếm Khách Hàng</h3>
<p class="text-gray-600">Tự động quét các bài quảng cáo, bài viết yêu thích và hội nhóm (cả công khai lẫn riêng tư) để tìm khách hàng tiềm năng phù hợp với sản phẩm/dịch vụ của bạn.</p>
<div class="mt-4">
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">Độ chính xác 98%</span>
</div>
</div>
<!-- AI Feature 2 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-id-card text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Thu Thập Thông Tin</h3>
<p class="text-gray-600">Phân tích và trích xuất thông tin khách hàng bao gồm SĐT, email, giới tính, địa chỉ từ hồ sơ Facebook và các tương tác công khai.</p>
<div class="mt-4">
<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">10,000+ hồ sơ/ngày</span>
</div>
</div>
<!-- AI Feature 3 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-sitemap text-pink-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Phân Loại Khách Hàng</h3>
<p class="text-gray-600">Tự động phân nhóm khách hàng theo độ tuổi, sở thích, hành vi mua sắm và mức độ quan tâm để có chiến lược tiếp cận phù hợp.</p>
<div class="mt-4">
<span class="inline-block bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">25 tiêu chí phân loại</span>
</div>
</div>
<!-- AI Feature 4 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-puzzle-piece text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Ghép Nối Sản Phẩm</h3>
<p class="text-gray-600">Phân tích nhu cầu và đề xuất sản phẩm/dịch vụ phù hợp nhất với từng khách hàng dựa trên lịch sử tương tác và hồ sơ cá nhân.</p>
<div class="mt-4">
<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">Tỷ lệ chuyển đổi +45%</span>
</div>
</div>
<!-- AI Feature 5 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-robot text-yellow-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Tương Tác Tự Động</h3>
<p class="text-gray-600">Tự động bình luận, gửi tin nhắn cá nhân hóa và gửi lời mời kết bạn với nội dung được tối ưu cho từng đối tượng khách hàng.</p>
<div class="mt-4">
<span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">5000+ tin nhắn/ngày</span>
</div>
</div>
<!-- AI Feature 6 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition">
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-chart-network text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Báo Cáo Thông Minh</h3>
<p class="text-gray-600">Theo dõi hiệu quả chiến dịch với báo cáo chi tiết về tỷ lệ chuyển đổi, phản hồi và ROI được phân tích tự động bởi AI.</p>
<div class="mt-4">
<span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">30+ chỉ số phân tích</span>
</div>
</div>
</div>
</div>
</section>
<!-- Tools Section -->
<section id="tools" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Bộ Công Cụ VIP Toàn Diện</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tất cả tính năng cao cấp đã được mở khóa cho tài khoản của bạn.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- VIP Tool Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-users text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Phân Tích Đối Tượng</h3>
</div>
<p class="text-gray-600 mb-6">Khám phá thông tin chi tiết về người theo dõi và nhân khẩu học của họ với độ chính xác cao.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Độ chính xác 96%</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Sử dụng</button>
</div>
</div>
</div>
<!-- VIP Tool Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-calendar-alt text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Lập Lịch Bài Đăng</h3>
</div>
<p class="text-gray-600 mb-6">Lên kế hoạch và lập lịch nội dung của bạn cho các thời điểm tương tác tối ưu với AI đề xuất.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Tự động hóa 100%</span>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">Sử dụng</button>
</div>
</div>
</div>
<!-- VIP Tool Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-trophy text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Theo Dõi Đối Thủ</h3>
</div>
<p class="text-gray-600 mb-6">Phân tích chiến lược và chỉ số hiệu suất của đối thủ cạnh tranh với báo cáo chi tiết.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Theo dõi 50+ đối thủ</span>
<button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">Sử dụng</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-user-plus text-pink-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Tìm Khách Hàng AI</h3>
</div>
<p class="text-gray-600 mb-6">Quét tự động các bài viết, quảng cáo và nhóm để tìm khách hàng tiềm năng với AI thông minh.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded-full">10,000+ KH/ngày</span>
<button class="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition">Sử dụng</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-comments text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Tương Tác Tự Động AI</h3>
</div>
<p class="text-gray-600 mb-6">Tự động bình luận, nhắn tin và kết bạn với khách hàng tiềm năng với nội dung cá nhân hóa.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">5000+ tương tác/ngày</span>
<button class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition">Sử dụng</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-chart-network text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Phân Tích Kinh Doanh AI</h3>
</div>
<p class="text-gray-600 mb-6">Đề xuất chiến lược tiếp thị tối ưu dựa trên phân tích dữ liệu AI và xu hướng thị trường.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">30+ chỉ số phân tích</span>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Sử dụng</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tất Cả Tính Năng Đã Được Mở Khóa</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tài khoản của bạn đã được kích hoạt tất cả tính năng cao cấp.</p>
</div>
<div class="max-w-md mx-auto bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl shadow-lg p-8 text-center">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-crown text-blue-600 text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Tài Khoản VIP PRO</h3>
<p class="text-gray-600 mb-6">Bạn đang sử dụng tất cả tính năng cao cấp nhất của chúng tôi</p>
<div class="bg-white rounded-lg p-6 mb-6">
<div class="text-4xl font-bold text-blue-600 mb-2">Đã kích hoạt</div>
<div class="text-sm text-gray-500">Tất cả tính năng VIP & AI</div>
</div>
<button class="w-full py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">Quản lý tài khoản</button>
</div>
<div class="mt-12 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-6 md:mb-0">
<h3 class="text-xl font-bold mb-2">Giải Pháp Doanh Nghiệp</h3>
<p class="text-gray-600">Cần giải pháp tùy chỉnh cho doanh nghiệp hoặc agency của bạn?</p>
</div>
<div class="md:w-1/2 flex justify-end">
<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Liên Hệ Bán Hàng</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Khách Hàng Nói Gì Về Chúng Tôi</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tham gia cùng hàng nghìn người dùng hài lòng đã tăng cường sự hiện diện trên Facebook với công cụ của chúng tôi.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">TN</div>
<div>
<h4 class="font-bold">Trần Ngọc</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Công cụ tìm kiếm khách hàng AI đã giúp tôi tăng gấp 3 doanh số chỉ trong 2 tháng. Đáng đồng tiền bát gạo!"</p>
<div class="text-sm text-gray-500">Chủ shop thời trang</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">LM</div>
<div>
<h4 class="font-bold">Lê Minh</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Công cụ phân tích đối thủ cho tôi thông tin mà không nơi nào khác có. Chiến lược nội dung của tôi cải thiện đáng kể."</p>
<div class="text-sm text-gray-500">Agency Digital Marketing</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 font-bold mr-4">PH</div>
<div>
<h4 class="font-bold">Phạm Hương</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Tính năng tự động trả lời tin nhắn tiết kiệm cho tôi hàng giờ mỗi tuần. Bản miễn phí đã tốt nhưng nâng cấp VIP mới thực sự thay đổi cuộc chơi."</p>
<div class="text-sm text-gray-500">Nhà bán hàng online</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-4xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Câu Hỏi Thường Gặp</h2>
<p class="text-gray-600">Tìm câu trả lời cho các câu hỏi phổ biến về công cụ và tính năng VIP của chúng tôi.</p>
</div>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tôi có thể sử dụng tất cả tính năng ngay lập tức không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Có, tất cả các tính năng bao gồm AI Tìm Kiếm Khách Hàng, AI Thu Thập Thông Tin, AI Phân Loại Khách Hàng, AI Ghép Nối Sản Phẩm, AI Tương Tác Tự Động và Báo Cáo Thông Minh đã được mở khóa và sẵn sàng sử dụng ngay lập tức.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tài khoản Facebook của tôi có an toàn với công cụ của bạn không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Hoàn toàn an toàn. Chúng tôi sử dụng API chính thức của Facebook và tuân thủ tất cả các hướng dẫn của nền tảng. Chúng tôi không bao giờ lưu trữ mật khẩu của bạn và chỉ yêu cầu các quyền tối thiểu cần thiết để công cụ hoạt động. Tài khoản VIP có thêm các tính năng bảo mật như cảnh báo đăng nhập và giám sát hoạt động.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Giới hạn sử dụng các tính năng AI là bao nhiêu?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Với tài khoản VIP PRO, bạn có thể sử dụng tất cả tính năng AI không giới hạn. Cụ thể: AI Tìm Kiếm Khách Hàng (10,000+ KH/ngày), AI Thu Thập Thông Tin (10,000+ hồ sơ/ngày), AI Tương Tác Tự Động (5,000+ tin nhắn/ngày). Nếu cần mở rộng giới hạn, vui lòng liên hệ bộ phận hỗ trợ.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Làm thế nào để tối ưu hiệu quả các công cụ AI?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Chúng tôi cung cấp hướng dẫn chi tiết và video tutorial trong mục Tài Nguyên. Ngoài ra, với tài khoản VIP PRO, bạn sẽ được hỗ trợ 1:1 từ chuyên gia để thiết lập và tối ưu hệ thống AI cho nhu cầu cụ thể của bạn. Chúng tôi khuyến nghị bắt đầu với AI Phân Tích Đối Tượng trước khi sử dụng các công cụ tự động hóa.</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tôi có thể tích hợp với các nền tảng khác không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Có, chúng tôi hỗ trợ tích hợp với Google Sheets, Zapier, và nhiều nền tảng CRM phổ biến. Với tài khoản VIP PRO, bạn còn có quyền truy cập API để tự động hóa quy trình làm việc của mình. Vui lòng truy cập mục Tài Liệu API để biết thêm chi tiết.</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-600 mb-6">Vẫn còn thắc mắc? Đội ngũ hỗ trợ VIP của chúng tôi sẵn lòng giúp đỡ.</p>
<button class="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">Liên Hệ Hỗ Trợ VIP</button>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Sẵn Sàng Khám Phá Sức Mạnh AI?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-100">Bắt đầu ngay với tất cả tính năng cao cấp đã được mở khóa trong tài khoản của bạn.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<button class="px-8 py-3 bg-white text-blue-600 rounded-full font-bold hover:bg-gray-100 transition">Truy Cập Bảng Điều Khiển</button>
<button class="px-8 py-3 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:text-blue-600 transition">Xem Hướng Dẫn VIP</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fab fa-facebook-square text-2xl text-blue-400"></i>
<h3 class="text-xl font-bold text-white">FBSocialTool VIP</h3>
</div>
<p class="mb-4">Công cụ mạnh mẽ để phân tích, phát triển và quản lý sự hiện diện trên Facebook của bạn.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">Công Cụ</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Phân Tích Đối Tượng</a></li>
<li><a href="#" class="hover:text-white transition">Lập Lịch Bài Đăng</a></li>
<li><a href="#" class="hover:text-white transition">Tìm Khách Hàng AI</a></li>
<li><a href="#" class="hover:text-white transition">Tương Tác Tự Động AI</a></li>
<li><a href="#" class="hover:text-white transition">Phân Tích Kinh Doanh AI</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Tài Nguyên</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Hướng Dẫn VIP</a></li>
<li><a href="#" class="hover:text-white transition">Case Study</a></li>
<li><a href="#" class="hover:text-white transition">Webinar</a></li>
<li><a href="#" class="hover:text-white transition">Tài Liệu API</a></li>
<li><a href="#" class="hover:text-white transition">Cộng Đồng VIP</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Hỗ Trợ</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Hỗ Trợ VIP 24/7</a></li>
<li><a href="#" class="hover:text-white transition">Đào Tạo 1:1</a></li>
<li><a href="#" class="hover:text-white transition">Liên Hệ</a></li>
<li><a href="#" class="hover:text-white transition">Chính Sách Bảo Mật</a></li>
<li><a href="#" class="hover:text-white transition">Điều Khoản VIP</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 FBSocialTool VIP PRO. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Bảo Mật</a>
<a href="#" class="hover:text-white transition">Điều Khoản</a>
<a href="#" class="hover:text-white transition">Cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Login modal toggle
document.getElementById('login-button').addEventListener('click', function() {
document.getElementById('login-modal').classList.remove('hidden');
});
document.getElementById('close-login-modal').addEventListener('click', function() {
document.getElementById('login-modal').classList.add('hidden');
});
// FAQ toggle functionality
document.querySelectorAll('.faq-toggle').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
const icon = button.querySelector('i');
// Toggle content visibility
content.classList.toggle('hidden');
// Rotate icon
if (content.classList.contains('hidden')) {
icon.classList.remove('rotate-180');
} else {
icon.classList.add('rotate-180');
}
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
// Close mobile menu if open
document.getElementById('mobile-menu').classList.add('hidden');
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
<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=ducnhat036/toolfb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |