80 lines
3.3 KiB
React
80 lines
3.3 KiB
React
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;
|