From 7c1ad352f1fb8ed8520f552daa02963ad078de25 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 8 Oct 2025 17:27:14 +0800
Subject: [PATCH] Updated index page

---
 src/pages/IndexPage/Index.sass | 12 ++---
 src/pages/IndexPage/Index.tsx  | 94 ++++++++++++++++++++++++----------
 2 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/src/pages/IndexPage/Index.sass b/src/pages/IndexPage/Index.sass
index 182e771..396c97b 100644
--- a/src/pages/IndexPage/Index.sass
+++ b/src/pages/IndexPage/Index.sass
@@ -30,29 +30,29 @@ h1
     gap: 0.5rem
 
   &__main
-    font-size: 3.25rem
+    font-size: 2.75rem
     margin: 0 1rem 0 0
 
     @media only screen and (max-width: views.$tablet)
       padding: 2rem 0 0 0
-      font-size: 2.25rem
+      font-size: 1.25rem
       margin: 0 1rem 0 0
 
   &__sub
     font-weight: 700
-    font-size: 2.75rem
+    font-size: 2rem
 
     @media only screen and (max-width: views.$tablet)
       font-weight: 700
-      font-size: 1.75rem
+      font-size: 1.5rem
 
   &__paragraph
     padding: 4rem 0 0 0
-    font-size: 1.25rem
+    font-size: 1rem
 
     @media only screen and (max-width: views.$tablet)
       padding: 3.25rem 0 0 0
-      font-size: 1rem
+      font-size: 0.75rem
 
 .mobile-buttons
   padding: 2rem 0 0 0
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index 180614d..4ae2ac8 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -1,5 +1,5 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image, Box } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'
 import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
@@ -50,7 +50,7 @@ export default () => {
   return (
     <>
       <Page>
-        <Display desktop tablet>
+        <Display desktop>
           <Padding left={4.75} right={4.75} top={0} bottom={0}>
             <Row content="split">
               <Row content="left" gap={2}>
@@ -58,22 +58,26 @@ export default () => {
                 <h1>OCBO e-Sign</h1>
               </Row>
 
-              <Row content="left" gap={1}>
-                <Button label="Login" edges="curved" design="bo-link" to="/login" />
-                <Button label="Register" edges="curved" design="bo-primary" to="/register" />
-              </Row>
+              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
+                <Row content="left" gap={1}>
+                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
+                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+                </Row>
+              </Box>
             </Row>
 
             <Row content="split">
-              <section class="title">
-                <h1 class="title__main">Secure e-Signature</h1>
-                <span class="title__sub">for Office of the City Building Official</span>
-                <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
-              </section>
+              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
+                <section class="title">
+                  <h1 class="title__main">Secure e-Signature</h1>
+                  <span class="title__sub">for Office of the City Building Official</span>
+                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+                </section>
+              </Box>
 
               <Display desktop>
                 <Column padding="3rem 0 0 0">
-                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={450}></Image>
+                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={410}></Image>
                 </Column>
               </Display>
             </Row>
@@ -82,7 +86,7 @@ export default () => {
           <Footer>
             <Row content="split">
               <Row gap={0.5}>
-                <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
                 <Row gap={0.25}>
                   <Copyright year="2025" name="Office of the City Building Official" />
                   <span>Davao City, Philippines</span>
@@ -91,7 +95,57 @@ export default () => {
 
               <Row gap={0.25}>
                 <span>Developed by:</span>
-                <Image avif={patAvif} webp={patWebp} size={90}></Image>
+                <Image avif={patAvif} webp={patWebp} size={70}></Image>
+                <span>Pat Alcala</span>
+              </Row>
+            </Row>
+          </Footer>
+        </Display>
+
+        <Display tablet>
+          <Padding left={4.75} right={4.75} top={0} bottom={0}>
+            <Row content="split">
+              <Row content="left" gap={2}>
+                <Logo size={150} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+
+              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
+                <Row content="left" gap={1}>
+                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
+                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+                </Row>
+              </Box>
+            </Row>
+
+            <Row content="split">
+              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
+                <section class="title">
+                  <h1 class="title__main">Secure e-Signature</h1>
+                  <span class="title__sub">for Office of the City Building Official</span>
+                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+                </section>
+              </Box>
+
+              <Column padding="3rem 0 0 0">
+                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={110}></Image>
+              </Column>
+            </Row>
+          </Padding>
+
+          <Footer>
+            <Row content="split">
+              <Row gap={0.5}>
+                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
+                <Row gap={0.25}>
+                  <Copyright year="2025" name="Office of the City Building Official" />
+                  <span>Davao City, Philippines</span>
+                </Row>
+              </Row>
+
+              <Row gap={0.25}>
+                <span>Developed by:</span>
+                <Image avif={patAvif} webp={patWebp} size={70}></Image>
                 <span>Pat Alcala</span>
               </Row>
             </Row>
@@ -109,18 +163,6 @@ export default () => {
               <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
             </section>
           </Column>
-
-          <Footer>
-            <Column gap={0.25} width="100%">
-              <Copyright year="2025" name="Office of the City Building Official" />
-              <span>Davao City, Philippines</span>
-
-              <Row gap={0.25}>
-                <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
-                <span>Pat Alcala</span>
-              </Row>
-            </Column>
-          </Footer>
         </Display>
       </Page>
     </>