---
import Layout from '../layouts/Layout.astro'
import { Button, Page, Row, Image } from '../../fwt'
import sample1 from '../../fwt/images/sample.avif'
import sample2 from '../../fwt/images/sample.webp'
---

<Layout title="Home">
  <Page alignment="column">
    <h1>FWT Components</h1>
    <Button edges="rounded" label="Back to Home" to="/" />

    <section class="images">
      <Row content="center" gap={1}>
        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
      </Row>
    </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

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