---
import { getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import { Image } from 'astro:assets'
---

<Layout title="About" description="About">
  <Container>
    <div class="space-y-10">
      <div class="font-semibold">About</div>
      <section class="not-prose flex flex-col gap-4 text-justify">
        <p class="text-justify">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores porro
          hic minima incidunt explicabo obcaecati consectetur consequuntur at
          quisquam commodi.
        </p>

        <p class="text-justify">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores porro
          hic minima incidunt explicabo obcaecati consectetur consequuntur at
          quisquam commodi.
        </p>
      </section>

      <div class="flex flex-col justify-center md:flex-row">
        <div class="my-10 text-center">
          <div
            class="h-[250px] w-[350px] -rotate-6 overflow-hidden rounded-xl object-cover"
          >
            <Image
              src={'/astro-nano.png'}
              alt={'life2'}
              width={350}
              height={250}
              class="h-[250px] w-[350px] overflow-hidden rounded-xl object-cover"
            />
          </div>
          <p class="mt-4 text-sm">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
        <div class="mx-10 my-10 text-center">
          <div
            class="mx-auto h-[250px] w-[150px] rotate-6 rounded-xl object-cover sm:ml-auto"
          >
            <Image
              src={'/astro-micro.jpg'}
              alt={'life2'}
              width={150}
              height={250}
              class="h-[250px] w-[150px] rounded-xl object-cover"
            />
          </div>
          <p class="mt-4 text-sm">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </div>
  </Container>
</Layout>
