feat: primary color from tailwind

app/components/WhatYouCanDo.jsx

@@ -6,10 +6,10 @@ function WhatYouCanDo() {
       icon: Wind,
       title: "تمرین‌های تنفسی",
       description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
       delay: "delay-100",
       stats: "۱۰+ تمرین مختلف"
     },
@@ -17,10 +17,10 @@ function WhatYouCanDo() {
       icon: Brain,
       title: "مدیتیشن و ذهن‌آگاهی",
       description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
       delay: "delay-200",
       stats: "۵۰+ جلسه"
     },
@@ -28,10 +28,10 @@ function WhatYouCanDo() {
       icon: Heart,
       title: "صلح درونی و خودقبولی",
       description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
       delay: "delay-300",
       stats: "۲۵+ برنامه"
     },
@@ -39,10 +39,10 @@ function WhatYouCanDo() {
       icon: Sparkles,
       title: "موسیقی آرام‌بخش",
       description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
       items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
       delay: "delay-400",
       stats: "۱۰۰+ آهنگ"
     }
@@ -52,12 +52,12 @@ function WhatYouCanDo() {
     <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">
+        <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 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> نیاز داری
+          هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز داری
         </h2>
         <p className="text-xl text-gray-600 max-w-2xl mx-auto">
           ابزارهای متنوع و تخصصی برای رسیدن به آرامش در هر شرایطی
@@ -69,17 +69,17 @@ function WhatYouCanDo() {
         {activities.map((activity, index) => (
           <div
             key={index}
-            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]`}
+            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-primary-500/40 hover:translate-y-[-8px]`}
           >
             {/* 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">
+                <div className="bg-gradient-to-r from-primary-500 to-primary-600 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>
+                  <p className="text-sm text-primary-500 font-medium mt-1">{activity.stats}</p>
                 </div>
               </div>
             </div>
@@ -94,16 +94,16 @@ function WhatYouCanDo() {
               {activity.items.map((item, itemIndex) => (
                 <li 
                   key={itemIndex} 
-                  className="flex items-center text-gray-700 group/item hover:text-[#C3C7FF] transition-colors duration-200"
+                  className="flex items-center text-gray-700 group/item hover:text-primary-500 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>
+                  <div className="w-2 h-2 bg-primary-500 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 className="absolute inset-0 rounded-3xl border-2 border-primary-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
           </div>
         ))}
       </div>
@@ -111,9 +111,9 @@ function WhatYouCanDo() {
       {/* Bottom CTA */}
       <div className="text-center">
         <p className="text-gray-600 text-lg mb-6">
-          بیش از <span className="text-[#C3C7FF] font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
+          بیش از <span className="text-primary-500 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 className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
           کشف همه قابلیت‌ها
         </button>
       </div>