---
import Layout from '../layouts/Layout.astro'
import Button from '../components/ButtonComponent/Button.tsx'
import { Picture } from 'astro:assets'
import sample from '/src/images/sample.avif'
---

<Layout title="Home">
  <main class="page">
    <h1>Second Page</h1>
    <Button label="Back to Home" to="/" />
    <Picture class="image" src={sample} alt="Example Image" width={400} quality={85} formats={['avif', 'webp']} />
  </main>
</Layout>

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

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