use witel webapp builder

src/components/dashboard/first/index.jsx

@@ -1,7 +1,5 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
-
 const FirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>;
+    return <></>;
 };
 
 export default FirstComponent;

src/components/errors/403.jsx

@@ -1,10 +1,8 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import {Button, Typography} from "@mui/material";
-import {NextLinkComposed} from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
 import Svg403 from "@/core/components/svgs/Svg403";
+import {CenterLayout, FullPageLayout, NextLinkComposed} from "@witel/webapp-builder";
 
 const UnAuthorizedComponent = () => {
     const t = useTranslations();

src/components/errors/404.jsx

@@ -1,10 +1,8 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import {Button, Typography} from "@mui/material";
-import {NextLinkComposed} from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
 import Svg404 from "@/core/components/svgs/Svg404";
+import {CenterLayout, FullPageLayout, NextLinkComposed} from "@witel/webapp-builder";
 
 const NotFoundComponent = () => {
     const t = useTranslations();

src/components/errors/500.jsx

@@ -1,10 +1,8 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import {Button, Typography} from "@mui/material";
-import {NextLinkComposed} from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
 import Svg500 from "@/core/components/svgs/Svg500";
+import {CenterLayout, FullPageLayout, NextLinkComposed} from "@witel/webapp-builder";
 
 const ServerErrorComponent = () => {
     const t = useTranslations();

src/components/first/FooterDetails.jsx

@@ -1,23 +1,24 @@
 import {Box, Button, Container, Grid, Stack, Typography} from "@mui/material";
-import LinkRouting from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
+import {LinkRouting} from "@witel/webapp-builder";
 
 const FooterDetails = () => {
     const t = useTranslations();
-    return(
-        <Box sx={{backgroundColor : 'black', color : 'white'}}>
-            <Container sx={{py : 2}} maxWidth="xl">
-                <Grid container sx={{py : 2}}>
+    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>
+                            <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" />
+                            <img src='/icons/logoLandingPage.png' width={25} alt="Your Alt Text"/>
                             <LinkRouting
-                                sx={{margin: 0.5, fontSize: "20px", color : "white"}}
+                                sx={{margin: 0.5, fontSize: "20px", color: "white"}}
                                 href={process.env.NEXT_PUBLIC_POWERED_BY_URL}
                                 target="_blank"
                                 underline="hover"

src/components/first/HeaderDetails.jsx

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

src/components/first/LoanCondition.jsx

@@ -1,39 +1,43 @@
-import {Box, Button, Chip, Container, Grid, Link, Stack, Typography} from "@mui/material";
+import {Box, Button, Chip, Container, Grid, Link, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 import DownloadIcon from '@mui/icons-material/Download';
+
 const LoanCondition = () => {
     const t = useTranslations();
-    return(
+    return (
         <Box>
-            <Container sx={{py : 3}} maxWidth="xl">
-                <Typography sx={{my : 3}} variant={'h3'}>
+            <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}}>
+                        <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 item sx={{my: 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 textAlign={'justify'}> این یکی از محبوب‌ترین انواع وام در ایران است. دلیل این
+                                محبوبیت سرعت آن در پرداخت و سود بسیار پایین آن است.
                                 تنها یک شرط برای اخذ این وام وجود دارد و آن این است که باید به تازگی ازدواج کرده باشید.
-                                همچنین فقط یک بار از این وام می‌توانید استفاده کنید. یعنی این وام فقط یک بار به هر فرد تعلق می‌گیرد.
-                                محل تامین بودجه آن حساب‌های قرض الحسنه‌ایست که افراد در بانک‌ها باز می‌کنند و مرجع اصلی آرائه آن، بانک مرکزی است.
+                                همچنین فقط یک بار از این وام می‌توانید استفاده کنید. یعنی این وام فقط یک بار به هر فرد
+                                تعلق می‌گیرد.
+                                محل تامین بودجه آن حساب‌های قرض الحسنه‌ایست که افراد در بانک‌ها باز می‌کنند و مرجع اصلی
+                                آرائه آن، بانک مرکزی است.
                             </Typography>
                         </Box>
                     </Grid>
-                    <Grid sx={{display : 'flex' , alignItems : "center", justifyContent : "center"}} item xs={12} md={4}>
+                    <Grid sx={{display: 'flex', alignItems: "center", justifyContent: "center"}} item xs={12} md={4}>
                         <Box>
-                            <Button variant="contained" startIcon={<DownloadIcon />}>
+                            <Button variant="contained" startIcon={<DownloadIcon/>}>
                                 <Link
                                     variant="subtitle1"
-                                    sx={{padding : 1}}
+                                    sx={{padding: 1}}
                                     color={'white'}
                                     download
                                     underline="none"

src/components/first/LoanDescription/index.jsx

@@ -1,31 +1,39 @@
 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(
+    return (
         <Box>
-            <Container sx={{py : 3}} maxWidth="xl">
-                <Typography sx={{my : 3}} variant={'h3'}>
+            <Container sx={{py: 3}} maxWidth="xl">
+                <Typography sx={{my: 3}} variant={'h3'}>
                     توضیحات دریافت وام
                 </Typography>
-                <Grid sx={{py : 2}} container spacing={2}>
+                <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'}>440</Typography> میلیون یا ۲۲۰
+                            میلیون به ازای هر نفر است.
                             در این قانون هریک از زوجین که شرایط آن‌ها در این قانون نگنجد،
-                            مبلغ تغییر کرده و به زوج <Typography sx={{color : "secondary.main"}} variant={'h5'} fontWeight={'bold'} component={'span'}>400</Typography> میلیون وام تعلق خواهد گرفت.
+                            مبلغ تغییر کرده و به زوج <Typography sx={{color: "secondary.main"}} variant={'h5'}
+                                                                 fontWeight={'bold'}
+                                                                 component={'span'}>400</Typography> میلیون وام تعلق
+                            خواهد گرفت.
                             حداکثر زمان بازپرداخت وام خرید کالا ۲۴ ماه است و برای گرفتن آن به یک ضامن رسمی احتیاج دارید.
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={5}>
                         <Box>
-                            <TimeLineDetails />
+                            <TimeLineDetails/>
                         </Box>
                     </Grid>
                 </Grid>

src/components/first/LoanRegister.jsx

@@ -1,34 +1,45 @@
 import {Box, Container, Grid, Stack, Typography} from "@mui/material";
-import LinkRouting from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
+import {LinkRouting} from "@witel/webapp-builder";
 
 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'}>
+    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}>
+                <Stack sx={{color: "white"}}>
+                    <Grid sx={{py: 4}} container spacing={2}>
                         <Grid item xs={12} md={6}>
-                            <Box sx={{paddingBottom : 4}}>
+                            <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}}>
+                                <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}}>
+                                <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")}

src/components/first/index.jsx

@@ -1,4 +1,3 @@
-import FullPageLayout from "@/layouts/FullPageLayout";
 import {Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
 import LoanRegister from "@/components/first/LoanRegister";
@@ -6,6 +5,7 @@ import LoanCondition from "@/components/first/LoanCondition";
 import FooterDetails from "@/components/first/FooterDetails";
 import HeaderDetails from "@/components/first/HeaderDetails";
 import LoanDescription from "@/components/first/LoanDescription";
+import {FullPageLayout} from "@witel/webapp-builder";
 
 const FirstComponent = () => {
     const t = useTranslations();
@@ -13,11 +13,11 @@ const FirstComponent = () => {
     return (
         <FullPageLayout>
             <Stack>
-                <HeaderDetails />
-                <LoanRegister />
-                <LoanDescription />
-                <LoanCondition />
-                <FooterDetails />
+                <HeaderDetails/>
+                <LoanRegister/>
+                <LoanDescription/>
+                <LoanCondition/>
+                <FooterDetails/>
             </Stack>
         </FullPageLayout>
     );