style: some styles are change

app/components/DownloadSection.jsx

@@ -6,46 +6,70 @@ function DownloadSection() {
       icon: Download,
       title: "کافه بازار",
       description: "دانلود برای اندروید",
-      gradient: "from-teal-500 to-teal-600",
+      badge: "پرطرفدار",
+      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
       animation: "animate-slideInLeft delay-100"
     },
     {
       icon: PlayCircle,
       title: "گوگل پلی",
       description: "دانلود برای اندروید",
-      gradient: "from-green-500 to-green-600",
+      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
       animation: "animate-fadeInUp delay-200"
     },
     {
       icon: Globe,
       title: "وب اپلیکیشن",
       description: "استفاده آنلاین",
-      gradient: "from-blue-500 to-blue-600",
+      badge: "جدید",
+      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
       animation: "animate-slideInRight delay-300"
     }
   ];
 
   return (
-    <div className="bg-white rounded-3xl shadow-xl p-12 mb-12 animate-fadeInUp delay-300">
-      <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">
-        آرام‌لند رو از کجا دانلود کنم؟
-      </h2>
+    <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>
+      
+      <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>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            آرام‌لند را روی دستگاه مورد علاقه‌تان نصب کنید
+          </p>
+        </div>
 
-      <div className="grid md:grid-cols-3 gap-6">
-        {downloadOptions.map((option, index) => (
-          <a
-            key={index}
-            href="#"
-            className={`flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 text-white group ${option.animation}`}
-          >
-            <option.icon className="w-12 h-12 mb-4 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-bold mb-2">{option.title}</h3>
-            <p className="text-sm text-opacity-90">{option.description}</p>
-          </a>
-        ))}
+        <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+          {downloadOptions.map((option, index) => (
+            <a
+              key={index}
+              href="#"
+              className={`relative flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 text-white group ${option.animation} overflow-hidden`}
+            >
+              {/* Shine effect */}
+              <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">
+                  {option.badge}
+                </div>
+              )}
+              
+              <div className="bg-white/20 p-4 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
+                <option.icon className="w-8 h-8" />
+              </div>
+              <h3 className="text-xl font-bold mb-2">{option.title}</h3>
+              <p className="text-white/90 text-sm">{option.description}</p>
+            </a>
+          ))}
+        </div>
       </div>
     </div>
   );
 }
-
 export default DownloadSection;