locale upgrade

app/_ui/ProjectsPageClient.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { motion } from "framer-motion";
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 export type ProjectListItem = {
   id: number;
@@ -27,7 +28,11 @@ export default function ProjectsPageClient({
   projects: ProjectListItem[];
   locale: string;
 }) {
-  const [selectedCategory, setSelectedCategory] = useState("All");
+  const tCommon = useTranslations("common");
+  const tList = useTranslations("projects.list");
+  const tShared = useTranslations("projects.shared");
+
+  const [selectedCategory, setSelectedCategory] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
   const [mounted, setMounted] = useState(false);
 
@@ -37,13 +42,13 @@ export default function ProjectsPageClient({
 
   const categories = useMemo(() => {
     const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
-    return ["All", ...unique];
+    return ["all", ...unique];
   }, [projects]);
 
   const filteredProjects = useMemo(() => {
     let result = projects;
 
-    if (selectedCategory !== "All") {
+    if (selectedCategory !== "all") {
       result = result.filter((project) => project.category === selectedCategory);
     }
 
@@ -77,16 +82,13 @@ export default function ProjectsPageClient({
             className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
           >
             <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span>Back to Home</span>
+            <span>{tCommon("backToHome")}</span>
           </Link>
 
           <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
-            My Projects
+            {tList("title")}
           </h1>
-          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
-            Explore my portfolio of projects, from web applications to mobile apps. Each project showcases different
-            skills and technologies.
-          </p>
+          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">{tList("intro")}</p>
         </motion.div>
 
         {/* Filters & Search */}
@@ -108,7 +110,7 @@ export default function ProjectsPageClient({
                     : "bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300"
                 }`}
               >
-                {category}
+                {category === "all" ? tList("all") : category}
               </button>
             ))}
           </div>
@@ -118,7 +120,7 @@ export default function ProjectsPageClient({
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
             <input
               type="text"
-              placeholder="Search projects..."
+              placeholder={tList("searchPlaceholder")}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
@@ -172,7 +174,7 @@ export default function ProjectsPageClient({
                 {project.featured && (
                   <div className="absolute top-3 left-3 z-20">
                     <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
-                      Featured
+                        {tShared("featured")}
                     </div>
                   </div>
                 )}
@@ -273,15 +275,15 @@ export default function ProjectsPageClient({
 
         {filteredProjects.length === 0 && (
           <div className="text-center py-20">
-            <p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
+            <p className="text-stone-500 text-lg">{tList("noResults")}</p>
             <button
               onClick={() => {
-                setSelectedCategory("All");
+                setSelectedCategory("all");
                 setSearchQuery("");
               }}
               className="mt-4 text-stone-800 font-medium hover:underline"
             >
-              Clear filters
+              {tList("clearFilters")}
             </button>
           </div>
         )}