Feature/about

front/src/app/equipo/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next";
+import { EquipoPod } from "@/pods/equipo";
+
+export const metadata: Metadata = {
+  title: "Equipo - InfoEmbalses",
+};
+
+const EquipoPage = () => {
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-8">
+      <div className="flex flex-col items-center gap-6">
+        <img src="/images/logo.svg" alt="InfoEmbalses logo" className="w-64" />
+        <p className="text-xl font-semibold">InfoEmbalses Versión Beta</p>
+        <h1 className="text-3xl font-bold">Equipo de desarrollo</h1>
+        <EquipoPod />
+      </div>
+    </div>
+  );
+};
+
+export default EquipoPage;

front/src/layouts/footer.component.tsx

@@ -7,12 +7,20 @@ export const FooterComponent: FC = () => {
     <footer className="bg-base-100">
       <div className="border-accent flex flex-col items-center gap-2 border-t-2 p-3">
         <div className="flex flex-col items-center gap-2 pb-2.5">
-          <Link
-            href="/embalse-provincia"
-            className="link-accessible text-[15px] leading-none font-normal"
-          >
-            Embalses por provincias
-          </Link>
+          <div className="flex flex-wrap justify-center gap-x-3 gap-y-1">
+            <Link
+              href="/embalse-provincia"
+              className="link-accessible text-[15px] leading-none font-normal"
+            >
+              Embalses por provincias
+            </Link>
+            <Link
+              href="/equipo"
+              className="link-accessible text-[15px] leading-none font-normal"
+            >
+              Equipo
+            </Link>
+          </div>
 
           <div className="flex flex-wrap justify-center gap-x-3 gap-y-1">
             <Link

front/src/pods/equipo/api/equipo.api-model.ts

@@ -0,0 +1,10 @@
+import type { Media } from "@content-island/api-client";
+
+export interface Developer {
+  id: string;
+  language: "es";
+  lastUpdate: string;
+  fullname: string;
+  picture: Media;
+  linkedin: string;
+}

front/src/pods/equipo/api/equipo.api.ts

@@ -0,0 +1,20 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+import type { Developer } from "./equipo.api-model";
+import { contentIslandClient } from "@/lib";
+
+export const getDeveloperListCached = unstable_cache(
+  async (): Promise<Developer[]> => {
+    try {
+      return await contentIslandClient.getContentList<Developer>({
+        contentType: "developer",
+        language: "es",
+      });
+    } catch (error) {
+      console.warn("Warning: developer list not available");
+      return [];
+    }
+  },
+  ["developer-list"],
+  { revalidate: 60 }
+);

front/src/pods/equipo/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./equipo.api";
+export type { Developer } from "./equipo.api-model";

front/src/pods/equipo/equipo.component.tsx

@@ -0,0 +1,28 @@
+import type { Developer } from "./api";
+
+interface Props {
+  developers: Developer[];
+}
+
+export const EquipoComponent: React.FC<Props> = ({ developers }) => {
+  return (
+    <div className="flex flex-wrap justify-center gap-8">
+      {developers.map((dev) => (
+        <a
+          key={dev.id}
+          href={dev.linkedin}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center gap-2"
+        >
+          <img
+            src={dev.picture.url}
+            alt={dev.fullname}
+            className="h-24 w-24 rounded-full border-2 border-accent object-cover"
+          />
+          <span className="text-sm font-medium">{dev.fullname}</span>
+        </a>
+      ))}
+    </div>
+  );
+};

front/src/pods/equipo/equipo.pod.tsx

@@ -0,0 +1,7 @@
+import { getDeveloperListCached } from "./api";
+import { EquipoComponent } from "./equipo.component";
+
+export const EquipoPod: React.FC = async () => {
+  const developers = await getDeveloperListCached();
+  return <EquipoComponent developers={developers} />;
+};

front/src/pods/equipo/index.ts

@@ -0,0 +1 @@
+export { EquipoPod } from "./equipo.pod";