---
import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import Hero from "@components/Hero.astro";
import Slideshow from "@components/Slideshow.astro";

const allProjects = await getCollection("projects");
const projects = allProjects
  .filter((project) => !project.data.draft && project.data.featured)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
---

<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
  <Hero />
  <section class="animate-reveal opacity-0 [animation-delay:0.3s]">
    <Slideshow images={projects} />
  </section>
</Layout>
