LFFE-22 add footer and header

src/components/first/FooterDetails.jsx

@@ -0,0 +1,25 @@
+import {Box, Button, Container, Grid, Stack, Typography} from "@mui/material";
+
+const FooterDetails = () => {
+
+    return(
+        <Box sx={{backgroundColor : 'black', color : 'white'}}>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Grid container sx={{py : 2}}>
+                    <Grid item xs={12} md={8}>
+                        <Button disabled startIcon={<img src='/icons/favicon.png' alt="Your Alt Text" />}>
+                            <Typography color={'white'}>کلیه حقوق محفوظ و متعلق به سازمان راهداری و حمل و نقل جاده ای می باشد</Typography>
+                        </Button>
+                    </Grid>
+                    <Grid item xs={12} md={4}>
+                        <Stack alignItems='center' justifyItems='center'>
+                            <Typography>آخرین به روزرسانی</Typography>
+                            <Typography>1402/08/22</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/LoanRegister.jsx

@@ -2,12 +2,12 @@ import {Box, Container, Grid, Stack, Typography} from "@mui/material";
 import LinkRouting from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
 
-const HeaderLandingPage = () => {
+const LoanRegister = () => {
     const t = useTranslations();
     return(
         <Box sx={{backgroundColor : "primary.light"}}>
             <Container sx={{padding : 3, color : "white"}} maxWidth="xl">
-                <Typography sx={{my : 3}} textAlign={'center'} variant={'h3'}>
+                <Typography sx={{my : 3}} variant={'h3'}>
                     {t("app_name")}
                 </Typography>
                 <Stack sx={{color : "white"}}>
@@ -43,4 +43,4 @@ const HeaderLandingPage = () => {
         </Box>
     )
 }
-export default HeaderLandingPage
+export default LoanRegister

src/components/first/index.jsx

@@ -1,9 +1,11 @@
 import FullPageLayout from "@/layouts/FullPageLayout";
 import {Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
-import HeaderLandingPage from "@/components/first/HeaderLandingPage";
+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";
 
 const FirstComponent = () => {
     const t = useTranslations();
@@ -11,9 +13,11 @@ const FirstComponent = () => {
     return (
         <FullPageLayout>
             <Stack>
-                <HeaderLandingPage />
+                <HeaderDetails />
+                <LoanRegister />
                 <LoanDescription />
                 <LoanCondition />
+                <FooterDetails />
             </Stack>
         </FullPageLayout>
     );