Merge pull request 'add-pages' (#3) from add-pages into dev

Reviewed-on: #3

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/features/auth/login-form/ui/login-form.tsx

@@ -56,7 +56,7 @@ export const LoginForm = ({}: LoginFormProps) => {
 
   return (
     <Form {...form} >
-      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4 mx-auto'>
         <FormField
           control={form.control}
           name='phoneNumber'

src/widgets/cta-section.tsx

@@ -16,7 +16,7 @@ export const CtaSection = () => {
           <p className='mb-8 max-w-2xl'>{t('home.cta.description')}</p>
           <div className='flex flex-col gap-4 sm:flex-row'>
             <Button variant='outline'>{t('common.buttons.downloadApp')}</Button>
-            <Button className='bg-white text-red-600 hover:bg-gray-100'>
+            <Button variant='secondary'>
               {t('common.buttons.getLoyaltyCard')}
             </Button>
           </div>

src/widgets/footer.tsx

@@ -2,6 +2,7 @@
 
 import { Fuel, Mail, MapPin, Phone } from 'lucide-react';
 import Link from 'next/link';
+import '.././app/globals.css'
 
 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -133,7 +134,7 @@ export const Footer = () => {
                 placeholder={t('common.footer.yourEmail')}
                 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'>
                 {t('common.footer.subscribe')}
               </Button>
             </form>

src/widgets/hero-section.tsx

@@ -2,6 +2,7 @@
 
 import { MapPin } from 'lucide-react';
 import Image from 'next/image';
+import '../../src/app/globals.css'
 
 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -23,9 +24,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='tracking-in-expand'>
                 <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                   {t('home.hero.title')}
                 </h1>
+              </div>
               <p className='text-lg text-gray-200'>
                 {t('home.hero.description')}
               </p>
@@ -34,7 +37,8 @@ export const HeroSection = () => {
                   {t('common.buttons.findStation')}{' '}
                   <MapPin className='ml-2 h-4 w-4' />
                 </Button>
-                <Button variant='outline'>
+                <Button variant='outline' className='animate-pulse'
+                >
                   {t('common.buttons.learnMore')}
                 </Button>
               </div>

src/widgets/vacancies-section.tsx

@@ -83,6 +83,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'>
@@ -116,6 +117,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'>