style: some styles are change

app/components/FreeTrial.jsx

@@ -1,13 +1,62 @@
 function FreeTrial() {
   return (
-    <div className="bg-gradient-to-r from-teal-500 to-green-600 rounded-3xl p-12 text-white text-center mb-16 animate-fadeInUp animate-pulse-glow">
-      <h2 className="text-3xl md:text-4xl font-bold mb-4 animate-fadeInUp delay-100">شروع یک هفته رایگان</h2>
-      <p className="text-lg mb-8 text-teal-50 animate-fadeInUp delay-200">
-        تمام ویژگی‌های پریمیوم رو برای یک هفته کامل تجربه کن، بدون هیچ‌گونه ایراد.
-      </p>
-      <button className="bg-white text-teal-600 font-bold py-4 px-8 rounded-xl hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-300">
-        دانلود و شروع
-      </button>
+    <div className="relative bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
+        <div className="absolute bottom-0 left-0 w-32 h-32 bg-white rounded-full translate-y-16 -translate-x-16"></div>
+      </div>
+      
+      {/* Animated Border */}
+      <div className="absolute inset-0 rounded-3xl border-2 border-white/20 animate-pulse"></div>
+
+      {/* Content */}
+      <div className="relative">
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fadeInUp delay-100">
+          <span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
+          پیشنهاد ویژه
+        </div>
+
+        {/* Heading */}
+        <h2 className="text-3xl md:text-5xl font-bold mb-6 animate-fadeInUp delay-200">
+          <span className="block">یک هفته <span className="text-yellow-300">رایگان</span></span>
+          <span className="block">تجربه تمام ویژگی‌ها</span>
+        </h2>
+
+        {/* Description */}
+        <p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed animate-fadeInUp delay-300">
+          تمام ویژگی‌های پریمیوم رو برای یک هفته کامل تجربه کن، 
+          <span className="font-bold text-yellow-300"> بدون نیاز به کارت اعتباری</span>
+        </p>
+
+        {/* Features */}
+        <div className="grid md:grid-cols-3 gap-4 mb-8 max-w-2xl mx-auto animate-fadeInUp delay-400">
+          {[
+            "تمامی مدیتیشن‌ها",
+            "موسیقی‌های انحصاری", 
+            "مشاوره هوش مصنوعی"
+          ].map((feature, index) => (
+            <div key={index} className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm py-3 px-4 rounded-xl">
+              <svg className="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              <span>{feature}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* CTA Button */}
+        <button className="bg-white text-[#C3C7FF] font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
+          <span className="relative">شروع دوره آزمایشی رایگان</span>
+        </button>
+
+        {/* Footer Note */}
+        <p className="text-white/70 text-sm mt-6 animate-fadeInUp delay-600">
+          هیچ تعهدی ندارد • هر زمان می‌توانی لغو کنی
+        </p>
+      </div>
     </div>
   );
 }