From ebdbf995130abcb005c7476a694f92579d5ed01a Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Tue, 14 Nov 2023 15:28:42 +0330
Subject: [PATCH] LFFE-22 time line structure

---
 src/components/first/FooterDetails.jsx        |  5 +-
 src/components/first/LoanCondition.jsx        | 24 +++--
 src/components/first/LoanDescription.jsx      | 69 --------------
 .../first/LoanDescription/TimeLineDetails.jsx | 91 +++++++++++++++++++
 .../first/LoanDescription/index.jsx           | 36 ++++++++
 src/components/first/index.jsx                |  2 +-
 6 files changed, 145 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/first/LoanDescription.jsx
 create mode 100644 src/components/first/LoanDescription/TimeLineDetails.jsx
 create mode 100644 src/components/first/LoanDescription/index.jsx

diff --git a/src/components/first/FooterDetails.jsx b/src/components/first/FooterDetails.jsx
index 53e0ac9..bb8fe01 100644
--- a/src/components/first/FooterDetails.jsx
+++ b/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}
diff --git a/src/components/first/LoanCondition.jsx b/src/components/first/LoanCondition.jsx
index dad3cd9..3881880 100644
--- a/src/components/first/LoanCondition.jsx
+++ b/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>
diff --git a/src/components/first/LoanDescription.jsx b/src/components/first/LoanDescription.jsx
deleted file mode 100644
index f369dba..0000000
--- a/src/components/first/LoanDescription.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/first/LoanDescription/TimeLineDetails.jsx b/src/components/first/LoanDescription/TimeLineDetails.jsx
new file mode 100644
index 0000000..0b86a5d
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/first/LoanDescription/index.jsx b/src/components/first/LoanDescription/index.jsx
new file mode 100644
index 0000000..57f69db
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx
index e06a00a..eca9bec 100644
--- a/src/components/first/index.jsx
+++ b/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();