Quick implementaiton of "Industrial Users: Header" (#212)

* update "Industrial Users" header to exactly match the Tailwind Playground implementation
* also: fix hidden menu issue

Author: kanishka-work

components/HeaderNavigation.res

@@ -92,7 +92,7 @@ let make = (~content) => {
               className={"absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0 " ++
               switch activeMenu {
               | Some(Industry) => " opacity-100 translate-y-0 "
-              | _ => " opacity-0 translate-y-1 "
+              | _ => " hidden "
               }}>
               <div
                 className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
@@ -152,7 +152,7 @@ let make = (~content) => {
               className={"absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0 " ++
               switch activeMenu {
               | Some(Resources) => " opacity-100 translate-y-0 "
-              | _ => " opacity-0 translate-y-1 "
+              | _ => " hidden "
               }}>
               <div
                 className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
@@ -221,7 +221,7 @@ let make = (~content) => {
               className={"absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0 " ++
               switch activeMenu {
               | Some(Community) => " opacity-100 translate-y-0 "
-              | _ => " opacity-0 translate-y-1 "
+              | _ => " hidden translate-y-1 "
               }}>
               <div
                 className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">

res_pages/industry/IndustryUsers.res

@@ -1,3 +1,5 @@
+module Link = Next.Link
+
 let s = React.string
 
 type t = {
@@ -10,13 +12,62 @@ let contentEn = {
   pageDescription: `OCaml is a popular choice for companies who make use of its features in key aspects of their technologies. Some companies that use OCaml code are listed below:`,
 }
 
+type callToAction = {
+  label: string,
+  url: string,
+}
+
+// TODO: as part of generalizing, consolidate this with installocaml version
+module MarkdownPageTitleHeading2 = {
+  @react.component
+  let make = (~title, ~pageDescription, ~descriptionCentered=false, ~callToAction=?) =>
+    <div className="text-lg max-w-prose mx-auto">
+      <h1>
+        // TODO: pass in mt-2 as a paramater
+        <span
+          className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+          {s(title)}
+        </span>
+      </h1>
+      <p
+        className={"mt-8 text-xl text-gray-500 leading-8" ++
+        switch descriptionCentered {
+        | true => " text-center "
+        | false => ""
+        }}>
+        {s(pageDescription)}
+      </p>
+      {switch callToAction {
+      | Some(callToAction) =>
+        <div className="text-center mt-7">
+          <Link href=callToAction.url>
+            <a
+              className="justify-center inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              {s(callToAction.label)}
+            </a>
+          </Link>
+        </div>
+      | None => <> </>
+      }}
+    </div>
+}
+
 @react.component
 let make = (~content=contentEn) => <>
   <ConstructionBanner
     figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=430%3A36400`
     playgroundLink=`/play/industry/users`
   />
-  <TitleHeading title=content.title pageDescription=content.pageDescription />
+  <div className="relative py-16 overflow-hidden">
+    <div className="relative px-4 sm:px-6 lg:px-8">
+      <MarkdownPageTitleHeading2
+        title=content.title
+        pageDescription=content.pageDescription
+        descriptionCentered=true
+        callToAction={label: "Success Stories", url: "/industry/successstories"}
+      />
+    </div>
+  </div>
 </>
 
 let default = make

res_pages/resources/ResourcesInstallOcaml.res

@@ -48,6 +48,7 @@ let make = (~source, ~title, ~pageDescription) => {
     />
     <div className="grid grid-cols-9">
       <div className="hidden lg:flex lg:col-span-2 " />
+      // TODO: remove redundant bg-graylight
       <div className="col-span-9 lg:col-span-7 relative py-16 bg-graylight overflow-hidden">
         <div className="relative px-4 sm:px-6 lg:px-8">
           <MarkdownPageTitleHeading title pageDescription />