From d5716b69a89144d77524e86a2971f82ebc009dc9 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Sun, 29 Mar 2026 12:53:21 +0100
Subject: [PATCH] Started card for home page

---
 .../challenge-card.component.html             | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/app/components/challenge-card/challenge-card.component.html b/src/app/components/challenge-card/challenge-card.component.html
index 2376319..faba124 100644
--- a/src/app/components/challenge-card/challenge-card.component.html
+++ b/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>
\ No newline at end of file
+        <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>
\ No newline at end of file