Fix button "Demande de contact"

src/components/Shared/Block3.vue → src/components/company/RuleCreationProcess.vue

@@ -1,11 +1,10 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import BoxInfo from "@/components/global/BoxInfo.vue";
-defineProps<{ title: string }>();
+import AppSection from "@/components/Shared/AppSection.vue";
 </script>
 
 <template>
-  <div class="container">
-    <h2 class="heading-2">{{ title }}</h2>
+  <AppSection backgroundColor="grey" title="Le processus de création d'une règle">
     <div class="box-container">
       <BoxInfo
         title="Cadrage"
@@ -24,52 +23,32 @@ defineProps<{ title: string }>();
         text="Test des règles produites pour s’assurer de leur efficacité dans la réduction de la consommation énergétique"
       />
     </div>
-    <span
-      >Toutes les règles sur-mesure, produites pour le compte d'organisations, tombent
+    <p>
+      Toutes les règles sur-mesure, produites pour le compte d'organisations, tombent
       dans l'Open Source. C'est votre contribution à rendre le numérique plus
-      responsable.</span
-    >
-  </div>
+      responsable.
+    </p>
+  </AppSection>
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  min-height: 396px;
-  padding-top: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: #f3f3f3;
-}
-
 .box-container {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  align-items: center;
   justify-content: center;
-  margin: 50px 0 35px 0;
 }
 
-span {
-  font-size: 22px;
+p {
+  font-size: 1.35rem;
   font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.36;
-  letter-spacing: normal;
   text-align: center;
-  color: #022826;
   max-width: 1089px;
-  padding-bottom: 47px;
 }
 
 @media screen and (max-width: 768px) {
-  span{
+  p {
     margin: 0 50px 0 50px;
-    font-size: 15px;
+    font-size: 1rem;
   }
 }
 </style>

src/components/home/ContactForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" id="contact">
     <h2 class="heading-2">On discute d’ecoCode ?</h2>
 
     <form @submit.prevent="submitForm" aria-label="Formulaire de contact">

src/views/Accueil/Doc.vue

@@ -51,16 +51,6 @@
         <Newsletter></Newsletter>
     </div>
 
-    <div class="container-doc">
-        <h3>Voici le composant Block3 :</h3>
-        <ul>Params :
-            <li>title: Pour lui donner un titre</li>
-            <li>Exemple utiliser :</li>
-            <li>Block3 title="params : title" /Block3</li>
-        </ul>
-        <Block3 title="params: title"></Block3>
-    </div>
-
     <div class="container-doc">
         <h3>Voici le composant Espace ButtonBlock :</h3>
         <ul>Params :
@@ -118,7 +108,6 @@ import Boxinfo from '@/components/global/BoxInfo.vue';
 import Form from '@/components/home/ContactForm.vue';
 import BoxTechno from '@/components/contributor/Technologies.vue';
 import Newsletter from '@/components/contributor/Newsletter.vue';
-import Block3 from '@/components/Shared/Block3.vue';
 import FormSecond from '@/components/company/CaseStudyForm.vue';
 </script>
 

src/views/Page/entreprise/entreprise.vue

@@ -1,33 +1,43 @@
+<script setup lang="ts">
+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' });
+  }
+}
+</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 style="padding-bottom: 50px;" class="block-button-section-1">
-            <ButtonBlock typebutton="white" link="/" text="Demande de contact"></ButtonBlock>
-            <ButtonBlock @click="scroll()" typebutton="white" link="#client-case" text="Recevez le cas client Société Générale"></ButtonBlock>
+        <div class="button-container">
+            <AppButton @click="scroll('contact')" typebutton="white" link="/#contact" text="Demande de contact"/>
+            <AppButton @click="scroll('client-case')" typebutton="white" 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>
-    <Block3 title="Le processus de création d'une règle"></Block3>
+    <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>
-<script setup lang="ts">
-import TitleBox from '@/components/global/Title.vue';
-import Block3 from '@/components/Shared/Block3.vue';
-import ButtonBlock from '@/components/global/Button.vue';
-import CaseStudyForm from '@/components/company/CaseStudyForm.vue';
 
-const scroll=() => {
-  const element = document.getElementById('client-case');
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' });
+<style lang="scss" scoped>
+.button-container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 50px;
+
+  @media screen and (min-width: 921px) {
+    flex-direction: row;
   }
 }
-</script>
-<style lang="scss" scoped>
-@import './scss/style.scss';
 </style>