feat: primary color from tailwind

app/components/DownloadSection.jsx

@@ -7,22 +7,22 @@ function DownloadSection() {
       title: "کافه بازار",
       description: "دانلود برای اندروید",
       badge: "پرطرفدار",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
       animation: "animate-slideInLeft delay-100"
     },
     {
       icon: PlayCircle,
-      title: "گوگل پلی",
+      title: "مایکت",
       description: "دانلود برای اندروید",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+       gradient: "from-primary-500 to-primary-600",
       animation: "animate-fadeInUp delay-200"
     },
     {
       icon: Globe,
-      title: "وب اپلیکیشن",
-      description: "استفاده آنلاین",
+      title: "وب سایت",
+      description: "نسخه وب برای تمام دستگاه‌ها",
       badge: "جدید",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
       animation: "animate-slideInRight delay-300"
     }
   ];
@@ -31,13 +31,13 @@ function DownloadSection() {
     <div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden">
       {/* Background pattern */}
       <div className="absolute inset-0 opacity-5">
-        <div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF]"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600"></div>
       </div>
       
       <div className="relative">
         <div className="text-center mb-12">
           <h2 className="text-3xl md:text-4xl 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">
             آرام‌لند را روی دستگاه مورد علاقه‌تان نصب کنید
@@ -55,7 +55,7 @@ function DownloadSection() {
               <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-1000"></div>
               
               {option.badge && (
-                <div className="absolute -top-2 -right-2 bg-white text-[#C3C7FF] px-3 py-1 rounded-full text-xs font-bold shadow-lg">
+                <div className="absolute -top-2 -right-2 bg-white text-primary-500 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
                   {option.badge}
                 </div>
               )}