[PIE-6] Add first (non-final) (temporary-ish) stylings (#5)

this was a doozy.
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/components/Card/OverviewCard.astro

@@ -0,0 +1,27 @@
+---
+import client from "@/data/pocketbase"
+const { recipe } = Astro.props;
+
+const headerImage = await client.collection("images").getOne(recipe.images[0])
+const image = await client.files.getURL(headerImage, headerImage.image)
+---
+
+<div class="relative z-0 flex h-60">
+    <img
+        class="w-full h-full object-cover rounded-xl"
+        src={ image }
+    />
+
+    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
+        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
+        <p class="text-white text-[10pt]"> {recipe.description} </p>
+
+        <div class="flex flex-row">
+            {recipe.tags.map(async tag => (
+                <p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{ 
+                    (await client.collection("tags").getOne(tag)).name
+                }</p>
+            ))}
+        </div>
+    </div>
+</div>