From 8eb70013474f46073e593ed0d399a5511b429d60 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Fri, 3 May 2024 00:38:09 +0200
Subject: [PATCH] Standardize design of sections

---
 src/assets/main.css                          |   4 +-
 src/assets/variables.css                     |   4 +
 src/components/global/Hero.vue               |  82 ++++++++
 src/components/global/Title.vue              | 187 -------------------
 src/views/Accueil/Home.vue                   | 104 ++++++-----
 src/views/Accueil/scss/style.scss            | 108 +++++------
 src/views/Page/contributeur/contributeur.vue |  46 ++---
 src/views/Page/entreprise/entreprise.vue     |  58 +++---
 src/views/Page/team/Team.vue                 |   3 +-
 9 files changed, 252 insertions(+), 344 deletions(-)
 create mode 100644 src/components/global/Hero.vue
 delete mode 100644 src/components/global/Title.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index a736e7f..5320bfb 100755
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -33,7 +33,7 @@ p {
     font-weight: 900;
     text-align: center;
     margin: 0 1rem;
-    max-width: 780px;
+    max-width: 1200px;
     color: var(--color-primary);
 }
 
@@ -42,7 +42,7 @@ p {
     font-weight: 900;
     text-align: center;
     margin: 0 1rem;
-    max-width: 780px;
+    max-width: 1050px;
     color: var(--color-secondary);
 }
 
diff --git a/src/assets/variables.css b/src/assets/variables.css
index 6a82942..ac7153f 100644
--- a/src/assets/variables.css
+++ b/src/assets/variables.css
@@ -5,7 +5,11 @@
     --color-primary-lighter: hsl(220, 43%, 65%);
     --color-primary-focus-ring: hsl(220, 43%, 37%, 20%);
     --color-secondary: #57c18b;
+    --color-on-secondary: #ffffff;
     --color-tertiary: #f05067;
+    --color-on-tertiary: #ffffff;
+    --color-quaternary: #5374c9;
+    --color-on-quaternary: #ffffff;
 
     --color-on-surface: #022826;
     --color-card-background: white;
diff --git a/src/components/global/Hero.vue b/src/components/global/Hero.vue
new file mode 100644
index 0000000..cd679b5
--- /dev/null
+++ b/src/components/global/Hero.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+defineProps<{
+  variant: 'primary' | 'secondary' | 'quaternary';
+  title: string;
+  subTitle: string;
+}>()
+</script>
+
+<template>
+  <div class="hero-container" :class="variant">
+    <slot></slot>
+    <h1>{{ title }}</h1>
+    <h2>{{ subTitle }}</h2>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.hero-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 3rem;
+  padding: 4rem;
+  text-align: center;
+
+  &.primary {
+    background-color: var(--color-primary);
+    color: var(--color-on-primary);
+  }
+
+  &.secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-on-secondary);
+  }
+
+  &.quaternary {
+    background-color: var(--color-quaternary);
+    color: var(--color-on-quaternary);
+  }
+
+  h1 {
+    max-width: 1200px;
+    font-size: 2.5rem;
+    font-weight: 900;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  .actions {
+    display: flex;
+    gap: 4rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 2rem 1rem;
+    gap: 2rem;
+
+    h1 {
+      font-size: 1.5rem;
+    }
+
+    h2 {
+      font-size: 1rem;
+    }
+
+    .actions {
+      flex-direction: column;
+      gap: 1.2rem;
+    }
+  }
+}
+</style>
diff --git a/src/components/global/Title.vue b/src/components/global/Title.vue
deleted file mode 100644
index 34f86db..0000000
--- a/src/components/global/Title.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <div :style="{ backgroundColor: colorBackground }">
-    <div class="container">
-      <img v-if="image === 'true'" class="logo-img" src="@/assets/img/logo-large.webp" width="358" height="204" alt="ecoCode large logo" />
-      <span :class="getTitleClass">{{ title }}</span>
-      <span :class="getSubtitleClass">{{ subtitle }}</span>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps({
-  title: String,
-  subtitle: String,
-  typetitle: String,
-  colorBackground: String,
-  image: String,
-});
-
-const getTitleClass = computed(() => {
-  if (props.typetitle === "title blue") {
-    return "title-blue";
-  } else if (props.typetitle === "white black") {
-    return "title-white";
-  } else if (props.typetitle === "full white") {
-    return "title-white";
-  } else if (props.typetitle === "blue black light") {
-    return "title-blue";
-  }
-});
-
-const getSubtitleClass = computed(() => {
-  if (props.typetitle === "title blue") {
-    return "subtitle-green";
-  } else if (props.typetitle === "white black") {
-    return "subtitle-black";
-  } else if (props.typetitle === "full white") {
-    return "subtitle-white";
-  } else if (props.typetitle === "blue black light") {
-    return "subtitle-black-light";
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-  width: 100%;
-  padding-top: 50px;
-  height: max-content;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.title-blue {
-  max-width: 1200px;
-  font-size: 40px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.25;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 0px 0 0 0;
-  color: #355086;
-}
-
-.title-white {
-  max-width: 1200px;
-  font-size: 40px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.25;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 30px 0 0 0;
-  color: white;
-}
-
-.subtitle-green {
-  font-size: 32px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 53px 0 0 0;
-  color: #57c18b;
-  max-width: 1050px;
-}
-
-.subtitle-white {
-  font-size: 20px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 23px 0 36px 0;
-  color: white;
-  max-width: 1050px;
-}
-
-.subtitle-black {
-  font-size: 22px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 53px 0 0 0;
-  color: #022826;
-  max-width: 1050px;
-}
-
-.subtitle-black-light {
-  font-size: 22px;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: normal;
-  text-align: center;
-  padding: 23px 0 0 0;
-  color: #022826;
-}
-
-.logo-img {
-  height: auto;
-  padding: 0 0 40px 0;
-}
-
-@media screen and (max-width: 1150px) {
-  .title-blue,
-  .title-white {
-    margin: 0 36px 0 36px;
-    font-size: 32px;
-    padding-top: 0px;
-  }
-
-  .subtitle-white,
-  .subtitle-black,
-  .subtitle-green,
-  .subtitle-black-light {
-    margin: 10px 36px 0 36px;
-    font-size: 25px;
-    padding: 0 0 0 0;
-  }
-
-  .subtitle-white {
-    padding-bottom: 25px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .logo-img {
-    width: 50%;
-    margin: 0 36px 0 36px;
-    padding-bottom: 20px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .title-blue,
-  .title-white {
-    margin: 0 36px 0 36px;
-    font-size: 25px;
-    padding-top: 0px;
-  }
-
-  .subtitle-white,
-  .subtitle-black,
-  .subtitle-green,
-  .subtitle-black-light {
-    margin: 10px 36px 0 36px;
-    font-size: 15px;
-  }
-}
-</style>
diff --git a/src/views/Accueil/Home.vue b/src/views/Accueil/Home.vue
index 4ce3624..567a9ad 100644
--- a/src/views/Accueil/Home.vue
+++ b/src/views/Accueil/Home.vue
@@ -1,55 +1,73 @@
+<script setup lang="ts">
+import PartnerOrganizationList from '@/components/collective/PartnerOrganizationList.vue';
+import AppButton from '@/components/global/Button.vue';
+import AppHero from '@/components/global/Hero.vue';
+import ContactForm from '@/components/home/ContactForm.vue';
+import RuleProcess from '@/components/home/RuleProcess.vue';
+import AppSection from "@/components/Shared/AppSection.vue";
+</script>
+
 <template>
-  <TitleBox image="true" colorBackground="#355086" typetitle="full white"
-            title="Réduisons l'impact environnemental et social des solutions numériques"
-            subtitle="ecoCode est un outil Open Source basé sur un référentiel de règles d'éco-conception logicielle."
-            style="padding-bottom: 50px"/>
+  <AppHero
+      variant="primary"
+      title="Réduisons l'impact environnemental et social des solutions numériques"
+      sub-title="ecoCode est un outil Open Source basé sur un référentiel de règles d'éco-conception logicielle."
+  >
+    <img class="hero" src="@/assets/img/logo-large.webp" width="358" height="204" alt="ecoCode large logo"/>
+  </AppHero>
 
-  <div style="background-color: #57c18b;" class="block-button-section-1">
+  <div class="block-button-section-1 green">
     <AppButton variant="secondary" link="/contributeur" text="Je souhaite contribuer au projet"/>
     <AppButton variant="secondary" link="/entreprise" text="Je souhaite une intégration sur-mesure"/>
   </div>
 
-    <TitleBox typetitle="title blue" title="ecoCode est une initiative qui prend racine dans la force du collectif"
-        subtitle="Le numérique nous passionne et nous considérons qu’il est impératif de le rendre plus durable.">
-        <div class="after-block-section-2">
-            <div class="container-after">
-                <p>
-                    ecoCode rassemble différents types d'acteurs qui œuvrent ensemble pour rendre le numérique plus
-                    responsable : laboratoires de recherche, entreprises, personnes en poste sur leur temps de travail,
-                    personnes indépendantes sur leur temps libre...
-                </p>
-                <img src="@/assets/img/illustration/img-accueil-1.webp" width="300" height="300" alt="" loading="lazy">
-            </div>
-            <div class="container-after">
-                <img src="@/assets/img/illustration/img-accueil-2.webp" width="300" height="300" alt="" loading="lazy">
-                <p>
-                    Les membres contributeurs du collectif conceptualisent et implémentent des règles permettant de repérer
-                    les défauts de qualité du code source d’un projet pouvant avoir un impact écologique négatif.
-                    Le tout est mis à disposition en open source.
-                </p>
-            </div>
-        </div>
-    </TitleBox>
-    <RuleProcess />
-    <TitleBox typetitle="title blue" title="ecoCode est rendu possible grâce aux nombreux acteurs impliqués"
-        subtitle="Quelques structures partenaires :">
-      <PartnerOrganizationList :featured="true" />
-      <div class="block-button-section-1">
-        <AppButton variant="secondary" link="/collectif/organisations" text="Toutes les entreprises partenaires" />
-        <AppButton variant="secondary" link="/collectif/membres" text="Tous nos membres contributeurs" />
+  <AppSection
+      title="ecoCode est une initiative qui prend racine dans la force du collectif"
+      sub-title="Le numérique nous passionne et nous considérons qu’il est impératif de le rendre plus durable."
+  >
+    <div class="after-block-section-2">
+      <div class="container-after">
+        <p>
+          ecoCode rassemble différents types d'acteurs qui œuvrent ensemble pour rendre le numérique plus
+          responsable : laboratoires de recherche, entreprises, personnes en poste sur leur temps de travail,
+          personnes indépendantes sur leur temps libre...
+        </p>
+        <img src="@/assets/img/illustration/img-accueil-1.webp" width="300" height="300" alt="" loading="lazy">
       </div>
-    </TitleBox>
-    <ContactForm />
-</template>
+      <div class="container-after">
+        <img src="@/assets/img/illustration/img-accueil-2.webp" width="300" height="300" alt="" loading="lazy">
+        <p>
+          Les membres contributeurs du collectif conceptualisent et implémentent des règles permettant de repérer
+          les défauts de qualité du code source d’un projet pouvant avoir un impact écologique négatif.
+          Le tout est mis à disposition en open source.
+        </p>
+      </div>
+    </div>
+  </AppSection>
 
-<script setup lang="ts">
-import PartnerOrganizationList from '@/components/collective/PartnerOrganizationList.vue';
-import RuleProcess from '@/components/home/RuleProcess.vue';
-import AppButton from '@/components/global/Button.vue';
-import TitleBox from '@/components/global/Title.vue';
-import ContactForm from '@/components/home/ContactForm.vue';
-</script>
+  <RuleProcess/>
+
+  <AppSection
+      title="ecoCode est rendu possible grâce aux nombreux acteurs impliqués"
+      sub-title="Quelques structures partenaires :"
+  >
+    <PartnerOrganizationList :featured="true"/>
+    <div class="block-button-section-1">
+      <AppButton variant="secondary" link="/collectif/organisations" text="Toutes les entreprises partenaires"/>
+      <AppButton variant="secondary" link="/collectif/membres" text="Tous nos membres contributeurs"/>
+    </div>
+  </AppSection>
+
+  <ContactForm/>
+</template>
 
 <style lang="scss" scoped>
 @import './scss/style.scss';
+
+@media screen and (max-width: 768px) {
+  img.hero {
+    max-width: 60%;
+    height: auto;
+  }
+}
 </style>
diff --git a/src/views/Accueil/scss/style.scss b/src/views/Accueil/scss/style.scss
index a9606ff..bc0a457 100644
--- a/src/views/Accueil/scss/style.scss
+++ b/src/views/Accueil/scss/style.scss
@@ -1,77 +1,81 @@
 .block-button-section-1 {
-    width: 100%;
-    min-height: 130px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4rem;
+  width: 100%;
+  min-height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4rem;
+
+  &.green {
+    background-color: var(--color-secondary);
+  }
 }
 
 .after-block-section-2 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0 50px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0 50px 0;
 }
 
-.container-after>p {
-    width: 600px;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: right;
-    padding: 0 97px 0 0;
+.container-after > p {
+  width: 600px;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: right;
+  padding: 0 97px 0 0;
 }
 
 .container-after {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
-.container-after:nth-child(2)>p {
-    text-align: left;
-    padding: 0 0 0 97px;
+.container-after:nth-child(2) > p {
+  text-align: left;
+  padding: 0 0 0 97px;
 }
 
 @media screen and (max-width: 768px) {
-    .container-after>p {
-        text-align: center;
-        padding: 50px 100px 0 100px;
-        width: 100%;
-        font-size: 15px;
-    }
+  .container-after > p {
+    text-align: center;
+    padding: 50px 100px 0 100px;
+    width: 100%;
+    font-size: 15px;
+  }
 
-    .container-after:nth-child(2)>p {
-        text-align: center;
-        padding: 0px 100px 0 100px;
-    }
+  .container-after:nth-child(2) > p {
+    text-align: center;
+    padding: 0 100px 0 100px;
+  }
 
 }
 
 @media screen and (max-width: 425px) {
-    .container-after>p {
-        text-align: center;
-        padding: 50px 25px 0 25px;
-        width: 100%;
-        font-size: 15px;
-    }
+  .container-after > p {
+    text-align: center;
+    padding: 50px 25px 0 25px;
+    width: 100%;
+    font-size: 15px;
+  }
 
-    .container-after:nth-child(2)>p {
-        text-align: center;
-        padding: 0px 25px 0 25px;
-    }
+  .container-after:nth-child(2) > p {
+    text-align: center;
+    padding: 0 25px 0 25px;
+  }
 
 }
 
 @media screen and (max-width: 920px) {
-    .block-button-section-1 {
-        flex-direction: column;
-        gap: 1.2rem;
-        padding: 1.5rem;
-    }
+  .block-button-section-1 {
+    flex-direction: column;
+    gap: 1.2rem;
+    padding: 1.5rem;
+  }
 }
diff --git a/src/views/Page/contributeur/contributeur.vue b/src/views/Page/contributeur/contributeur.vue
index ad83cd9..69ff711 100644
--- a/src/views/Page/contributeur/contributeur.vue
+++ b/src/views/Page/contributeur/contributeur.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
 import ContributorProfiles from '@/components/contributor/ContributorProfiles.vue';
+import Newsletter from '@/components/contributor/Newsletter.vue';
 import Technologies from '@/components/contributor/Technologies.vue';
-import TitleBox from '@/components/global/Title.vue';
 import AppButton from '@/components/global/Button.vue';
-import Newsletter from '@/components/contributor/Newsletter.vue';
+import AppHero from '@/components/global/Hero.vue';
 import GraphStep from '@/components/Shared/GraphStep.vue';
-
-const scroll=() => {
-  const element = document.getElementById('newsletter');
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' });
-  }
-}
+import AppSection from "@/components/Shared/AppSection.vue";
 </script>
 
 <template>
-    <TitleBox colorBackground="#57c18b" typetitle="full white" title="Tu te soucies de réduire l'impact environnemental et social des solutions numériques ?"
-        subtitle="Rejoins ecoCode et contribue à faire du numérique un domaine plus durable.">
-      <AppButton @click="scroll()" variant="secondary" link="#newsletter" text="Je rejoins la communauté"
-                 style="margin-bottom: 40px"/>
-    </TitleBox>
-    <TitleBox typetitle="blue black light" title="ecoCode est un projet qui tire sa force du collectif">
-      <ContributorProfiles />
+  <AppHero
+      variant="secondary"
+      title="Tu te soucies de réduire l'impact environnemental et social des solutions numériques ?"
+      sub-title="Rejoins ecoCode et contribue à faire du numérique un domaine plus durable."
+  >
+    <template #actions>
+      <AppButton variant="secondary" link="#newsletter" text="Je rejoins la communauté"/>
+    </template>
+  </AppHero>
+
+  <AppSection title="ecoCode est un projet qui tire sa force du collectif">
+    <ContributorProfiles/>
+
+    <h3 class="heading-3" style="max-width: none">
+      Les technologies couvertes par ecoCode (en attendant d’aller plus loin !)
+    </h3>
+    <Technologies/>
+  </AppSection>
 
-      <h3 class="heading-3" style="margin-top: 20px;max-width: none">
-        Les technologies couvertes par ecoCode (en attendant d’aller plus loin !)
-      </h3>
-      <Technologies />
-    </TitleBox>
-    <GraphStep />
-    <Newsletter id="newsletter" />
+  <GraphStep/>
+  <Newsletter id="newsletter"/>
 </template>
diff --git a/src/views/Page/entreprise/entreprise.vue b/src/views/Page/entreprise/entreprise.vue
index 62ae0c9..e583a20 100644
--- a/src/views/Page/entreprise/entreprise.vue
+++ b/src/views/Page/entreprise/entreprise.vue
@@ -2,44 +2,30 @@
 import CaseStudyForm from '@/components/company/CaseStudyForm.vue';
 import RuleCreationProcess from '@/components/company/RuleCreationProcess.vue';
 import AppButton from '@/components/global/Button.vue';
-import TitleBox from '@/components/global/Title.vue';
-
-const scroll = (elementId: string) => {
-  const element = document.getElementById(elementId);
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' });
-  }
-}
+import AppHero from '@/components/global/Hero.vue';
+import AppSection from '@/components/Shared/AppSection.vue';
 </script>
 
 <template>
-    <TitleBox colorBackground="#5374c9" typetitle="white black"
-        title="Nous proposons aux organisations la création de règles d'éco-conception logicielle sur-mesure."
-        subtitle="En collaborant avec nous, vous réduisez votre impact numérique et contribuez à l'Open Source.">
-        <div class="button-container">
-            <AppButton variant="secondary" :link="{ path: '/', hash: '#contact' }" text="Demande de contact"/>
-            <AppButton variant="secondary" link="#client-case" text="Recevez le cas client Société Générale"/>
-        </div>
-    </TitleBox>
-    <TitleBox style="padding-bottom: 50px;" typetitle="title blue" title="Notre offre"
-        subtitle="Nous créons des extensions SonarQube pour analyser votre code et vous permettre de réduire son impact.">
-    </TitleBox>
-    <RuleCreationProcess />
-    <TitleBox id="client-case" style="padding-bottom: 50px;" typetitle="title blue" title="Recevez notre cas client Société Générale par mail">
-        <CaseStudyForm />
-    </TitleBox>
-</template>
+  <AppHero
+      variant="quaternary"
+      title="Nous proposons aux organisations la création de règles d'éco-conception logicielle sur-mesure."
+      sub-title="En collaborant avec nous, vous réduisez votre impact numérique et contribuez à l'Open Source."
+  >
+    <template #actions>
+      <AppButton variant="secondary" :link="{ path: '/', hash: '#contact' }" text="Demande de contact"/>
+      <AppButton variant="secondary" link="#client-case" text="Recevez le cas client Société Générale"/>
+    </template>
+  </AppHero>
 
-<style lang="scss" scoped>
-.button-container {
-  display: flex;
-  flex-direction: column;
-  margin: 40px;
-  gap: 1.2rem;
+  <AppSection
+      title="Notre offre"
+      sub-title="Nous créons des extensions SonarQube pour analyser votre code et vous permettre de réduire son impact."
+  />
 
-  @media screen and (min-width: 921px) {
-    flex-direction: row;
-    gap: 4rem;
-  }
-}
-</style>
+  <RuleCreationProcess/>
+
+  <AppSection title="Recevez notre cas client Société Générale par mail" id="client-case">
+    <CaseStudyForm/>
+  </AppSection>
+</template>
diff --git a/src/views/Page/team/Team.vue b/src/views/Page/team/Team.vue
index 525c2e7..b388e9f 100644
--- a/src/views/Page/team/Team.vue
+++ b/src/views/Page/team/Team.vue
@@ -13,6 +13,7 @@ import { RouterLink, RouterView } from 'vue-router';
 <style lang="scss" scoped>
 nav {
   background-color: var(--color-tertiary);
+  color: var(--color-on-tertiary);
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -22,7 +23,7 @@ nav {
   > a {
     opacity: 0.5;
     text-align: center;
-    color: white;
+    color: inherit;
     font-size: 1.5rem;
     font-weight: 900;