project pages created and populated automatically

app/[locale]/page.tsx

@@ -3,13 +3,24 @@ import WorksSection from "@/components/sections/WorksSection";
 import FeatureSection from "@/components/sections/FeatureSection";
 import TimelineSection from "@/components/sections/AboutSection";
 
-export default function Home() {
+import { getAllProjects } from "@/lib/projects/get-projects";
+
+type Props = {
+	params: Promise<{
+		locale: string;
+	}>;
+};
+
+export default async function Home({ params }: Props) {
+	const { locale } = await params;
+	const projects = getAllProjects();
+
 	return (
 		<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
 			<HeroSection />
-			<WorksSection />
+			<WorksSection projects={projects} locale={locale} />
 			<FeatureSection />
 			<TimelineSection />
 		</main>
 	);
-}
+}

app/[locale]/works/[slug]/page.tsx

@@ -0,0 +1,76 @@
+import { notFound } from "next/navigation";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
+import { mdxComponents } from "@/components/mdx/mdx-components";
+import { ProjectHero } from "@/components/sections/ProjectHero";
+import { ProjectMeta } from "@/components/sections/ProjectMeta";
+import { ProjectTechnologies } from "@/components/sections/ProjectTechnologies";
+import { OtherProjects } from "@/components/sections/OtherProjects";
+
+type Props = {
+    params: Promise<{
+        locale: string;
+        slug: string;
+    }>;
+};
+
+export function generateStaticParams() {
+    return getProjectSlugs().flatMap((slug: any) => [
+        { locale: "fr", slug },
+        { locale: "en", slug },
+    ]);
+}
+
+export default async function ProjectPage({ params }: Props) {
+    const { locale, slug } = await params;
+    const project = getProjectBySlug(slug);
+
+    if (!project) {
+        notFound();
+    }
+
+    const otherProjects = getAllProjects()
+        .filter((item: any) => item.slug !== slug)
+        .slice(0, 2)
+        .map((item: any) => ({
+            slug: item.slug,
+            title: item.title,
+            subtitle: item.subtitle,
+        }));
+
+    return (
+        <main className="bg-[#f5f3ef] text-[#2b160f]">
+            <div className="mx-auto max-w-7xl px-6 py-6">
+                <ProjectHero
+                    locale={locale}
+                    title={project.title}
+                    subtitle={project.subtitle}
+                    year={project.year}
+                />
+
+                <ProjectMeta
+                    year={project.year}
+                    category={project.category}
+                    roles={project.roles}
+                    client={project.client}
+                />
+
+                <ProjectTechnologies technologies={project.technologies} />
+
+                <section className="pb-16">
+                    <article
+                        className="
+              prose prose-neutral max-w-none
+              prose-h2:text-6xl prose-h2:font-semibold prose-h2:text-[#2b160f]
+              prose-p:text-base prose-p:leading-8 prose-p:text-neutral-800
+            "
+                    >
+                        <MDXRemote source={project.content} components={mdxComponents} />
+                    </article>
+                </section>
+
+                <OtherProjects locale={locale} projects={otherProjects} />
+            </div>
+        </main>
+    );
+}