Improved landing page

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>