mise à jour

frontend/src/views/Accueil.vue

@@ -11,7 +11,10 @@ import FilmRow from '../components/FilmRow.vue';
     <input type="text" placeholder="Exemple : Cars">
     <button>Rechercher</button>
   </form>
-  
+  <div class="film-row" v-for="(row, index) in filmsInRows" :key="index">
+    <FilmRow :films="row"></FilmRow>
+  </div>
+
 </template>
 
 <script>
@@ -27,6 +30,9 @@ export default {
       films: [
         { id: 1, title: 'Film 1', poster: 'lien_vers_affiche_1' },
         { id: 2, title: 'Film 2', poster: 'lien_vers_affiche_2' },
+        { id: 3, title: 'Film 3', poster: 'lien_vers_affiche_1' },
+        { id: 4, title: 'Film 4', poster: 'lien_vers_affiche_2' },
+        { id: 5, title: 'Film 5', poster: 'lien_vers_affiche_2'},
       ],
       filmsInRows: []
     };
@@ -61,8 +67,8 @@ input {
     flex-grow:2;
     border-radius: 5px;
   }
-  
-  
+
+
   form {
     margin: 10px auto;
     width: 45%;
@@ -71,17 +77,17 @@ input {
     border:1px solid #e6007e;
     border-radius: 5px;
   }
-  
-  
-  
+
+
+
   /* remove the input focus blue box, it will be in the wrong place. */
   input:focus {
     outline: none;
   }
-  
+
   /* Add the focus effect to the form so it contains the button */
-  form:focus-within { 
-    outline: none; 
+  form:focus-within {
+    outline: none;
   }
 
 button {
@@ -91,4 +97,9 @@ button {
   /* color: var(--color-text); */
   border-radius: 0 4px 4px 0;
 }
+.film-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* Espacement entre les films */
+}
 </style>