---
import { Layout } from "virtual:astro-hashnode/components";
import { getAboutPage } from '../../hn-gql';
import { Markdown } from 'astro-remote';
import RemoteImage from '../../components/astro-remote/RemoteImage.astro';

const data = await getAboutPage();
---

<Layout pageTitle="About">
  <div class="flex flex-col justify-center p-2">
    <h2 class="text-3xl mb-3" 
    transition:name={'banner'}
    transition:animate={'fade'}>{data.title}</h2>
    <div class="about-content">
      <Markdown content={data.content.markdown} 
      components={{
        img: RemoteImage
      }}/>
    </div>
  </div>
</Layout>
