From 849449e80249b1b4657a05c20011c2c46f7badff Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Sat, 26 Apr 2025 20:18:25 +0300
Subject: [PATCH] add: added animations for the block

---
 src/app/globals.css               | 46 +++++++++++++++++++++++++++++++
 src/widgets/footer.tsx            |  3 +-
 src/widgets/hero-section.tsx      | 11 +++++---
 src/widgets/vacancies-section.tsx |  2 ++
 tailwind.config.js                |  2 +-
 5 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ac2e376..2090000 100644
--- a/src/app/globals.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/widgets/footer.tsx b/src/widgets/footer.tsx
index b7ab63a..9593170 100644
--- a/src/widgets/footer.tsx
+++ b/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>
diff --git a/src/widgets/hero-section.tsx b/src/widgets/hero-section.tsx
index bd5ca18..e0e92ec 100644
--- a/src/widgets/hero-section.tsx
+++ b/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'>
-              <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                Сеть современных заправок в Таджикистане
-              </h1>
+              <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>
diff --git a/src/widgets/vacancies-section.tsx b/src/widgets/vacancies-section.tsx
index 4f711fe..8e2a2b6 100644
--- a/src/widgets/vacancies-section.tsx
+++ b/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'>
diff --git a/tailwind.config.js b/tailwind.config.js
index 51632a4..d4a3173 100644
--- a/tailwind.config.js
+++ b/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' },
         },