update a lot of change since a while

app/pages/agenda.vue

@@ -1,68 +1,15 @@
 <template>
-  <div>
-    <h1>Page Agenda</h1>
-
-
-    <div>
-      <p>Lien interne</p>
-      <div>
-        <button_link to="/">Voir l'accueil</button_link>
-      </div>
-      <div>
-        <button_link to="/" variant="primary">Voir l'accueil</button_link>
-      </div>
-      <div>
-        <button_link to="/" variant="secondary">Voir l'accueil</button_link>
-      </div>
-      <div>
-        <button_link to="/" variant="outline">Voir l'accueil</button_link>
-      </div>
-    </div>
-
-    <div v-if="errorApi1">Erreur : {{ errorApi1.message }}</div>
-    <div v-else-if="!api1">Chargement en cours...</div>
-    <div v-else>
-      <h2 v-if="api1">{{ api1.message }}</h2>
-      <h2 v-if="api1">api1 = {{ api1 }}</h2>
-    </div>
-
-    
-    <testcomponentpage />
-
-    <div v-if="errorTotos">Erreur : {{ errorTotos.message }}</div>
-    <div v-else-if="!totos">Chargement en cours...</div>
-    <div v-else>
-      <pre v-if="totos">
-        {{ totos }}
-      </pre>
-      <div v-if="totos">
-        <article v-for="toto in totos" :key="toto.id">
-            <h2>{{ toto.title }}</h2>
-            <p>{{ toto.body.slice(0, 1000) }}</p>
-            <p>
-              <NuxtLink :to="`/concerts/concert-${toto.id}`">Lire la suite</NuxtLink>
-            </p>
-        </article>
-      </div>
-    </div>
-
-  </div>
+    <ConcertCard
+    v-for="c in concerts"
+    :key="c.id"
+    :title="c.title"
+    :date-label="c.dateLabel"
+    :venue="c.venue"
+    :city="c.city"
+    :image="{ src: c.imageUrl, alt: c.imageAlt }"
+    :tags="c.tags"
+    :price-from="c.priceFrom"
+    :is-sold-out="c.soldOut"
+    :href="`/concerts/${c.slug}`"
+    />
 </template>
-
-<script setup>
-
-  import button_link from '~/components/button_link.vue'
-
-  const {data: totos, error: errorTotos} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts?_limit=20')
-  const {data: api1, error: errorApi1} = await useFetch('/api/hello')
-  const config = useAppConfig()
-  useSeoMeta({
-    title: config.title
-  })
-  const appConfig = useAppConfig()
-  console.log("test 4 : ",appConfig.title) // "Mon site Nuxt"
-</script>
-
-<style>
-
-</style>