src/components/Card/OverviewCard.astro

@@ -0,0 +1,18 @@
+---
+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>
+    </div>
+</div>

src/pages/index.astro

@@ -1,16 +1,22 @@
 ---
 import PageLayout from "@/layouts/base"
-import { client } from "@/data/pocketbase"
+import client from "@/data/pocketbase"
+import OverviewCard from "@/components/Card/OverviewCard"
 
-const reccies = await client.collection("recipes").getFullList()
+const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
 	<p class="text-3xl font-medium">Recipie</p>
 	
-	{
-		reccies.map(rec => (
-			<p>{rec.name}</p>
-		))
-	}
+	What would you like today?
+
+	<div class="grid md:gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+		{
+			recipies.map(r => (
+				<OverviewCard recipe={r} />
+			))
+		}
+	</div>
+
 </PageLayout>

src/styles/global.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-[#fefefe];
+    @apply bg-white;
     @apply p-5;
 }