Add challenge data configuration file

Author: utarwyn

src/assets/data/challenge.json

@@ -0,0 +1,12 @@
+{
+  "edition": "2026",
+  "date": "19 et 20 Mai 2026",
+  "location": {
+    "name": "La Belleviloise, 19-21 rue Boyer, 75020 Paris",
+    "url": "https://maps.app.goo.gl/gezGPcSxkv8r2LA88"
+  },
+  "registration": {
+    "status": "full",
+    "url": "https://www.helloasso.com/associations/green-code-initiative/evenements/inscription-au-green-code-challenge-2026-adhoc"
+  }
+}

src/components/challenge/ChallengeHero.vue

@@ -1,38 +1,59 @@
 <script setup lang="ts">
+import {
+  date,
+  edition,
+  location,
+  registration,
+} from "@/assets/data/challenge.json";
+import BackpackIcon from "@/assets/icons/backpack.svg";
 import CalendarIcon from "@/assets/icons/calendar.svg";
 import ExternalLinkIcon from "@/assets/icons/external_link.svg";
 import HeartHandshakeIcon from "@/assets/icons/heart_handshake.svg";
 import PinIcon from "@/assets/icons/pin.svg";
+import TicketCheckIcon from "@/assets/icons/ticket_check.svg";
 </script>
 
 <template>
   <div class="container">
     <div class="content">
       <div class="top">
         <h1>
-          <span class="green">Green</span> Code Challenge <small>2026</small>
+          <span class="green">Green</span> Code Challenge
+          <small>{{ edition }}</small>
         </h1>
         <a
-          href="https://www.helloasso.com/associations/green-code-initiative/evenements/inscription-au-green-code-challenge-2026-adhoc"
+          v-if="registration.status === 'open'"
+          :href="registration.url"
           class="registration"
           target="_blank"
           >Je m'inscris <ExternalLinkIcon width="18" height="18"
         /></a>
-      </div>
-      <div class="meta-info">
+        <div
+          v-else-if="registration.status === 'full'"
+          class="registration full"
+        >
+          <TicketCheckIcon width="24" height="24" />
+          Événement complet
+          <div class="thank">Merci !</div>
+        </div>
         <a
-          href="https://maps.app.goo.gl/gezGPcSxkv8r2LA88"
-          class="badge"
+          v-else-if="registration.status === 'onboarding'"
+          href="https://github.com/green-code-initiative/creedengo-challenge"
+          class="registration onboarding"
           target="_blank"
+          ><BackpackIcon width="24" height="24" /> Accéder au Starter pack</a
         >
+      </div>
+      <div class="meta-info">
+        <a :href="location.url" class="badge" target="_blank">
           <PinIcon width="18" height="18" />
-          La Belleviloise, 19-21 rue Boyer, 75020 Paris
+          {{ location.name }}
         </a>
 
         <div class="line">
           <div class="badge bold">
             <CalendarIcon width="18" height="18" />
-            19 et 20 Mai 2026
+            {{ date }}
           </div>
           <div class="badge">
             <HeartHandshakeIcon width="18" height="18" />
@@ -85,6 +106,7 @@ import PinIcon from "@/assets/icons/pin.svg";
 
       .registration {
         display: flex;
+        position: relative;
         align-items: center;
         padding: 8px 16px;
         gap: 8px;
@@ -95,9 +117,29 @@ import PinIcon from "@/assets/icons/pin.svg";
         font-weight: bold;
         border-radius: 100px;
 
-        &:hover {
+        &:not(.full):hover {
           background: hsl(var(--primary-400));
         }
+
+        &.full {
+          background: black;
+          color: white;
+        }
+
+        .thank {
+          position: absolute;
+          padding: 4px 8px;
+          right: -10px;
+          bottom: -20px;
+
+          background: hsl(var(--primary-300));
+          color: hsl(var(--text-neutral));
+          border-radius: 100px;
+
+          font-weight: 600;
+
+          transform: rotate(-5deg);
+        }
       }
 
       @media screen and (max-width: 960px) {