Fix ESLint: unescaped entities, unused vars, use Next Image in Logo/Navbar

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: AdamKaniasty

src/app/join-us/page.tsx

@@ -126,11 +126,11 @@ export default function JoinUsPage() {
               <div className="bg-[#001f33] px-5 lg:px-[120px] py-10 md:py-16 max-w-[1200px] mx-auto">
                 <div className="flex flex-col gap-4 md:gap-6 items-start text-white">
                   <h2 className="font-sans text-2xl md:text-[36px] font-normal leading-[1.1] tracking-[-0.72px]">
-                    Don't see a position that fits?
+                    Don&apos;t see a position that fits?
                   </h2>
                   <p className="font-sans text-base md:text-lg font-normal leading-[1.4] tracking-[-0.18px] max-w-[600px]">
-                    We're always interested in hearing from exceptional
-                    candidates. If you're passionate about explainable AI and
+                    We&apos;re always interested in hearing from exceptional
+                    candidates. If you&apos;re passionate about explainable AI and
                     want to contribute to our mission, feel free to reach out.
                   </p>
                   <a

src/app/news/[id]/not-found.tsx

@@ -13,7 +13,7 @@ export default function NotFound() {
           Article Not Found
         </h1>
         <p className="font-sans text-lg md:text-xl font-normal leading-[1.4] text-[#001f33] mb-8 text-center max-w-[600px]">
-          The news article you're looking for doesn't exist or has been removed.
+          The news article you&apos;re looking for doesn&apos;t exist or has been removed.
         </p>
         <Link
           href="/news"

src/app/page.tsx

@@ -1,6 +1,5 @@
 import Navbar from "@/components/Navbar";
 import Hero from "@/components/Hero";
-import Section from "@/components/Section";
 import Footer from "@/components/Footer";
 import Image from "next/image";
 import MissionSection from "@/components/MissionSection";

src/app/projects/[id]/not-found.tsx

@@ -12,7 +12,7 @@ export default function NotFound() {
           Project Not Found
         </h1>
         <p className="font-sans text-lg text-[#001f33]">
-          The project you're looking for doesn't exist.
+          The project you&apos;re looking for doesn&apos;t exist.
         </p>
         <Link
           href="/projects"

src/components/ContactForm.tsx

@@ -42,7 +42,7 @@ export default function ContactForm() {
         message: "Thank you for your message! We'll get back to you soon.",
       });
       setFormData({ name: "", email: "", subject: "", message: "" });
-    } catch (error) {
+    } catch {
       setSubmitStatus({
         type: "error",
         message: "Something went wrong. Please try again later.",

src/components/Logo.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 interface LogoProps {
   className?: string;
   variant?: "default" | "white";
@@ -12,44 +14,53 @@ export default function Logo({ className = "", variant = "default", variantMobil
       {/* Mobile: show short logo if variantMobile is specified */}
       {variantMobile === "short" && (
         <>
-          <div className={`md:hidden relative flex items-center`} style={{ height: "20px" }}>
-            <img
+          <div className={`md:hidden relative flex items-center`} style={{ height: "20px", width: "92.855px" }}>
+            <Image
               src={shortLogoSrc}
               alt="CCAI Logo"
-              className={`${variant === "white" ? "brightness-0 invert" : ""}`}
-              style={{ height: "20px", width: "92.855px", display: "block" }}
+              fill
+              className={`object-contain ${variant === "white" ? "brightness-0 invert" : ""}`}
             />
           </div>
           {/* Desktop: show full logo with all parts */}
           <div className={`hidden md:flex relative items-center gap-[6px]`} style={{ height: "22.527px" }}>
-            <img
-              src="/images/logo-full-part1.svg"
-              alt="CCAI"
-              style={{ height: "22.527px", width: "104.589px", display: "block" }}
-            />
-            <div className="flex flex-col justify-center" style={{ gap: "3px" }}>
-              <img
-                src="/images/logo-full-part2.svg"
-                alt="Centre for Credible"
-                style={{ height: "7px", width: "76.3px", display: "block" }}
-              />
-              <img
-                src="/images/logo-full-part3.svg"
-                alt="Artificial Intelligence"
-                style={{ height: "9px", width: "90px", display: "block" }}
+            <div className="relative" style={{ height: "22.527px", width: "104.589px" }}>
+              <Image
+                src="/images/logo-full-part1.svg"
+                alt="CCAI"
+                fill
+                className="object-contain"
               />
             </div>
+            <div className="flex flex-col justify-center" style={{ gap: "3px" }}>
+              <div className="relative" style={{ height: "7px", width: "76.3px" }}>
+                <Image
+                  src="/images/logo-full-part2.svg"
+                  alt="Centre for Credible"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+              <div className="relative" style={{ height: "9px", width: "90px" }}>
+                <Image
+                  src="/images/logo-full-part3.svg"
+                  alt="Artificial Intelligence"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+            </div>
           </div>
         </>
       )}
       {/* Default: show the short logo */}
       {!variantMobile && (
-        <div className={`relative flex items-center ${className || "h-8"}`}>
-          <img
+        <div className={`relative flex items-center ${className || "h-8"}`} style={{ width: "92.855px" }}>
+          <Image
             src={shortLogoSrc}
             alt="CCAI Logo"
-            className={`h-full w-auto object-contain ${variant === "white" ? "brightness-0 invert" : ""}`}
-            style={{ display: "block" }}
+            fill
+            className={`object-contain ${variant === "white" ? "brightness-0 invert" : ""}`}
           />
         </div>
       )}

src/components/MissionSection.tsx

@@ -27,16 +27,16 @@ export default function MissionSection() {
         </div>
         <div className="font-sans text-base font-normal leading-[1.6] tracking-[-0.16px] text-[#001f33] w-full">
           <p className="mb-0">
-            In a world dominated by algorithms that operate like "black boxes" — so complex that even their creators can't fully explain how or why
+            In a world dominated by algorithms that operate like &quot;black boxes&quot; — so complex that even their creators can&apos;t fully explain how or why
             they make decisions — the Centre for Credible AI (CCAI) was founded.
-            This is a centre that isn't afraid to question prevailing paradigms,
+            This is a centre that isn&apos;t afraid to question prevailing paradigms,
             with a clear mission: to make artificial intelligence truly
             verifiable, explainable, and controllable.
           </p>
           <p>
             We specialize in Explainable Artificial Intelligence (XAI) — a
             field that keeps asking questions where most have already accepted
-            the answers. We're not just interested in building bigger and faster
+            the answers. We&apos;re not just interested in building bigger and faster
             models. We care about whether they can be understood and improved —
             because understanding is the foundation of trust, and trust is the
             prerequisite for progress.

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { NavigationItem } from "@/types";
 import { useState, useEffect } from "react";
 import { socialLinks } from "@/constants/navigation";
@@ -78,11 +79,9 @@ function ArrowRightIcon({ className }: { className?: string }) {
 
 export default function Navbar({ items, activeItem }: NavbarProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768);
       if (window.innerWidth >= 768) {
         setIsMobileMenuOpen(false);
       }
@@ -108,11 +107,12 @@ export default function Navbar({ items, activeItem }: NavbarProps) {
     <>
       <nav className="fixed top-0 left-0 right-0 z-50 border-b-[0.5px] border-[#a3a3a3] bg-white">
         <div className="mx-auto flex max-w-[1440px] items-center justify-between px-5 lg:px-[120px] py-0 h-[48px] md:h-[64px]">
-          <Link href="/" className="hover:opacity-80 transition-opacity flex items-center">
-            <img 
-              src="/images/Logo-hor.svg" 
-              alt="CCAI Logo" 
-              className="h-[20px] md:h-[22.527px] w-auto object-contain"
+          <Link href="/" className="hover:opacity-80 transition-opacity flex items-center h-[20px] md:h-[22.527px] relative w-[120px] md:w-[140px]">
+            <Image
+              src="/images/Logo-hor.svg"
+              alt="CCAI Logo"
+              fill
+              className="object-contain object-left"
             />
           </Link>
           {/* Desktop Navigation */}
@@ -148,11 +148,12 @@ export default function Navbar({ items, activeItem }: NavbarProps) {
         <div className="fixed inset-0 z-[100] bg-[#001f33] flex flex-col">
           {/* Mobile Menu Header */}
           <div className="flex items-center justify-between px-5 py-5 h-[48px] border-b border-[rgba(255,255,255,0.2)] flex-shrink-0">
-            <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
-              <img 
-                src="/images/Logo-hor.svg" 
-                alt="CCAI Logo" 
-                className="h-[20px] w-auto object-contain brightness-0 invert"
+            <Link href="/" onClick={() => setIsMobileMenuOpen(false)} className="relative h-[20px] w-[120px] block">
+              <Image
+                src="/images/Logo-hor.svg"
+                alt="CCAI Logo"
+                fill
+                className="object-contain object-left brightness-0 invert"
               />
             </Link>
             <button

src/components/PartnerSection.tsx

@@ -26,10 +26,10 @@ export default function PartnerSection() {
           <div className="flex flex-col gap-[10px] items-start w-full">
             <p className="font-sans text-base font-normal leading-[1.6] tracking-[-0.16px] text-[#001f33]">
               The Fraunhofer-Gesellschaft, headquartered in Germany, is one of
-              the world's leading organizations for applied research. It plays a
+              the world&apos;s leading organizations for applied research. It plays a
               major role in innovation by prioritizing research on cutting-edge
               technologies and the transfer of results to industry to strengthen
-              Germany's industrial base and for the benefit of society as a
+              Germany&apos;s industrial base and for the benefit of society as a
               whole. Since its founding as a nonprofit organization in 1949,
               Fraunhofer has held a unique position in the German research and
               innovation ecosystem.

src/components/VisionSection.tsx

@@ -33,14 +33,14 @@ export default function VisionSection() {
             this technological mediocrity. Our ambition is to expose the
             internal logic of such systems, highlight their limitations, and
             provide real tools for control. To us, explainability is not a
-            "feature" — it's a means to improve models and a gateway to new
+            "feature" — it's a means to improve models and a gateway to new
             scientific knowledge.
           </p>
           <p>
             Our specialization is in combining explainability and controlability
             of AI systems used in high-stakes, socially responsible domains —
-            such as medicine, education, and bioinformatics. Where prediction
-            alone isn't enough, and decisions must be grounded in knowledge that
+            such as medicine, education, and bioinformatics.             Where prediction
+            alone isn&apos;t enough, and decisions must be grounded in knowledge that
             can be trusted.
           </p>
         </div>