import ProjectCard from '@/components/ProjectCard'
import projects from '@/content/projects.json'

export default function ProjectsPage() {
  return (
    <div className="mx-auto max-w-5xl px-6 py-16">
      <h1 className="mb-2 text-3xl font-semibold text-zinc-900 dark:text-white">Projects</h1>
      <p className="mb-10 text-sm text-zinc-600 dark:text-zinc-400">
        A selection of things I&apos;ve built.
      </p>
      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {projects.map((project) => (
          <li key={project.title}>
            <ProjectCard {...project} />
          </li>
        ))}
      </ul>
    </div>
  )
}