got da card working

web/src/components/index/card.astro

@@ -1,13 +1,27 @@
 ---
+import TagRow from "@component/tagRow"
 
-const { title, description, tags } = Astro.props
+const { id, title, description, tags, image } = Astro.props
 
 ---
 
-<div>
-    {title}<br>
+<div class="relative z-0 flex h-50">
+<img
+        class="w-full h-full object-cover rounded-xl"
+        src={ image }
+    />
 
-    {description}<br>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{title}</p>
+        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
-    {tags.join(", ")}<br>
+        <div id="tag-row" class="">
+            <TagRow tags={tags}/>
+        </div>
+    </div>
+
+    <a id="link" href={`/recipe/${id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
 </div>