Add sitemap and portfolio category SEO routes

app/[locale]/(site)/portfolio/page.tsx

@@ -1,20 +1,14 @@
 import type { Metadata } from "next";
-import { ArrowUpRight, CalendarDays } from "lucide-react";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
-import { MotionFade } from "@/components/motion-fade";
+import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { AppCard } from "@/components/ui/app-card";
-import { CardContent } from "@/components/ui/card";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-import {
-  getActivePortfolioCategories,
-  getLocalizedValue,
-  getPublishedPortfolioProjects,
-} from "@/lib/portfolio";
+import { getActivePortfolioCategories, getPublishedPortfolioProjects } from "@/lib/portfolio";
 
 type PortfolioPageProps = {
   params: {
@@ -48,11 +42,14 @@ export default async function PortfolioPage({
   const localeKey = resolveLocale(locale);
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
   const selectedCategory = searchParams?.category ?? "";
+
+  if (selectedCategory) {
+    redirect(getLocalizedPath(localeKey, `/portfolio/category/${selectedCategory}`));
+  }
+
   const [categories, projects] = await Promise.all([
     getActivePortfolioCategories(),
-    getPublishedPortfolioProjects({
-      categorySlug: selectedCategory || undefined,
-    }),
+    getPublishedPortfolioProjects(),
   ]);
 
   return (
@@ -65,74 +62,13 @@ export default async function PortfolioPage({
       />
 
       <Container className="flex flex-col gap-section pb-12 lg:pb-16">
-        <section className="flex flex-wrap gap-3">
-        <Link
-          href={getLocalizedPath(localeKey, "/portfolio")}
-          className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-            selectedCategory === ""
-              ? "border-input bg-primary text-primary-foreground"
-              : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-          }`}
-        >
-          {t("all")}
-        </Link>
-        {categories.map((category) => (
-          <Link
-            key={category.id}
-            href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
-            className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-              selectedCategory === category.slug
-                ? "border-input bg-primary text-primary-foreground"
-                : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-            }`}
-          >
-            {getLocalizedValue(category.name, localeKey)}
-          </Link>
-        ))}
-        </section>
-
-        <section className="grid gap-4 md:grid-cols-2">
-        {projects.map((item, index) => (
-          <MotionFade key={item.slug} delay={index * 0.05}>
-            <AppCard interactive>
-              <CardContent className="p-5">
-                <Link
-                  href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
-                  className="group block"
-                >
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="text-sm text-muted-foreground/80">
-                      {getLocalizedValue(item.category.name, localeKey)}
-                    </p>
-                    <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
-                      <CalendarDays className="h-3.5 w-3.5" />
-                      {item.projectYear}
-                    </p>
-                  </div>
-                  <h2 className="mt-3 text-xl font-semibold text-foreground">
-                    {getLocalizedValue(item.title, localeKey)}
-                  </h2>
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    {getLocalizedValue(item.summary, localeKey)}
-                  </p>
-                  <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
-                    {t("open")}
-                    <ArrowUpRight className="h-4 w-4" />
-                  </p>
-                </Link>
-              </CardContent>
-            </AppCard>
-          </MotionFade>
-        ))}
-
-        {projects.length === 0 ? (
-          <AppCard className="md:col-span-2">
-            <CardContent className="p-6 text-sm text-muted-foreground">
-              {t("empty")}
-            </CardContent>
-          </AppCard>
-        ) : null}
-        </section>
+        <PortfolioCategoryFilter locale={localeKey} categories={categories} allLabel={t("all")} />
+        <PortfolioProjectGrid
+          locale={localeKey}
+          projects={projects}
+          emptyLabel={t("empty")}
+          openLabel={t("open")}
+        />
       </Container>
     </>
   );