mise à jour

frontend/README.md

-# frontend
+n# frontend
 
 This template should help get you started developing with Vue 3 in Vite.
 

frontend/src/components/FilmPoster.vue

+<template>
+  <div class="film-poster">
+    <img :src="film.poster" :alt="film.title" />
+    <h3>{{ film.title }}</h3>
+    <!-- Ajoutez d'autres détails du film ici -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    film: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Styles pour la disposition des affiches */
+.film-poster {
+  width: 20%; /* Pour afficher 4 affiches par rangée */
+  margin: 10px;
+  display: inline-block;
+  text-align: center;
+}
+</style>

frontend/src/components/FilmRow.vue

+<template>
+  <div class="film-row">
+    <div v-for="film in films" :key="film.id">
+      <FilmPoster :film="film" />
+    </div>
+  </div>
+</template>
+
+<script>
+import FilmPoster from './FilmPoster.vue';
+
+export default {
+  components: {
+    FilmPoster
+  },
+  props: {
+    films: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Styles pour la disposition des rangées */
+.film-row {
+  text-align: center;
+}
+</style>
\ No newline at end of file

frontend/src/views/Accueil.vue

 <script setup>
 import Header from '../components/Header.vue'
+import FilmRow from '../components/FilmRow.vue';
 </script>
 
 <template>
@@ -13,6 +14,41 @@ import Header from '../components/Header.vue'
   
 </template>
 
+<script>
+import Header from '../components/Header.vue'
+import FilmRow from '../components/FilmRow.vue';
+export default {
+  components: {
+    Header,
+    FilmRow
+  },
+  data() {
+    return {
+      films: [
+        { id: 1, title: 'Film 1', poster: 'lien_vers_affiche_1' },
+        { id: 2, title: 'Film 2', poster: 'lien_vers_affiche_2' },
+      ],
+      filmsInRows: []
+    };
+  },
+  mounted() {
+    this.filmsInRows = this.chunkArray(this.films, 4);
+  },
+  methods: {
+    chunkArray(array, size) {
+      const chunkedArr = [];
+      let index = 0;
+      while (index < array.length) {
+        chunkedArr.push(array.slice(index, size + index));
+        index += size;
+      }
+      return chunkedArr;
+    }
+  }
+};
+
+</script>
+
 <style scoped>
 input {
     display: block;