Language Manual Banner Component For Learn Area Redesign #1406 (fff9263

)

src/ocamlorg_frontend/components/learn_components.eml

@@ -209,3 +209,16 @@ let contribute_footer ~href =
       </div>
     </div>
   </div>
+
+let lang_manual_banner =
+    <a href="<%s Url.manual %>" class="bg-learn-area-orange w-full py-5 flex px-3 flex-col items-center justify-center sm:px-16 md:flex-row md:gap-x-16 lg:gap-x-20 lg:px-20 xl:px-48 xl:gap-x-36 xl:px-48">
+      <div class="mb-2 flex flex-col items-start sm:max-w-sm md:max-w-none">
+        <h2 class="mb-2 text-white text-center text-sm font-medium leading-5 tracking-widest md:text-left lg:leading-7">GUIDE</h2>
+        <h3 class="mb-4 text-white text-center text-lg font-normal leading-5 md:leading-10 md:text-xl lg:text-2xl md:text-left">Language Manual</h3>
+        <p class="mb-4 text-white text-sm font-normal leading-5 max-w-prose md:text-md lg:leading-7 xl:text-lg">OCaml language manuals are comprehensive guides covering syntax, features, and usage. They assist developers and learners in understanding capabilities, best practices, and exploring functionalities.</p>
+        <div class="block mt-5 py-2 px-24 bg-default text-sm rounded-sm items-center text-center text-primary-700 sm:px-20 sm:text-md font-medium leading-7 md:text-lg">Take Me There</div>
+      </div>
+      <div class="flex justify-start">
+        <img src="../img/home/ocaml_camel.png" alt="camel image" class="rounded-full h-40 w-40 shrink-0 object-cover sm:h-48 sm:w-48 sm:ml-auto md:h-52 md:w-52 lg:h-64 lg:w-64 lg:ml-0 xl:h-72 xl:w-72">
+      </div> 
+    </a>

src/ocamlorg_frontend/pages/learn.eml

@@ -48,7 +48,6 @@ Learn_layout.overview_render
         "bg-[#0E2A49]"
         %>
   </div>
-
   <div class="grid md:grid-cols-2">
     <%s! Learn_components.left_tutorial_block ~title:"GUIDES" ~heading:"Practical-Minded Tutorials and Guides" 
             ~description:"How to solve real-world problems in OCaml" 
@@ -78,6 +77,9 @@ Learn_layout.overview_render
     <%s! Learn_components.left_books_content_block books ~title:"Recommended For Beginners" ~link:{href = Url.books; title = "See More Books"} %>
     <%s! Learn_components.right_books_content_block intermediate_books ~title:"For Intermediate Users" ~link:{href = Url.books; title = "See More Books"} %>
   </div>
+
+  <%s! Learn_components.lang_manual_banner %>
+
   <div class="container-fluid">
     <div class="mt-10 lg:mt-20 border-b border-gray-200 pb-10">
       <h3 class="font-bold">Papers</h3>
@@ -111,5 +113,4 @@ Learn_layout.overview_render
         <%s! Icons.chevron_right "h-5 w-5" %>
       </a>
     </div>
-
   </div>

src/ocamlorg_frontend/pages/outreachy.eml

@@ -10,7 +10,6 @@ Layout.render
         <p>This is a record of all past OCaml Community <a href="https://www.outreachy.org/" target="_blank">Outreachy</a> Internship Projects.</p>
     </div>
 </div>
-
 <div class="py-12 bg-default dark:bg-dark-default">
     <div class="container-fluid">
         <% metadata |> List.iter (fun (rounds : Data.Outreachy.t) -> %>