function CallToAction() {
  return (
    <div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
      {/* Background with gradient */}
      <div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] opacity-10"></div>
      
      {/* Animated border */}
      <div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF]/20 animate-pulse"></div>
      
      <div className="relative">
        <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
          آماده برای <span className="text-[#C3C7FF]">تغییر</span> زندگی؟
        </h2>
        <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
          امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه کیفیت زندگی‌ات رو متحول کنه
        </p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-[#C3C7FF]/40 relative overflow-hidden group">
            <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
            <span className="relative">شروع سفر آرامش</span>
          </button>
          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-[#C3C7FF] hover:text-[#C3C7FF] transition-all duration-300">
            بیشتر بدانید
          </button>
        </div>
        
    
      </div>
    </div>
  );
}

export default CallToAction;