compelete home

src/locale/fa.ts

@@ -27,5 +27,16 @@ export const fa = {
     orderCount: "سفارش های در حال انجام",
     orderDoneCount: "سفارشات انجام شده",
     services: "خدمات",
+    submitNewOrder: "سفارش خودرا ثبت کنید",
+    submitNewOrderButton: "سفارش جدید",
+    specialSolution: "راه‌حل اختصاصی برای شما در  نگاره!",
+    specialSolutionDescription: "چاپ سریع، دقیق و خلاقانه برای کسب‌وکار شما!",
+    specialSolutionFeature1: "متناسب با حوزه‌ی فعالیت شما و نیازهای برندتان",
+    specialSolutionFeature2:
+      "با بیش از ۲۸ سال تجربه‌ی حرفه‌ای در چاپ و تبلیغات",
+    specialSolutionFeature3: "رعایت بهترین استانداردهای کیفیت و طراحی",
+    freeConsultation: "دریافت مشاوره رایگان",
+    contactUs: "با ما تماس بگیرید",
+    phoneNumber: "۰۸۶۹۱۰۰۹۰۰۱",
   },
 };

src/pages/home/Home.tsx

@@ -2,6 +2,12 @@ import { type FC } from 'react'
 import Stats from './components/Stats'
 import Services from './components/Services'
 import Orders from './components/Orders'
+import NewOrderImage from '@/assets/images/new_order.png'
+import { t } from '@/locale'
+import Button from '@/components/Button'
+import { AddSquare, MessageQuestion } from 'iconsax-react'
+import { COLORS } from '@/constants/colors'
+import SupportImage from '@/assets/images/support1.png'
 
 const Home: FC = () => {
     return (
@@ -11,6 +17,62 @@ const Home: FC = () => {
                 <Services />
                 <Orders />
             </div>
+            <div className='min-w-[267px] mt-5'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <img src={NewOrderImage} className='w-[98px] mx-auto' />
+                    <h4 className='mt-4 text-center font-medium'>
+                        {t('home.submitNewOrder')}
+                    </h4>
+                    <Button
+                        className='mt-2.5'>
+                        <div className='flex gap-1'>
+                            <AddSquare size={20} color='#292D32' />
+                            <div className=''>{t('home.submitNewOrderButton')}</div>
+                        </div>
+                    </Button>
+                </div>
+
+                <div className='mt-7 bg-white rounded-3xl p-6 relative'>
+                    <h4>
+                        {t('home.specialSolution')}
+                    </h4>
+                    <p className='mt-2 text-[#7B7E8B] text-xs'>
+                        {t('home.specialSolutionDescription')}
+                    </p>
+
+                    <div className='mt-2 flex flex-col gap-2'>
+                        <div className='flex gap-2 items-center text-xs'>
+                            <div className='size-1.5 rounded-full bg-primary'></div>
+                            <div>{t('home.specialSolutionFeature1')}</div>
+                        </div>
+                        <div className='flex gap-2 items-center text-xs'>
+                            <div className='size-1.5 rounded-full bg-primary'></div>
+                            <div>{t('home.specialSolutionFeature2')}</div>
+                        </div>
+                        <div className='flex gap-2 items-center text-xs'>
+                            <div className='size-1.5 rounded-full bg-primary'></div>
+                            <div>{t('home.specialSolutionFeature3')}</div>
+                        </div>
+                    </div>
+
+                    <Button
+                        label={t('home.freeConsultation')}
+                        className='mt-12'
+                    />
+
+                    <div className='mt-2.5 bg-primary/11 py-6 px-4 rounded-[13px]'>
+                        <div className='flex justify-between items-center'>
+                            <div className='flex gap-2 items-center'>
+                                <MessageQuestion size={20} color={COLORS.primary} />
+                                <div className='text-xs font-light'>{t('home.contactUs')}</div>
+                            </div>
+                            <div>{t('home.phoneNumber')}</div>
+                        </div>
+                    </div>
+
+                    <img src={SupportImage} className='w-[50px] absolute bottom-[159px] left-2' />
+                </div>
+            </div>
         </div>
     )
 }