---
import Layout from '../layouts/Layout.astro'
import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle.tsx'
---

<Layout title="Text Comparison - AIO Tools">
  <main class="page">
    <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />

    <section class="content">
      <TextComparisonComponent client:visible />
    </section>
  </main>
</Layout>

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

  .page
    font-family: 'Inter', sans-serif
    text-align: center
    margin: 4rem 0 0 0
    transition: margin 0.4s ease-in-out

    @media screen and (max-width: view.$tablet)
      margin-top: 1rem

  .content
    display: flex
    justify-content: center
    align-items: center
    // border: 1px solid #ffffff
    // padding: 2rem
    // border-radius: 8px
</style>