style: some styles are change

app/components/WhatYouCanDo.jsx

@@ -6,74 +6,119 @@ function WhatYouCanDo() {
       icon: Wind,
       title: "تمرین‌های تنفسی",
       description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
-      gradient: "from-teal-50 to-teal-100",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
-      color: "teal",
-      delay: "delay-100"
+      color: "[#C3C7FF]",
+      delay: "delay-100",
+      stats: "۱۰+ تمرین مختلف"
     },
     {
       icon: Brain,
       title: "مدیتیشن و ذهن‌آگاهی",
       description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
-      gradient: "from-green-50 to-green-100",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
-      color: "green",
-      delay: "delay-200"
+      color: "[#C3C7FF]",
+      delay: "delay-200",
+      stats: "۵۰+ جلسه"
     },
     {
       icon: Heart,
-      title: "صلح‌ دروني و خودقبولی",
+      title: "صلح درونی و خودقبولی",
       description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
-      gradient: "from-blue-50 to-blue-100",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
-      color: "blue",
-      delay: "delay-300"
+      color: "[#C3C7FF]",
+      delay: "delay-300",
+      stats: "۲۵+ برنامه"
     },
     {
       icon: Sparkles,
       title: "موسیقی آرام‌بخش",
       description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
-      gradient: "from-purple-50 to-purple-100",
+      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
+      border: "border-[#C3C7FF]/20",
       items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
-      color: "purple",
-      delay: "delay-400"
+      color: "[#C3C7FF]",
+      delay: "delay-400",
+      stats: "۱۰۰+ آهنگ"
     }
   ];
 
   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">
+      {/* Section Header */}
+      <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">
+          <Sparkles className="w-4 h-4" />
+          قابلیت‌های اصلی
+        </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>
 
+      {/* Activities Grid */}
       <div className="grid md:grid-cols-2 gap-8 mb-16">
         {activities.map((activity, index) => (
           <div
             key={index}
-            className={`bg-gradient-to-br ${activity.gradient} rounded-3xl p-10 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${activity.delay}`}
+            className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-[#C3C7FF]/40 hover:translate-y-[-8px]`}
           >
-            <div className="flex items-center mb-6">
-              <div className={`bg-${activity.color}-500 rounded-full p-4 ml-4`}>
-                <activity.icon className="w-8 h-8 text-white" />
+            {/* Header with Icon and Stats */}
+            <div className="flex items-start justify-between mb-6">
+              <div className="flex items-center">
+                <div className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
+                  <activity.icon className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">{activity.title}</h3>
+                  <p className="text-sm text-[#C3C7FF] font-medium mt-1">{activity.stats}</p>
+                </div>
               </div>
-              <h3 className="text-2xl font-bold text-gray-800">{activity.title}</h3>
             </div>
-            <p className="text-gray-700 leading-relaxed text-lg mb-6">
+
+            {/* Description */}
+            <p className="text-gray-700 leading-relaxed mb-6 text-lg">
               {activity.description}
             </p>
+
+            {/* Features List */}
             <ul className="space-y-3">
               {activity.items.map((item, itemIndex) => (
-                <li key={itemIndex} className="flex items-center text-gray-700">
-                  <span className={`w-2 h-2 bg-${activity.color}-500 rounded-full ml-3`}></span>
-                  {item}
+                <li 
+                  key={itemIndex} 
+                  className="flex items-center text-gray-700 group/item hover:text-[#C3C7FF] transition-colors duration-200"
+                >
+                  <div className="w-2 h-2 bg-[#C3C7FF] rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div>
+                  <span>{item}</span>
                 </li>
               ))}
             </ul>
+
+            {/* Hover Effect Overlay */}
+            <div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF] opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
           </div>
         ))}
       </div>
+
+      {/* Bottom CTA */}
+      <div className="text-center">
+        <p className="text-gray-600 text-lg mb-6">
+          بیش از <span className="text-[#C3C7FF] font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
+        </p>
+        <button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
+          کشف همه قابلیت‌ها
+        </button>
+      </div>
     </div>
   );
 }
 
-export default WhatYouCanDo;
+export default WhatYouCanDo;