From a0edb7cfd6c00e69d5262c08d739845fbb220af2 Mon Sep 17 00:00:00 2001
From: rita cachaldora <ritacachaldorapereira@gmail.com>
Date: Sat, 16 Nov 2024 19:20:43 +0000
Subject: [PATCH 1/2] first try at setting grids and titles

---
 src/routes/(app)/team/+page.svelte            | 583 ++++++++++++++++++
 .../_components/team-member-hexagon.svelte    |  26 +-
 2 files changed, 597 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/(app)/team/+page.svelte

diff --git a/src/routes/(app)/team/+page.svelte b/src/routes/(app)/team/+page.svelte
new file mode 100644
index 0000000..dc293ec
--- /dev/null
+++ b/src/routes/(app)/team/+page.svelte
@@ -0,0 +1,583 @@
+<script lang="ts">
+  import { Icon } from 'svelte-icons-pack';
+  import TeamMemberHexagon from './_components/team-member-hexagon.svelte'; // Caminho para o componente
+  import type { TeamMember } from '@/types/team-member';
+  import HexagonGrid from '@/lib/components/hexagons/hexagon-grid.svelte';
+
+  const boardMembers: TeamMember[] = [
+ 
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Presidente',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Presidente',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    ];
+
+  const teamMembers: TeamMember[] = [
+ 
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    }
+    ];
+
+    const recruitMembers: TeamMember[] = [
+ 
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    }
+    ];
+
+
+    const alumniMembers: TeamMember[] = [
+ 
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    },
+    {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    }
+    ];
+
+</script>
+
+<section class="flex flex-col justify-center gap-32">
+  <section class="mb-4 flex flex-col text-center font-raleway text-white">
+    <h1 class="text-3xl font-bold">&lt; Equipa /&gt;</h1>
+  </section>
+
+  <section class="flex flex-col justify-center items-center">
+    <div class="justify-center max-w-5xl">
+        <div class="grid grid-cols-5 w-full mb-6">   
+            <div class="col-span-1"></div>
+            <h2 class="text-3xl font-bold pl-4 col-span-1 place-self-center">Direção</h2>
+            <div class="col-span-1"></div>
+        </div>
+        <HexagonGrid
+            items={boardMembers}
+            cols={5}
+            gap="small"
+            orientation="horizontal"
+            component={TeamMemberHexagon}
+            class=""
+        />
+    </div>
+    
+  </section>
+
+  <section class="flex flex-col justify-center items-center">
+    <div class="justify-center max-w-5xl">
+        <div class="grid grid-cols-5 w-full mb-6">   
+            <div class="col-span-3"></div>
+            <h2 class="text-3xl font-bold col-span-1 pr-4 place-self-center">Membros</h2>
+            <div class="col-span-1"></div>
+        </div>
+        <HexagonGrid
+            items={teamMembers}
+            cols={5}
+            gap="small"
+            orientation="horizontal"
+            component={TeamMemberHexagon}
+            class=""
+        />
+    </div>
+    
+  </section>  
+
+  <section class="flex flex-col justify-center items-center">
+    <div class="justify-center max-w-5xl">
+        <div class="grid grid-cols-5 w-full mb-6">   
+            <div class="col-span-1"></div>
+            <h2 class="text-3xl font-bold pl-4 col-span-1 place-self-center">Recrutas</h2>
+            <div class="col-span-1"></div>
+        </div>
+        <HexagonGrid
+            items={recruitMembers}
+            cols={5}
+            gap="small"
+            orientation="horizontal"
+            component={TeamMemberHexagon}
+            class=""
+        />
+    </div>
+    
+  </section>
+
+    <section class="flex flex-col justify-center items-center">
+        <div class="justify-center max-w-5xl">
+            <div class="grid grid-cols-5 w-full mb-6">   
+                <div class="col-span-3"></div>
+                <h2 class="text-3xl font-bold col-span-1 pr-4 place-self-center">Alumni</h2>
+                <div class="col-span-1"></div>
+            </div>
+            <HexagonGrid
+                items={alumniMembers}
+                cols={5}
+                gap="small"
+                orientation="horizontal"
+                component={TeamMemberHexagon}
+                class=""
+            />
+        </div>
+        
+    </section>  
+
+  
+</section>
+
diff --git a/src/routes/(app)/team/_components/team-member-hexagon.svelte b/src/routes/(app)/team/_components/team-member-hexagon.svelte
index b1d5d69..a9524ad 100644
--- a/src/routes/(app)/team/_components/team-member-hexagon.svelte
+++ b/src/routes/(app)/team/_components/team-member-hexagon.svelte
@@ -73,43 +73,45 @@
   >
     <div
       data-testid="container"
-      class="container absolute bottom-0 z-20 w-full px-4 duration-500 group-hover:bottom-1/2 group-hover:translate-y-1/3"
+      class="container absolute bottom-0 z-20 w-full px-4 duration-1000 group-hover:bottom-1/2 group-hover:translate-y-1/3"
     >
       <p
-        class="mx-auto w-[70%] text-center text-sm font-bold leading-tight text-gray-100 transition-all sm:text-sm md:text-base lg:text-lg xl:text-xl"
+        class="mx-auto w-[70%] self-center text-center text-sm font-bold leading-tight text-gray-100 transition-all sm:text-sm md:text-base lg:text-lg xl:text-xl"
       >
         {teamMember.name}
       </p>
       <p
         data-testid="role"
-        class="full-opacity mx-auto text-center text-xs leading-tight text-gray-100 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
+        class="full-opacity mx-auto text-center text-xs leading-tight text-gray-100 hidden opacity-0 transition-all duration-1000 delay-1000 ease-in-out group-hover:opacity-100 group-hover:block  sm:text-xs md:text-sm lg:text-base xl:text-lg"
       >
-        {teamMember.role}
-      </p>
+        {#if teamMember.role}
+          {teamMember.role}
+        {/if}
+      </p>      
       <div class="relative mt-1">
         <div class="absolute flex w-full justify-center gap-1 md:gap-2">
           {#if teamMember.linkedin}
             <a
               href={teamMember.linkedin}
-              class="full-opacity h-6 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
+              class="full-opacity h-6 flex items-center justify-center opacity-0 transition-all duration-1000 delay-300 ease-in-out group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
               aria-label="{teamMember.name}'s LinkedIn"
             >
-              <Icon src={Icons.Linkedin} color="white" size="100%" /></a
+              <Icon src={Icons.Linkedin} color="white" size="80%" /></a
             >
           {/if}
           {#if teamMember.gitHub}
             <a
               href={teamMember.gitHub}
-              class="full-opacity h-6 opacity-0 transition-all duration-500 ease-out group-hover:static group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
+              class="full-opacity h-6 flex items-center justify-center opacity-0 transition-all duration-1000 delay-300 ease-in-out group-hover:static group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
               aria-label="{teamMember.name}'s GitHub"
-              ><Icon src={Icons.Github} color="white" size="100%" /></a
+              ><Icon src={Icons.Github} color="white" size="80%" /></a
             >
           {/if}
           {#if teamMember.websites}
             {#each teamMember.websites as customWebsite}
               <a
                 href={customWebsite.url}
-                class="full-opacity h-5 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
+                class="full-opacity h-5 flex items-center justify-center opacity-0 transition-all duration-1000 delay-300 ease-in-out group-hover:opacity-100 sm:h-6 md:h-7 lg:h-8 xl:h-9"
                 aria-label="{teamMember.name}'s custom website"
               >
                 {#if customWebsite.iconPath}
@@ -119,7 +121,7 @@
                     class="icon h-full w-full object-cover"
                   />
                 {:else}
-                  <Icon src={Icons.Globe} color="white" size="100%" />
+                  <Icon src={Icons.Globe} color="white" size="80%" />
                 {/if}
               </a>
             {/each}
@@ -128,7 +130,7 @@
       </div>
     </div>
     <div
-      class="variable-opacity absolute inset-0 z-10 bg-black text-lg opacity-0 transition-opacity duration-500 group-hover:opacity-30"
+      class="variable-opacity absolute inset-0 z-10 bg-black text-lg opacity-0 transition-opacity duration-1000 group-hover:opacity-30"
     />
     <img
       src={teamMember.photo ? teamMember.photo : 'images/default_profile_pic.png'}

From d7fe00f1b9879fd342772d945c497b92b6661bc3 Mon Sep 17 00:00:00 2001
From: rita cachaldora <ritacachaldorapereira@gmail.com>
Date: Sat, 16 Nov 2024 19:20:43 +0000
Subject: [PATCH 2/2] grid and title mostly responsive

---
 src/routes/(app)/team/+page.svelte | 55 ++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/routes/(app)/team/+page.svelte b/src/routes/(app)/team/+page.svelte
index dc293ec..b3b4d03 100644
--- a/src/routes/(app)/team/+page.svelte
+++ b/src/routes/(app)/team/+page.svelte
@@ -3,6 +3,21 @@
   import TeamMemberHexagon from './_components/team-member-hexagon.svelte'; // Caminho para o componente
   import type { TeamMember } from '@/types/team-member';
   import HexagonGrid from '@/lib/components/hexagons/hexagon-grid.svelte';
+  import { onMount } from 'svelte';
+  let isSmallScreen = false;
+  
+  const checkScreenSize = () => {
+    isSmallScreen = window.innerWidth < 768; // Tailwind's `md` breakpoint
+  };
+    
+    onMount(() => {
+        checkScreenSize(); // Check screen size on mount
+        window.addEventListener('resize', checkScreenSize); // Update on resize
+
+        return () => {
+            window.removeEventListener('resize', checkScreenSize); // Cleanup
+        };
+    });
 
   const boardMembers: TeamMember[] = [
  
@@ -495,6 +510,7 @@
     }
     ];
 
+
 </script>
 
 <section class="flex flex-col justify-center gap-32">
@@ -502,24 +518,43 @@
     <h1 class="text-3xl font-bold">&lt; Equipa /&gt;</h1>
   </section>
 
-  <section class="flex flex-col justify-center items-center">
-    <div class="justify-center max-w-5xl">
-        <div class="grid grid-cols-5 w-full mb-6">   
-            <div class="col-span-1"></div>
-            <h2 class="text-3xl font-bold pl-4 col-span-1 place-self-center">Direção</h2>
-            <div class="col-span-1"></div>
+<section class="flex flex-col justify-center items-center">
+    <div class="max-w-5xl w-full p-6">
+        <div class=" w-full mb-6 items-center {isSmallScreen ? 'justify-center' : 'grid grid-cols-5'}">
+            {#if !isSmallScreen}
+                <div class="hidden md:block md:col-span-1"></div>
+            {/if}
+            <h2
+                class="text-3xl font-bold text-center"
+            >
+                Direção
+            </h2>
+            {#if !isSmallScreen}
+                <div class="hidden md:block md:col-span-3"></div>
+            {/if}
         </div>
-        <HexagonGrid
+
+        {#if isSmallScreen}
+          <HexagonGrid
+            items={boardMembers}
+            cols={2}
+            gap="small"
+            orientation="horizontal"
+            component={TeamMemberHexagon}
+            class=""
+          />
+        {:else}
+          <HexagonGrid
             items={boardMembers}
             cols={5}
             gap="small"
             orientation="horizontal"
             component={TeamMemberHexagon}
             class=""
-        />
+          />
+        {/if}
     </div>
-    
-  </section>
+</section>
 
   <section class="flex flex-col justify-center items-center">
     <div class="justify-center max-w-5xl">