---
import Layout from '../layouts/Layout.astro'
---

<Layout title="About - AIO Tools">
  <main class="page">
    <h2 class="paragraph-title">About AIO Tools</h2>
    <p class="paragraph-content">This website will provide you with all the tools you need for your daily tasks. Whether you're working as a developer, a sysadmin, or just someone who needs some handy tools for their daily tasks, this website is here to help.</p>
    <p class="paragraph-content">
      Inspired by <a target="_blank" href="https://it-tools.tech/">IT Tools</a> by Corentin Thomasset. This wonderful website, made with ❤ by Patrick Alvin Alcala, aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar! IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain
      name. If you want to support my work, and encourage me to add more tools, please consider supporting by sponsoring me.
    </p>

    <h2 class="paragraph-title">Technologies</h2>
    <p class="paragraph-content">
      AIO Tools is made using <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a> to achieve maximum performance and to provide a smooth user experience, and is styled with <a target="_blank" href="https://sass-lang.com/">SASS</a>. The UI Components are manually built from scratch for better flexibility. Third-party open-source libraries are used in some tools, you may find the complete list in the package.json file of the
      repository.
    </p>

    <h2 class="paragraph-title">Found a bug? A tool is missing?</h2>
    <p class="paragraph-content">If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the issues section in the GitHub repository. And if you found a bug, or something doesn't work as expected, please file a bug report in the issues section in the GitHub repository.</p>
  </main>
</Layout>

<style lang="sass">
  @use '/src/assets/css/viewport.sass' as view
  @use '/src/assets/css/variables.sass' as vars
  @use 'sass:color'

  .page
    padding: 4rem
    display: flex
    flex-direction: column
    items-align: center
    color: #ffffff
    font-family: 'Inter', sans-serif

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

  .paragraph-title
    font-size: 1.8rem
    font-weight: 500
    color: color.adjust(vars.$background, $lightness: 75%)
    margin-bottom: 1rem

    @media screen and (max-width: view.$mobile)
      font-size: 1.25rem

  .paragraph-content
    font-size: 1rem
    line-height: 1.6
    color: color.adjust(vars.$background, $lightness: 70%)

    @media screen and (max-width: view.$mobile)
      font-size: 0.75rem

  a
    text-decoration: none
    color: color.adjust(vars.$background, $lightness: 40%)
    transition: color 0.3s ease-in-out
</style>