onboarding UI finished

frontend/src/Routes.js

@@ -26,9 +26,14 @@ import Welcome from "./customer/onboarding/Welcome";
 import Docs from "./customer/onboarding/Docs";
 import PanOption from "./customer/onboarding/PanOption";
 import PanProof from "./customer/onboarding/PanProof";
-import PanUpload from './customer/onboarding/panProofComponents/PanUpload'
+import PanUpload from "./customer/onboarding/panProofComponents/PanUpload";
 import BusinessProof from "./customer/onboarding/BusinessProof";
 import BusinessOption from "./customer/onboarding/BusinessOption";
+import MobileBankLink from "./customer/onboarding/MobileBankLink";
+import MobileBankUpload from "./customer/onboarding/MobileBankUpload";
+import Summary from "./customer/onboarding/Summary";
+import Consent from "./customer/onboarding/Consent";
+import Congratulations from "./customer/onboarding/Congratulations";
 
 const Routes = () => {
   return (
@@ -47,7 +52,7 @@ const Routes = () => {
         <Route exact path="/wallet" component={Wallet} />
         <Route exact path="/dashboard" component={Dashboard} />
         <Route exact path="/disbursement" component={Disbursement} />
-        <Route exact path="/sale" component={BusinessProof} />
+        <Route exact path="/sale" component={Congratulations} />
         <Route exact path="/pan" component={PanUpload} />
         <Route exact path="/mobile" component={Mobile} />
         <Route exact path="/VerifyNumber" component={VerifyNumber} />

frontend/src/components/base/Sidebar.js

@@ -19,7 +19,7 @@ const Sidebar = ({ history }) => {
       <div className="sidebar">
         <div className="logo">
           <Link to="/">
-            <img src="logo.png" alt="logo" />
+            <img src="./assets/logo.png" alt="logo" />
           </Link>
         </div>
         <Link to="/pool" style={activeTab(history, "/pool")}>

frontend/src/customer/onboarding/Congratulations.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { Container, Typography, Stack } from "@mui/material";
+
+const Congratulations = () => {
+  return (
+    <>
+      <style>{"body { background-color: #7165E3; }"}</style>
+      <Container
+        maxWidth="sm"
+        sx={{
+          mt: "300px",
+          textAlign: "center",
+          color: "#fff",
+        }}
+      >
+        <img
+          style={{
+            height: "40px",
+            width: "40px",
+            objectFit: "contain",
+          }}
+          src="./assets/goodQuality.png"
+          alt=""
+        />
+        <Typography variant="h3">Congratulations</Typography>
+        <Typography
+          variant="h6"
+          sx={{
+            mt: "32px",
+            maxWidth: "460px",
+            mx: "auto",
+          }}
+        >
+          Your application has been successfully submitted We will get back to
+          you shortly
+        </Typography>
+      </Container>
+      <Container maxWidth="sm">
+        <Stack
+          sx={{
+            color: "#ffffff",
+            mt: "250px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "0px 5px",
+          }}
+        >
+          <Typography variant="body1">Powered By</Typography>
+          <img
+            style={{
+              objectFit: "contain",
+              width: "86px",
+              height: "29px",
+              backgroundColor: "#ffffff",
+              borderRadius: "12px",
+            }}
+            src="./assets/logo.png"
+            alt="logo"
+          />
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Congratulations;

frontend/src/customer/onboarding/Consent.js

@@ -0,0 +1,229 @@
+import React from "react";
+import { Box, Button, Container, Typography } from "@mui/material";
+
+const Item1 = ({ sno, path1, path2, path3, text }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "1fr 4fr 5fr",
+          alignItems: "center",
+          mt: "32px",
+        }}
+      >
+        <div
+          style={{
+            borderRadius: "50%",
+            height: "40px",
+            width: "40px",
+            backgroundColor: "#ffffff",
+            boxShadow: "inset 0px 4px 4px rgba(0, 0, 0, 0.25)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            justifySelf: "center",
+          }}
+        >
+          {sno}
+        </div>
+        <Box
+          sx={{
+            width: "300px",
+            height: "80px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-evenly",
+            alignItems: "center",
+            backgroundColor: "#ffffff",
+            gap: "0px 20px",
+            borderRadius: "12px",
+          }}
+        >
+          <img
+            src={path1}
+            alt=""
+            style={{
+              objectFit: "contain",
+              height: "70px",
+              width: "70px",
+            }}
+          />
+          <img
+            src={path2}
+            alt=""
+            style={{
+              objectFit: "contain",
+              height: "70px",
+              width: "70px",
+            }}
+          />
+          <img
+            src={path3}
+            alt=""
+            style={{
+              objectFit: "contain",
+              height: "70px",
+              width: "70px",
+            }}
+          />
+        </Box>
+        <Typography variant="h6" sx={{ color: "#ffffff", textAlign: "center" }}>
+          {text}
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+const Item2 = ({ sno, path1, path2, text }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "1fr 4fr 5fr",
+          alignItems: "center",
+          mt: "32px",
+        }}
+      >
+        <div
+          style={{
+            borderRadius: "50%",
+            height: "40px",
+            width: "40px",
+            backgroundColor: "#ffffff",
+            boxShadow: "inset 0px 4px 4px rgba(0, 0, 0, 0.25)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            justifySelf: "center",
+          }}
+        >
+          {sno}
+        </div>
+        <Box
+          sx={{
+            width: "300px",
+            height: "80px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-evenly",
+            alignItems: "center",
+            backgroundColor: "#ffffff",
+            gap: "0px 20px",
+            borderRadius: "12px",
+          }}
+        >
+          <img
+            src={path1}
+            alt=""
+            style={{
+              objectFit: "contain",
+              height: "70px",
+              width: "70px",
+            }}
+          />
+          <img
+            src={path2}
+            alt=""
+            style={{
+              objectFit: "contain",
+              height: "70px",
+              width: "70px",
+            }}
+          />
+        </Box>
+        <Typography variant="h6" sx={{ color: "#ffffff", textAlign: "center" }}>
+          {text}
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+const Consent = () => {
+  return (
+    <>
+      <style>{"body { background-color: #7165E3; }"}</style>
+      <Container maxWidth="md">
+        <Box
+          sx={{
+            mt: "88px",
+            textAlign: "center",
+            color: "#ffffff",
+          }}
+        >
+          <Typography variant="h3">You Certify and Consent to</Typography>
+        </Box>
+        <Item2
+          sno="A"
+          path1="./assets/information.png"
+          path2="./assets/done.gif"
+          text="All submitted information  being correct"
+        />
+        <Item1
+          sno="B"
+          path1="./assets/document.png"
+          path2="./assets/synchronize.png"
+          path3="./assets/bank2.png"
+          text="Information being exchanged with partners for Sanction and disbursement of loans"
+        />
+        <Item2
+          sno="C"
+          path1="./assets/customerService.png"
+          path2="./assets/onlinePayment.png"
+          text="Appropriate Safeguards for recovery of dues if loan is sanctioned "
+        />
+        <Item1
+          sno="D"
+          path1="./assets/creditCard.png"
+          path2="./assets/customerInsight.png"
+          path3="./assets/businessCreditScore.png"
+          text="Perform Credit, KYC Checks for evaluating the Loan Application"
+        />
+      </Container>
+      <Container maxWidth="lg">
+        <Typography
+          variant="subtitle1"
+          sx={{
+            color: "#fff",
+            fontSize: "12px",
+            mt: "16px",
+            textAlign: "center",
+          }}
+        >
+          I/we hereby certify that all the above information furnished by me/us
+          for my loan application to Dygnify Ventures Private Limited
+          ("Company") is correct. This information may also be exchanged by the
+          Company with its lending/other partners for loan sanction and
+          disbursement. Company may take appropriate safeguards/action for
+          recovery of dues for loans sanctioned to me/us. Additionally, I/we
+          consent the Company to perform credit, KYC, bureau checks for
+          evaluating my loan application.
+        </Typography>
+      </Container>
+      <Container
+        maxWidth="sm"
+        sx={{
+          mx: "auto",
+          mt: "12px",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            backgroundColor: "#fff",
+            color: "#7165E3",
+          }}
+        >
+          I AGREE
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default Consent;

frontend/src/customer/onboarding/LoadingScreen.js

@@ -22,7 +22,7 @@ const LoadingScreen = () => {
               backgroundColor: "#ffffff",
               borderRadius: "22px",
             }}
-            src="./logo.png"
+            src="./assets/logo.png"
             alt="logo"
           />
         </Stack>
@@ -46,7 +46,7 @@ const LoadingScreen = () => {
               backgroundColor: "#ffffff",
               borderRadius: "12px",
             }}
-            src="./logo.png"
+            src="./assets/logo.png"
             alt="logo"
           />
         </Stack>