---
import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
---

<Layout title="Register - OCBO e-Sign">
  <Page alignment="column">
    <Padding left={4.75} right={4.75}>
      <Display desktop tablet>
        <Row content="split">
          <Row content="left" gap={2}>
            <Logo size={140} />
            <h1>OCBO e-Sign</h1>
          </Row>

          <Button label="Register" edges="curved" to="/main" />
        </Row>
      </Display>

      <Display mobile>
        <Column content="center">
          <Logo size={120} />
          <h1>OCBO e-Sign</h1>

          <Button label="Register" edges="curved" to="/main" />
        </Column>
      </Display>
    </Padding>
  </Page>
</Layout>

<style lang="sass">
  @use '/src/styles/variables.sass' as vars
  @use '/src/styles/breakpoint.sass' as views

  h1
    font-size: 3.25rem
    color: vars.$textColor

    @media only screen and (max-width: views.$mobile)
      font-size: 2.25rem

  .div
    width: 8rem
</style>