From b7be2dbc93490391b800d80580b62e414ffca859 Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Sun, 12 Nov 2023 14:36:03 +0330
Subject: [PATCH] LFFE-22 desing and responsive

---
 src/components/first/HeaderLandingPage.jsx |  8 ++--
 src/components/first/LoanCondition.jsx     | 52 ++++++++++++----------
 src/components/first/LoanDescription.jsx   |  6 +--
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/first/HeaderLandingPage.jsx b/src/components/first/HeaderLandingPage.jsx
index df934da..27161f8 100644
--- a/src/components/first/HeaderLandingPage.jsx
+++ b/src/components/first/HeaderLandingPage.jsx
@@ -11,15 +11,15 @@ const HeaderLandingPage = () => {
                     {t("app_name")}
                 </Typography>
                 <Stack sx={{color : "white"}}>
-                    <Grid sx={{py : 4}} container spacing={4}>
-                        <Grid item xs={6}>
-                            <Box>
+                    <Grid sx={{py : 4}} container spacing={2}>
+                        <Grid item xs={12} md={6}>
+                            <Box sx={{paddingBottom : 4}}>
                                 <Typography>
                                     برای استفاده از تسحیلات این سامانه و دریافت وام می بایست ابتدا وارد سامانه شوید و یا اگر ثبت نام نکرده اید ثبت نام کنید
                                 </Typography>
                             </Box>
                         </Grid>
-                        <Grid item xs={6}>
+                        <Grid item xs={12} md={6}>
                             <Stack spacing={3} alignItems={'center'} justifyContent={'center'}>
                                 <Container maxWidth={'xs'} sx={{backgroundColor : "primary.main", textAlign : "center", borderRadius : 2, padding : 1}}>
                                     <LinkRouting underline="none" color="inherit" href={'/login'}>
diff --git a/src/components/first/LoanCondition.jsx b/src/components/first/LoanCondition.jsx
index bea496d..2b7adf1 100644
--- a/src/components/first/LoanCondition.jsx
+++ b/src/components/first/LoanCondition.jsx
@@ -1,4 +1,4 @@
-import {Box, Container, Grid, Typography} from "@mui/material";
+import {Box, Container, Grid, Stack, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 
 const LoanCondition = () => {
@@ -9,30 +9,34 @@ const LoanCondition = () => {
                 <Typography sx={{my : 3}} variant={'h3'}>
                     تخصیص وام
                 </Typography>
-                <Grid container spacing={2} sx={{py : 2}}>
-                    <Grid item={10}>
-                        <Typography variant={'h5'}>
-                            قوانین دریافت وام
-                        </Typography>
-                        <ul>
-                            <li>
-                                فقط به زوجین ایرانی تعلق می‌گیرد.
-                            </li>
-                            <li>
-                                به زوجین ایرانی تعلق می‌گیرد.
-                            </li>
-                            <li>
-                                فقط به زوجین ایرانی تعلق می‌گیرد.
-                            </li>
-                            <li>
-                                فقط به زوجین ایرانی تعلق می‌گیرد.
-                            </li>
-                        </ul>
+                <Grid container>
+                    <Grid item xs={12} md={8}>
+                        <Box>
+                            <Typography variant={'h5'}>
+                                قوانین دریافت وام
+                            </Typography>
+                            <ul>
+                                <li>
+                                    فقط به زوجین ایرانی تعلق می‌گیرد.
+                                </li>
+                                <li>
+                                    به زوجین ایرانی تعلق می‌گیرد.
+                                </li>
+                                <li>
+                                    فقط به زوجین ایرانی تعلق می‌گیرد.
+                                </li>
+                                <li>
+                                    فقط به زوجین ایرانی تعلق می‌گیرد.
+                                </li>
+                            </ul>
+                        </Box>
                     </Grid>
-                    <Grid item={2}>
-                        <Typography>
-                            فایل ضمیمه
-                        </Typography>
+                    <Grid item xs={12} md={4}>
+                        <Box justifyContent={'center'} alignItems={'center'}>
+                            <Typography>
+                                فایل ضمیمه
+                            </Typography>
+                        </Box>
                     </Grid>
                 </Grid>
             </Container>
diff --git a/src/components/first/LoanDescription.jsx b/src/components/first/LoanDescription.jsx
index 838c036..e439c5d 100644
--- a/src/components/first/LoanDescription.jsx
+++ b/src/components/first/LoanDescription.jsx
@@ -11,7 +11,7 @@ const LoanDescription = () => {
                     توضیحات دریافت وام
                 </Typography>
                 <Grid sx={{py : 2}} container spacing={2}>
-                    <Grid item xs={8}>
+                    <Grid item xs={12} md={8}>
                         <Typography>
                             وام خرید کالای مهر ایران یا کالا کارت با هدف خرید مایحتاج خانه و کالاهای ضروری زندگی داده می‌شود. سقف کالا کارت ۱۵۰ میلیون تومان و سود آن ۴ درصد است.
                             با دریافت کالا کارت می‌توانید وسایل موردنیازتان را از فروشگاه‌های طرف قرارداد با بانک خریداری کنید.
@@ -20,9 +20,9 @@ const LoanDescription = () => {
                             حداکثر زمان بازپرداخت وام خرید کالا ۲۴ ماه است و برای گرفتن آن به یک ضامن رسمی احتیاج دارید.
                         </Typography>
                     </Grid>
-                    <Grid item xs={4}>
+                    <Grid item xs={12} md={4}>
                         <Box>
-                            <Timeline position={'right'}>
+                            <Timeline position={'alternate'}>
                                 <TimelineItem>
                                     <TimelineSeparator>
                                         <TimelineDot />