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,79 @@
+import { Wind, Brain, Heart, Sparkles } from 'lucide-react';
+
+function WhatYouCanDo() {
+  const activities = [
+    {
+      icon: Wind,
+      title: "تمرین‌های تنفسی",
+      description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
+      gradient: "from-teal-50 to-teal-100",
+      items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
+      color: "teal",
+      delay: "delay-100"
+    },
+    {
+      icon: Brain,
+      title: "مدیتیشن و ذهن‌آگاهی",
+      description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
+      gradient: "from-green-50 to-green-100",
+      items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
+      color: "green",
+      delay: "delay-200"
+    },
+    {
+      icon: Heart,
+      title: "صلح‌ دروني و خودقبولی",
+      description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
+      gradient: "from-blue-50 to-blue-100",
+      items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
+      color: "blue",
+      delay: "delay-300"
+    },
+    {
+      icon: Sparkles,
+      title: "موسیقی آرام‌بخش",
+      description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
+      gradient: "from-purple-50 to-purple-100",
+      items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
+      color: "purple",
+      delay: "delay-400"
+    }
+  ];
+
+  return (
+    <div className="my-20">
+      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
+        چه کاری می‌تونی با آرام‌لند انجام بدی؟
+      </h2>
+
+      <div className="grid md:grid-cols-2 gap-8 mb-16">
+        {activities.map((activity, index) => (
+          <div
+            key={index}
+            className={`bg-gradient-to-br ${activity.gradient} rounded-3xl p-10 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${activity.delay}`}
+          >
+            <div className="flex items-center mb-6">
+              <div className={`bg-${activity.color}-500 rounded-full p-4 ml-4`}>
+                <activity.icon className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-2xl font-bold text-gray-800">{activity.title}</h3>
+            </div>
+            <p className="text-gray-700 leading-relaxed text-lg mb-6">
+              {activity.description}
+            </p>
+            <ul className="space-y-3">
+              {activity.items.map((item, itemIndex) => (
+                <li key={itemIndex} className="flex items-center text-gray-700">
+                  <span className={`w-2 h-2 bg-${activity.color}-500 rounded-full ml-3`}></span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default WhatYouCanDo;