Use router to navigate collective tabs

src/assets/variables.css

@@ -3,5 +3,6 @@
     --color-primary-lighter: hsl(220, 43%, 65%);
     --color-primary-focus-ring: hsl(220, 43%, 37%, 20%);
     --color-secondary: #57c18b;
+    --color-tertiary: #f05067;
     --color-on-surface: #022826;
 }

src/components/global/Header.vue

@@ -1,9 +1,9 @@
 <template>
-  <header :style="{ backgroundColor: pageColors[route.path] || defaultColor }">
+  <header :style="{ backgroundColor: pageColor }">
     <router-link to="/">
       <img class="logo-header" src="@/assets/img/logo.webp" width="167" height="25" alt="ecoCode logo" @click="closeMenu"/>
     </router-link>
-    <ul :style="{ backgroundColor: pageColors[route.path] || defaultColor }" :class="{ 'menu-open': isMenuOpen }">
+    <ul :style="{ backgroundColor: pageColor }" :class="{ 'menu-open': isMenuOpen }">
       <router-link to="/contributeur" @click="closeMenu">
         <img width="40" height="40" v-if="isContributeurPage" src="@/assets/img/icon/arrow-left-white.webp">
         <li :class="{ active: isContributeurPage }">Contributeur</li>
@@ -48,16 +48,18 @@ const closeMenu = () => {
 
 const isContributeurPage = computed(() => route.path === '/contributeur');
 const isEntreprisePage = computed(() => route.path === '/entreprise');
-const isTeamPage = computed(() => route.path === '/collectif');
-const isPage = computed(() => route.path === '/contributeur' || route.path === '/entreprise' || route.path === '/team');
-
-const pageColors: Record<string, string> = {
-  '/contributeur': '#529a75ff',
-  '/entreprise': '#4f65a0ff',
-  '/collectif': '#95353eff',
-};
-
-const defaultColor = '#3a4e72ff';
+const isTeamPage = computed(() => route.path.startsWith('/collectif'));
+
+const pageColor = computed(() => {
+  if (isContributeurPage.value) {
+    return '#529a75';
+  } else if (isEntreprisePage.value) {
+    return '#4f65a0';
+  } else if (isTeamPage.value) {
+    return '#95353e';
+  }
+  return '#3a4e72';
+});
 </script>
 
 <style lang="scss" scoped>

src/router/index.ts

@@ -3,7 +3,9 @@ import HomeView from '../views/Accueil/Home.vue'
 import Documentation from '../views/Accueil/Doc.vue'
 import ContributeurView from '../views/Page/contributeur/contributeur.vue'
 import EntrepriseView from '../views/Page/entreprise/entreprise.vue'
-import TeamView from '../views/Page/team/team.vue'
+import TeamView from '@/views/Page/team/Team.vue'
+import TeamMembers from '@/views/Page/team/TeamMembers.vue';
+import TeamPartnerOrganizations from '@/views/Page/team/TeamPartnerOrganizations.vue';
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -26,7 +28,12 @@ const router = createRouter({
     {
       path: '/collectif',
       name: 'collectif',
-      component: TeamView
+      component: TeamView,
+      children: [
+          { path: '', redirect: '/collectif/membres' },
+          { path: 'membres', name: 'collectif-membres', component: TeamMembers },
+          { path: 'organisations', name: 'collectif-organisations', component: TeamPartnerOrganizations },
+      ]
     },
     {
       path: '/Documentation',

src/views/Accueil/Home.vue

@@ -35,8 +35,8 @@
         subtitle="Quelques structures partenaires :">
       <PartnerOrganizationList :featured="true" />
       <div class="block-button-section-1">
-        <ButtonBlock typebutton="white" link="/collectif?tab=entreprise" text="Toutes les entreprises partenaires" />
-        <ButtonBlock typebutton="white" link="/collectif?tab=membre" text="Tous nos membres contributeurs" />
+        <ButtonBlock typebutton="white" link="/collectif/organisations" text="Toutes les entreprises partenaires" />
+        <ButtonBlock typebutton="white" link="/collectif/membres" text="Tous nos membres contributeurs" />
       </div>
     </TitleBox>
     <ContactForm />

src/views/Page/team/Team.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+
+<template>
+  <nav>
+    <router-link to="membres">Membres contributeurs</router-link>
+    <router-link to="organisations">Organisations partenaires</router-link>
+  </nav>
+  <router-view/>
+</template>
+
+<style lang="scss" scoped>
+nav {
+  background-color: var(--color-tertiary);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 3.5rem 0;
+  gap: 2rem;
+
+  > a {
+    opacity: 0.5;
+    text-align: center;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: 900;
+
+    &.router-link-active {
+      opacity: 1 !important;
+      text-decoration: underline;
+      text-underline-offset: 15px;
+    }
+  }
+
+  @media screen and (min-width: 796px) {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  @media screen and (min-width: 960px) {
+    gap: 8rem;
+
+    > a {
+      font-size: 2rem;
+    }
+  }
+}
+</style>

src/views/Page/team/TeamMembers.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import contributors from "@/assets/data/contributors.json";
+import coreMembers from "@/assets/data/core-members.json";
+import MemberList from "@/components/collective/MemberList.vue";
+import AppSection from "@/components/Shared/AppSection.vue";
+</script>
+
+<template>
+  <AppSection title="Core team" sub-title="L'équipe qui pilote ecoCode">
+    <MemberList :members="coreMembers"/>
+  </AppSection>
+
+  <AppSection title="Contributrices et contributeurs" background-color="grey">
+    <MemberList :members="contributors"/>
+  </AppSection>
+</template>

src/views/Page/team/TeamPartnerOrganizations.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import PartnerOrganizationList from '@/components/collective/PartnerOrganizationList.vue';
+import AppSection from '@/components/Shared/AppSection.vue';
+</script>
+
+<template>
+  <AppSection title="De nombreuses organisations s'impliquent sur ecoCode">
+    <PartnerOrganizationList :featured="false"/>
+  </AppSection>
+</template>
+
+<style lang="scss" scoped>
+.section {
+  margin-bottom: 50px;
+}
+</style>