updated changes from learn overview to learn components

src/ocamlorg_frontend/components/icons.eml

@@ -309,7 +309,3 @@ let twitter class_ =
     <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
   </svg>
 
-let learn_overview_download class_ =
-  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />
-  </svg>

src/ocamlorg_frontend/components/learn_components.eml

@@ -12,4 +12,69 @@ class_
   | None -> 
     <></> 
   | Some _ -> 
-    <></>
+    <></>
+
+let download_icon class_ =
+  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />
+  </svg>
+
+let command_line_icon class_ =
+  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+  </svg>
+
+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">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>
+      <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>
+    </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>
+
+
+let install_card 
+=
+  <div class="w-[450px] h-52 bg-learn-area-light-blue px-6 flex flex-row pt-8 md:w-[500px]">
+    <%s! download_icon "w-24 h-24 mt-8 flex-shrink-0" %>
+    <div class="flex flex-col ml-1 flex-shrink gap-x-4">
+      <div class="flex flex-row justify-between">
+        <h3 class="text-default text-2xl font-normal leading-7">Download </h3>
+        <span class="rounded-sm px-2 py-1 text-xs text-center text-white text-base font-normal bg-blue-700"> Version 5.0.0 </span>
+      </div>
+        <p class="text-default text-md font-normal leading-7">
+          Effortlessly download, install, and set up OCaml! </p>
+      <a href="<%s Url.install %>" class="mt-6 flex btn btn-md px-2 w-48 h-11 bg-learn-area-orange text-white font-normal">
+        <span>Install OCaml</span>
+        <%s! Icons.chevron_right "h-5 w-5" %>
+      </a>
+    </div>
+  </div>
+
+let standard_lib_card 
+= 
+  <div class="w-[450px] h-52 bg-learn-area-light-blue px-6 flex flex-row pt-8 md:w-[500px]">
+    <%s! command_line_icon "w-24 h-24 mt-8 flex-shrink-0" %>
+    <div class="flex flex-col ml-1 flex-shrink gap-x-4">
+        <h3 class="text-default text-2xl font-normal leading-7">Standard Library API </h3>
+        <p class="text-default text-md font-normal max-w-prose leading-7">
+          The index of types, extensions, exceptions, values, modules, and module types. </p>
+        <a href="<%s Url.api %>" class="mt-4 w-60 btn px-6 btn-md btn-secondary md:mt-6">
+          <span>Standard Library API</span>
+          <%s! Icons.chevron_right "h-5 w-5" %>
+        </a>
+    </div>
+  </div>
+
+let api_card_block 
+=
+  <div class="grid grid-row-2 justify-items-center gap-4 lg:grid-cols-2">
+    <%s! install_card %>
+    <%s! standard_lib_card %>
+  </div>

src/ocamlorg_frontend/pages/learn.eml

@@ -24,7 +24,6 @@ Learn_layout.render
         <img src="<%s Ocamlorg_static.Asset.url "img/learn/learn-get-started.svg" %>" class="w-full" alt="Get Started background">
       </div>
     </div>
-
     <div class="relative flex-1 bg-gradient-to-br from-purple-400 to-purple-700 rounded-xl text-white md:max-h-96 overflow-hidden">
       <div class="p-6 xl:p-8 h-full xl:h-auto flex flex-col">
         <h2 class="font-bold mb-2">Solve Exercises</h2>
@@ -53,6 +52,9 @@ Learn_layout.render
       </div>
     </div>
   </div>
+  <div class="w-full">
+    <%s! Learn_components.api_card_block %>
+  </div>
   <div class="mt-10 lg:mt-20 border-b border-gray-200 pb-10">
     <h3 class="font-bold">Papers</h3>
     <div class="mt-6 text-lighter text-lg">
@@ -117,7 +119,3 @@ Learn_layout.render
       <%s! Icons.chevron_right "h-5 w-5" %>
     </a>
   </div>
-
-  <div class="">
-  <%s! Learn_overview.install_card %>
-  </div>

src/ocamlorg_frontend/pages/outreachy.eml

@@ -45,3 +45,8 @@ Layout.render
         <% ); %>
     </div>
 </div>
+
+<div class="flex flex-col gap-y-4 lg:flex-row lg:justify-around">
+  <%s! Learn_components.install_card %>
+  <%s! Learn_components.standard_lib_card %>
+</div>