style: some styles are change
This commit is contained in:
+161
-14
@@ -1,23 +1,170 @@
|
||||
function WhyAramland() {
|
||||
const stats = [
|
||||
{ number: "۲۰۰+", text: "مدیتیشن و تمرینهای تنفسی", color: "text-teal-600", delay: "delay-100" },
|
||||
{ number: "۱۵+", text: "ساعت محتوای صوتی فارسی", color: "text-green-600", delay: "delay-200" },
|
||||
{ number: "۲۴/۷", text: "دسترسی بدون محدود", color: "text-blue-600", delay: "delay-300" }
|
||||
{
|
||||
number: "۲۰۰+",
|
||||
text: "مدیتیشن و تمرین تنفسی",
|
||||
description: "تمرینهای متنوع برای هر سلیقه و نیاز",
|
||||
icon: "🧘♀️",
|
||||
gradient: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-100"
|
||||
},
|
||||
{
|
||||
number: "۱۵+",
|
||||
text: "ساعت محتوای صوتی فارسی",
|
||||
description: "هدایتشده توسط متخصصان ایرانی",
|
||||
icon: "🎧",
|
||||
gradient: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-200"
|
||||
},
|
||||
{
|
||||
number: "۲۴/۷",
|
||||
text: "دسترسی همیشه و همه جا",
|
||||
description: "در هر زمان و مکان به آرامش برسید",
|
||||
icon: "🌙",
|
||||
gradient: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-300"
|
||||
},
|
||||
{
|
||||
number: "۹۸٪",
|
||||
text: "رضایت کاربران",
|
||||
description: "تجربهای که کاربران عاشقش هستند",
|
||||
icon: "⭐",
|
||||
gradient: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-400"
|
||||
}
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "محتوای اختصاصی فارسی",
|
||||
description: "همه محتواها بومیسازی و برای فرهنگ ایرانی طراحی شدهاند",
|
||||
icon: "🇮🇷"
|
||||
},
|
||||
{
|
||||
title: "پشتیبانی ۲۴ ساعته",
|
||||
description: "تیم پشتیبانی ما همیشه برای کمک به شما آماده است",
|
||||
icon: "💬"
|
||||
},
|
||||
{
|
||||
title: "بروزرسانی مستمر",
|
||||
description: "هر هفته محتوای جدید و تمرینهای تازه اضافه میشود",
|
||||
icon: "🔄"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-3xl shadow-xl p-12 mb-16 animate-fadeInUp">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-12">
|
||||
چرا آراملند؟
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className={`text-center animate-fadeInUp ${stat.delay}`}>
|
||||
<div className={`text-5xl font-bold ${stat.color} mb-3`}>{stat.number}</div>
|
||||
<p className="text-gray-700 text-lg">{stat.text}</p>
|
||||
<div className="my-24">
|
||||
{/* Main Stats Section */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-12 mb-12 animate-fadeInUp hover:shadow-3xl transition-all duration-500">
|
||||
{/* Section Header */}
|
||||
<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 className="text-lg">🚀</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>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`text-center group animate-fadeInUp ${stat.delay} hover:transform hover:scale-105 transition-all duration-300`}
|
||||
>
|
||||
{/* Icon Container */}
|
||||
<div className={`bg-gradient-to-br ${stat.gradient} w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:shadow-lg transition-all duration-300`}>
|
||||
<span className="text-2xl text-white">{stat.icon}</span>
|
||||
</div>
|
||||
|
||||
{/* Number */}
|
||||
<div className="text-4xl font-bold bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent mb-2">
|
||||
{stat.number}
|
||||
</div>
|
||||
|
||||
{/* Main Text */}
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">{stat.text}</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{stat.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center justify-center mb-12">
|
||||
<div className="h-px bg-gradient-to-r from-transparent via-[#C3C7FF] to-transparent w-32"></div>
|
||||
<div className="mx-4 text-[#C3C7FF] text-lg">✨</div>
|
||||
<div className="h-px bg-gradient-to-r from-transparent via-[#C3C7FF] to-transparent w-32"></div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center group hover:transform hover:translate-y-[-8px] transition-all duration-300"
|
||||
>
|
||||
<div className="bg-[#C3C7FF]/10 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-[#C3C7FF]/20 transition-colors duration-300">
|
||||
<span className="text-2xl">{feature.icon}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Proof Section */}
|
||||
<div className="bg-gradient-to-r from-[#C3C7FF]/5 to-[#A8B1FF]/5 rounded-3xl p-8 border border-[#C3C7FF]/20">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-2xl font-bold text-gray-900 mb-3">
|
||||
👥 عضو جامعه هزاران نفری آراملند شوید
|
||||
</h4>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
به خانوادهای از کاربران خوشحال بپیوندید که هر روز قدمی به سمت آرامش برمیدارند
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex -space-x-3">
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="w-12 h-12 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] rounded-full border-2 border-white flex items-center justify-center text-white font-bold text-sm"
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-gray-900 font-bold">+۱۰۰۰ کاربر فعال</div>
|
||||
<div className="text-gray-600 text-sm">هر ماه به ما میپیوندند</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-8">
|
||||
<button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg inline-flex items-center gap-2">
|
||||
<span>شروع سفر آرامش</span>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</button>
|
||||
<p className="text-gray-500 text-sm mt-4">
|
||||
هیچ کارت اعتباری نیاز نیست • تضمین بازگشت وجه ۷ روزه
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user