---
import Layout from "@layouts/Layout.astro";
import { SITE } from "@consts";
import Showcase from "@components/Showcase.astro";

interface Props {
  content: any;
  CONSTS: any;
}

const { content, CONSTS } = Astro.props;
---

<Layout title={SITE.TITLE} description={CONSTS.DESCRIPTION}>
  <h1 class="animate-reveal break-words text-4xl font-medium opacity-0">
    {CONSTS.TITLE}
  </h1>
  <div
    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.4s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
  >
    {content.map((article: any) => <Showcase collection={article} />)}
  </div>
</Layout>