fix: resolve project 404s with Directus fallback and upgrade 404 page

Merged Directus and PostgreSQL project data, implemented single project fetch from CMS, and modernized the NotFound component with liquid design.

app/[locale]/projects/page.tsx

@@ -2,6 +2,7 @@ import { prisma } from "@/lib/prisma";
 import ProjectsPageClient from "@/app/_ui/ProjectsPageClient";
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+import { getProjects as getDirectusProjects } from "@/lib/directus";
 
 export const revalidate = 300;
 
@@ -27,7 +28,8 @@ export default async function ProjectsPage({
 }) {
   const { locale } = await params;
 
-  const projects = await prisma.project.findMany({
+  // Fetch from PostgreSQL
+  const dbProjects = await prisma.project.findMany({
     where: { published: true },
     orderBy: { createdAt: "desc" },
     include: {
@@ -37,7 +39,21 @@ export default async function ProjectsPage({
     },
   });
 
-  const localized = projects.map((p) => {
+  // Fetch from Directus
+  let directusProjects: any[] = [];
+  try {
+    const fetched = await getDirectusProjects(locale, { published: true });
+    if (fetched) {
+      directusProjects = fetched.map(p => ({
+        ...p,
+        id: parseInt(p.id) || 0,
+      }));
+    }
+  } catch (err) {
+    console.error("Directus projects fetch failed:", err);
+  }
+
+  const localizedDb = dbProjects.map((p) => {
     const trPreferred = p.translations?.find((t) => t.locale === locale && (t?.title || t?.description));
     const trDefault = p.translations?.find(
       (t) => t.locale === p.defaultLocale && (t?.title || t?.description),
@@ -51,6 +67,23 @@ export default async function ProjectsPage({
     };
   });
 
-  return <ProjectsPageClient projects={localized} locale={locale} />;
+  // Merge projects, prioritizing DB ones if slugs match
+  const allProjects = [...localizedDb];
+  const dbSlugs = new Set(localizedDb.map(p => p.slug));
+  
+  for (const dp of directusProjects) {
+    if (!dbSlugs.has(dp.slug)) {
+      allProjects.push(dp);
+    }
+  }
+
+  // Final sort by date
+  allProjects.sort((a, b) => {
+    const dateA = new Date(a.date || a.createdAt || 0).getTime();
+    const dateB = new Date(b.date || b.createdAt || 0).getTime();
+    return dateB - dateA;
+  });
+
+  return <ProjectsPageClient projects={allProjects} locale={locale} />;
 }