update images

web/app/docs/about/contributors/page.tsx

@@ -1,4 +1,4 @@
-import { Users, FlaskRound } from 'lucide-react';
+import { Users, FlaskRound, Youtube } from "lucide-react"
 
 export const metadata = {
   title: "ProxMenux Contributors – Meet the Team Behind ProxMenux",
@@ -10,7 +10,7 @@ export const metadata = {
     url: "https://macrimi.github.io/ProxMenux/docs/about/contributors",
     images: [
       {
-        url: "https://macrimi.github.io/ProxMenux/contributors-image.png", 
+        url: "https://macrimi.github.io/ProxMenux/contributors-image.png",
         width: 1200,
         height: 630,
         alt: "ProxMenux Contributors",
@@ -25,47 +25,58 @@ export const metadata = {
   },
 };
 
+
 const contributors = [
   {
-    name: 'MALOW',
-    role: 'Testing',
-    avatar: 'https://macrimi.github.io/ProxMenux/avatars/malow.png'
+    name: "MALOW",
+    role: "Testing",
+    avatar: "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/avatars/malow.png",
   },
   {
-    name: 'Segarra',
-    role: 'Testing',
-    avatar: 'https://macrimi.github.io/ProxMenux/avatars/segarra.png'
+    name: "Segarra",
+    role: "Testing",
+    avatar: "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/avatars/segarra.png",
   },
   {
-    name: 'Aprilia',
-    role: 'Testing',
-    avatar: 'https://macrimi.github.io/ProxMenux/avatars/aprilia.png'
-  }
-];
+    name: "Aprilia",
+    role: "Testing",
+    avatar: "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/avatars/aprilia.png",
+  },
+  {
+    name: "Jonatan Castro",
+    role: "Testing and reviewer",
+    avatar: "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/avatars/jonatancastro.png",
+    youtubeUrl: "https://www.youtube.com/@JonatanCastro",
+  },
+  {
+    name: "Kamunhas",
+    role: "Testing",
+    avatar: "https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/avatars/Kamunhas.png",
+  },
+]
 
 export default function Contributors() {
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="flex items-center mb-6">
+      {/* 🔹 Icon + Title */}
+      <div className="flex items-center justify-center mb-6">
         <Users className="h-8 w-8 mr-2 text-blue-500" />
-        <h1 className="text-3xl font-bold">Contributors</h1>
+        <h1 className="text-3xl font-bold text-black">Contributors</h1>
       </div>
 
-
+      {/* 🔹 Description */}
       <p className="text-lg text-black mb-4 text-left">
         The ProxMenux project grows and thrives thanks to the contribution of its collaborators.
       </p>
-      <p className="text-base text-black mb-20">
-        This is the well-deserved recognition of their work:
-      </p>
-
+      <p className="text-base text-black mb-20">This is the well-deserved recognition of their work:</p>
 
+      {/* 🔹 Contributors List */}
       <div className="flex justify-center gap-6 flex-wrap">
         {contributors.map((contributor) => (
           <div key={contributor.name} className="text-center">
             <div className="relative inline-block">
               <img
-                src={contributor.avatar}
+                src={contributor.avatar || "/placeholder.svg"}
                 alt={contributor.name}
                 className="w-20 h-20 rounded-full border-2 border-gray-300 object-cover"
               />
@@ -75,15 +86,26 @@ export default function Contributors() {
             </div>
             <h3 className="text-lg font-bold text-black mt-2">{contributor.name}</h3>
             <p className="text-sm text-black">{contributor.role}</p>
+            {contributor.youtubeUrl && (
+              <a
+                href={contributor.youtubeUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center mt-1 text-red-600 hover:text-red-700"
+              >
+                <Youtube className="h-4 w-4 mr-1" />
+                <span className="text-xs">YouTube</span>
+              </a>
+            )}
           </div>
         ))}
       </div>
 
-
+      {/* 🔹 Call to Action */}
       <p className="mt-20 text-base text-black text-left">
-        Would you like to contribute? You can collaborate as a <strong>tester</strong>, <strong>developer</strong>, <strong>designer</strong>, or by sharing <strong>ideas and suggestions</strong>. Any contribution is welcome!
+        Would you like to contribute? You can collaborate as a <strong>tester</strong>, <strong>developer</strong>,{" "}
+        <strong>designer</strong>, or by sharing <strong>ideas and suggestions</strong>. Any contribution is welcome!
       </p>
     </div>
-  );
+  )
 }
-