Spaces:
Running
Running
<html lang="vi"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>AI Coaching - Phát triển bản thân với trí tuệ nhân tạo</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> | |
.hero-gradient { | |
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); | |
} | |
.feature-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); | |
} | |
.testimonial-card { | |
background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%); | |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
} | |
@keyframes float { | |
0% { transform: translateY(0px); } | |
50% { transform: translateY(-10px); } | |
100% { transform: translateY(0px); } | |
} | |
.floating { | |
animation: float 6s ease-in-out infinite; | |
} | |
.pricing-card:hover { | |
transform: scale(1.03); | |
} | |
</style> | |
</head> | |
<body class="font-sans antialiased text-gray-800"> | |
<!-- Header/Navigation --> | |
<header class="sticky top-0 z-50 bg-white shadow-sm"> | |
<div class="container mx-auto px-6 py-4"> | |
<div class="flex items-center justify-between"> | |
<div class="flex items-center"> | |
<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> | |
<span class="text-xl font-bold text-indigo-600">AI Coach</span> | |
</div> | |
<nav class="hidden md:flex space-x-8"> | |
<a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Tính năng</a> | |
<a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 transition">Cách hoạt động</a> | |
<a href="#pricing" class="text-gray-600 hover:text-indigo-600 transition">Gói dịch vụ</a> | |
<a href="#testimonials" class="text-gray-600 hover:text-indigo-600 transition">Đánh giá</a> | |
</nav> | |
<div class="flex items-center space-x-4"> | |
<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> | |
<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> | |
<button class="md:hidden text-gray-600"> | |
<i class="fas fa-bars text-xl"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
</header> | |
<!-- Hero Section --> | |
<section class="hero-gradient text-white"> | |
<div class="container mx-auto px-6 py-20 md:py-32"> | |
<div class="flex flex-col md:flex-row items-center"> | |
<div class="md:w-1/2 mb-12 md:mb-0"> | |
<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> | |
<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> | |
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
<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> | |
<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> | |
</div> | |
</div> | |
<div class="md:w-1/2 flex justify-center"> | |
<img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="AI Coaching Illustration" class="w-full max-w-md floating"> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Trusted By Section --> | |
<section class="bg-gray-50 py-12"> | |
<div class="container mx-auto px-6"> | |
<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> | |
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70"> | |
<div class="w-24 h-12 flex items-center"> | |
<i class="fab fa-google text-3xl text-gray-600"></i> | |
</div> | |
<div class="w-24 h-12 flex items-center"> | |
<i class="fab fa-microsoft text-3xl text-gray-600"></i> | |
</div> | |
<div class="w-24 h-12 flex items-center"> | |
<i class="fab fa-slack text-3xl text-gray-600"></i> | |
</div> | |
<div class="w-24 h-12 flex items-center"> | |
<i class="fab fa-airbnb text-3xl text-gray-600"></i> | |
</div> | |
<div class="w-24 h-12 flex items-center"> | |
<i class="fab fa-spotify text-3xl text-gray-600"></i> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Features Section --> | |
<section id="features" class="py-20 bg-white"> | |
<div class="container mx-auto px-6"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-4">AI Coach - Người đồng hành thông minh</h2> | |
<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> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<!-- Feature 1 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-brain text-2xl text-indigo-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Phân tích thông minh</h3> | |
<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> | |
</div> | |
<!-- Feature 2 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-chart-line text-2xl text-purple-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Theo dõi tiến độ</h3> | |
<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> | |
</div> | |
<!-- Feature 3 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-comments text-2xl text-blue-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Tương tác 24/7</h3> | |
<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> | |
</div> | |
<!-- Feature 4 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-book text-2xl text-green-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Nội dung cá nhân hóa</h3> | |
<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> | |
</div> | |
<!-- Feature 5 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-bullseye text-2xl text-yellow-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Đặt mục tiêu thông minh</h3> | |
<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> | |
</div> | |
<!-- Feature 6 --> | |
<div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
<div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6"> | |
<i class="fas fa-lock text-2xl text-red-600"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Bảo mật tuyệt đối</h3> | |
<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> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- How It Works Section --> | |
<section id="how-it-works" class="py-20 bg-gray-50"> | |
<div class="container mx-auto px-6"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-4">Cách AI Coach hoạt động</h2> | |
<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> | |
</div> | |
<div class="flex flex-col md:flex-row items-center justify-between"> | |
<!-- Step 1 --> | |
<div class="md:w-1/3 mb-12 md:mb-0 px-6 text-center"> | |
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<span class="text-2xl font-bold text-indigo-600">1</span> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Đăng ký & Đánh giá</h3> | |
<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> | |
</div> | |
<!-- Arrow --> | |
<div class="hidden md:block"> | |
<i class="fas fa-arrow-right text-2xl text-gray-400"></i> | |
</div> | |
<!-- Step 2 --> | |
<div class="md:w-1/3 mb-12 md:mb-0 px-6 text-center"> | |
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<span class="text-2xl font-bold text-purple-600">2</span> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Nhận kế hoạch cá nhân</h3> | |
<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> | |
</div> | |
<!-- Arrow --> | |
<div class="hidden md:block"> | |
<i class="fas fa-arrow-right text-2xl text-gray-400"></i> | |
</div> | |
<!-- Step 3 --> | |
<div class="md:w-1/3 px-6 text-center"> | |
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<span class="text-2xl font-bold text-blue-600">3</span> | |
</div> | |
<h3 class="text-xl font-bold mb-3">Bắt đầu hành trình</h3> | |
<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> | |
</div> | |
</div> | |
<div class="mt-16 text-center"> | |
<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> | |
</div> | |
</div> | |
</section> | |
<!-- Pricing Section --> | |
<section id="pricing" class="py-20 bg-white"> | |
<div class="container mx-auto px-6"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-4">Chọn gói phù hợp với bạn</h2> | |
<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> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
<!-- Basic Plan --> | |
<div class="pricing-card bg-white rounded-xl border border-gray-200 p-8 transition duration-300"> | |
<div class="mb-6"> | |
<h3 class="text-xl font-bold mb-2">Cơ bản</h3> | |
<p class="text-gray-600">Phù hợp với người mới bắt đầu</p> | |
</div> | |
<div class="mb-6"> | |
<span class="text-4xl font-bold">299.000đ</span> | |
<span class="text-gray-500">/tháng</span> | |
</div> | |
<ul class="mb-8 space-y-3"> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>5 buổi coaching AI/tháng</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Theo dõi 3 mục tiêu</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Tài liệu cơ bản</span> | |
</li> | |
<li class="flex items-center text-gray-400"> | |
<i class="fas fa-times text-gray-300 mr-2"></i> | |
<span>Không có hỗ trợ ưu tiên</span> | |
</li> | |
</ul> | |
<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> | |
</div> | |
<!-- Pro Plan (Featured) --> | |
<div class="pricing-card bg-white rounded-xl border-2 border-indigo-600 shadow-lg p-8 transition duration-300 relative"> | |
<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> | |
<div class="mb-6"> | |
<h3 class="text-xl font-bold mb-2">Chuyên nghiệp</h3> | |
<p class="text-gray-600">Lựa chọn tốt nhất cho cá nhân</p> | |
</div> | |
<div class="mb-6"> | |
<span class="text-4xl font-bold">699.000đ</span> | |
<span class="text-gray-500">/tháng</span> | |
</div> | |
<ul class="mb-8 space-y-3"> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>15 buổi coaching AI/tháng</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Theo dõi không giới hạn mục tiêu</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Tài liệu nâng cao</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Hỗ trợ ưu tiên 24/7</span> | |
</li> | |
</ul> | |
<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> | |
</div> | |
<!-- Enterprise Plan --> | |
<div class="pricing-card bg-white rounded-xl border border-gray-200 p-8 transition duration-300"> | |
<div class="mb-6"> | |
<h3 class="text-xl font-bold mb-2">Doanh nghiệp</h3> | |
<p class="text-gray-600">Dành cho tổ chức, công ty</p> | |
</div> | |
<div class="mb-6"> | |
<span class="text-4xl font-bold">Liên hệ</span> | |
</div> | |
<ul class="mb-8 space-y-3"> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Coaching AI không giới hạn</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Quản lý nhóm & báo cáo</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Tài liệu đặc biệt</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-check text-green-500 mr-2"></i> | |
<span>Hỗ trợ chuyên dụng</span> | |
</li> | |
</ul> | |
<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> | |
</div> | |
</div> | |
<div class="mt-12 text-center"> | |
<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> | |
</div> | |
</div> | |
</section> | |
<!-- Testimonials Section --> | |
<section id="testimonials" class="py-20 bg-gray-50"> | |
<div class="container mx-auto px-6"> | |
<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-xl text-gray-600 max-w-2xl mx-auto">Hàng nghìn cá nhân đã thay đổi nhờ AI Coach</p> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
<!-- Testimonial 1 --> | |
<div class="testimonial-card rounded-xl p-6"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-indigo-600"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">Nguyễn Thị Mai</h4> | |
<p class="text-sm text-gray-500">Nhân viên Marketing</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<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> | |
<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> | |
</div> | |
<!-- Testimonial 2 --> | |
<div class="testimonial-card rounded-xl p-6"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-purple-600"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">Trần Văn Nam</h4> | |
<p class="text-sm text-gray-500">Startup Founder</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<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> | |
<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> | |
</div> | |
<!-- Testimonial 3 --> | |
<div class="testimonial-card rounded-xl p-6"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-blue-600"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">Lê Hoàng Anh</h4> | |
<p class="text-sm text-gray-500">Sinh viên</p> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<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> | |
<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> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- CTA Section --> | |
<section class="py-16 bg-indigo-600 text-white"> | |
<div class="container mx-auto px-6 text-center"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-6">Sẵn sàng thay đổi bản thân?</h2> | |
<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> | |
<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> | |
</div> | |
</section> | |
<!-- FAQ Section --> | |
<section class="py-20 bg-white"> | |
<div class="container mx-auto px-6 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-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> | |
</div> | |
<div class="space-y-6"> | |
<!-- FAQ 1 --> | |
<div class="border border-gray-200 rounded-lg overflow-hidden"> | |
<button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition"> | |
<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> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</button> | |
<div class="faq-content hidden px-6 pb-6 pt-0"> | |
<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> | |
</div> | |
</div> | |
<!-- FAQ 2 --> | |
<div class="border border-gray-200 rounded-lg overflow-hidden"> | |
<button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition"> | |
<span class="text-lg font-medium">Dữ liệu cá nhân của tôi có được bảo mật?</span> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</button> | |
<div class="faq-content hidden px-6 pb-6 pt-0"> | |
<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> | |
</div> | |
</div> | |
<!-- FAQ 3 --> | |
<div class="border border-gray-200 rounded-lg overflow-hidden"> | |
<button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition"> | |
<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> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</button> | |
<div class="faq-content hidden px-6 pb-6 pt-0"> | |
<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> | |
</div> | |
</div> | |
<!-- FAQ 4 --> | |
<div class="border border-gray-200 rounded-lg overflow-hidden"> | |
<button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition"> | |
<span class="text-lg font-medium">AI Coach phù hợp với những lĩnh vực nào?</span> | |
<i class="fas fa-chevron-down transition-transform duration-300"></i> | |
</button> | |
<div class="faq-content hidden px-6 pb-6 pt-0"> | |
<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> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Contact Section --> | |
<section id="contact" class="py-20 bg-gray-50"> | |
<div class="container mx-auto px-6"> | |
<div class="flex flex-col md:flex-row"> | |
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-6">Liên hệ với chúng tôi</h2> | |
<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> | |
<div class="space-y-6"> | |
<div class="flex items-start"> | |
<div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
<i class="fas fa-envelope text-indigo-600"></i> | |
</div> | |
<div> | |
<h4 class="font-bold mb-1">Email</h4> | |
<p class="text-gray-600">support@aicoach.com</p> | |
</div> | |
</div> | |
<div class="flex items-start"> | |
<div class="bg-purple-100 p-3 rounded-full mr-4"> | |
<i class="fas fa-phone-alt text-purple-600"></i> | |
</div> | |
<div> | |
<h4 class="font-bold mb-1">Điện thoại</h4> | |
</html> |