aramejan/app/components/Features.jsx

function Features() {
  const features = [
    {
      emoji: "💨",
      title: "تمرین تنفسی هوشمند",
      description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرس‌ات نابود شه",
      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
      border: "border-[#C3C7FF]/20",
      delay: "delay-100"
    },
    {
      emoji: "🎛️",
      title: "الگوی تنفسی انتخابی",
      description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید",
      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
      border: "border-[#C3C7FF]/20",
      delay: "delay-200"
    },
    {
      emoji: "📦",
      title: "صندوق دغدغه‌ها",
      description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن",
      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
      border: "border-[#C3C7FF]/20",
      delay: "delay-300"
    }
  ];

  return (
    <div className="my-24">
      <div className="text-center mb-16">
        <div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] 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-[#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-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-[#C3C7FF]/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;