update: added animation for blocks

src/pages-templates/(dashboard)/corporate-dashboard/index.tsx

@@ -110,7 +110,7 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card className='md:col-span-2'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
               <CardHeader className='pb-2'>
                 <CardTitle className='flex items-center gap-2'>
                   <Building2 className='h-5 w-5 text-red-600' />
@@ -166,7 +166,7 @@ export function CorporateDashboard() {
             </Card>
 
             {/* Fund Card */}
-            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
               <CardHeader>
                 <CardTitle className='flex items-center gap-2'>
                   <Wallet className='h-5 w-5' />

src/pages-templates/(dashboard)/customer-dashboard/index.tsx

@@ -34,7 +34,7 @@ export function CustomerDashboard() {
           </div>
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
-            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card data-aos="zoom-in"  data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
               {!data || isLoading ? (
                 // TODO: Bunyod please add loader here
                 <>Loader here</>
@@ -73,7 +73,7 @@ export function CustomerDashboard() {
 
             {/* Bonus Card */}
             {/* Customer Card */}
-            <Card className='md:col-span-2'>
+            <Card data-aos="zoom-in" data-aos-mirror="true"  className='md:col-span-2'>
               <CardHeader className='pb-2'>
                 <CardTitle className='flex items-center gap-2'>
                   <User className='h-5 w-5 text-red-600' />

src/pages-templates/about/index.tsx

@@ -38,7 +38,7 @@ export default function AboutPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
-              <div className='container mx-auto'>
+              <div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
                 <div className='max-w-2xl space-y-4 text-white'>
                   <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                     {t('about.hero.title')}
@@ -57,7 +57,7 @@ export default function AboutPage() {
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div>
+                <div data-aos='fade-right'>
                   <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                     <Fuel className='h-6 w-6 text-red-600' />
                   </div>
@@ -92,7 +92,7 @@ export default function AboutPage() {
                     ))}
                   </div>
                 </div>
-                <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                <div data-aos="zoom-out-right" className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
                     src='/placeholder.svg?height=500&width=600&text=Главный+офис'
                     alt={t('about.overview.imageAlt')}
@@ -210,7 +210,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid gap-8 md:grid-cols-3'>
+              <div data-aos='flip-up' data-aos-duration='600' className='grid gap-8 md:grid-cols-3'>
                 {[0, 1, 2].map((index) => (
                   <Card
                     key={index}
@@ -250,7 +250,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
+              <div data-aos='flip-down' data-aos-duration='600' className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
                 {[0, 1, 2, 3].map((index) => (
                   <div
                     key={index}
@@ -296,7 +296,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid gap-8 md:grid-cols-3'>
+              <div data-aos="zoom-out-right" className='grid gap-8 md:grid-cols-3'>
                 {[0, 1, 2].map((index) => (
                   <Card
                     key={index}

src/pages-templates/charity/index.tsx

@@ -48,7 +48,7 @@ export function CharityPage() {
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
               <Container>
-                <div className='container mx-auto'>
+                <div data-aos='fade-down' data-aos-duration='800' className='container mx-auto'>
                   <div className='max-w-2xl space-y-6 text-white'>
                     <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
                       <Heart className='size-6 text-red-500' />

src/pages-templates/clients/certificates/index.tsx

@@ -77,6 +77,7 @@ export function CertificatesPage() {
         <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
           {certificates.map((certificate) => (
             <Card
+              data-aos='zoom-in'
               key={certificate.id}
               className='overflow-hidden transition-all duration-300 hover:shadow-lg'
             >

src/pages-templates/clients/index.tsx

@@ -34,7 +34,7 @@ export function ClientsPage() {
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
               <Container>
-                <div className='container mx-auto'>
+                <div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
                   <div className='max-w-2xl space-y-4 text-white'>
                     <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                       {t('clients.title')}

src/pages-templates/clients/loyalty/index.tsx

@@ -34,7 +34,7 @@ export function LoyaltyPage() {
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
             <Container>
-                <div className='container mx-auto'>
+                <div data-aos='fade-down' data-aos-duration="800" className='container mx-auto'>
                   <div className='max-w-2xl space-y-4 text-white'>
                     <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                       {t('clients.loyalty.title')}
@@ -54,7 +54,7 @@ export function LoyaltyPage() {
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div>
+                <div data-aos='fade-right'>
                   <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                     <Percent className='h-6 w-6 text-red-600' />
                   </div>
@@ -110,7 +110,7 @@ export function LoyaltyPage() {
                     </div>
                   </div>
                 </div>
-                <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
+                <div data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
                     src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
                     alt='Программа лояльности'
@@ -134,7 +134,7 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-            <div className='grid gap-8 md:grid-cols-4'>
+            <div data-aos='zoom-in-right' className='grid gap-8 md:grid-cols-4'>
               <div className='text-center'>
                 <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                   1
@@ -195,7 +195,7 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-                <div className='grid gap-8 md:grid-cols-3'>
+                <div data-aos='flip-down' className='grid gap-8 md:grid-cols-3'>
                   <Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
                     <CardContent className='p-6'>
                       <h3 className='mb-4 text-center text-2xl font-bold'>

src/pages-templates/login/index.tsx

@@ -66,7 +66,7 @@ export default function LoginPage() {
               <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
             </div>
 
-            <div className='mx-auto max-w-lg'>
+            <div data-aos='zoom-in' className='mx-auto max-w-lg'>
               <Tabs
                 defaultValue={defaultTab}
                 value={defaultTab}

src/widgets/clients/ui/benefits-section.tsx

@@ -38,7 +38,7 @@ export const BenefitsSection = () => {
       <section className='bg-gray-50 py-16'>
         <div className='container mx-auto'>
           <div className='grid items-center gap-12 md:grid-cols-2'>
-            <div className='order-2 md:order-1'>
+            <div data-aos='fade-right' data-aos-duration='4000' className='order-2 md:order-1'>
               <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                 <Percent className='h-6 w-6 text-red-600' />
               </div>
@@ -65,7 +65,7 @@ export const BenefitsSection = () => {
                 })}
               </div>
             </div>
-            <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
+            <div data-aos='fade-up' className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
               <Image
                 src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
                 alt='Преимущества для клиентов'

src/widgets/clients/ui/services-overview-section.tsx

@@ -62,7 +62,7 @@ export const ServicesOverviewSection = () => {
             </p>
           </div>
 
-          <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+          <div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
             {servicesOverview.map(({ description, Icon, contentText, title }) => {
               return (
                 <Card