LFFE-22 time line structure

src/components/first/FooterDetails.jsx

@@ -9,12 +9,13 @@ const FooterDetails = () => {
             <Container sx={{py : 2}} maxWidth="xl">
                 <Grid container sx={{py : 2}}>
                     <Grid item xs={12} md={8}>
-                        <Button disabled startIcon={<img src='/icons/logoLandingPage.png' width={50} alt="Your Alt Text" />}>
-                            <Typography color={'white'}>کلیه حقوق محفوظ و متعلق به شرکت ویرا ارتباطات یکتا تلفن می باشد</Typography>
+                        <Button disabled>
+                            <Typography color={'white'}>کلیه حقوق محفوظ و متعلق به سازمان راهداری و حمل و نقل جاده ای می باشد</Typography>
                         </Button>
                     </Grid>
                     <Grid item xs={12} md={4}>
                         <Stack direction="row" alignItems="center" justifyContent="center">
+                            <img src='/icons/logoLandingPage.png' width={25} alt="Your Alt Text" />
                             <LinkRouting
                                 sx={{margin: 0.5, fontSize: "20px", color : "white"}}
                                 href={process.env.NEXT_PUBLIC_POWERED_BY_URL}

src/components/first/LoanCondition.jsx

@@ -1,6 +1,6 @@
-import {Box, Container, Grid, Link, Stack, Typography} from "@mui/material";
+import {Box, Button, Container, Grid, Link, Stack, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
-
+import DownloadIcon from '@mui/icons-material/Download';
 const LoanCondition = () => {
     const t = useTranslations();
     return(
@@ -33,14 +33,18 @@ const LoanCondition = () => {
                     </Grid>
                     <Grid item xs={12} md={4}>
                         <Box justifyContent={'center'} alignItems={'center'}>
-                            <Link
-                                variant="body2"
-                                download
-                                underline="hover"
-                                href={'/dist/images/modalrms/Asset%2010.apk'}
-                            >
-                                فایل ضمیمه
-                            </Link>
+                            <Button variant="contained" startIcon={<DownloadIcon />}>
+                                <Link
+                                    variant="subtitle1"
+                                    sx={{padding : 1}}
+                                    color={'white'}
+                                    download
+                                    underline="none"
+                                    href={'/dist/images/modalrms/Asset%2010.apk'}
+                                >
+                                    دریافت فایل های راهنما
+                                </Link>
+                            </Button>
                         </Box>
                     </Grid>
                 </Grid>

src/components/first/LoanDescription.jsx

@@ -1,69 +0,0 @@
-import {Box, Container, Grid, Typography} from "@mui/material";
-import {Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator} from "@mui/lab";
-import {useTranslations} from "next-intl";
-
-const LoanDescription = () => {
-    const t = useTranslations();
-    return(
-        <Box>
-            <Container sx={{py : 3}} maxWidth="xl">
-                <Typography sx={{my : 3}} variant={'h3'}>
-                    توضیحات دریافت وام
-                </Typography>
-                <Grid sx={{py : 2}} container spacing={2}>
-                    <Grid item xs={12} md={8}>
-                        <Typography>
-                            وام خرید کالای مهر ایران یا کالا کارت با هدف خرید مایحتاج خانه و کالاهای ضروری زندگی داده می‌شود. سقف کالا کارت ۱۵۰ میلیون تومان و سود آن ۴ درصد است.
-                            با دریافت کالا کارت می‌توانید وسایل موردنیازتان را از فروشگاه‌های طرف قرارداد با بانک خریداری کنید.
-                            این فروشگاه‌ها با نام گلدیران در شهرهای تهران، شیراز، اهواز، نور، اصفهان، تبریز، ساری و رشت فعالیت می‌کنند.
-                            طبق قوانین جدید و در راستای حمایت از طرح افزایش جمیعت، مبلغ آن برای زوجینی که مرد زیر ۲۵ سال و زن زیر ۲۳ سال داشته باشد، ۴۴۰ میلیون یا ۲۲۰ میلیون به ازای هر نفر است. در این قانون هریک از زوجین که شرایط آن‌ها در این قانون نگنجد، مبلغ تغییر کرده و به زوج ۴۰۰ میلیون وام تعلق خواهد گرفت.
-                            حداکثر زمان بازپرداخت وام خرید کالا ۲۴ ماه است و برای گرفتن آن به یک ضامن رسمی احتیاج دارید.
-                        </Typography>
-                    </Grid>
-                    <Grid item xs={12} md={4}>
-                        <Box>
-                            <Timeline position={'alternate'}>
-                                <TimelineItem>
-                                    <TimelineSeparator>
-                                        <TimelineDot />
-                                        <TimelineConnector />
-                                    </TimelineSeparator>
-                                    <TimelineContent> ارجاع پرونده به مسئول استان</TimelineContent>
-                                </TimelineItem>
-                                <TimelineItem>
-                                    <TimelineSeparator>
-                                        <TimelineDot />
-                                        <TimelineConnector />
-                                    </TimelineSeparator>
-                                    <TimelineContent>در انتظار نتيجه کارشناسی
-                                        ماشين آلات</TimelineContent>
-                                </TimelineItem>
-                                <TimelineItem>
-                                    <TimelineSeparator>
-                                        <TimelineDot />
-                                        <TimelineConnector />
-                                    </TimelineSeparator>
-                                    <TimelineContent>در انتظار تشکيل کارگروه استانی</TimelineContent>
-                                </TimelineItem>
-                                <TimelineItem>
-                                    <TimelineSeparator>
-                                        <TimelineDot />
-                                        <TimelineConnector />
-                                    </TimelineSeparator>
-                                    <TimelineContent>در انتظار تشکيل کارگروه استانی</TimelineContent>
-                                </TimelineItem>
-                                <TimelineItem>
-                                    <TimelineSeparator>
-                                        <TimelineDot />
-                                    </TimelineSeparator>
-                                    <TimelineContent>در انتظار تشکيل کارگروه استانی</TimelineContent>
-                                </TimelineItem>
-                            </Timeline>
-                        </Box>
-                    </Grid>
-                </Grid>
-            </Container>
-        </Box>
-    )
-}
-export default LoanDescription

src/components/first/LoanDescription/TimeLineDetails.jsx

@@ -0,0 +1,91 @@
+import {useTranslations} from "next-intl";
+import {
+    Timeline,
+    TimelineConnector, TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    TimelineOppositeContent,
+    TimelineSeparator
+} from "@mui/lab";
+import RepeatIcon from '@mui/icons-material/Repeat';
+import FastfoodIcon from '@mui/icons-material/Fastfood';
+import LaptopMacIcon from '@mui/icons-material/LaptopMac';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CallMadeIcon from '@mui/icons-material/CallMade';
+import {Typography} from "@mui/material";
+import HowToRegIcon from '@mui/icons-material/HowToReg';
+import HotelIcon from '@mui/icons-material/Hotel';
+
+const TimeLineDetails = () => {
+    const t = useTranslations();
+    return(
+        <Timeline position="alternate">
+            <TimelineItem>
+                <TimelineOppositeContent
+                    sx={{ m: 'auto 0' }}
+                    align="right"
+                    variant="body2"
+                    color="text.secondary"
+                >
+                    10 دی
+                </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <TimelineDot>
+                        <HowToRegIcon />
+                    </TimelineDot>
+                    <TimelineConnector />
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6" component="span">
+                        ثبت نام متقاضی
+                    </Typography>
+                    <Typography>ثبت نام متقاضیان واجد شرایط</Typography>
+                </TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+                <TimelineOppositeContent
+                    sx={{ m: 'auto 0' }}
+                    variant="body2"
+                    color="text.secondary"
+                >
+                    10 بهمن
+                </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <TimelineConnector />
+                    <TimelineDot color="primary">
+                        <CheckCircleIcon />
+                    </TimelineDot>
+                    <TimelineConnector sx={{ backgroundColor: 'secondary.main' }} />
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6">
+                        صحت سنجی متقاضیان
+                    </Typography>
+                    <Typography>بررسی و کارشناسی درخواست ها</Typography>
+                </TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+                <TimelineOppositeContent
+                sx={{ m: 'auto 0' }}
+                variant="body2"
+                color="text.secondary"
+            >
+                10 اسفند
+            </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <TimelineConnector sx={{ backgroundColor: 'secondary.main' }} />
+                    <TimelineDot color="secondary">
+                        <CallMadeIcon />
+                    </TimelineDot>
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6" component="span">
+                        ارجاع به بانک
+                    </Typography>
+                    <Typography>فرآیند معرفی ضامن و پرداخت</Typography>
+                </TimelineContent>
+            </TimelineItem>
+        </Timeline>
+    )
+}
+export default TimeLineDetails

src/components/first/LoanDescription/index.jsx

@@ -0,0 +1,36 @@
+import {Box, Container, Grid, Typography} from "@mui/material";
+import {Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator} from "@mui/lab";
+import {useTranslations} from "next-intl";
+import TimeLineDetails from "@/components/first/LoanDescription/TimeLineDetails";
+
+const LoanDescription = () => {
+    const t = useTranslations();
+    return(
+        <Box>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Typography sx={{my : 3}} variant={'h3'}>
+                    توضیحات دریافت وام
+                </Typography>
+                <Grid sx={{py : 2}} container spacing={2}>
+                    <Grid item xs={12} md={7}>
+                        <Typography variant={'subtitle1'} textAlign={'justify'}>
+                            وام خرید کالای مهر ایران یا کالا کارت با هدف خرید مایحتاج خانه و کالاهای ضروری زندگی داده می‌شود. سقف کالا کارت ۱۵۰ میلیون تومان و سود آن ۴ درصد است.
+                            با دریافت کالا کارت می‌توانید وسایل موردنیازتان را از فروشگاه‌های طرف قرارداد
+                            این فروشگاه‌ها با نام گلدیران در شهرهای تهران، شیراز، اهواز، نور، اصفهان، تبریز، ساری و رشت فعالیت می‌کنند.
+                            طبق قوانین جدید و در راستای حمایت از طرح افزایش جمیعت، مبلغ آن برای زوجینی که مرد زیر ۲۵ سال و زن زیر ۲۳ سال داشته باشد، <Typography sx={{color : "secondary.main"}} variant={'h5'}  fontWeight={'bold'} component={'span'}>440</Typography> میلیون یا ۲۲۰ میلیون به ازای هر نفر است.
+                            در این قانون هریک از زوجین که شرایط آن‌ها در این قانون نگنجد،
+                            مبلغ تغییر کرده و به زوج <Typography sx={{color : "secondary.main"}} variant={'h5'} fontWeight={'bold'} component={'span'}>400</Typography> میلیون وام تعلق خواهد گرفت.
+                            حداکثر زمان بازپرداخت وام خرید کالا ۲۴ ماه است و برای گرفتن آن به یک ضامن رسمی احتیاج دارید.
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} md={5}>
+                        <Box>
+                            <TimeLineDetails />
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+export default LoanDescription

src/components/first/index.jsx

@@ -2,10 +2,10 @@ import FullPageLayout from "@/layouts/FullPageLayout";
 import {Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
 import LoanRegister from "@/components/first/LoanRegister";
-import LoanDescription from "@/components/first/LoanDescription";
 import LoanCondition from "@/components/first/LoanCondition";
 import FooterDetails from "@/components/first/FooterDetails";
 import HeaderDetails from "@/components/first/HeaderDetails";
+import LoanDescription from "@/components/first/LoanDescription";
 
 const FirstComponent = () => {
     const t = useTranslations();