Refactor for i18n, CMS integration, and project slugs; enhance admin & analytics

Co-authored-by: dennis <dennis@konkol.net>

app/components/Projects.tsx

@@ -5,6 +5,7 @@ import { motion, Variants } from "framer-motion";
 import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import { useLocale } from "next-intl";
 
 const fadeInUp: Variants = {
   hidden: { opacity: 0, y: 20 },
@@ -31,6 +32,7 @@ const staggerContainer: Variants = {
 
 interface Project {
   id: number;
+  slug: string;
   title: string;
   description: string;
   content: string;
@@ -45,6 +47,7 @@ interface Project {
 
 const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
+  const locale = useLocale();
 
   useEffect(() => {
     const loadProjects = async () => {
@@ -175,7 +178,7 @@ const Projects = () => {
               <div className="p-6 flex flex-col flex-1">
                 {/* Stretched Link covering the whole card (including image area) */}
                 <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  href={`/${locale}/projects/${project.slug}`}
                   className="absolute inset-0 z-10"
                   aria-label={`View project ${project.title}`}
                 />
@@ -247,7 +250,7 @@ const Projects = () => {
           className="mt-16 text-center"
         >
           <Link
-            href="/projects"
+            href={`/${locale}/projects`}
             className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
           >
             View All Projects <ArrowRight size={16} />