feat: primary color from tailwind

app/components/Features.jsx

@@ -4,24 +4,24 @@ function Features() {
       emoji: "💨",
       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",
       delay: "delay-100"
     },
     {
       emoji: "🎛️",
       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",
       delay: "delay-200"
     },
     {
       emoji: "📦",
       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",
       delay: "delay-300"
     }
   ];
@@ -29,12 +29,12 @@ function Features() {
   return (
     <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">
+        <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">
           <span>✨</span>
           ویژگی‌های منحصر بفرد
         </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">
           تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم
@@ -45,7 +45,7 @@ function Features() {
         {features.map((feature, index) => (
           <div
             key={index}
-            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`}
+            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-primary-500/40`}
           >
             <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">