initialisation

frontend/src/components/Banner.vue

 <template>
   <div class="banner">
-    <img alt="Vue logo" src="../assets/logo.png" />
+   <Text>CaCaoCritics</Text>
   </div>
 </template>
 
@@ -12,6 +12,7 @@ export default {
 
 <style>
 .banner {
-  text-align: center;
+  text-align: left;
+  background-color: #FF68AD;
 }
 </style>

frontend/src/components/Footer.vue

@@ -13,5 +13,6 @@ export default {
 <style>
 .footer {
   text-align: center;
+  background-color: #FF68AD;
 }
 </style>

frontend/src/components/Movie.vue

+<template>
+  <table>
+    <thead>
+      <th>Titre</th>
+      <th>Date de sortie</th>
+      <th>Image</th>
+    </thead>
+    <tbody>
+      <tr v-for="movie in movies" :key="movie.id">
+        <td>{{ movie.title }}</td>
+        <td>{{ movie.release_date }}</td>
+        <td> <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" /> </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    movies: Array,
+  },
+};
+</script>
+
+<style scoped>
+</style>

frontend/src/components/NavBar.vue

@@ -25,6 +25,6 @@ export default {
 }
 
 .nav-link.router-link-exact-active {
-  color: #42b983;
+  color: #FF68AD;
 }
 </style>

frontend/src/views/Home.vue

 <template>
   <div class="home">
     <h1>Bienvenue sur CaCaoCritics</h1>
-    <input type="text" v-model="moviename" />
+    <img alt="Vue logo" src="../assets/logo.png" />
+    <br />
+    <input type="text" v-model="moviename" placeholder="enter a movie name"/>
     <div class="film-name">Le film est : {{ moviename }}</div>
     <li v-for="movie in movies" :key="movie.id">
+    <p>
       {{ movie.title }} 
+    </p>
+    <p>
+      <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" />
+    </p>
     </li>
   </div>
 </template>
@@ -16,7 +23,7 @@ export default {
   name: "Home",
   data: function () {
     return {
-      moviename: "test",
+      moviename: "",
       movies: [],
       moviesLoadingError: "",
     };
@@ -63,6 +70,6 @@ li {
 }
 
 a {
-  color: #42b983;
+  color: #FF68AD;
 }
 </style>