style: some styles are change

tailwind.config.ts

@@ -1,11 +1,6 @@
 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: {
@@ -19,6 +14,49 @@ const config: Config = {
       },
       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',
+      },
+      keyframes: {
+        fadeInUp: {
+          '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)' },
+        },
       }
     },
   },