chore(recipes): improve ui

src/pages/recipes.astro

@@ -16,17 +16,28 @@ const recipes = await directus.request(
 ---
 
 <BaseLayout title="Recipes">
-	<Heading level={1}>Recipes</Heading>
-	<p>Here are some of my favorite recipes.</p>
-	<ul>
-		{
-			recipes.map((recipe) => (
-				<li>
-					<h2 class="mt-4 text-xl">{recipe.name}</h2>
-					<p>{recipe.description}</p>
-					<img src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`} alt={recipe.name} />
-				</li>
-			))
-		}
-	</ul>
+	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
+		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
+			<Heading level={1}>Recipes</Heading>
+			<p>Here are some of my favorite recipes.</p>
+		</div>
+		<hr class="mb-12 dark:border-zinc-700/75" />
+		<ul class="grid gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
+			{
+				recipes.map((recipe) => (
+					<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
+						<img
+							class="h-48 w-full object-cover"
+							src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`}
+							alt={recipe.name}
+						/>
+						<div class="p-6">
+							<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{recipe.name}</h2>
+							<p class="mt-2 text-base text-zinc-600 dark:text-zinc-400">{recipe.description}</p>
+						</div>
+					</li>
+				))
+			}
+		</ul>
+	</div>
 </BaseLayout>