first commit

2025-11-06 18:35:20 +03:30
parent da4c89a0dc
commit 2e882f5e97
14 changed files with 411 additions and 67 deletions
@@ -0,0 +1,51 @@
+import { Download, Globe, PlayCircle } from 'lucide-react';
+
+function DownloadSection() {
+  const downloadOptions = [
+    {
+      icon: Download,
+      title: "کافه بازار",
+      description: "دانلود برای اندروید",
+      gradient: "from-teal-500 to-teal-600",
+      animation: "animate-slideInLeft delay-100"
+    },
+    {
+      icon: PlayCircle,
+      title: "گوگل پلی",
+      description: "دانلود برای اندروید",
+      gradient: "from-green-500 to-green-600",
+      animation: "animate-fadeInUp delay-200"
+    },
+    {
+      icon: Globe,
+      title: "وب اپلیکیشن",
+      description: "استفاده آنلاین",
+      gradient: "from-blue-500 to-blue-600",
+      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="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>
+    </div>
+  );
+}
+
+export default DownloadSection;