64 lines
2.6 KiB
React
64 lines
2.6 KiB
React
function Features() {
|
||
const features = [
|
||
{
|
||
emoji: "💨",
|
||
title: "تمرین تنفسی هوشمند",
|
||
description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرسات نابود شه",
|
||
gradient: "from-primary-500/10 to-primary-600/10",
|
||
border: "border-primary-500/20",
|
||
delay: "delay-100"
|
||
},
|
||
{
|
||
emoji: "🎛️",
|
||
title: "الگوی تنفسی انتخابی",
|
||
description: "تمرینهای تنفسی خود را طراحی کنید و تمام خاصیتها را کنترل کنید",
|
||
gradient: "from-primary-500/10 to-primary-600/10",
|
||
border: "border-primary-500/20",
|
||
delay: "delay-200"
|
||
},
|
||
{
|
||
emoji: "📦",
|
||
title: "صندوق دغدغهها",
|
||
description: "دغدغههایت رو در یک صندوق خیالی بگذار و ذهنت رو سبکتر کن",
|
||
gradient: "from-primary-500/10 to-primary-600/10",
|
||
border: "border-primary-500/20",
|
||
delay: "delay-300"
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="my-12">
|
||
<div className="text-center mb-16">
|
||
<div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
|
||
<span>✨</span>
|
||
ویژگیهای منحصر بفرد
|
||
</div>
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز دارید
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||
تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{features.map((feature, index) => (
|
||
<div
|
||
key={index}
|
||
className={`bg-gradient-to-br ${feature.gradient} border ${feature.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${feature.delay} group hover:border-primary-500/40`}
|
||
>
|
||
<div className="flex items-start mb-6">
|
||
<div className="bg-white p-3 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 ml-4">
|
||
<span className="text-2xl">{feature.emoji}</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900">{feature.title}</h3>
|
||
</div>
|
||
<p className="text-gray-700 leading-relaxed">{feature.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Features; |