Changed from astro to pure solidjs

src/pages/IndexPage/Index.sass

@@ -0,0 +1,12 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/breakpoint.sass' as views
+
+h1
+  font-size: 3.25rem
+  color: vars.$textColor
+
+  @media only screen and (max-width: views.$mobile)
+    font-size: 2.25rem
+
+.div
+  width: 8rem

src/pages/IndexPage/Index.tsx

@@ -0,0 +1,44 @@
+import './Index.sass'
+import { Button, Page, Padding, Display, Row, Logo, Column, Box } from '../../components'
+
+export default () => {
+  return (
+    <>
+      <Page>
+        <Padding left={4.75} right={4.75}>
+          <Display desktop tablet>
+            <Row content="split">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+
+              <Row content="left" gap={1}>
+                <Button label="Login" edges="curved" design="bo-link" />
+                <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Row>
+            </Row>
+          </Display>
+
+          <Display mobile>
+            <Column content="center">
+              <Logo size={120} />
+              <h1>OCBO e-Sign</h1>
+
+              <Button label="Register" edges="curved" to="/main" />
+            </Column>
+          </Display>
+
+          <Row content="spaced">
+            <Box thickness={1} curved>
+              <h2>Assessor</h2>
+            </Box>
+            <Box thickness={1} curved>
+              <h2>Approver</h2>
+            </Box>
+          </Row>
+        </Padding>
+      </Page>
+    </>
+  )
+}