3. Thiết Kế Landing Page Chuyển Đổi Cao: Hero Section, Feature Grid, Social Proof & CTA

// HeroSection.tsx
import { ArrowRight, Sparkles } from 'lucide-react';

export function HeroSection() {
  return (
    <section className="relative overflow-hidden pt-20 pb-16 md:pt-28 md:pb-24 bg-slate-950 text-white">
      <div className="max-w-6xl mx-auto px-4 text-center">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-sm font-semibold mb-6">
          <Sparkles className="w-4 h-4" /> <span>Giải pháp số hóa dành riêng cho CEO & SME</span>
        </div>
        <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 max-w-4xl mx-auto">
          Tự Động Hóa Vận Hành Doanh Nghiệp <br />
          <span className="bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-fill-transparent">
            Không Cần Viết Code Phức Tạp
          </span>
        </h1>
        <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-10">
          Chuyển đổi số tinh gọn: Tự tay làm chủ AI Coding Agents, hệ thống CRM và quy trình tự động hóa n8n trên 1 máy chủ riêng tư.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <button className="w-full sm:w-auto px-8 py-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold transition-all shadow-lg shadow-indigo-500/25 flex items-center justify-center gap-2">
            Khám Phá Các Khóa Học <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    </section>
  );
}