From b2ff432a8096a7fe28cee58e3c01b558461adbec Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 24 Sep 2025 17:14:25 +0800
Subject: [PATCH] Added login page

---
 src/layouts/Layout.tsx         |  4 ++++
 src/pages/LoginPage/Login.sass |  0
 src/pages/LoginPage/Login.tsx  | 42 ++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 src/pages/LoginPage/Login.sass
 create mode 100644 src/pages/LoginPage/Login.tsx

diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index dc45db4..46e82d0 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -18,6 +18,10 @@ const routes = [
     path: '/register',
     component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
   },
+  {
+    path: '/login',
+    component: lazy(() => import('../pages/LoginPage/Login.tsx')),
+  },
 ]
 
 render(() => <Router>{routes}</Router>, root!)
diff --git a/src/pages/LoginPage/Login.sass b/src/pages/LoginPage/Login.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
new file mode 100644
index 0000000..5d48c95
--- /dev/null
+++ b/src/pages/LoginPage/Login.tsx
@@ -0,0 +1,42 @@
+import './Login.sass'
+import { Logo, Link, Page, Row, Padding, Form, Box } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
+
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7">
+                <Row>
+                  <span class="box-title">Login</span>
+                </Row>
+                <Form>
+                  <h4>Role</h4>
+                </Form>
+              </Box>
+            </Row>
+          </Padding>
+        </Padding>
+      </Page>
+    </>
+  )
+}