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';
@@ -19,6 +19,7 @@
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
+        "autoprefixer": "^10.4.21",
        "eslint": "^9",
        "eslint-config-next": "16.0.1",
        "tailwindcss": "^4",
@@ -2363,6 +2364,44 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3589,6 +3628,20 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
    "node_modules/framer-motion": {
      "version": "12.23.24",
      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
@@ -5097,6 +5150,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5377,6 +5440,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -5386,6 +5450,13 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -20,6 +20,7 @@
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "16.0.1",
    "tailwindcss": "^4",
@@ -1,6 +1,8 @@
+// postcss.config.mjs
 const config = {
  plugins: {
-    "@tailwindcss/postcss": {},
+    "@tailwindcss/postcss": {}, // ✅ correct for Tailwind 4
+    autoprefixer: {},
  },
 };

@@ -1,63 +1,32 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from "tailwindcss";

 const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
-          'Dana',
-          'Inter', 
-          'var(--font-geist-sans)',
-          'system-ui',
-          'sans-serif',
+          "Dana",
+          "Inter",
+          "var(--font-geist-sans)",
+          "system-ui",
+          "sans-serif",
        ],
      },
-      direction: {
-        'rtl': 'rtl',
-      },
-      colors: {
-        primary: {
-          50: '#f0f1ff',
-          100: '#e0e2ff',
-          200: '#c3c7ff',
-          300: '#a8b1ff',
-          400: '#8d9aff',
-          500: '#C3C7FF', // Your main color
-          600: '#a8b1ff',
-          700: '#8d9aff',
-          800: '#7283ff',
-          900: '#576cff',
-        }
-      },
+     
      animation: {
-        'fadeInUp': 'fadeInUp 0.6s ease-out',
-        'float': 'float 6s ease-in-out infinite',
-        'pulse-glow': 'pulse-glow 2s ease-in-out infinite alternate',
-        'slideInLeft': 'slideInLeft 0.6s ease-out',
-        'slideInRight': 'slideInRight 0.6s ease-out',
+        fadeInUp: "fadeInUp 0.6s ease-out",
      },
      keyframes: {
        fadeInUp: {
-          '0%': { opacity: '0', transform: 'translateY(30px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
+          "0%": { opacity: "0", transform: "translateY(30px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
        },
-        float: {
-          '0%, 100%': { transform: 'translateY(0px)' },
-          '50%': { transform: 'translateY(-20px)' },
      },
-        'pulse-glow': {
-          '0%': { boxShadow: '0 0 20px rgb(195 199 255 / 0.4)' },
-          '100%': { boxShadow: '0 0 30px rgb(195 199 255 / 0.8)' },
-        },
-        slideInLeft: {
-          '0%': { opacity: '0', transform: 'translateX(-30px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' },
-        },
-        slideInRight: {
-          '0%': { opacity: '0', transform: 'translateX(30px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' },
-        },
-      }
    },
  },
  plugins: [],