---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Layout from '@/layouts/Layout.astro'
import { getAllProjects } from '@/lib/data-utils'

const projects = await getAllProjects()
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="About" />
  <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />

  <section>
    <div class="min-w-full">
      <div class="prose mb-8">
        <p class="mt-0">
          astro-erudite is an opinionated, unstyled static blogging template
          that prioritizes simplicity and performance, built with <Link
            href="https://astro.build"
            external
            underline>Astro</Link
          >, <Link href="https://tailwindcss.com" external underline
            >Tailwind</Link
          >, and <Link href="https://ui.shadcn.com" external underline
            >shadcn/ui</Link
          >. It provides a clean foundation for your content while being
          extremely easy to customize.
        </p>
        <p>
          To learn more about the philosophy behind this template, check out the
          following blog post: <Link
            href="/blog/the-state-of-static-blogs"
            underline>The State of Static Blogs in 2024</Link
          >.
        </p>
      </div>

      <h2 class="mb-4 text-2xl font-medium">Example Projects Listing</h2>
      <div class="flex flex-col gap-4">
        {projects.map((project) => <ProjectCard project={project} />)}
      </div>
    </div>
  </section>
</Layout>