LFFE-22 Merge branch 'feature/LFFE-22_user_landing_page' into 'develop'

example.env.local

@@ -7,5 +7,6 @@ NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
 NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
 
 NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"
+NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
 
 NODE_ENV = "development"

package.json

@@ -14,6 +14,7 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.12.0",
     "axios": "^1.4.0",
     "colord": "^2.9.3",

public/locales/fa/app.json

@@ -3,6 +3,7 @@
   "app_short_name": "سامانه تسهیلات",
   "dashboard": "داشبورد",
   "first_page": "خوش آمدید",
+  "powered_by_witel": "توسعه یافته توسط وایتل",
   "login": "ورود",
   "pending": "درحال اجرا...",
   "login_user_panel": "ورود به پنل کاربران",
@@ -23,6 +24,12 @@
     "change_password": "تغییر رمز عبور",
     "logout": "خروج"
   },
+  "firstPage" : {
+    "login_description" : "برای استفاده از تسهیلات ابتدا می بایست وارد شوید",
+    "login_button": "ورود به سامانه",
+    "register_description" : "برای استفاده از تسهیلات ابتدا می بایست ثبت نام کنید",
+    "register_button": "شروع دریافت تسهیلات"
+  },
   "notifications": {
     "error_static_text": "عملیات با خطا مواجه شد",
     "success_static_text": "عملیات با موفقیت انجام شد",

src/components/first/FooterDetails.jsx

@@ -0,0 +1,45 @@
+import {Box, Button, Container, Grid, Stack, Typography} from "@mui/material";
+import LinkRouting from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+
+const FooterDetails = () => {
+    const t = useTranslations();
+    return(
+        <Box sx={{backgroundColor : 'black', color : 'white'}}>
+            <Container sx={{py : 2}} maxWidth="xl">
+                <Grid container sx={{py : 2}}>
+                    <Grid item xs={12} md={8}>
+                        <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}
+                                target="_blank"
+                                underline="hover"
+                            >
+                                {t("powered_by_witel")}
+                            </LinkRouting>
+                        </Stack>
+                        <Stack direction="row" alignItems="center" justifyContent="center">
+                            <Typography variant={"caption"}
+                                        sx={{
+                                            color: 'white',
+                                            fontFamily: 'Arial',
+                                            fontWeight: 'bold'
+                                        }}
+                            >
+                                v{process.env.NEXT_PUBLIC_API_VERSION}
+                            </Typography>
+                        </Stack>
+                    </Grid>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+export default FooterDetails

src/components/first/HeaderDetails.jsx

@@ -0,0 +1,16 @@
+import {Box, Button, Container, Grid} from "@mui/material";
+
+const HeaderDetails = () => {
+    return(
+        <Box>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Grid container>
+                    <Grid item sx={12} md={8}>
+                        <Button startIcon={<img src='/icons/headerLogo.png' alt='icon'/>} />
+                    </Grid>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+export default HeaderDetails

src/components/first/LoanCondition.jsx

@@ -0,0 +1,52 @@
+import {Box, Button, Chip, 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(
+        <Box>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Typography sx={{my : 3}} variant={'h3'}>
+                    تخصیص وام
+                </Typography>
+                <Grid container>
+                    <Grid item xs={12} md={8}>
+                        <Box sx={{padding : 3}}>
+                            <Typography variant={'h5'}>
+                                قوانین دریافت وام
+                            </Typography>
+                            <Grid item sx={{my : 2}} spacing={2}>
+                                <Chip sx={{m : 1}} label="1 . فقط به زوجین ایرانی تعلق می‌گیرد" />
+                                <Chip sx={{m : 1}} label="2 . فقط به زوجین ایرانی تعلق می‌گیرد" />
+                                <Chip sx={{m : 1}} label="3 . فقط به زوجین ایرانی تعلق می‌گیرد" />
+                                <Chip sx={{m : 1}} label="4 . فقط به زوجین ایرانی تعلق می‌گیرد" />
+                            </Grid>
+                            <Typography textAlign={'justify'}> این یکی از محبوب‌ترین انواع وام در ایران است. دلیل این محبوبیت سرعت آن در پرداخت و سود بسیار پایین آن است.
+                                تنها یک شرط برای اخذ این وام وجود دارد و آن این است که باید به تازگی ازدواج کرده باشید.
+                                همچنین فقط یک بار از این وام می‌توانید استفاده کنید. یعنی این وام فقط یک بار به هر فرد تعلق می‌گیرد.
+                                محل تامین بودجه آن حساب‌های قرض الحسنه‌ایست که افراد در بانک‌ها باز می‌کنند و مرجع اصلی آرائه آن، بانک مرکزی است.
+                            </Typography>
+                        </Box>
+                    </Grid>
+                    <Grid sx={{display : 'flex' , alignItems : "center", justifyContent : "center"}} item xs={12} md={4}>
+                        <Box>
+                            <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>
+            </Container>
+        </Box>
+    )
+}
+export default LoanCondition

src/components/first/LoanDescription/TimeLineDetails.jsx

@@ -0,0 +1,92 @@
+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 {CircularProgress, Typography} from "@mui/material";
+import HowToRegIcon from '@mui/icons-material/HowToReg';
+import DoneIcon from '@mui/icons-material/Done';
+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 color={'success'}>
+                        <DoneIcon/>
+                    </TimelineDot>
+                    <TimelineConnector sx={{ backgroundColor: 'green' }} />
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6" component="span">
+                        ثبت نام متقاضی
+                    </Typography>
+                    <Typography color={'gray'}>ثبت نام متقاضیان واجد شرایط</Typography>
+                </TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+                <TimelineOppositeContent
+                    sx={{ m: 'auto 0' }}
+                    variant="body2"
+                    color="text.secondary"
+                >
+                    10 بهمن
+                </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <TimelineConnector sx={{ backgroundColor: 'green' }} />
+                    <TimelineDot color="primary">
+                        <CircularProgress color={'inherit'} size={40} />
+                    </TimelineDot>
+                    <TimelineConnector />
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6">
+                        صحت سنجی متقاضیان
+                    </Typography>
+                    <Typography color={'gray'}>بررسی و کارشناسی درخواست ها</Typography>
+                </TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+                <TimelineOppositeContent
+                sx={{ m: 'auto 0' }}
+                variant="body2"
+                color="text.secondary"
+            >
+                10 اسفند
+            </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <TimelineConnector />
+                    <TimelineDot>
+                        <CallMadeIcon />
+                    </TimelineDot>
+                </TimelineSeparator>
+                <TimelineContent sx={{ py: '12px', px: 2 }}>
+                    <Typography variant="h6" component="span">
+                        ارجاع به بانک
+                    </Typography>
+                    <Typography color={'gray'}>فرآیند معرفی ضامن و پرداخت</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/LoanRegister.jsx

@@ -0,0 +1,46 @@
+import {Box, Container, Grid, Stack, Typography} from "@mui/material";
+import LinkRouting from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+
+const LoanRegister = () => {
+    const t = useTranslations();
+    return(
+        <Box sx={{backgroundColor : "primary.light"}}>
+            <Container sx={{padding : 3, color : "white"}} maxWidth="xl">
+                <Typography sx={{my : 3}} variant={'h3'}>
+                    {t("app_name")}
+                </Typography>
+                <Stack sx={{color : "white"}}>
+                    <Grid sx={{py : 4}} container spacing={2}>
+                        <Grid item xs={12} md={6}>
+                            <Box sx={{paddingBottom : 4}}>
+                                <Typography>
+                                    برای استفاده از تسهیلات این سامانه و دریافت وام می بایست ابتدا وارد سامانه شوید و یا اگر ثبت نام نکرده اید ثبت نام کنید
+                                </Typography>
+                            </Box>
+                        </Grid>
+                        <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'}>
+                                        <Typography variant="h6">
+                                            {t("firstPage.login_button")}
+                                        </Typography>
+                                    </LinkRouting>
+                                </Container>
+                                <Container maxWidth={'xs'}  sx={{backgroundColor : "primary.main", textAlign : "center", borderRadius : 2 ,padding : 1}}>
+                                    <LinkRouting underline="none" color="inherit" href={'/register'}>
+                                        <Typography variant="h6">
+                                            {t("firstPage.register_button")}
+                                        </Typography>
+                                    </LinkRouting>
+                                </Container>
+                            </Stack>
+                        </Grid>
+                    </Grid>
+                </Stack>
+            </Container>
+        </Box>
+    )
+}
+export default LoanRegister

src/components/first/index.jsx

@@ -1,53 +1,23 @@
-import {NextLinkComposed} from "@/core/components/LinkRouting";
-import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
-import useUser from "@/lib/app/hooks/useUser";
-import {Button, Stack, Typography} from "@mui/material";
+import {Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
-import SvgDashboard from "@/core/components/svgs/SvgDashboard";
+import LoanRegister from "@/components/first/LoanRegister";
+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();
-    const {isAuth} = useUser();
 
     return (
-        <FullPageLayout sx={{p: 1}}>
-            <CenterLayout spacing={3}>
-                <SvgDashboard width={300} height={200}/>
-                <Typography variant="h5" sx={{textAlign: "center"}}>
-                    {t("app_name")}
-                </Typography>
-                {isAuth ? (
-                    <Button
-                        variant="contained"
-                        component={NextLinkComposed}
-                        to={{
-                            pathname: "/dashboard",
-                        }}
-                    >
-                        {t("dashboard")}
-                    </Button>
-                ) : (
-                    <Button
-                        sx={{whiteSpace: "nowrap"}}
-                        variant="contained"
-                        size="large"
-                        component={NextLinkComposed}
-                        to={{
-                            pathname: "/login",
-                        }}
-                    >
-                        {t("login_user_panel")}
-                    </Button>
-                )}
-            </CenterLayout>
-            <Stack direction="row" alignItems="center" justifyContent="center">
-                <Typography variant={"caption"}
-                            sx={{
-                                color: 'primary.main',
-                                fontFamily: 'Arial',
-                                fontWeight: 'bold'
-                            }}>v{process.env.NEXT_PUBLIC_API_VERSION}</Typography>
+        <FullPageLayout>
+            <Stack>
+                <HeaderDetails />
+                <LoanRegister />
+                <LoanDescription />
+                <LoanCondition />
+                <FooterDetails />
             </Stack>
         </FullPageLayout>
     );