[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/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>
-		))
-	}
+<PageLayout>	
+	<div id="content" class="p-5 pt-2">
+		<!-- <p class="pb-2">What would you like today?</p> -->
+
+		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+			{
+				recipies.map(r => (
+					<OverviewCard recipe={r} />
+				))
+			}
+		</div>
+	</div>
+
 </PageLayout>