Refactor project slug handling and improve project retrieval logic

components/commercial-project-card.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Project } from "@/lib/types";
 import Chip from "@/components/chip";
 import { Eye } from "lucide-react";
+import { projectSlug } from "@/lib/data";
 
 const CommercialProjectCard = ({ project }: { project: Project }) => {
   return (
@@ -34,7 +35,7 @@ const CommercialProjectCard = ({ project }: { project: Project }) => {
 
       <div className="flex gap-3 mt-auto">
         <Link
-          href={`/projects/${project.name}`}
+          href={`/projects/${projectSlug(project)}`}
           className="flex-1 px-4 py-3 text-center font-bold text-black bg-yellow-400 rounded-xl hover:bg-yellow-500 transition-colors glass-effect glossy-effect bottom gloss-highlight"
         >
           Read more

components/project-item.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { projectSlug } from "@/lib/data";
 import { Project } from "@/lib/types";
 import Chip from "@/components/chip";
 import ImageCarousel from "@/components/image-carousel";
@@ -64,7 +65,7 @@ const ProjectItem = ({ project }: ProjectItemProps) => {
         </div>
 
         <Link
-          href={`/projects/${project.name}`}
+          href={`/projects/${projectSlug(project)}`}
           className="text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black font-bold"
         >
           Read more