---
import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Row, Image, Column, Display, OptimizeBackground, Padding } from '../../fwt/'
// import Card from '../components/Card/Card'
import Card from '../components/Card.astro'
import portalA from '../../fwt/images/ocbo-portal.avif'
import portalW from '../../fwt/images/ocbo-portal.webp'
import esignA from '../../fwt/images/esign.avif'
import esignW from '../../fwt/images/esign.webp'
---

<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>
      <Display desktop tablet>
        <Row content="center">
          <Column>
            <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>
      </Display>
      <Display mobile>
        <Padding top={2} bottom={2} left={0} right={0}>
          <Column gap={1.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" />
          </Column>
        </Padding>
      </Display>
    </Column>
  </Page>
</Layout>

<style lang="sass">
  $text-color: rbga(255, 255, 255, 0.8)

  h1
    color: $text-color
    margin: -2rem 0 2.75rem 0
    font-size: 3rem

  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>