update: add animation package and remove animation styles from globals-css file

package.json

@@ -39,6 +39,7 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animated": "^2.0.0",
     "tw-animate-css": "^1.2.6",
     "zod": "^3.24.3"
   },

pnpm-lock.yaml

@@ -95,6 +95,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@4.1.4)
+      tailwindcss-animated:
+        specifier: ^2.0.0
+        version: 2.0.0(tailwindcss@4.1.4)
       tw-animate-css:
         specifier: ^1.2.6
         version: 1.2.6
@@ -2538,6 +2541,11 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
+  tailwindcss-animated@2.0.0:
+    resolution: {integrity: sha512-anNNGpxNgjydD8p1lcJjxxH+XbjW6KR8Xs29owTrbcf3tOJ6IRblpyFob43HBkfxFJJTAfFQqugoEG2b1EsR0A==}
+    peerDependencies:
+      tailwindcss: '>=3.1.0 || >=4.0.0'
+
   tailwindcss@4.1.4:
     resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
 
@@ -5138,6 +5146,10 @@ snapshots:
     dependencies:
       tailwindcss: 4.1.4
 
+  tailwindcss-animated@2.0.0(tailwindcss@4.1.4):
+    dependencies:
+      tailwindcss: 4.1.4
+
   tailwindcss@4.1.4: {}
 
   tapable@2.2.1: {}

src/app/globals.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
+@import 'tailwindcss-animated';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -49,7 +50,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.577 0.245 27.325) ;
+  --primary: oklch(0.577 0.245 27.325);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -120,49 +121,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-.tracking-in-expand {
-	animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
-}
-
-@keyframes tracking-in-expand {
-  0% {
-    letter-spacing: -0.5em;
-    opacity: 0;
-  }
-  40% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-
-.heartbeat {
-	animation: heartbeat 1.5s ease-in-out infinite both;
-}
-
-@keyframes heartbeat {
-  from {
-    transform: scale(1);
-    transform-origin: center center;
-    animation-timing-function: ease-out;
-  }
-  10% {
-    transform: scale(0.91);
-    animation-timing-function: ease-in;
-  }
-  17% {
-    transform: scale(0.98);
-    animation-timing-function: ease-out;
-  }
-  33% {
-    transform: scale(0.87);
-    animation-timing-function: ease-in;
-  }
-  45% {
-    transform: scale(1);
-    animation-timing-function: ease-out;
-  }
-}

src/widgets/footer.tsx

@@ -5,8 +5,6 @@ import Link from 'next/link';
 
 import { useLanguage } from '@/shared/language';
 
-import '.././app/globals.css';
-
 export const Footer = () => {
   const { t } = useLanguage();
 

src/widgets/hero-section.tsx

@@ -2,11 +2,10 @@
 
 import { MapPin } from 'lucide-react';
 import Image from 'next/image';
-import '../../src/app/globals.css'
+import Link from 'next/link';
 
 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
-import Link from 'next/link';
 
 export const HeroSection = () => {
   const { t } = useLanguage();
@@ -25,7 +24,7 @@ export const HeroSection = () => {
         <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
           <div className='container mx-auto'>
             <div className='max-w-lg space-y-4 text-white'>
-              <div className='tracking-in-expand'>
+              <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
                 <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                   {t('home.hero.title')}
                 </h1>
@@ -41,8 +40,7 @@ export const HeroSection = () => {
                   </Button>
                 </Link>
                 <Link href='#'>
-                  <Button variant='outline' className='animate-pulse'
+                  <Button variant='outline' className='animate-pulse'>
-                  >
                     {t('common.buttons.learnMore')}
                   </Button>
                 </Link>

tailwind.config.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import tailwindcssAnimated from 'tailwindcss-animated';
 
 module.exports = {
   darkMode: ['class'],
@@ -102,5 +103,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), tailwindcssAnimated],
 };