update: add animations to sections

src/widgets/about-section.tsx

@@ -66,7 +66,10 @@ export const AboutSection = () => {
               </div>
             </div>
           </div>
-          <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
+          <div
+            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
+            data-aos='zoom-in-down'
+          >
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='About our company'

src/widgets/charity-section.tsx

@@ -13,7 +13,10 @@ export const CharitySection = () => {
     <section id='charity' className='py-16'>
       <div className='container mx-auto'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'>
+          <div
+            className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
+            data-aos='zoom-out-up'
+          >
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='Charity Foundation'

src/widgets/footer.tsx

@@ -10,7 +10,7 @@ export const Footer = () => {
   const { t } = useLanguage();
 
   return (
-    <footer className='bg-gray-900 py-12 text-white'>
+    <footer className='bg-gray-900 py-12 text-white px-4'>
       <div className='containe mx-autor'>
         <div className='grid grid-cols-1 gap-8 md:grid-cols-4'>
           <div>

src/widgets/map-section.tsx

@@ -24,7 +24,10 @@ export const MapSection = () => {
             {t('home.stations.description')}
           </p>
         </div>
-        <div className='h-[500px] overflow-hidden rounded-xl border shadow-lg'>
+        <div
+          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
+          data-aos='fade-up'
+        >
           <GasStationMap />
         </div>
         <div className='mt-8 flex justify-center'>

src/widgets/partners-section.tsx

@@ -29,6 +29,7 @@ export const PartnersSection = () => {
             <div
               key={partner}
               className='flex h-32 items-center justify-center rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
+              data-aos='flip-left'
             >
               <Image
                 src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}

src/widgets/vacancies-section.tsx

@@ -46,6 +46,7 @@ export const VacanciesSection = () => {
               <Card
                 key={index}
                 className='overflow-hidden transition-all hover:shadow-md'
+                data-aos='zoom-in'
               >
                 <CardContent className='p-0'>
                   <div className='p-6'>