feat: primary color from tailwind

2025-11-07 13:27:36 +03:30
parent a6980bc35b
commit 81a10f6269
15 changed files with 340 additions and 279 deletions
@@ -5,7 +5,7 @@ import Features from './components/Features';
 import WhatYouCanDo from './components/WhatYouCanDo';
 import WhyAramland from './components/WhyAramland';
 import FreeTrial from './components/FreeTrial';
-import ScientificBenefits from './components/ScientificBenefits';
+// import ScientificBenefits from './components/ScientificBenefits';
 import CallToAction from './components/CallToAction';
 import Footer from './components/Footer';

@@ -15,13 +15,14 @@ function App() {
      <Header />
      
      <main className="max-w-5xl mx-auto px-6 sm:px-8 lg:px-10 py-24 space-y-32">
+
        <Hero />
        <DownloadSection />
        <Features />
        <WhatYouCanDo />
        <WhyAramland />
        <FreeTrial />
-        <ScientificBenefits />
+        {/* <ScientificBenefits /> */}
        <CallToAction />
      </main>

@@ -2,25 +2,25 @@ function CallToAction() {
  return (
    <div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
      {/* Background with gradient */}
-      <div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] opacity-10"></div>
+      <div className="absolute inset-0 bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 opacity-10"></div>
      
      {/* Animated border */}
-      <div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF]/20 animate-pulse"></div>
+      <div className="absolute inset-0 rounded-3xl border-2 border-primary-500/20 animate-pulse"></div>
      
      <div className="relative">
        <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
-          آماده برای <span className="text-[#C3C7FF]">تغییر</span> زندگی؟
+          آماده برای <span className="text-primary-500">تغییر</span> زندگی؟
        </h2>
        <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
          امروز اولین قدم رو بردار و ببین چطور آرام‌لند می‌تونه کیفیت زندگی‌ات رو متحول کنه
        </p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <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 text-lg shadow-lg hover:shadow-[#C3C7FF]/40 relative overflow-hidden group">
+          <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 text-lg shadow-lg hover:shadow-primary-500/40 relative overflow-hidden group">
            <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
            <span className="relative">شروع سفر آرامش</span>
          </button>
-          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-[#C3C7FF] hover:text-[#C3C7FF] transition-all duration-300">
+          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
            بیشتر بدانید
          </button>
        </div>
@@ -7,22 +7,22 @@ function DownloadSection() {
      title: "کافه بازار",
      description: "دانلود برای اندروید",
      badge: "پرطرفدار",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      animation: "animate-slideInLeft delay-100"
    },
    {
      icon: PlayCircle,
-      title: "گوگل پلی",
+      title: "مایکت",
      description: "دانلود برای اندروید",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+       gradient: "from-primary-500 to-primary-600",
      animation: "animate-fadeInUp delay-200"
    },
    {
      icon: Globe,
-      title: "وب اپلیکیشن",
-      description: "استفاده آنلاین",
+      title: "وب سایت",
+      description: "نسخه وب برای تمام دستگاه‌ها",
      badge: "جدید",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      animation: "animate-slideInRight delay-300"
    }
  ];
@@ -31,13 +31,13 @@ function DownloadSection() {
    <div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden">
      {/* Background pattern */}
      <div className="absolute inset-0 opacity-5">
-        <div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF]"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600"></div>
      </div>
      
      <div className="relative">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            همین حالا <span className="text-[#C3C7FF]">شروع کنید</span>
+            همین حالا <span className="text-primary-500">شروع کنید</span>
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            آرام‌لند را روی دستگاه مورد علاقه‌تان نصب کنید
@@ -55,7 +55,7 @@ function DownloadSection() {
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
              
              {option.badge && (
-                <div className="absolute -top-2 -right-2 bg-white text-[#C3C7FF] px-3 py-1 rounded-full text-xs font-bold shadow-lg">
+                <div className="absolute -top-2 -right-2 bg-white text-primary-500 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
                  {option.badge}
                </div>
              )}
@@ -4,24 +4,24 @@ function Features() {
      emoji: "💨",
      title: "تمرین تنفسی هوشمند",
      description: "الگوریتم هوشمند برای هر لحظه، یک تنفس عمیق و استرس‌ات نابود شه",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      delay: "delay-100"
    },
    {
      emoji: "🎛️",
      title: "الگوی تنفسی انتخابی",
      description: "تمرین‌های تنفسی خود را طراحی کنید و تمام خاصیت‌ها را کنترل کنید",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      delay: "delay-200"
    },
    {
      emoji: "📦",
      title: "صندوق دغدغه‌ها",
      description: "دغدغه‌هایت رو در یک صندوق خیالی بگذار و ذهنت رو سبک‌تر کن",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      delay: "delay-300"
    }
  ];
@@ -29,12 +29,12 @@ function Features() {
  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">
+        <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-[#C3C7FF]">آرامش</span> نیاز دارید
+          هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز دارید
        </h2>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          تمام ابزارهای لازم برای رسیدن به آرامش درونی در یک پلتفرم
@@ -45,7 +45,7 @@ function Features() {
        {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`}
+            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">
@@ -1,6 +1,6 @@
 function FreeTrial() {
  return (
-    <div className="relative bg-gradient-to-r from-[#C3C7FF] via-[#A8B1FF] to-[#C3C7FF] rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
+    <div className="relative bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
@@ -47,7 +47,7 @@ function FreeTrial() {
        </div>

        {/* CTA Button */}
-        <button className="bg-white text-[#C3C7FF] font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
+        <button className="bg-white text-primary-500 font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
          <span className="relative">شروع دوره آزمایشی رایگان</span>
        </button>
@@ -4,10 +4,10 @@ function Header() {
      <div className="max-w-6xl mx-auto flex justify-between items-center">
        {/* Logo */}
        <div className="flex items-center gap-3">
-          <div className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] w-8 h-8 rounded-xl flex items-center justify-center">
+          <div className="bg-gradient-to-r from-primary-500 to-primary-600 w-8 h-8 rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-sm">آ</span>
          </div>
-          <div className="text-2xl font-bold bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent">
+          <div className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
            آرام‌لند
          </div>
        </div>
@@ -18,16 +18,16 @@ function Header() {
            <a
              key={item}
              href="#"
-              className="text-gray-600 hover:text-[#C3C7FF] font-medium transition-colors duration-200 relative group"
+              className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group"
            >
              {item}
-              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#C3C7FF] group-hover:w-full transition-all duration-300"></span>
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-500 group-hover:w-full transition-all duration-300"></span>
            </a>
          ))}
        </div>

        {/* CTA Button */}
-        <button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
+        <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
          شروع رایگان
        </button>
      </div>
@@ -4,21 +4,21 @@ function Hero() {
    <div className="text-center mb-20 relative">
      {/* Background decoration */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute -top-20 -right-20 w-72 h-72 bg-[#C3C7FF] opacity-10 rounded-full blur-3xl"></div>
-        <div className="absolute -bottom-20 -left-20 w-72 h-72 bg-[#C3C7FF] opacity-10 rounded-full blur-3xl"></div>
+        <div className="absolute -top-20 -right-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
      </div>
      
      <div className="relative">
        <div className="mb-8 animate-float">
          <div className="relative inline-block">
            <span className="text-6xl">✨</span>
-            <div className="absolute inset-0 bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] opacity-20 blur-xl rounded-full"></div>
+            <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
          </div>
        </div>
        
        <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp">
          آرامش را در 
-          <span className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent"> هر لحظه </span>
+          <span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
          تجربه کنید
        </h1>

@@ -28,10 +28,10 @@ function Hero() {
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeInUp delay-200">
-          <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 text-lg shadow-lg hover:shadow-[#C3C7FF]/25">
+          <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 text-lg shadow-lg hover:shadow-primary-500/25">
            شروع کنید رایگان
          </button>
-          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-[#C3C7FF] hover:text-[#C3C7FF] transition-all duration-300">
+          <button className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
            مشاهده ویژگی‌ها
          </button>
        </div>
@@ -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;
@@ -6,10 +6,10 @@ function WhatYouCanDo() {
      icon: Wind,
      title: "تمرین‌های تنفسی",
      description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
      delay: "delay-100",
      stats: "۱۰+ تمرین مختلف"
    },
@@ -17,10 +17,10 @@ function WhatYouCanDo() {
      icon: Brain,
      title: "مدیتیشن و ذهن‌آگاهی",
      description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
      delay: "delay-200",
      stats: "۵۰+ جلسه"
    },
@@ -28,10 +28,10 @@ function WhatYouCanDo() {
      icon: Heart,
      title: "صلح درونی و خودقبولی",
      description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
      delay: "delay-300",
      stats: "۲۵+ برنامه"
    },
@@ -39,10 +39,10 @@ function WhatYouCanDo() {
      icon: Sparkles,
      title: "موسیقی آرام‌بخش",
      description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
-      gradient: "from-[#C3C7FF]/10 to-[#A8B1FF]/10",
-      border: "border-[#C3C7FF]/20",
+      gradient: "from-primary-500/10 to-primary-600/10",
+      border: "border-primary-500/20",
      items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
-      color: "[#C3C7FF]",
+      color: "primary-500",
      delay: "delay-400",
      stats: "۱۰۰+ آهنگ"
    }
@@ -52,12 +52,12 @@ function WhatYouCanDo() {
    <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">
+        <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">
          <Sparkles className="w-4 h-4" />
          قابلیت‌های اصلی
        </div>
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-          هر آنچه برای <span className="text-[#C3C7FF]">آرامش</span> نیاز داری
+          هر آنچه برای <span className="text-primary-500">آرامش</span> نیاز داری
        </h2>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          ابزارهای متنوع و تخصصی برای رسیدن به آرامش در هر شرایطی
@@ -69,17 +69,17 @@ function WhatYouCanDo() {
        {activities.map((activity, index) => (
          <div
            key={index}
-            className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-[#C3C7FF]/40 hover:translate-y-[-8px]`}
+            className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-primary-500/40 hover:translate-y-[-8px]`}
          >
            {/* Header with Icon and Stats */}
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center">
-                <div className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
+                <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
                  <activity.icon className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900">{activity.title}</h3>
-                  <p className="text-sm text-[#C3C7FF] font-medium mt-1">{activity.stats}</p>
+                  <p className="text-sm text-primary-500 font-medium mt-1">{activity.stats}</p>
                </div>
              </div>
            </div>
@@ -94,16 +94,16 @@ function WhatYouCanDo() {
              {activity.items.map((item, itemIndex) => (
                <li 
                  key={itemIndex} 
-                  className="flex items-center text-gray-700 group/item hover:text-[#C3C7FF] transition-colors duration-200"
+                  className="flex items-center text-gray-700 group/item hover:text-primary-500 transition-colors duration-200"
                >
-                  <div className="w-2 h-2 bg-[#C3C7FF] rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div>
+                  <div className="w-2 h-2 bg-primary-500 rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            {/* Hover Effect Overlay */}
-            <div className="absolute inset-0 rounded-3xl border-2 border-[#C3C7FF] opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+            <div className="absolute inset-0 rounded-3xl border-2 border-primary-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
          </div>
        ))}
      </div>
@@ -111,9 +111,9 @@ function WhatYouCanDo() {
      {/* Bottom CTA */}
      <div className="text-center">
        <p className="text-gray-600 text-lg mb-6">
-          بیش از <span className="text-[#C3C7FF] font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
+          بیش از <span className="text-primary-500 font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
        </p>
-        <button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
+        <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
          کشف همه قابلیت‌ها
        </button>
      </div>
@@ -5,7 +5,7 @@ function WhyAramland() {
      text: "مدیتیشن و تمرین تنفسی",
      description: "تمرین‌های متنوع برای هر سلیقه و نیاز",
      icon: "🧘‍♀️",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      delay: "delay-100"
    },
    {
@@ -13,7 +13,7 @@ function WhyAramland() {
      text: "ساعت محتوای صوتی فارسی",
      description: "هدایت‌شده توسط متخصصان ایرانی",
      icon: "🎧",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      delay: "delay-200"
    },
    {
@@ -21,7 +21,7 @@ function WhyAramland() {
      text: "دسترسی همیشه و همه جا",
      description: "در هر زمان و مکان به آرامش برسید",
      icon: "🌙",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      delay: "delay-300"
    },
    {
@@ -29,7 +29,7 @@ function WhyAramland() {
      text: "رضایت کاربران",
      description: "تجربه‌ای که کاربران عاشقش هستند",
      icon: "⭐",
-      gradient: "from-[#C3C7FF] to-[#A8B1FF]",
+      gradient: "from-primary-500 to-primary-600",
      delay: "delay-400"
    }
  ];
@@ -58,12 +58,12 @@ function WhyAramland() {
      <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">
+          <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-[#C3C7FF]">هزاران نفر</span> آرام‌لند را انتخاب می‌کنند؟
+            چرا <span className="text-primary-500">هزاران نفر</span> آرام‌لند را انتخاب می‌کنند؟
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            تجربه‌ای متفاوت از آرامش، طراحی شده مخصوص فارسی‌زبانان
@@ -83,7 +83,7 @@ function WhyAramland() {
              </div>
              
              {/* Number */}
-              <div className="text-4xl font-bold bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] bg-clip-text text-transparent mb-2">
+              <div className="text-4xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent mb-2">
                {stat.number}
              </div>
              
@@ -100,9 +100,9 @@ function WhyAramland() {

        {/* 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 className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
+          <div className="mx-4 text-primary-500 text-lg">✨</div>
+          <div className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
        </div>

        {/* Features Grid */}
@@ -112,7 +112,7 @@ function WhyAramland() {
              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">
+              <div className="bg-primary-500/10 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-500/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>
@@ -125,7 +125,7 @@ function WhyAramland() {
      </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="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">
@@ -140,7 +140,7 @@ function WhyAramland() {
              {[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"
+                  className="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full border-2 border-white flex items-center justify-center text-white font-bold text-sm"
                >
                  {item}
                </div>
@@ -156,15 +156,15 @@ function WhyAramland() {

      {/* 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">
+        {/* <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 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">
+        </button> */}
+        {/* <p className="text-gray-500 text-sm mt-4">
          هیچ کارت اعتباری نیاز نیست • تضمین بازگشت وجه ۷ روزه
-        </p>
+        </p> */}
      </div>
    </div>
  );
@@ -1,7 +1,24 @@
@import "tailwindcss";
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

+
+
+  @theme {
+    --color-primary-50: #f0f1ff;
+    --color-primary-100: #e4e6ff;
+    --color-primary-200: #c3c7ff;
+    --color-primary-300: #a8b1ff;
+    --color-primary-400: #8d9aff;
+    --color-primary-500: #727dfd;
+    --color-primary-600: #5d68e0;
+    --color-primary-700: #4853c4;
+    --color-primary-800: #343ea8;
+    --color-primary-900: #1f298;
+  }
+
 /* Dana Font Faces */
@font-face {
  font-family: 'Dana';