Separated global function

src/pages/IndexPage/Index.sass

@@ -9,3 +9,24 @@ h1
 
 .div
   width: 8rem
+
+.title
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: flex-start
+  align-content: flex-start
+  gap: 0.5rem
+
+  &__main
+    font-size: 3.25rem
+    margin: 0 1rem 0 0
+
+  &__sub
+    font-weight: 700
+    font-size: 2.75rem
+
+  &__paragraph
+    padding: 4rem 0 0 0
+    font-size: 1.25rem

src/pages/IndexPage/Index.tsx

@@ -1,11 +1,13 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Footer, Image, Copyright } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Footer, Image, Copyright, Column } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'
 import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
 import ocboWebp from '../../assets/images/optimized/ocbologo.webp'
 import patAvif from '../../assets/images/optimized/pat-alcala.avif'
 import patWebp from '../../assets/images/optimized/pat-alcala.webp'
+import pageLogoAvif from '../../assets/images/optimized/esign.avif'
+import pageLogoWebp from '../../assets/images/optimized/esign.webp'
 
 const API = import.meta.env.VITE_BACKEND
 let assessorsNameList: string[]
@@ -61,6 +63,17 @@ export default () => {
                 <Button label="Register" edges="curved" design="bo-primary" to="/register" />
               </Row>
             </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>
+              <Column>
+                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={500}></Image>
+              </Column>
+            </Row>
           </Display>
         </Padding>
 

src/pages/MainPage/Main.tsx

@@ -65,7 +65,6 @@ export default () => {
     setLocation(op.result5[0])
     setType(op.result6[0])
     setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-    // setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
     setApplicationId(op.result11[0])
     setAssessorId(op.result12[0])
     setTotalOp(calculateTotal(op.result9))
@@ -81,20 +80,6 @@ export default () => {
     return total
   }
 
-  // const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
-  //   let result
-  //   if (firstname.length > 0) {
-  //     if (middleinitial.length > 0) {
-  //       result = `${firstname} ${middleinitial}. ${lastname}`
-  //     } else {
-  //       result = `${firstname} ${lastname}`
-  //     }
-  //   } else {
-  //     result = lastname
-  //   }
-  //   return result
-  // }
-
   const approveHandler = async (application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false