---
import Layout from '../layouts/Layout.astro'
import { Footer, Page, Row, Image, Column, Display, Padding, Copyright } from '../../@dasig'

import Card from '../components/Card.astro'
import portalA from '../../@dasig/images/ocbo-portal.avif'
import portalW from '../../@dasig/images/ocbo-portal.webp'
import esignA from '../../@dasig/images/esign.avif'
import esignW from '../../@dasig/images/esign.webp'
import patA from '../../@dasig/images/pat-alcala.avif'
import patW from '../../@dasig/images/pat-alcala.webp'
---

<Layout title="OCBO Portal">
  <Page alignment="column">
    <Row gap={1} content="left"><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></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://esign.patalcala.com" />
        </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://esign.patalcala.com" />
          </Column>
        </Padding>
      </Display>
    </Column>

    <Footer>
      <Row content="left">
        <Column gap={0.5} content="top">
          <Copyright />
          <Row gap={0.5}>
            <span>Developed By: <Image avif={patA.src} webp={patW.src} size={80} alt="Pat Alcala logos" /> Pat Alcala</span>
          </Row>
          <span>Developed By: Pat Alcala</span>
        </Column>
      </Row>
    </Footer>

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

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

      h3
        color: $text-color
        margin: 0.5rem 0 2rem 0

      .logo-text
        color: $text-color
        font-size: 2rem
        font-weight: 700
        margin: -1.5rem 0 0 0
        opacity: 0.9
    </style>
  </Page>
</Layout>
