feat: primary color from tailwind
This commit is contained in:
@@ -1,161 +1,161 @@
|
||||
function ScientificBenefits() {
|
||||
const benefits = [
|
||||
{
|
||||
title: "تکنیکهای مبتنی بر علم اعصاب",
|
||||
description: "آراملند از روشهای اثباتشده علمی برای کاهش استرس و افزایش آرامش استفاده میکند",
|
||||
icon: "🧠",
|
||||
items: [
|
||||
"بهبود خلق و خو در کمتر از ۵ دقیقه",
|
||||
"کاهش ۴۰٪ی سطح کورتیزول (هورمون استرس)",
|
||||
"افزایش امواج آلفای مغز برای آرامش",
|
||||
"بهبود کیفیت خواب تا ۶۰٪"
|
||||
],
|
||||
stats: "۸۷٪ موفقیت",
|
||||
color: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-100"
|
||||
},
|
||||
{
|
||||
title: "طراحی کاربری مبتنی بر روانشناسی",
|
||||
description: "رابط کاربری طراحی شده بر اساس اصول روانشناسی برای حداکثر تأثیرگذاری",
|
||||
icon: "🎨",
|
||||
items: [
|
||||
"رابط ساده و شهودی برای کاهش بار ذهنی",
|
||||
"طراحی مینیمال برای تمرکز بهتر",
|
||||
"هدایت گامبهگام فارسی",
|
||||
"فیدبک لحظهای از پیشرفت"
|
||||
],
|
||||
stats: "۹۴٪ رضایت",
|
||||
color: "from-[#C3C7FF] to-[#A8B1FF]",
|
||||
delay: "delay-200"
|
||||
}
|
||||
];
|
||||
// function ScientificBenefits() {
|
||||
// const benefits = [
|
||||
// {
|
||||
// title: "تکنیکهای مبتنی بر علم اعصاب",
|
||||
// description: "آراملند از روشهای اثباتشده علمی برای کاهش استرس و افزایش آرامش استفاده میکند",
|
||||
// icon: "🧠",
|
||||
// items: [
|
||||
// "بهبود خلق و خو در کمتر از ۵ دقیقه",
|
||||
// "کاهش ۴۰٪ی سطح کورتیزول (هورمون استرس)",
|
||||
// "افزایش امواج آلفای مغز برای آرامش",
|
||||
// "بهبود کیفیت خواب تا ۶۰٪"
|
||||
// ],
|
||||
// stats: "۸۷٪ موفقیت",
|
||||
// color: "from-primary-500 to-primary-600",
|
||||
// delay: "delay-100"
|
||||
// },
|
||||
// {
|
||||
// title: "طراحی کاربری مبتنی بر روانشناسی",
|
||||
// description: "رابط کاربری طراحی شده بر اساس اصول روانشناسی برای حداکثر تأثیرگذاری",
|
||||
// icon: "🎨",
|
||||
// items: [
|
||||
// "رابط ساده و شهودی برای کاهش بار ذهنی",
|
||||
// "طراحی مینیمال برای تمرکز بهتر",
|
||||
// "هدایت گامبهگام فارسی",
|
||||
// "فیدبک لحظهای از پیشرفت"
|
||||
// ],
|
||||
// stats: "۹۴٪ رضایت",
|
||||
// color: "from-primary-500 to-primary-600",
|
||||
// delay: "delay-200"
|
||||
// }
|
||||
// ];
|
||||
|
||||
const researchStats = [
|
||||
{ number: "۴۰٪", label: "کاهش استرس", description: "پس از ۲ هفته استفاده منظم" },
|
||||
{ number: "۳۵٪", label: "افزایش تمرکز", description: "در کارهای روزمره" },
|
||||
{ number: "۵۰٪", label: "بهبود خواب", description: "کیفیت خواب بهتر" },
|
||||
{ number: "۲۵٪", label: "افزایش انرژی", description: "در طول روز" }
|
||||
];
|
||||
// const researchStats = [
|
||||
// { number: "۴۰٪", label: "کاهش استرس", description: "پس از ۲ هفته استفاده منظم" },
|
||||
// { number: "۳۵٪", label: "افزایش تمرکز", description: "در کارهای روزمره" },
|
||||
// { number: "۵۰٪", label: "بهبود خواب", description: "کیفیت خواب بهتر" },
|
||||
// { number: "۲۵٪", label: "افزایش انرژی", description: "در طول روز" }
|
||||
// ];
|
||||
|
||||
return (
|
||||
<div className="my-24">
|
||||
{/* 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>
|
||||
// return (
|
||||
// <div className="my-24">
|
||||
// {/* Section Header */}
|
||||
// <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 className="text-lg">🔬</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>
|
||||
|
||||
{/* Research Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||||
{researchStats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl p-6 text-center shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 animate-fadeInUp"
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<div className="text-2xl md:text-3xl font-bold text-[#C3C7FF] mb-2">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-900 font-medium mb-1">{stat.label}</div>
|
||||
<div className="text-gray-500 text-sm">{stat.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
// {/* Research Statistics */}
|
||||
// <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||||
// {researchStats.map((stat, index) => (
|
||||
// <div
|
||||
// key={index}
|
||||
// className="bg-white rounded-2xl p-6 text-center shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 animate-fadeInUp"
|
||||
// style={{ animationDelay: `${index * 100}ms` }}
|
||||
// >
|
||||
// <div className="text-2xl md:text-3xl font-bold text-primary-500 mb-2">
|
||||
// {stat.number}
|
||||
// </div>
|
||||
// <div className="text-gray-900 font-medium mb-1">{stat.label}</div>
|
||||
// <div className="text-gray-500 text-sm">{stat.description}</div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
{/* Main Benefits Grid */}
|
||||
<div className="grid lg:grid-cols-2 gap-8 mb-12">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fadeInUp hover:shadow-2xl transition-all duration-500"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`bg-gradient-to-r ${benefit.color} p-6 text-white`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{benefit.icon}</span>
|
||||
<h3 className="text-xl font-bold">{benefit.title}</h3>
|
||||
</div>
|
||||
<div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-medium">
|
||||
{benefit.stats}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// {/* Main Benefits Grid */}
|
||||
// <div className="grid lg:grid-cols-2 gap-8 mb-12">
|
||||
// {benefits.map((benefit, index) => (
|
||||
// <div
|
||||
// key={index}
|
||||
// className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fadeInUp hover:shadow-2xl transition-all duration-500"
|
||||
// >
|
||||
// {/* Header */}
|
||||
// <div className={`bg-gradient-to-r ${benefit.color} p-6 text-white`}>
|
||||
// <div className="flex items-center justify-between">
|
||||
// <div className="flex items-center gap-3">
|
||||
// <span className="text-2xl">{benefit.icon}</span>
|
||||
// <h3 className="text-xl font-bold">{benefit.title}</h3>
|
||||
// </div>
|
||||
// <div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-medium">
|
||||
// {benefit.stats}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-8">
|
||||
<p className="text-gray-700 text-lg leading-relaxed mb-6">
|
||||
{benefit.description}
|
||||
</p>
|
||||
// {/* Content */}
|
||||
// <div className="p-8">
|
||||
// <p className="text-gray-700 text-lg leading-relaxed mb-6">
|
||||
// {benefit.description}
|
||||
// </p>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{benefit.items.map((item, itemIndex) => (
|
||||
<li
|
||||
key={itemIndex}
|
||||
className="flex items-start text-gray-700 group hover:text-[#C3C7FF] transition-colors duration-200"
|
||||
>
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#C3C7FF]/10 rounded-full flex items-center justify-center ml-3 mt-1 group-hover:bg-[#C3C7FF] transition-colors duration-200">
|
||||
<svg className="w-3 h-3 text-[#C3C7FF] group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-right leading-relaxed">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
// <ul className="space-y-4">
|
||||
// {benefit.items.map((item, itemIndex) => (
|
||||
// <li
|
||||
// key={itemIndex}
|
||||
// className="flex items-start text-gray-700 group hover:text-primary-500 transition-colors duration-200"
|
||||
// >
|
||||
// <div className="flex-shrink-0 w-6 h-6 bg-primary-500/10 rounded-full flex items-center justify-center ml-3 mt-1 group-hover:bg-primary-500 transition-colors duration-200">
|
||||
// <svg className="w-3 h-3 text-primary-500 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
|
||||
// <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
// </svg>
|
||||
// </div>
|
||||
// <span className="text-right leading-relaxed">{item}</span>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
{/* Scientific Evidence 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 gap-4">
|
||||
{/* {[
|
||||
{ name: "Harvard", color: "bg-red-100 text-red-600" },
|
||||
{ name: "Stanford", color: "bg-blue-100 text-blue-600" },
|
||||
{ name: "NIH", color: "bg-green-100 text-green-600" }
|
||||
].map((org, index) => (
|
||||
<div
|
||||
key={index}
|
||||
={`${org.color} px-4 py-2 rounded-lg font-medium text-sm backdrop-blur-sm`}
|
||||
>
|
||||
{org.name}
|
||||
</div>
|
||||
))} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// {/* Scientific Evidence Section */}
|
||||
// <div className="bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-3xl p-8 border border-primary-500/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 gap-4">
|
||||
// {[
|
||||
// { name: "Harvard", color: "bg-red-100 text-red-600" },
|
||||
// { name: "Stanford", color: "bg-blue-100 text-blue-600" },
|
||||
// { name: "NIH", color: "bg-green-100 text-green-600" }
|
||||
// ].map((org, index) => (
|
||||
// <div
|
||||
// key={index}
|
||||
// className={`${org.color} px-4 py-2 rounded-lg font-medium text-sm backdrop-blur-sm`}
|
||||
// >
|
||||
// {org.name}
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-12">
|
||||
<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">
|
||||
مطالعه تحقیقات کامل
|
||||
</button>
|
||||
<p className="text-gray-500 text-sm mt-4">
|
||||
مبتنی بر بیش از ۵۰ مطالعه علمی معتبر
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// {/* Bottom CTA */}
|
||||
// <div className="text-center mt-12">
|
||||
// <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg">
|
||||
// مطالعه تحقیقات کامل
|
||||
// </button>
|
||||
// <p className="text-gray-500 text-sm mt-4">
|
||||
// مبتنی بر بیش از ۵۰ مطالعه علمی معتبر
|
||||
// </p>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default ScientificBenefits;
|
||||
// export default ScientificBenefits;
|
||||
Reference in New Issue
Block a user