Ref: modification components in selfcheckout

app/selfcheckout/verifyAffiliation/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { Box, Card, CardContent, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import Image from "next/image";
+import React from "react";
+import CustomLoading from "@atoms/CustomLoading";
+
+const ClientSearch = React.lazy(() => import("@app/selfcheckout/clientSearch/page"));
+
+const VerifyAffiliation: React.FC = () => {
+  return (
+    <Container
+      maxWidth={false}
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 0,
+      }}
+    >
+      <Card sx={{ width: "100%", p: 2 }}>
+
+        <CardContent sx={{ padding: "4px", height: "100%" }}>
+          <Grid container spacing={2} sx={{ height: "100%" }} alignItems="center">
+          <Grid size = {{xs:12, md:6}}>
+          <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%",
+                  bgcolor: "#f5f5f5",
+                  p: 5,
+                  borderRadius: 5,
+                }}
+              >
+                <Image
+                  src="/img/logo.png"
+                  alt="Rhiscom Logo"
+                  width={600}
+                  height={400}
+                  priority={true}
+                  style={{ marginBottom: 15 }}
+                />
+              </Box>
+            </Grid>
+            <Grid size = {{xs:12, md:6}}>
+              <React.Suspense fallback={<CustomLoading />}>
+                <ClientSearch />
+              </React.Suspense>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Container>
+  );
+};
+
+export default VerifyAffiliation;