From 2dfcdd096e7d501315c4bf9554df14ee1fbb0006 Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Thu, 1 May 2025 07:31:37 +0300
Subject: [PATCH] update: added animation for blocks

---
 .../(dashboard)/corporate-dashboard/index.tsx |   4 +-
 .../(dashboard)/customer-dashboard/index.tsx  |   4 +-
 src/pages-templates/about/index.tsx           |  12 +--
 src/pages-templates/charity/index.tsx         |   2 +-
 .../clients/certificates/index.tsx            |   1 +
 src/pages-templates/clients/index.tsx         |   2 +-
 src/pages-templates/clients/loyalty/index.tsx | 102 +++++++++---------
 src/pages-templates/login/index.tsx           |   2 +-
 src/widgets/clients/ui/benefits-section.tsx   |   4 +-
 .../clients/ui/services-overview-section.tsx  |   2 +-
 10 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
index a99a4e3..02ddedd 100644
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/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' />
diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
index 8a5aca8..97a7225 100644
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/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' />
diff --git a/src/pages-templates/about/index.tsx b/src/pages-templates/about/index.tsx
index 11366c0..0990226 100644
--- a/src/pages-templates/about/index.tsx
+++ b/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}
diff --git a/src/pages-templates/charity/index.tsx b/src/pages-templates/charity/index.tsx
index c33997e..0638bb3 100644
--- a/src/pages-templates/charity/index.tsx
+++ b/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' />
diff --git a/src/pages-templates/clients/certificates/index.tsx b/src/pages-templates/clients/certificates/index.tsx
index 0d20136..1f6b6ff 100644
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/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'
             >
diff --git a/src/pages-templates/clients/index.tsx b/src/pages-templates/clients/index.tsx
index c63d125..42eb934 100644
--- a/src/pages-templates/clients/index.tsx
+++ b/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')}
diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index 4dd4902..ac740c1 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/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'>
@@ -274,53 +274,53 @@ export function LoyaltyPage() {
                     </CardContent>
                   </Card>
 
-                <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
-                  <CardContent className='p-6'>
-                    <h3 className='mb-4 text-center text-2xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-3.title')}
-                    </h3>
-                    <div className='mb-6 text-center'>
-                      <span className='text-4xl font-bold'>
-                        {t('clients.loyalty.works.levels.card-3.percent')}
-                      </span>
-                      <p className='text-sm text-gray-600'>
-                        {t('clients.loyalty.works.levels.card.mark')}
-                      </p>
-                    </div>
-                    <ul className='space-y-2'>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-1')}
+                  <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
+                    <CardContent className='p-6'>
+                      <h3 className='mb-4 text-center text-2xl font-bold'>
+                        {t('clients.loyalty.works.levels.card-3.title')}
+                      </h3>
+                      <div className='mb-6 text-center'>
+                        <span className='text-4xl font-bold'>
+                          {t('clients.loyalty.works.levels.card-3.percent')}
                         </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-2')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-3')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-4')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-5')}
-                        </span>
-                      </li>
-                    </ul>
-                  </CardContent>
-                </Card>
+                        <p className='text-sm text-gray-600'>
+                          {t('clients.loyalty.works.levels.card.mark')}
+                        </p>
+                      </div>
+                      <ul className='space-y-2'>
+                        <li className='flex items-center'>
+                          <Check className='mr-2 h-5 w-5 text-green-500' />
+                          <span>
+                            {t('clients.loyalty.works.levels.card-3.bonus-1')}
+                          </span>
+                        </li>
+                        <li className='flex items-center'>
+                          <Check className='mr-2 h-5 w-5 text-green-500' />
+                          <span>
+                            {t('clients.loyalty.works.levels.card-3.bonus-2')}
+                          </span>
+                        </li>
+                        <li className='flex items-center'>
+                          <Check className='mr-2 h-5 w-5 text-green-500' />
+                          <span>
+                            {t('clients.loyalty.works.levels.card-3.bonus-3')}
+                          </span>
+                        </li>
+                        <li className='flex items-center'>
+                          <Check className='mr-2 h-5 w-5 text-green-500' />
+                          <span>
+                            {t('clients.loyalty.works.levels.card-3.bonus-4')}
+                          </span>
+                        </li>
+                        <li className='flex items-center'>
+                          <Check className='mr-2 h-5 w-5 text-green-500' />
+                          <span>
+                            {t('clients.loyalty.works.levels.card-3.bonus-5')}
+                          </span>
+                        </li>
+                      </ul>
+                    </CardContent>
+                  </Card>
               </div>
             </div>
           </section>
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index 712d049..ac51ec6 100644
--- a/src/pages-templates/login/index.tsx
+++ b/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}
diff --git a/src/widgets/clients/ui/benefits-section.tsx b/src/widgets/clients/ui/benefits-section.tsx
index 229d6ae..3ce4fbd 100644
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/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='Преимущества для клиентов'
diff --git a/src/widgets/clients/ui/services-overview-section.tsx b/src/widgets/clients/ui/services-overview-section.tsx
index f32bdd5..faa7e4f 100644
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/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