From 3a2c7d42c041cdf23c1e1832a4da8136975b4afe Mon Sep 17 00:00:00 2001
From: BunyodL <blutfulloyev@bk.ru>
Date: Tue, 6 May 2025 15:36:31 +0500
Subject: [PATCH] fix: set price-board image in main page

---
 src/pages-templates/clients/loyalty/index.tsx |  6 ++--
 src/shared/components/about-counter.tsx       |  2 +-
 src/widgets/about-section.tsx                 | 36 ++++++++++---------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index f040d23..7404cee 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -9,6 +9,8 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
 // import LoyaltyLevels from '@/widgets/clients/loyalty/ui/loyalty-levels';
 import { CtaSection } from '@/widgets/cta-section';
 
+import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg';
+
 export function LoyaltyPage() {
   const { t } = useTextController();
 
@@ -102,10 +104,10 @@ export function LoyaltyPage() {
             </div>
             <div
               data-aos='fade-up'
-              className='relative h-[400px] md:h-full overflow-hidden rounded-xl'
+              className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
             >
               <Image
-                src={'/clients/loyatly/oriyo-price-board.png'}
+                src={ProgrammImg}
                 alt='Программа лояльности'
                 fill
                 className='w-full object-contain p-2.5'
diff --git a/src/shared/components/about-counter.tsx b/src/shared/components/about-counter.tsx
index 6e0243c..a1244ae 100644
--- a/src/shared/components/about-counter.tsx
+++ b/src/shared/components/about-counter.tsx
@@ -37,7 +37,7 @@ export default function AboutCounter() {
   }, []);
 
   return (
-    <div ref={sectionRef} className='my-8 grid grid-cols-1 gap-6 text-center'>
+    <div ref={sectionRef} className='grid grid-cols-1 gap-6 text-center'>
       <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
         <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
           <Users className='h-6 w-6 text-red-600' />
diff --git a/src/widgets/about-section.tsx b/src/widgets/about-section.tsx
index bdb3368..d3381f7 100644
--- a/src/widgets/about-section.tsx
+++ b/src/widgets/about-section.tsx
@@ -13,32 +13,36 @@ export const AboutSection = () => {
   return (
     <section id='about'>
       <Container>
-        <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div>
-            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-              <Users className='h-6 w-6 text-red-600' />
-            </div>
-            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-              {t('home.about.title')}
-            </h2>
-            <p className='mb-6 text-gray-600'>{t('home.about.description1')}</p>
-            <p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>
-
-            <AboutCounter />
-            <Features />
+        <div className='text-justify'>
+          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+            <Users className='h-6 w-6 text-red-600' />
           </div>
+          <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+            {t('home.about.title')}
+          </h2>
+          <p className='mb-3 text-gray-600 sm:mb-6'>
+            {t('home.about.description1')}
+          </p>
+          <p className='mb-3 text-gray-600 sm:mb-6'>
+            {t('home.about.description2')}
+          </p>
+        </div>
+        <div className='my-4 grid items-center gap-6 sm:my-8 md:grid-cols-2 md:gap-12'>
+          <AboutCounter />
+
           <div
-            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
+            className='relative h-[400px] overflow-hidden rounded-xl md:h-[540px]'
             data-aos='zoom-in-down'
           >
             <Image
-              src='/placeholder.svg?height=400&width=600'
+              src='/clients/loyatly/oriyo-price-board.png'
               alt='About our company'
               fill
-              className='object-cover'
+              className='w-full object-contain p-2.5'
             />
           </div>
         </div>
+        <Features />
       </Container>
     </section>
   );