refactor: remove unused imports and optimize image handling in project page

frontend/src/app/(i18n)/[locale]/layout.tsx

@@ -1,4 +1,4 @@
-import { Inter, Space_Grotesk } from "next/font/google";
+import { Inter } from "next/font/google";
 import Header from "@/app/components/Header";
 import Footer from "@/app/components/Footer";
 import "@/app/globals.css";

frontend/src/app/(i18n)/[locale]/project/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import { FaArrowLeft } from 'react-icons/fa6';
 import Link from 'next/link';
+import Image from 'next/image';
 
 const projectsData = [
   { id: 1, tech: ["Next.js", "Tailwind CSS", "TypeScript", "Framer Motion"], imageUrl: "/project1.jpg", repoUrl: "https://github.com/joaoloureiro/portfolio-app" },
@@ -31,7 +32,7 @@ export default function ProjectPage() {
         <h1 className="text-3xl md:text-4xl font-bold text-center text-[var(--color-text-primary)] heading-underline">{t(`project_${project.id}_title`)}</h1>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
           <div>
-            <img src={project.imageUrl} alt={t(`project_${project.id}_title`)} className="rounded-lg" />
+            <Image src={project.imageUrl} alt={t(`project_${project.id}_title`)} className="rounded-lg" />
           </div>
           <div>
             <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">{t('about_project')}</h2>

frontend/src/app/components/LanguageSwitcher.tsx

@@ -3,7 +3,6 @@
 import { useLocale } from 'next-intl';
 import { usePathname, useRouter } from 'next/navigation';
 import { useState, useTransition, useRef, useEffect } from 'react';
-import { FaChevronDown } from 'react-icons/fa6';
 import ReactCountryFlag from 'react-country-flag';
 
 export default function LanguageSwitcher() {