---
import Layout from '../layouts/Layout.astro'
import Button from '../templates/components/Button/Button.tsx'
import Image from '../templates/components/Image/Image'
import Page from '../templates/components/Page/Page'
---

<Layout title="Home">
  <Page alignment='column'>
    <h1>Built-in Components</h1>
    <Button edges='rounded' label="Back to Home" to="/" />

    <section class="image">
      <Image src="sample.png" alt="Example Image" size={400} />
      <Image src="sample.png" alt="Example Image" size={400} />
      <Image src="sample.png" alt="Example Image" size={400} />
      <Image src="sample.png" alt="Example Image" size={400} />
    </section>
  </Page>
</Layout>

<style lang="sass">
  .page
    display: flex
    flex-direction: column
    text-align: center
    justify-content: center
    align-items: center
    margin: 2rem
    height: auto

  .image
    margin: 2rem 0 0 0
    border-radius: 4px
    max-width: 100%
    height: auto
</style>
