Move components and pages

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import Header from '@/components/global/Header.vue';
-import Footer from '@/components/global/Footer.vue';
+import Header from '@/components/shared/layout/AppHeader.vue';
+import Footer from '@/components/shared/layout/AppFooter.vue';
 </script>
 
 <template>

src/components/company/CaseStudyForm.vue

@@ -31,10 +31,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
-import AppButton from '@/components/global/Button.vue';
+import AppButton from '@/components/shared/AppButton.vue';
 import { post } from '@/util/fetch';
-import Textfield from "@/components/Shared/Textfield.vue";
-import Fieldset from "@/components/Shared/Fieldset.vue";
+import Textfield from "@/components/shared/form/AppTextfield.vue";
+import Fieldset from "@/components/shared/form/AppFieldset.vue";
 
 /**
  * Validates an email address to ensure it is not empty and follows a valid email format.

src/components/company/RuleCreationProcess.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import BoxInfo from "@/components/global/BoxInfo.vue";
-import AppSection from "@/components/Shared/AppSection.vue";
+import AppSection from "@/components/shared/AppSection.vue";
 </script>
 
 <template>
@@ -36,6 +36,8 @@ import AppSection from "@/components/Shared/AppSection.vue";
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  gap: 1.5rem;
+  margin: 1rem;
 }
 
 p {

src/components/contributor/Newsletter.vue

@@ -29,9 +29,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
-import AppButton from '@/components/global/Button.vue';
+import AppButton from '@/components/shared/AppButton.vue';
 import { post } from '@/util/fetch';
-import Textfield from "@/components/Shared/Textfield.vue";
+import Textfield from "@/components/shared/form/AppTextfield.vue";
 
 const validateEmail = () => {
   const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

src/components/global/BoxInfo.vue

@@ -6,7 +6,7 @@ defineProps<{ title: string; text: string }>();
   <div class="container-block">
     <h3 class="heading-3">{{ title }}</h3>
     <div class="container">
-      <div class="container-text">{{ text }}</div>
+      <p>{{ text }}</p>
     </div>
   </div>
 </template>
@@ -17,61 +17,22 @@ defineProps<{ title: string; text: string }>();
   text-transform: uppercase;
 }
 
-.right {
-    padding: 0 67px 10px 0;
-}
-
-.left {
-    padding: 0 67px 10px 0;
-}
-
-.middle {
-    padding: 0 0 10px 0;
-}
-
 .container-block {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 25px 10.5px 0 10.5px;
-}
-
-.container-text {
-    width: 257px;
-    height: 197px;
-    padding: 0 19px;
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-border-small);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    background-color: var(--color-surface);
-    margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.container>img {
-    width: 48px;
-    height: auto;
-    margin: 0 16px 0 16px;
-}
-
-.container-block>img {
-    width: 48px;
-    height: auto;
-    margin: 17px 0 17px 0;
+  width: 260px;
+  height: 100%;
+  padding: 3rem 1.5rem;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-border-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--color-surface);
 }
 </style>

src/components/global/ProcessRule.vue

@@ -36,7 +36,6 @@ const props = defineProps({
   image: String,
 });
 
-const path = ref("/");
 const route = useRoute();
 
 const isPage = computed(

src/components/home/ContactForm.vue

@@ -45,10 +45,10 @@
 import { ref, watch } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import { post } from '@/util/fetch';
-import AppButton from "@/components/global/Button.vue";
-import Textfield from "@/components/Shared/Textfield.vue";
-import Fieldset from "@/components/Shared/Fieldset.vue";
-import Selectfield from "@/components/Shared/Selectfield.vue";
+import AppButton from "@/components/shared/AppButton.vue";
+import Textfield from "@/components/shared/form/AppTextfield.vue";
+import Fieldset from "@/components/shared/form/AppFieldset.vue";
+import Selectfield from "@/components/shared/form/AppSelectfield.vue";
 
 let captcha = ref("");
 const error = ref("");
@@ -213,7 +213,7 @@ form {
 }
 
 .text-label {
-  color: #355086;
+  color: var(--color-primary);
   font-size: 18px;
   font-weight: 900;
   outline: none;

src/components/home/RuleProcess.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ProcessRule from "@/components/global/ProcessRule.vue";
-import AppButton from "@/components/global/Button.vue";
+import AppButton from "@/components/shared/AppButton.vue";
 </script>
 
 <template>

src/components/global/Button.vue → src/components/shared/AppButton.vue

@@ -1,26 +1,29 @@
 <script setup lang="ts">
-import ChevronLeft from '@/assets/icons/chevron_left.svg';
-import ChevronRight from '@/assets/icons/chevron_right.svg';
+import ChevronLeft from "@/assets/icons/chevron_left.svg";
+import ChevronRight from "@/assets/icons/chevron_right.svg";
 import type { RouterLinkProps } from "vue-router";
 
-withDefaults(defineProps<{
-  text: string;
-  variant: 'primary' | 'secondary';
-  type?: 'button' | 'submit'
-  link?: RouterLinkProps['to'];
-}>(), { type: 'button' });
+withDefaults(
+  defineProps<{
+    text: string;
+    variant: "primary" | "secondary";
+    type?: "button" | "submit";
+    link?: RouterLinkProps["to"];
+  }>(),
+  { type: "button" },
+);
 </script>
 
 <template>
   <router-link v-if="link" :class="variant" :to="link">
-    <ChevronLeft/>
+    <ChevronLeft />
     {{ text }}
-    <ChevronRight/>
+    <ChevronRight />
   </router-link>
   <button v-else :class="variant" :type="type">
-    <ChevronLeft/>
+    <ChevronLeft />
     {{ text }}
-    <ChevronRight/>
+    <ChevronRight />
   </button>
 </template>
 

src/components/Shared/AppSection.vue → src/components/shared/AppSection.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-defineProps<{ title: string; subTitle?: string; backgroundColor?: 'white' | 'grey' }>()
+defineProps<{
+  title: string;
+  subTitle?: string;
+  backgroundColor?: "white" | "grey";
+}>();
 </script>
 
 <template>
@@ -24,7 +28,7 @@ defineProps<{ title: string; subTitle?: string; backgroundColor?: 'white' | 'gre
   }
 
   &.grey {
-    background-color: #F3F3F3;
+    background-color: #f3f3f3;
   }
 }
 </style>

src/components/shared/layout/AppFooter.vue

@@ -0,0 +1,22 @@
+<template>
+  <footer>
+    <span class="text-footer">Initié avec 💚 en France en 2019</span>
+  </footer>
+</template>
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+footer {
+  height: 60px;
+  background-color: var(--color-surface);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.text-footer {
+  font-weight: bold;
+  font-style: italic;
+}
+</style>

src/components/global/Header.vue → src/components/shared/layout/AppHeader.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import BurgerMenuButton from "@/components/global/header/BurgerMenuButton.vue";
+import BurgerMenuButton from "@/components/shared/layout/header/BurgerMenuButton.vue";
 import Github from "@/assets/icons/github.svg";
 import Linkedin from "@/assets/icons/linkedin.svg";
 import Trophy from "@/assets/icons/trophy.svg";
-import NavItem from "@/components/global/header/NavItem.vue";
+import NavItem from "@/components/shared/layout/header/HeaderNavItem.vue";
 
 const isMenuOpen = ref(false);
 

src/components/global/header/BurgerMenuButton.vue → src/components/shared/layout/header/BurgerMenuButton.vue

@@ -1,14 +1,32 @@
 <script lang="ts" setup>
-defineEmits(['update:modelValue'])
-defineProps<{ modelValue: boolean }>()
+defineEmits(["update:modelValue"]);
+defineProps<{ modelValue: boolean }>();
 </script>
 
 <template>
-  <button :class="{ active: modelValue }" @click="$emit('update:modelValue', !modelValue)">
+  <button
+    :class="{ active: modelValue }"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path class="top-line" fill-rule="evenodd" d="m3 12 1-1h16a1 1 0 1 1 0 2H4l-1-1Z" clip-rule="evenodd"/>
-      <path class="middle-line" fill-rule="evenodd" d="m3 6 1-1h16a1 1 0 1 1 0 2H4L3 6Z" clip-rule="evenodd"/>
-      <path class="bottom-line" fill-rule="evenodd" d="m3 18 1-1h16a1 1 0 1 1 0 2H4l-1-1Z" clip-rule="evenodd"/>
+      <path
+        class="top-line"
+        fill-rule="evenodd"
+        d="m3 12 1-1h16a1 1 0 1 1 0 2H4l-1-1Z"
+        clip-rule="evenodd"
+      />
+      <path
+        class="middle-line"
+        fill-rule="evenodd"
+        d="m3 6 1-1h16a1 1 0 1 1 0 2H4L3 6Z"
+        clip-rule="evenodd"
+      />
+      <path
+        class="bottom-line"
+        fill-rule="evenodd"
+        d="m3 18 1-1h16a1 1 0 1 1 0 2H4l-1-1Z"
+        clip-rule="evenodd"
+      />
     </svg>
   </button>
 </template>

src/components/global/header/NavItem.vue → src/components/shared/layout/header/HeaderNavItem.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-const props = defineProps<{ name: string; to: string; icon?: any }>()
+const props = defineProps<{ name: string; to: string; icon?: any }>();
 
 const isExternal = computed(() => props.to.startsWith("http"));
 </script>
 
 <template>
   <a v-if="isExternal" :href="to" v-bind="$attrs">
     {{ name }}
-    <component v-if="icon" :is="icon" width="16" height="16"/>
+    <component v-if="icon" :is="icon" width="16" height="16" />
   </a>
   <router-link v-else :to="to">
     {{ name }}
@@ -22,7 +22,7 @@ a {
   color: inherit;
   padding: 0.4rem 0.75rem;
   border-radius: var(--radius);
-  transition: background-color .08s ease-in-out;
+  transition: background-color 0.08s ease-in-out;
 
   &.special {
     display: flex;
@@ -44,7 +44,9 @@ a {
 }
 
 @keyframes gelatine {
-  from, to, 16% {
+  from,
+  to,
+  16% {
     transform: scale(1, 1);
   }
   5% {