update: added images for blocks

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

@@ -9,6 +9,8 @@ import { Card, CardContent } from '@/shared/shadcn-ui/card';
 import { CtaSection } from '@/widgets/cta-section';
 import Container from '@/shared/shadcn-ui/conteiner';
 
+import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg'
+
 export const metadata = {
   title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
   description:
@@ -112,10 +114,11 @@ export function LoyaltyPage() {
                 </div>
                 <div data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
-                    src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
+                    src={ProgrammImg}
                     alt='Программа лояльности'
                     fill
-                    className='object-cover'
+                    className="w-full object-contain p-2.5"
+                    priority
                   />
                 </div>
               </div>
@@ -123,7 +126,7 @@ export function LoyaltyPage() {
           </section>
 
           {/* How It Works */}
-          <section className='bg-gray-50 py-16'>
+          <section className='bg-gray-50 py-16 px-2'>
             <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
@@ -134,8 +137,8 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-            <div data-aos='zoom-in-right' className='grid gap-8 md:grid-cols-4'>
-              <div className='text-center'>
+            <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
+              <div data-aos='zoom-in-right' 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
                 </div>
@@ -146,7 +149,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-1')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-right' 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'>
                   2
                 </div>
@@ -157,7 +160,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-2')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-right' 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'>
                   3
                 </div>
@@ -168,7 +171,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-3')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-right' 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'>
                   4
                 </div>
@@ -195,8 +198,8 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-                <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'>
+                <div className='grid gap-8 md:grid-cols-3'>
+                  <Card data-aos='flip-left' data-aos-duration='500' 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'>
                         {t('clients.loyalty.works.levels.card-1.title')}
@@ -232,7 +235,7 @@ export function LoyaltyPage() {
                     </CardContent>
                   </Card>
 
-                  <Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
+                  <Card data-aos='flip-left' data-aos-duration='500' className='overflow-hidden border-t-4 border-t-yellow-500 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-2.title')}
@@ -274,7 +277,7 @@ export function LoyaltyPage() {
                     </CardContent>
                   </Card>
 
-                  <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
+                  <Card data-aos='flip-left' data-aos-duration='500' 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')}

src/shared/components/promotion-slider.tsx

@@ -5,12 +5,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
-import { Discounts } from '@/app/api-utlities/@types/main';
+import { Discounts } from '@/app/api-utlities/@types/index';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-
+import PromoImg from '../../../public/main/#promotions/995b9daa-959f-4bd5-9135-ef7c47148f2c.jpg'
 const promotions = [
   {
     id: 1,
@@ -99,14 +99,16 @@ export default function PromotionSlider({ discounts }: PromotionSliderProps) {
             data-aos-duration='700'
           >
             <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
-              <div className='relative h-48'>
+              <div className='relative h-72'>
+                <div className='rounded-lg'>
                   <Image
-                  src={promo.image || '/placeholder.svg'}
+                    src={PromoImg}
                     alt={promo.name}
                     fill
-                  className='object-cover'
+                    className='object-contain p-2 rounded-lg'
                   />
                 </div>
+              </div>
               <CardContent className='p-4'>
                 <h3 className='mb-2 text-lg font-bold'>{promo.name}</h3>
                 <p className='mb-3 text-sm text-gray-600'>

src/shared/providers/aos-provider.tsx

@@ -12,6 +12,7 @@ export const AosProvider = ({ children }: AosInitProps) => {
   useEffect(() => {
     const timer = setTimeout(() => {
       AOS.init({
+        mirror: false,
         once: false,
         offset: 100,
         duration: 600,