homepage 3 new cards with imgs

lib/wild_web/live/index.html.heex

@@ -1,20 +1,47 @@
 <h1>Hello World</h1>
-<div class="size-1/3 mr-4 mt-4">
+<div class="flex gap-10">
-  <div class="p-10 bg-pink-100 shadow-md rounded-xl">
+  <div class="flex-1">
-    <h2>Books</h2>
+    <div class="shadow-md rounded-xl pt-4 bg-pink-100">
+      <h2 class="text-center font-bold pb-2">BOOKS</h2>
+      c
+        <img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl" />
+      </.link>
+    </div>
+
+    <div class="text-right py-2 text-pink-500">
+      <.link patch={~p"/books/thoughts"} class="hover:underline">
+        Share my thoughts
+      </.link>
+    </div>
   </div>
 
-  <div class="p-10 bg-pink-200 shadow-md rounded-xl mt-2">
+  <div class="flex-1">
-    <.link patch={~p"/books/thoughts"}>Share my thought</.link>
+    <div class="shadow-md rounded-xl pt-4 bg-blue-100">
-  </div>
+      <h2 class="text-center font-bold pb-2">MOVIES</h2>
-</div>
+      <.link patch={~p"/movies"}>
-
+        <img src={~p"/images/movie-card-homepage.jpg"} class="rounded-xl" />
-<div class="size-1/3 mr-4 mt-4">
+      </.link>
-  <div class="p-10 bg-blue-100 shadow-md rounded-xl">
+    </div>
-    <h2>Movies</h2>
+
-  </div>
+    <div class="text-right py-2 text-blue-500">
-
+      <.link patch={~p"/movies/critics"} class="hover:underline">
-  <div class="p-10 bg-blue-200 shadow-md rounded-xl mt-2">
+        Share my critics
-    <.link patch={~p"/books/thoughts"}>Share my critics</.link>
+      </.link>
+    </div>
+  </div>
+
+  <div class="flex-1">
+    <div class="shadow-md rounded-xl pt-4 bg-green-100">
+      <h2 class="text-center font-bold pb-2">RECIPES</h2>
+      <.link patch={~p"/recipes"}>
+        <img src={~p"/images/recipe-card-homepage.jpg"} class="rounded-xl" />
+      </.link>
+    </div>
+
+    <div class="text-right py-2 text-green-500">
+      <.link patch={~p"/recipes/tastes"} class="hover:underline">
+        Share my tastes
+      </.link>
+    </div>
   </div>
 </div>