books component

src/ocamlorg_frontend/components/learn_components.eml

@@ -12,4 +12,36 @@ class_
   | None -> 
     <></> 
   | Some _ -> 
-    <></>
+    <></>
+
+let book_tile 
+books
+= 
+  <div class="flex flex-row gap-x-6">
+    <% books |> List.rev |> List.iteri (fun index (item : Data.Book.t) -> if (index < 2) then ( %>  
+        <div class="flex flex-col">
+            <img src="<%s Ocamlorg_static.Media.url item.cover %>" 
+                    class="mt-2 h-48 w-32 md:w-56 md:h-80 border border-gray-200"
+                    alt="">
+            <%s! skill_tag item.difficulty "mt-2 grow-0 w-28" %>
+            <h4 class="h-16 w-56 mt-3 text-gray-700 text-lg font-normal leading-6"> <%s item.title %> </h4>
+            <p class="mt-3 text-gray-700 text-sm font-normal whitespace-normal max-w-xs">Suitable for complete beginners to programming</p>
+        </div>
+      <% ) else %> 
+    <% ); %>
+  </div>
+
+
+
+let books_content_block 
+books
+= 
+  <div class="w-full h-[42rem] bg-default md:w-1/2 md:pl-28">
+    <div class="pt-4 text-default text-sm text-left font-medium leading-7 tracking-widest"> Books </div>
+    <h2 class="mt-2 text-default text-2xl text-left font-normal leading-7"> Recommended Books </h2>
+    <%s! book_tile books %>
+    <a href="<%s! Url.books %>" class="flex gap-4 mt-4 text-primary-700 text-lg font-bold inline-flex items-center underline leading-10"> 
+      See all books
+      <%s! Icons.arrow_small_right "h-6 w-6" %>
+    </a>
+  </div>

src/ocamlorg_frontend/pages/outreachy.eml

@@ -45,3 +45,6 @@ Layout.render
         <% ); %>
     </div>
 </div>
+<div>
+<%s! Learn_components.books_content_block Data.Book.featured %>
+</div>