Started card for home page

src/app/components/challenge-card/challenge-card.component.html

@@ -1,9 +1,26 @@
-<ion-card>
-    <ion-card-header>
-        <ion-card-subtitle>Titre de la carte</ion-card-subtitle>
-    </ion-card-header>
+<div class="bg-white m-4 rounded-2xl border border-amber-200 shadow-sm p-4 space-y-3">
+    <div class="grid grid-cols-5 items-center">
+        <h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
+            Title
+        </h3>
+        <span class="col-span-1 text-right text-xs font-extrabold text-yellow-900 bg-amber-50 px-2 py-1 rounded-lg">
+          +8 pts
+        </span>
+    </div>
+    <p class="text-[11px] text-gray-500 leading-relaxed">Description</p>
+    <div class="grid grid-cols-5 items-center">
+      <span class="col-span-4 text-[11px] text-gray-500">
+        Info supplémentaire
+      </span>
 
-    <ion-card-content>
-        Here's a small text description for the card content. Nothing more, nothing less.
-    </ion-card-content>
-</ion-card>
+        <div class="col-span-1 flex justify-end">
+            <ion-button
+                    fill="clear"
+                    class="m-0 p-0 min-h-0 text-[11px] font-black bg-black text-white rounded-3xl"
+                    style="--padding-top: 4px; --padding-bottom: 4px;"
+            >
+                Voir ⭢
+            </ion-button>
+        </div>
+    </div>
+</div>