Updated

fwt/components/HTML.tsx

@@ -28,7 +28,7 @@ export default (props: Props) => {
           <meta name="author" content={props.author} />
           <meta property="og:description" content={props.description} />
           <meta property="og:type" content="website" />
-          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
           <Show when={props.font}>
             <link rel="preconnect" href="https://cdn.jsdelivr.net" />
           </Show>

src/components/Card.astro

@@ -0,0 +1,52 @@
+---
+import { Image, Column, Link } from '../../fwt'
+
+interface Props {
+  avif: string
+  webp: string
+  name: string
+  description: string
+  site: string
+}
+
+const { avif, webp, name, description, site } = Astro.props
+---
+
+<section class="card">
+  <Link to={site} newtab>
+    <Column>
+      <Image avif={avif} webp={webp} size={140} />
+      <span class="card__name">{name}</span>
+      <span class="card__description">{description}</span>
+    </Column>
+  </Link>
+</section>
+
+<style lang="sass">
+  @use 'sass:color'
+  $background: rgba(12, 26, 48, 0.2)
+
+  .card
+    backdrop-filter: blur(6px) saturate(100%)
+    background-color: $background
+    border: 1px solid color.adjust($background, $lightness: 15%)
+    padding: 2.25rem
+    cursor: pointer
+    width: 14rem
+    height: 12rem
+    transition: all 0.2s ease-out
+
+    &:hover
+      background-color: rgba(12, 26, 48, 0.6)
+      transform: scale(1.10)
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
+
+    &__name
+      padding: 1rem 0 0 0
+      font-size: 1rem
+      font-weight: 500
+
+    &__description
+      padding: 0.5rem 0 0 0
+      font-size: 0.75rem
+</style>

src/components/Card/Card.sass

@@ -1,22 +0,0 @@
-.card
-  // display: flex
-  // flex-direction: column
-  // align-items: flex-start
-  // justify-content: flex-start
-  border: 1px solid transparent
-  border-radius: 20px
-  padding: 2rem
-  cursor: pointer
-  width: 15rem
-
-  &:hover
-    border: 1px solid white
-
-  &__name
-    padding: 1rem 0 0 0
-    font-size: 1rem
-    font-weight: 500
-
-  &__description
-    padding: 0.5rem 0 0 0
-    font-size: 0.75rem

src/components/Card/Card.tsx

@@ -1,23 +0,0 @@
-import './Card.sass'
-import { Image, Column, Row } from '../../../fwt'
-
-interface Props {
-  avif: string
-  webp: string
-  name: string
-  description: string
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <section class="card">
-        <Column>
-          <Image avif={props.avif} webp={props.webp} size={140} />
-            <span class="card__name">{props.name}</span>
-            <span class="card__description">{props.description}</span>
-        </Column>
-      </section>
-    </>
-  )
-}

src/components/Counter/Counter.sass

@@ -1,47 +0,0 @@
-.counter
-  display: flex
-  flex-direction: column
-  align-items: center
-  gap: 1rem
-  margin: 2rem
-  color: white
-  border: 1px solid rgba(22, 34, 60, 0.5)
-  padding: 1rem 2rem
-  border-radius: 16px
-  background: rgba(134, 152, 217, 0.1)
-
-  &__display
-    font-size: 1.75rem
-    font-weight: bold
-
-  &__buttons
-    display: flex
-    justify-content: center
-    gap: 0.25rem
-
-    // &:hover
-    // background: color.adjust(vars.$primaryColor, $blackness: 20%)
-
-
-  &__decrement
-    width: 2rem
-    height: 2.25rem
-    padding: auto
-    font-size: 1rem
-    font-weight: bold
-    cursor: pointer
-    text-decoration: none
-    background-color: rgba(86, 14, 14, 0.915)
-    border-radius: 8px
-    color: white
-    border: 1px solid rgba(255,255,255,0.2)
-
-    &:active
-      transform: scale(0.95)
-
-  &__increment
-    @extend .counter__decrement
-    background-color: rgb(14, 42, 86, 0.915)
-
-    &:active
-      transform: scale(0.95)

src/components/Counter/Counter.tsx

@@ -1,30 +0,0 @@
-import './Counter.sass'
-import { createSignal } from 'solid-js'
-
-let [count, setCount] = createSignal(0)
-
-const increment = () => {
-  setCount(count() + 1)
-}
-
-const decrement = () => {
-  setCount(count() - 1)
-}
-
-export default () => {
-  return (
-    <>
-      <section class="counter">
-        <div class="counter__display">{count()}</div>
-        <div class="counter__buttons">
-          <button class="counter__decrement" onClick={decrement}>
-            -
-          </button>
-          <button class="counter__increment" onClick={increment}>
-            +
-          </button>
-        </div>
-      </section>
-    </>
-  )
-}

src/components/Input/Input.tsx

@@ -1,12 +0,0 @@
-import Input from '../../../fwt/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}

src/layouts/Layout.astro

@@ -4,10 +4,11 @@ const { title } = Astro.props
 const websiteName = 'Template'
 const websiteDescription = 'This is just a template.'
 
-import { Background, HTML } from '../../fwt'
+import { Background, HTML, OptimizeBackground } from '../../fwt'
 ---
 
 <HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
-  <Background color="#0c1b31" />
+  <!-- <OptimizeBackground /> -->
+  <Background image />
   <slot />
 </HTML>

src/pages/index.astro

@@ -1,29 +1,49 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Row, Image, Column } from '../../fwt/'
+import { Button, Logo, Link, Page, Row, Image, Column, OptimizeBackground } from '../../fwt/'
-import Card from '../components/Card/Card'
+// import Card from '../components/Card/Card'
-import OLA from '../../fwt/images/ocbo-portal.avif'
+import Card from '../components/Card.astro'
-import OLW from '../../fwt/images/ocbo-portal.webp'
+import portalA from '../../fwt/images/ocbo-portal.avif'
-import OcboLogoA from '../../fwt/images/ocbologo.avif'
+import portalW from '../../fwt/images/ocbo-portal.webp'
-import OcboLogoW from '../../fwt/images/ocbologo.webp'
+import esignA from '../../fwt/images/esign.avif'
+import esignW from '../../fwt/images/esign.webp'
 ---
 
-<Layout title="FWT">
+<Layout title="OCBO Portal">
+  <!-- <OptimizeBackground /> -->
   <Page alignment="column">
+    <Row content="left"><Row><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></Row></Row>
     <Column>
       <Row content="center">
-        <Image avif={OLA.src} webp={OLW.src} size={150} />
+        <Column>
-        <h1>OCBO Portal for Applications</h1>
+          <h1>Welcome to OCBO Application Portal</h1>
+        </Column>
+      </Row>
+      <Row gap={2.5}>
+        <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
+        <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
+        <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
       </Row>
-
-      <Card avif={OcboLogoA.src} webp={OcboLogoW.src} name="OCBO e-Sign" description="A secure way of signing permits." />
     </Column>
   </Page>
-
-  <style lang="sass">
-    h1
-      color: #3377AC
-      margin: 0
-      font-size: 3.25rem
-  </style>
 </Layout>
+
+<style lang="sass">
+  $text-color: rbga(255, 255, 255, 0.8)
+
+  h1
+    color: $text-color
+    margin: -2rem 0 2.75rem 0
+    font-size: 3.25rem
+
+  h3
+    color: $text-color
+    margin: 0.5rem 0 2rem 0
+
+  .logo-text
+    color: $text-color
+    font-size: 2rem
+    font-weight: 600
+    margin: -1.5rem 0 0 0
+    opacity: 0.8
+</style>

src/styles/classes.sass

@@ -1,5 +1,8 @@
 .fullscreen
-  position: absolute
+  display: flex
+  align-items: center
+  justify-content: center
+  position: fixed
   top: 0
   left: 0
   width: 100vw

src/styles/variables.sass

@@ -1,6 +1,6 @@
 @use 'sass:color'
 
-$background: #0c1b31
+$background: rgb(12, 26, 48)
 $textColor: #f0f8ff
 
 $fontSize: 1rem