feat: Design login page

src/app/login/page.tsx

@@ -6,7 +6,6 @@ import myImage from '@/app/image/ebanking.jpg';
 import bgImage from '@/app/image/media.jpg';
 import frontPage from '@/app/image/ib_front_page.jpg'
 import NextImage from 'next/image';
-import { KccbTheme } from "@/app/_themes/KccbTheme";
 import { Providers } from "@/app/providers";
 
 export default function Demo() {
@@ -29,20 +28,7 @@ export default function Demo() {
                     alt="ebanking"
                     style={{ width: "100%", height: "12%" }}
                 />
-                {/* For Text */}
+
-                {/* <Paper shadow="sm" p="lg" withBorder style={{ maxWidth: 1000, margin: "auto" }}>
-                    <Text
-                        style={{
-                            fontSize: "20px",
-                            textAlign: "center",
-                            marginBottom: "20px",
-                            fontWeight: "bold",
-                        }}
-                    >
-                        KCC Bank welcomes you to KCCB - Internet Banking Services
-                    </Text>
-                </Paper> */}
-                {/* Security Message */}
                 <Box style={{ width: "100%", overflow: "hidden", whiteSpace: "nowrap", padding: "8px 0" }}>
                     <Text
                         component="span"
@@ -71,7 +57,7 @@ export default function Demo() {
                     </style>
                 </Box>
                 <div style={{ display: "flex", height: "70vh" }}>
-                    <div style={{ flex: 1, backgroundColor: "#f0f0f0", display: "flex" }}>
+                    <div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex" }}>
                         <Image
                             radius="md"
                             fit="cover"
@@ -82,22 +68,12 @@ export default function Demo() {
                         />
                     </div>
                     <div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex", justifyContent: 'center', alignItems: 'center' }}>
-                        <Card shadow="lg" padding="xl" radius="md" style={{ width: 480, height: 400, backgroundColor: '#f0f0f0', boxShadow: '#f0f0f0' }}>
+                        <Card shadow="lg" padding="xl" radius="md" style={{ width: 480, height: 400, backgroundColor: '#f0f0f0', 
+                            borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", }}>
                             <Title order={5} style={{ marginLeft: 10 }}>Welcome To KCC Bank</Title>
                             <Title order={1} style={{ marginLeft: 10, color: "#000066" }}>Internet Banking</Title>
-                            {/* <Box style={{ width: "400px", height: "200px", margin: "10px 0 20px 10px", border: "1px solid black", marginLeft: 30 }}>
+                            <br></br>
-                                <form style={{ marginLeft: 10, width: "100px", height: "50px" }}>
+                            <Box style={{ width: "370px", padding: "20px",  border: "1px solid #e0e0d1", marginLeft: 30 }}>
-                                    <Flex gap="sm" align="center" justify="flex-start" style={{border: "solid blue",width:"300%"}}>
-                                        <Text style={{border:"solid black"}}>CIF Number</Text>
-                                        <TextInput
-                                            placeholder="Enter your CIF no"
-                                            style={{ flex: 1 }}
-                                        />
-                                        <Text style={{border:"solid black"}}>Password : </Text>
-                                    </Flex>
-                                </form>
-                            </Box> */}
-                            <Box style={{ width: "370px", padding: "20px", borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", border: "1px solid black", marginLeft: 30 }}>
                                 <Flex justify="center" gap="md" >
                                     <form>
                                         <TextInput
@@ -111,8 +87,8 @@ export default function Demo() {
                                             placeholder="Enter your password"
                                             style={{ flex: 1 }}
                                         />
-                                        <br></br>
+                                        {/* <br></br> */}
-                                        <Button fullWidth variant="filled" mt="md">Login</Button>
+                                        <Button fullWidth variant="filled" mt="md" style={{width:100,align:"center",marginLeft:40}}>Login</Button>
                                     </form>
                                 </Flex>
                             </Box>