Remove deprecated image files and update image imports in antifp and eap pages for improved maintainability and consistency.

src/components/widgets/CompactCertifications.astro

@@ -5,6 +5,15 @@ import Button from '~/components/ui/Button.astro';
 import ImageModal from '~/components/ui/ImageModal.astro';
 import type { Testimonials as Props } from '~/types';
 import DefaultImage from '~/assets/images/default.png';
+import Image from '~/components/common/Image.astro';
+import SN_Logo2 from '~/assets/images/certificates/SN_Logo2.webp';
+import CertifiedNexthinkProfessionalinApplicationExperienceManagement from '~/assets/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp';
+import NexthinkAdministrator from '~/assets/images/certificates/NexthinkAdministrator.webp';
+import NexthinkAssociate from '~/assets/images/certificates/NexthinkAssociate.webp';
+import CrucialConversations_FMD_logo from '~/assets/images/certificates/CrucialConversations_FMD-logo.webp';
+import PCEP from '~/assets/images/certificates/PCEP.webp';
+import MicrosoftCertifiedAssociateBadge from '~/assets/images/certificates/microsoft-certified-associate-badge.webp';
+import MicrosoftCertifiedFundamentalsBadge from '~/assets/images/certificates/microsoft-certified-fundamentals-badge.webp';
 
 // Function to get the correct image path for a testimonial
 const getImagePath = (image: unknown) => {
@@ -47,39 +56,70 @@ const {
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
     {
       testimonials &&
-        testimonials.map(({ linkUrl, name, issueDate, description, image }) => (
-          <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
-            <div class="flex items-center mb-3">
-              <div
-                class="h-12 w-12 mr-3 flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center overflow-hidden cursor-pointer"
-                onclick={`window.openImageModal('${getImagePath(image)}', ${JSON.stringify(name || "Certification badge")})`}
-              >
-                <img
-                  src={getImagePath(image)}
-                  alt={getImageAlt(image, name || "Certification badge")}
-                  class="h-10 w-10 object-contain transition-transform duration-300 hover:scale-110"
-                />
+        testimonials.map(({ linkUrl, name, issueDate, description, image }) => {
+          let imageSrc = null;
+          switch (image.src) {
+            case '/images/certificates/SN_Logo2.webp':
+              imageSrc = SN_Logo2;
+              break;
+            case '/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp':
+              imageSrc = CertifiedNexthinkProfessionalinApplicationExperienceManagement;
+              break;
+            case '/images/certificates/NexthinkAdministrator.webp':
+              imageSrc = NexthinkAdministrator;
+              break;
+            case '/images/certificates/NexthinkAssociate.webp':
+              imageSrc = NexthinkAssociate;
+              break;
+            case '/images/certificates/CrucialConversations_FMD-logo.webp':
+              imageSrc = CrucialConversations_FMD_logo;
+              break;
+            case '/images/certificates/PCEP.webp':
+              imageSrc = PCEP;
+              break;
+            case '/images/certificates/microsoft-certified-associate-badge.webp':
+              imageSrc = MicrosoftCertifiedAssociateBadge;
+              break;
+            case '/images/certificates/microsoft-certified-fundamentals-badge.webp':
+              imageSrc = MicrosoftCertifiedFundamentalsBadge;
+              break;
+            default:
+              imageSrc = image.src;
+          }
+          return (
+            <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
+              <div class="flex items-center mb-3">
+                <div
+                  class="h-12 w-12 mr-3 flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center overflow-hidden cursor-pointer"
+                  onclick={`window.openImageModal('${typeof imageSrc === 'object' && imageSrc.src ? imageSrc.src : imageSrc}', ${JSON.stringify(name || "Certification badge")})`}
+                >
+                  <Image
+                    src={imageSrc}
+                    alt={name || "Certification badge"}
+                    class="h-10 w-10 object-contain transition-transform duration-300 hover:scale-110"
+                  />
+                </div>
+                <a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex-1">
+                  <div>
+                    {name && <p class="text-sm font-semibold line-clamp-2">{name}</p>}
+                    {issueDate && <p class="text-sm text-muted">{issueDate}</p>}
+                  </div>
+                </a>
               </div>
-              <a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex-1">
-                <div>
-                  {name && <p class="text-sm font-semibold line-clamp-2">{name}</p>}
-                  {issueDate && <p class="text-sm text-muted">{issueDate}</p>}
+              
+              <a href={linkUrl} target="_blank" rel="noopener noreferrer" class="block">
+                <div class="text-sm text-muted overflow-hidden">
+                  <div class="relative">
+                    <div class="max-h-[7.5rem] hover:max-h-[400px] transition-all duration-500 ease-cert overflow-hidden">
+                      {description}
+                    </div>
+                    <div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none hover:opacity-0 transition-opacity duration-500" style="transform: translateY(6px);"></div>
+                  </div>
                 </div>
               </a>
             </div>
-            
-            <a href={linkUrl} target="_blank" rel="noopener noreferrer" class="block">
-              <div class="text-sm text-muted overflow-hidden">
-                <div class="relative">
-                  <div class="max-h-[7.5rem] hover:max-h-[400px] transition-all duration-500 ease-cert overflow-hidden">
-                    {description}
-                  </div>
-                  <div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none hover:opacity-0 transition-opacity duration-500" style="transform: translateY(6px);"></div>
-                </div>
-              </div>
-            </a>
-          </div>
-        ))
+          );
+        })
     }
   </div>
 

src/pages/[lang]/antifp.astro

@@ -3,6 +3,8 @@ export const prerender = true;
 
 import Layout from '~/layouts/PageLayout.astro';
 import { getAntifpTranslation, supportedLanguages } from '~/i18n/translations.antifp';
+import Image from '~/components/common/Image.astro';
+import antifpSettingsImg from '~/assets/images/antifp-settings.png';
 
 export async function getStaticPaths() {
   return supportedLanguages.map((lang) => ({
@@ -34,7 +36,7 @@ const metadata = {
     </p>
 
     <figure class="mb-8">
-      <img src="/images/antifp-settings.png" alt="Screenshot of Anti-Fingerprinting Shield Plus settings panel with all privacy options enabled" class="rounded shadow-lg border border-gray-200 mx-auto" />
+      <Image src={antifpSettingsImg} alt="Screenshot of Anti-Fingerprinting Shield Plus settings panel with all privacy options enabled" class="rounded shadow-lg border border-gray-200 mx-auto" />
       <figcaption class="text-center text-gray-500 text-sm mt-2">This screenshot shows the settings panel for Anti-Fingerprinting Shield Plus, where all fingerprinting protection options are enabled.</figcaption>
     </figure>
 

src/pages/[lang]/eap.astro

@@ -3,6 +3,7 @@ export const prerender = true;
 
 import Layout from '~/layouts/PageLayout.astro';
 import { getEapTranslation, supportedLanguages } from '~/i18n/translations.eap';
+import Image from '~/components/common/Image.astro';
 
 export async function getStaticPaths() {
   return supportedLanguages.map((lang) => ({
@@ -35,7 +36,7 @@ const metadata = {
       ))}
     </ul>
     <figure class="mb-8">
-      <img src={eap.screenshots.mainImg} alt={eap.whatItDoes.screenshot} class="rounded shadow-lg border border-gray-200 mx-auto" />
+      <Image src={eap.screenshots.mainImg} alt={eap.whatItDoes.screenshot} class="rounded shadow-lg border border-gray-200 mx-auto" width={800} height={450} />
       <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.whatItDoes.screenshot}</figcaption>
     </figure>
 
@@ -109,11 +110,11 @@ const metadata = {
     <h2 class="text-2xl font-semibold mb-4">Screenshots</h2>
     <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
       <figure>
-        <img src={eap.screenshots.settingsImg} alt={eap.screenshots.settings} class="rounded shadow-lg border border-gray-200 mx-auto" />
+        <Image src={eap.screenshots.settingsImg} alt={eap.screenshots.settings} class="rounded shadow-lg border border-gray-200 mx-auto" width={800} height={450} />
         <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.screenshots.settings}</figcaption>
       </figure>
       <figure>
-        <img src={eap.screenshots.popupImg} alt={eap.screenshots.popup} class="rounded shadow-lg border border-gray-200 mx-auto" />
+        <Image src={eap.screenshots.popupImg} alt={eap.screenshots.popup} class="rounded shadow-lg border border-gray-200 mx-auto" width={800} height={450} />
         <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.screenshots.popup}</figcaption>
       </figure>
     </div>