style: some styles are change

app/components/Features.jsx

@@ -3,75 +3,60 @@ function Features() {
     {
       emoji: "💨",
       title: "تمرین تنفسی هوشمند",
-      description: "یک تنفس عمیق و استرس‌ات نابود شه. الگوریتم هوشمند برای هر لحظه.",
-      gradient: "from-teal-50 to-teal-100",
+      description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرس‌ات نابود شه",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       delay: "delay-100"
     },
     {
       emoji: "🎛️",
       title: "الگوی تنفسی انتخابی",
-      description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید.",
-      gradient: "from-green-50 to-green-100",
+      description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       delay: "delay-200"
     },
     {
       emoji: "📦",
       title: "صندوق دغدغه‌ها",
-      description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن.",
-      gradient: "from-blue-50 to-blue-100",
+      description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       delay: "delay-300"
-    },
-    {
-      emoji: "🤖",
-      title: "مشاور هوش مصنوعی",
-      description: "همراه هوشمندی که همیشه کنار توست برای پاسخ‌گویی به سوالات.",
-      gradient: "from-purple-50 to-purple-100",
-      delay: "delay-400"
-    },
-    {
-      emoji: "💬",
-      title: "چت بدون حد",
-      description: "هر وقت، هر‌قدر که بخواهی صحبت کن. با خرید اشتراک نامحدود.",
-      gradient: "from-pink-50 to-pink-100",
-      delay: "delay-100"
-    },
-    {
-      emoji: "🎶",
-      title: "موسیقی آرام‌بخش انحصاری",
-      description: "موسیقی‌ای که مستقیم بر روی آرامش‌ت تأثیر می‌گذاره.",
-      gradient: "from-yellow-50 to-yellow-100",
-      delay: "delay-200"
     }
   ];
 
   return (
-    <div className="my-20">
-      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
-        ✨ ویژگی‌های خاص آرام‌لند
-      </h2>
+    <div className="my-24">
+      <div className="text-center mb-16">
+        <div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] px-4 py-2 rounded-full text-sm font-medium mb-4">
+          <span>✨</span>
+          ویژگی‌های منحصر بفرد
+        </div>
+        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+          هر آنچه برای <span className="text-[#C3C7FF]">آرامش</span> نیاز دارید
+        </h2>
+        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+          تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم
+        </p>
+      </div>
 
-      <div className="grid md:grid-cols-2 gap-6 mb-16">
+      <div className="grid md:grid-cols-3 gap-8">
         {features.map((feature, index) => (
           <div
             key={index}
-            className={`bg-gradient-to-br ${feature.gradient} rounded-2xl p-8 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${feature.delay}`}
+            className={`bg-gradient-to-br ${feature.gradient} border ${feature.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${feature.delay} group hover:border-[#C3C7FF]/40`}
           >
-            <div className="flex items-center mb-4">
-              <span className="text-3xl ml-3">{feature.emoji}</span>
-              <h3 className="text-xl font-bold text-gray-800">{feature.title}</h3>
+            <div className="flex items-start mb-6">
+              <div className="bg-white p-3 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 ml-4">
+                <span className="text-2xl">{feature.emoji}</span>
+              </div>
+              <h3 className="text-xl font-bold text-gray-900">{feature.title}</h3>
             </div>
-            <p className="text-gray-700">{feature.description}</p>
+            <p className="text-gray-700 leading-relaxed">{feature.description}</p>
           </div>
         ))}
       </div>
-
-      <div className="text-center bg-gradient-to-r from-teal-50 to-green-50 rounded-3xl p-12 animate-fadeInUp delay-300">
-        <p className="text-2xl md:text-3xl font-medium text-gray-700 leading-relaxed">
-          سفر به سمت آرامش از همین امروز شروع می‌شه.
-          <br />
-          <span className="text-teal-700 font-bold">آماده‌ای؟</span>
-        </p>
-      </div>
     </div>
   );
 }