fixed responsiveness and mobile view

src/ocamlorg_frontend/components/learn_overview.eml

@@ -1,13 +1,15 @@
 let lang_manual_banner =
-  <div class="container bg-learn-area-orange w-full h-80 flex items-center px-4">
-    <div class="w-2/3 pr-4 mb-2">
-      <h2 class="mt-0 mb-2 text-white text-sm font-medium leading-7 tracking-widest">GUIDE</h2>
-      <h3 class="mt-0 mb-4 text-white text-2xl font-normal leading-10">Language Manual</h3>
-      <p class="mt-0 mb-4 text-white text-lg font-normal leading-7">The OCaml Language Manual is a comprehensive guide covering syntax, features, and usage.
-        The OCaml compiler developers provide this resource to assist developers and learners in understanding capabilities, best practices, and exploring functionalities.</p>
-      <a href="<%s Url.manual %>" class="block h-12 w-80 p-3 bg-default rounded-md text-center text-primary-700 text-lg font-medium leading-7">Take Me There</a>
+  <a href="Url.manual">
+    <div class="container-fluid bg-learn-area-orange w-full h-96 flex flex-col-reverse items-center px-4 md:h-80 md:flex-row">
+      <div class="w-full mb-2 flex flex-col items-center md:justify-start md:items-start md:px-12 md:w-2/3">
+        <h2 class="mt-0 mb-2 text-white text-center text-sm font-medium leading-5 tracking-widest md:text-left lg:leading-7">GUIDE</h2>
+        <h3 class="mt-0 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="mt-0 mb-4 text-white text-sm font-normal max-w-prose leading-5 md:text-md lg:text-lg lg:leading-7">The OCaml Language Manual is a comprehensive guide covering syntax, features, and usage.
+          The OCaml compiler developers provide this resource to assist developers and learners in understanding capabilities, best practices, and exploring functionalities.</p>
+        <a href="<%s Url.manual %>" class="block py-2 w-48 px-8 bg-default rounded-md items-center text-center text-primary-700 text-md font-medium leading-7 md:text-lg md:w-80">Take Me There</a>
+      </div>
+      <div class="flex lg:w-1/3 lg:justify-end">
+        <img src="../img/home/ocaml_camel.png" alt="camel image" class="rounded-full h-40 w-40 md:h-52 md:w-52 lg:h-72 lg:w-72 object-cover">
+      </div> 
     </div>
-    <div class="w-1/3 flex justify-end">
-      <img src="../img/home/ocaml_camel.png" alt="camel image" class="rounded-full h-72 w-72 object-cover">
-    </div> 
-  </div>
+  </a>

src/ocamlorg_frontend/pages/outreachy.eml

@@ -10,7 +10,7 @@ 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>
-
+<%s! Learn_overview.lang_manual_banner %>
 <div class="py-12 bg-default dark:bg-dark-default">
     <div class="container-fluid">
         <% metadata |> List.iter (fun (rounds : Data.Outreachy.t) -> %>