💻 | Working

src/components/AdHome.vue

@@ -4,7 +4,7 @@
       <nuxt-link to="/uses" class="h-48 md:w-1/3">
         <Ad color="rose" class="h-full w-full flex flex-col justify-between">
           <div>
-            <h1 class="font-bold text-black text-3xl">
+            <h1 class="font-bold text-black text-4xl">
               Usages
             </h1>
             <p class="text-lg text-gray-700 mt-4">

src/components/Post.vue

@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
-    <div class="rounded-lg shadow-lg h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
+    <div class="rounded-lg shadow-xl h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
       <div class="h-2/5 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>

src/components/Project.vue

@@ -1,17 +1,21 @@
 <template>
   <nuxt-link :to="`/projects/${slug}`">
-    <div class="rounded-lg shadow-lg w-full md:w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-4 lg:mb-0">
-      <div class="h-40 post rounded-t-lg"
-           :style="{ backgroundImage: `url(${getBackgroundCover})` }">
+    <div class="rounded-lg shadow-xl h-94 w-full lg:w-84 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
+      <div class="h-2/5 post rounded-t-lg flex justify-center">
+        <img :src="getCover" alt="Project Image" class="h-full"/>
       </div>
-      <div class="p-4 flex flex-col justify-between">
-        <h1 class="text-xl font-bold">
-          {{ title }}
-        </h1>
-        <div class="flex space-x-2 mt-2">
-          <div v-for="tag in tags">
-            <Tag :content="tag" :pill="false"/>
+      <div class="h-3/5 p-4 flex flex-col justify-between">
+        <div>
+          <div class="flex space-x-2 mb-2">
+            <div v-for="tag in tags">
+              <Tag :content="tag" :pill="false"/>
+            </div>
           </div>
+          <h1 class="text-2xl font-bold">{{ title }}</h1>
+          <p class="text-base mt-3 text-gray-700 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
+        </div>
+        <div class="flex justify-between">
+          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ company }}</h5>
         </div>
       </div>
     </div>
@@ -24,11 +28,11 @@ import {computed} from "@nuxtjs/composition-api";
 
 interface ProjectProp {
   title: string,
-  description: string,
   cover: string,
   slug: string,
-  color: string,
-  url: string
+  company: string,
+  tags: Array<String>,
+  description: string,
 }
 
 export default {
@@ -46,9 +50,13 @@ export default {
       type: String,
       default: "slug"
     },
-    color: {
+    description: {
       type: String,
-      default: "red"
+      default: "Description"
+    },
+    company: {
+      type: String,
+      default: "Company"
     },
     tags: {
       type: Array,
@@ -56,10 +64,10 @@ export default {
     }
   },
   setup(props: ProjectProp) {
-    const getBackgroundCover = computed(() => require(`@/assets/images/works/artapi.png`))
+    const getCover = computed(() => require(`@/assets/images/projects/${props.cover}`))
 
     return {
-      getBackgroundCover
+      getCover
     }
   }
 }
@@ -69,6 +77,7 @@ export default {
 .project {
   background-position: center;
   background-size: cover;
+  background-repeat: no-repeat;
   @apply bg-opacity-50;
 }
 </style>

src/components/ProjectsHome.vue

@@ -13,9 +13,11 @@
         <div v-for="project in projects">
           <Project
             :title="project.title"
-            :description="project.description"
-            :color="project.color"
             :cover="project.cover"
+            :description="project.description"
+            :slug="project.slug"
+            :tags="project.tags"
+            :company="project.company"
           />
         </div>
       </div>

src/components/StrategyHome.vue

@@ -16,20 +16,20 @@
         <div class="flex justify-center w-full md:w-1/2">
           <div class="flex flex-col space-y-6 w-full">
             <StrategyPart
-              title="#1. Brainstorming"
-              description="Je realise blablabla Je realise blablabla Je realise blablabla Je realise blablabla"
+              title="home.strategy.1.title"
+              description="home.strategy.1.description"
             />
             <StrategyPart
-              title="#2. Conception"
-              description="Je realise blablabla"
+              title="home.strategy.2.title"
+              description="home.strategy.2.description"
             />
             <StrategyPart
-              title="#3. Developpement"
-              description="Je realise blablabla"
+              title="home.strategy.3.title"
+              description="home.strategy.3.description"
             />
             <StrategyPart
-              title="#4. Livraison"
-              description="Je realise blablabla"
+              title="home.strategy.4.title"
+              description="home.strategy.4.description"
             />
           </div>
         </div>

src/components/StrategyPart.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1 class="font-bold text-2xl">
-      {{ title }}
+      {{ $t(title) }}
     </h1>
     <p class="text-gray-700 dark:text-gray-400 text-base text-justify">
-      {{ description }}
+      {{ $t(description) }}
     </p>
   </div>
 </template>