fix: improved about page

apps/client/public/locales/en-US/about.json

@@ -1,5 +1,10 @@
 {
   "acknowledgements": "Thanks to the entire team responsible for the development and maintenance of GROMACS and Grace/Xmgr",
   "description": "Visual Dynamics is an open source tool that accelerates implementations and learning in the area of molecular dynamics simulation. Available for free and supported by all major web browsers. Visual Dynamics is powered by Flask and NextJS, both are free and open-source frameworks for web development.",
+  "maintainers": {
+    "title": "Maintainers",
+    "active": "Active",
+    "inactive": "Previous"
+  },
   "title": "About"
 }

apps/client/src/@types/about.d.ts

@@ -0,0 +1,7 @@
+interface Maintainer {
+  name: string;
+  link?: string;
+  active: boolean;
+  image?: string;
+  work?: ("idea" | "code" | "manuscript")[];
+}

apps/client/src/components/MaintainerCard/index.tsx

@@ -0,0 +1,59 @@
+import { Code, Lightbulb, Newspaper } from "lucide-react";
+import Link from "next/link";
+
+import { BlurImage } from "../BlurImage";
+
+interface MaintainerCardProps {
+  maintainer: Maintainer;
+}
+
+export function MaintainerCard({ maintainer }: MaintainerCardProps) {
+  const WorkIcon = {
+    idea: Lightbulb,
+    code: Code,
+    manuscript: Newspaper
+  };
+
+  return (
+    <Link
+      href={maintainer.link ?? "#"}
+      target={
+        maintainer.link && maintainer.link.startsWith("http")
+          ? "_blank"
+          : undefined
+      }
+      className="group p-2 flex gap-x-2 items-center rounded-md hover:bg-zinc-800/20 transition-all duration-500"
+      key={maintainer.name}
+    >
+      {maintainer.image ? (
+        <BlurImage
+          alt={maintainer.name}
+          className="h-14 w-14 rounded-full"
+          height={0}
+          width={0}
+          src={maintainer.image}
+          unoptimized
+        />
+      ) : null}
+      <div>
+        <p className="transition-all duration-500 text-primary-800 group-hover:text-primary-700">
+          {maintainer.name}
+        </p>
+        <div className="flex gap-1 flex-wrap">
+          {maintainer.work && maintainer.work.length > 0
+            ? maintainer.work.map((w) => {
+                const Icon = WorkIcon[w];
+
+                return (
+                  <Icon
+                    className="h-5 w-5"
+                    key={maintainer.name + w}
+                  />
+                );
+              })
+            : null}
+        </div>
+      </div>
+    </Link>
+  );
+}

apps/client/src/pages/about.tsx

@@ -1,57 +1,47 @@
-import { Code, Lightbulb, Newspaper } from "lucide-react";
-import Link from "next/link";
 import { useTranslation } from "next-i18next";
 
-import { BlurImage } from "@app/components/BlurImage";
 import { PageLayout } from "@app/components/Layout/Page";
+import { MaintainerCard } from "@app/components/MaintainerCard";
 import { withSSRTranslations } from "@app/hocs/withSSRTranslations";
 
 export const getServerSideProps = withSSRTranslations(undefined, {
   namespaces: ["about"]
 });
 
-interface Maintainer {
-  name: string;
-  link?: string;
-  active: boolean;
-  image?: string;
-  work?: ("idea" | "code" | "manuscript")[];
-}
-const WorkIcon = {
-  idea: Lightbulb,
-  code: Code,
-  manuscript: Newspaper
-};
-
 const maintainers: Maintainer[] = [
   {
     name: "Dr. Fernando Berton Zanchi",
     active: true,
+    image: "/images/maintainers/fernando.jpg",
     work: ["idea", "code", "manuscript"]
   },
   {
     name: "Dr. Rafael Andrade Caceres",
     active: true,
+    image: "/images/maintainers/rafael.jpg",
     work: ["idea", "manuscript"]
   },
   {
     name: "Ivo Henrique Provensi Vieira",
     link: "https://github.com/ivopr",
-    image: "https://avatars.githubusercontent.com/u/30270448?v=4",
+    image: "/images/maintainers/ivo.jpg",
     active: true,
     work: ["code"]
   },
   {
     name: "Eduardo Buganemi Botelho",
-    active: false
+    active: false,
+    work: ["code"]
   },
   {
-    name: " Thales Junior de Souza Gomes",
-    active: false
+    name: "Thales Junior de Souza Gomes",
+    active: false,
+    work: ["code"]
   },
   {
     name: "Bruno Lincon de Souza Bordin",
-    active: false
+    active: false,
+    work: ["code"]
   }
 ];
 
@@ -71,71 +61,43 @@ export default function About() {
         {t("about:acknowledgements")}
       </p>
 
-      <h3 className="text-xl uppercase font-bold text-primary-950">
-        {t("about:maintainers.title")}
-      </h3>
-      <h5 className="text-lg uppercase font-medium text-primary-900">
-        {t("about:maintainers.active")}
-      </h5>
-      <div className="flex gap-x-2 flex-wrap">
-        {maintainers
-          .filter((maintainer) => maintainer.active)
-          .map((maintainer) => (
-            <Link
-              href={maintainer.link ?? "#"}
-              target={
-                maintainer.link && maintainer.link.startsWith("http")
-                  ? "_blank"
-                  : undefined
-              }
-              className="group p-2 flex gap-x-2 items-center rounded-md hover:bg-zinc-800/20 transition-all duration-500"
-              key={maintainer.name}
-            >
-              {maintainer.image ? (
-                <BlurImage
-                  alt={maintainer.name}
-                  className="h-14 w-14 rounded-full"
-                  height={0}
-                  width={0}
-                  src={maintainer.image}
-                />
-              ) : null}
-              <div>
-                <p className="transition-all duration-500 text-primary-800 group-hover:text-primary-700">
-                  {maintainer.name}
-                </p>
-                <div className="flex gap-1 flex-wrap">
-                  {maintainer.work && maintainer.work.length > 0
-                    ? maintainer.work.map((w) => {
-                        const Icon = WorkIcon[w];
+      <div className="flex flex-col gap-y-4">
+        <h3 className="text-xl uppercase font-bold text-primary-950">
+          {t("about:maintainers.title")}
+        </h3>
 
-                        return (
-                          <Icon
-                            className="h-5 w-5"
-                            key={maintainer.name + w}
-                          />
-                        );
-                      })
-                    : null}
-                </div>
-              </div>
-            </Link>
-          ))}
-      </div>
+        <div className="flex flex-col gap-y-2">
+          <h5 className="text-lg uppercase font-medium text-primary-900">
+            {t("about:maintainers.active")}
+          </h5>
+          <div className="flex gap-x-2 flex-wrap">
+            {maintainers
+              .filter((maintainer) => maintainer.active)
+              .map((maintainer) => (
+                <MaintainerCard
+                  key={maintainer.name}
+                  maintainer={maintainer}
+                />
+              ))}
+          </div>
+        </div>
 
-      <h5 className="text-lg uppercase font-medium text-primary-900">
-        {t("about:maintainers.inactive")}
-      </h5>
-      {maintainers
-        .filter((maintainer) => !maintainer.active)
-        .map((maintainer) => (
-          <div
-            className="group p-2 rounded-md hover:bg-zinc-800/20 transition-all duration-500"
-            key={maintainer.name}
-          >
-            <p>{maintainer.name}</p>
+        <div className="flex flex-col gap-y-2">
+          <h5 className="text-lg uppercase font-medium text-primary-900">
+            {t("about:maintainers.inactive")}
+          </h5>
+          <div className="flex gap-x-2 flex-wrap">
+            {maintainers
+              .filter((maintainer) => !maintainer.active)
+              .map((maintainer) => (
+                <MaintainerCard
+                  key={maintainer.name}
+                  maintainer={maintainer}
+                />
+              ))}
           </div>
-        ))}
+        </div>
+      </div>
     </PageLayout>
   );
 }