add: added animations for the block

src/app/globals.css

@@ -120,3 +120,49 @@
     @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

@@ -1,5 +1,6 @@
 import { Fuel, Mail, MapPin, Phone } from 'lucide-react';
 import Link from 'next/link';
+import '.././app/globals.css'
 
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -137,7 +138,7 @@ export const Footer = () => {
                 placeholder='Ваш email'
                 className='w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-white'
               />
-              <Button className='w-full bg-red-600 hover:bg-red-700'>
+              <Button className='w-full bg-red-600 hover:bg-red-700 heartbeat'>
                 Подписаться
               </Button>
             </form>

src/widgets/hero-section.tsx

@@ -1,5 +1,6 @@
 import { MapPin } from 'lucide-react';
 import Image from 'next/image';
+import '../../src/app/globals.css'
 
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -18,9 +19,11 @@ 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='flex tracking-in-expand'>
                 <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl '>
                   Сеть современных заправок в Таджикистане
                 </h1>
+              </div>
               <p className='text-lg text-gray-200'>
                 Качественное топливо, удобное расположение и отличный сервис для
                 наших клиентов
@@ -29,7 +32,7 @@ export const HeroSection = () => {
                 <Button className='bg-red-600 hover:bg-red-700'>
                   Найти заправку <MapPin className='ml-2 h-4 w-4' />
                 </Button>
-                <Button variant='outline'
+                <Button variant='outline' className='animate-pulse'
                 >
                   Узнать больше
                 </Button>

src/widgets/vacancies-section.tsx

@@ -79,6 +79,7 @@ export const VacanciesSection = () => {
               <Card
                 key={index}
                 className='overflow-hidden transition-all hover:shadow-md'
+                data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
               >
                 <CardContent className='p-0'>
                   <div className='p-6'>
@@ -112,6 +113,7 @@ export const VacanciesSection = () => {
                 <Card
                   key={index}
                   className='overflow-hidden transition-all hover:shadow-md'
+                  data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
                 >
                   <CardContent className='p-0'>
                     <div className='p-6'>

tailwind.config.js

@@ -80,7 +80,7 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0' },
         },
-        'caret-blink': {
+        'caret-blink11': {
           '0%,70%,100%': { opacity: '1' },
           '20%,50%': { opacity: '0' },
         },