feat(Challenge): show simple banner on the home page (#1304)

src/components/ChallengeBanner.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-banner class="border-grey" rounded>
+    <v-banner-text>
+      <h3 class="text-h6 mb-1">
+        {{ $t('Challenge.Title') }}
+      </h3>
+      <p>
+        {{ $t('Challenge.Subtitle', {challenge_title: `${challenge.icon} ${challenge.title} ${challenge.icon}`, challenge_subtitle: challenge.subtitle}) }}
+      </p>
+    </v-banner-text>
+    <template #actions>
+      <v-btn
+        color="primary"
+        variant="flat"
+        prepend-icon="mdi-trophy-variant"
+        to="/experiments/challenge"
+      >
+        {{ $t('Common.Join') }}
+      </v-btn>
+    </template>
+  </v-banner>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      challenge: {
+        title: "Nutella",
+        icon: "🌰",
+        subtitle: "(and other hazelnut spreads)",
+        startDate: "2025-01-20",
+        endDate: "2025-01-31",
+        categories: ["en:hazelnut-spreads"],
+        numberOfContributions: 0,
+        latestContributions: [],
+        numberOfProofs: 0,
+        userContributions: 0,
+        userProofContributions: 0,
+        exampleProofUrl: "https://prices.openfoodfacts.org/img/0029/nCWeCVnpQJ.webp"
+      },
+    }
+  }
+}
+</script>

src/i18n/locales/en.json

@@ -214,6 +214,7 @@
 		"Done": "Done",
 		"Error": "Error",
 		"Experiments": "Experiments",
+		"Join": "Join",
 		"Label": "Label",
 		"Labels": "Labels",
 		"LabelTotal": "{count} labels | {count} label | {count} labels",

src/views/Home.vue

@@ -14,6 +14,10 @@
 
   <br>
 
+  <ChallengeBanner />
+
+  <br>
+
   <v-row>
     <v-col v-for="price in latestPriceList" :key="price" cols="12" sm="6" md="4" xl="3">
       <PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
@@ -45,6 +49,7 @@ import utils from '../utils.js'
 export default {
   components: {
     StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
+    ChallengeBanner: defineAsyncComponent(() => import('../components/ChallengeBanner.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue'))
   },
   data() {