refactor: split homepage component boundaries

apps/docs/app/routes/LandingPage.resi

@@ -1,2 +1,2 @@
 @react.component
-let make: (~components: MarkdownComponents.t=?) => React.element
+let make: unit => React.element

apps/docs/src/components/LandingPageCuratedResources.res

@@ -0,0 +1,147 @@
+type card = {
+  imgSrc: string,
+  title: string,
+  descr: string,
+  href: string,
+}
+
+type templateKind = NextJs | ViteJs | NodeJs
+
+type template = {
+  imgSrc: string,
+  kind: templateKind,
+  descr: string,
+  href: string,
+}
+
+let cards = [
+  {
+    imgSrc: "/ic_manual@2x.avif",
+    title: "Language Manual",
+    descr: "Look up the basics: Reference for all our language features",
+    href: "/docs/manual/introduction",
+  },
+  {
+    imgSrc: "/ic_rescript_react@2x.avif",
+    title: "ReScript + React",
+    descr: "First Class bindings for ReactJS used by production users all over the world.",
+    href: "/docs/react/introduction",
+  },
+  {
+    imgSrc: "/ic_manual@2x.avif",
+    title: "Gradually Adopt ReScript",
+    descr: "Learn how to start using ReScript in your current projects. Try before you buy!",
+    href: "/docs/manual/installation#integrate-into-an-existing-js-project",
+  },
+  {
+    imgSrc: "/ic_gentype@2x.avif",
+    title: "TypeScript Integration",
+    descr: "Learn how to integrate ReScript in your existing TypeScript codebases.",
+    href: "/docs/manual/typescript-integration",
+  },
+]
+
+let templates = [
+  {
+    imgSrc: "/nextjs_starter_logo.svg",
+    kind: NextJs,
+    descr: "Get started with our NextJS starter template.",
+    href: "https://github.com/rescript-lang/create-rescript-app/blob/master/templates/rescript-template-nextjs/README.md",
+  },
+  {
+    imgSrc: "/vitejs_starter_logo.svg",
+    kind: ViteJs,
+    descr: "Get started with ViteJS and ReScript.",
+    href: "https://github.com/rescript-lang/create-rescript-app/blob/master/templates/rescript-template-vite/README.md",
+  },
+  {
+    imgSrc: "/nodejs_starter_logo.svg",
+    kind: NodeJs,
+    descr: "Get started with ReScript targeting the Node platform.",
+    href: "/",
+  },
+]
+
+let renderTemplateTitle = kind => {
+  switch kind {
+  | NextJs =>
+    <>
+      <span className="block"> {React.string("ReScript & ")} </span>
+      <span className="block text-gray-40"> {React.string("NextJS")} </span>
+    </>
+  | ViteJs =>
+    <>
+      <span className="block"> {React.string("ReScript & ")} </span>
+      <span className="block text-[#6571FB]"> {React.string("ViteJS")} </span>
+    </>
+  | NodeJs =>
+    <>
+      <span className="block"> {React.string("ReScript & ")} </span>
+      <span className="block text-gray-40" style={{color: "#699D65"}}>
+        {React.string("NodeJS")}
+      </span>
+    </>
+  }
+}
+
+@react.component
+let make = () => {
+  <section dataTestId="landing-curated-resources" className="bg-gray-100 w-full pb-40 pt-20 ">
+    <div
+      className="mb-10 max-w-1280 flex flex-col justify-center items-center mx-5 md:mx-8 lg:mx-auto"
+    >
+      <div className="body-sm md:body-lg text-gray-40 w-40 mb-4 xs:w-auto text-center">
+        {React.string("Get up and running with ReScript")}
+      </div>
+      <h2 className="hl-1 text-gray-20 text-center"> {React.string("Curated resources")} </h2>
+    </div>
+    <div className="px-5 md:px-8 max-w-1280 mx-auto my-20">
+      <div className="body-lg text-center z-2 relative text-gray-40 max-w-48 mx-auto bg-gray-100">
+        {React.string("Guides and Docs")}
+      </div>
+      <hr className="bg-gray-80 h-px border-0 relative -top-3" />
+    </div>
+    <div>
+      <div
+        className="grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto"
+      >
+        {cards
+        ->Array.mapWithIndex((card, i) =>
+          <ReactRouter.Link.String
+            key={Int.toString(i)}
+            to=card.href
+            className="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]"
+          >
+            <img className="h-[53px] absolute mt-6" src=card.imgSrc loading=#lazy />
+            <h5 className="text-gray-10 hl-4 mt-32 h-12"> {React.string(card.title)} </h5>
+            <div className="text-gray-40 mt-2 mb-8 body-sm"> {React.string(card.descr)} </div>
+          </ReactRouter.Link.String>
+        )
+        ->React.array}
+      </div>
+      <div className="px-5 md:px-8 max-w-1280 mx-auto my-20">
+        <div className="body-lg text-center z-2 relative text-gray-40 w-32 mx-auto bg-gray-100">
+          {React.string("Templates")}
+        </div>
+        <hr className="bg-gray-80 h-px border-0 relative -top-3" />
+      </div>
+      <div
+        className="grid grid-flow-col grid-cols-2 lg:grid-cols-3 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto"
+      >
+        {templates
+        ->Array.mapWithIndex((template, i) =>
+          <a
+            key={Int.toString(i)}
+            href=template.href
+            className="hover:bg-gray-80 bg-gray-90 px-5 pb-8 relative rounded-xl min-w-[200px]"
+          >
+            <img className="h-12 absolute mt-5" src=template.imgSrc loading=#lazy />
+            <h5 className="text-gray-10 hl-4 mt-32 h-12"> {renderTemplateTitle(template.kind)} </h5>
+            <div className="text-gray-40 mt-4 body-sm"> {React.string(template.descr)} </div>
+          </a>
+        )
+        ->React.array}
+      </div>
+    </div>
+  </section>
+}

apps/docs/src/components/LandingPageCuratedResources.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: unit => React.element

apps/docs/src/components/LandingPageIntro.res

@@ -0,0 +1,32 @@
+@react.component
+let make = () => {
+  <section dataTestId="landing-intro" className="flex justify-center">
+    // This font is only needed on the homepage.
+    <link
+      href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <div className="max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content">
+      <h1 className="hl-title text-center max-w-212">
+        {React.string("JavaScript Made Simple for Humans and AI")}
+      </h1>
+      <h2 className="red-hat-mono-bold hl-1 text-center text-gray-60 my-4 max-w-md">
+        {React.string(`Types > Vibes`)}
+      </h2>
+      <p className="body-lg text-center text-gray-60 mt-4 max-w-md">
+        {React.string(`ReScript is a strongly typed language that compiles to clean,
+            efficient JavaScript that humans and AI tools can read and understand.`)}
+      </p>
+      <p className="body-lg text-center text-gray-60 my-4 max-w-md">
+        {React.string(`Its fast compiler and static type system keep feedback loops tight,
+            so you can move quickly with AI assistance while maintaining
+            confidence as your codebase grows.`)}
+      </p>
+      <ReactRouter.Link
+        to=#"/docs/manual/installation" prefetch=#viewport className="mt-4 mb-2 block"
+      >
+        <Button> {React.string("Get started")} </Button>
+      </ReactRouter.Link>
+    </div>
+  </section>
+}

apps/docs/src/components/LandingPageIntro.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: unit => React.element

apps/docs/src/components/LandingPageMainSellingPoints.res

@@ -0,0 +1,122 @@
+module Item = {
+  type polygonDirection = Up | Down
+
+  @react.component
+  let make = (
+    ~caption: string,
+    ~title: React.element,
+    ~media: React.element=React.string("Placeholder"),
+    ~polygonDirection: polygonDirection=Down,
+    ~paragraph: React.element,
+  ) => {
+    let polyPointsLg = switch polygonDirection {
+    | Down => "80,0 85,100 100,100 100,0"
+    | Up => "85,0 80,100 100,100 100,0"
+    }
+    let polyPointsMobile = switch polygonDirection {
+    | Down => "0,100 100,100 100,70 0,80"
+    | Up => "0,100 100,100 100,78 0,72"
+    }
+    let polyColor = switch polygonDirection {
+    | Up => "text-fire"
+    | Down => "text-fire-30"
+    }
+
+    <div
+      className="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"
+    >
+      <div
+        className="relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full"
+      >
+        <div className="max-w-96 flex flex-col justify-center mb-6 lg:mb-2">
+          <div className="hl-overline text-gray-20 mb-4"> {React.string(caption)} </div>
+          <h3 className="text-gray-10 mb-4 hl-2 font-semibold"> title </h3>
+          <div className="text-gray-30 body-md pr-8"> paragraph </div>
+        </div>
+        <div className="relative mt-10 lg:mt-0">
+          <div
+            className="relative w-full z-2 bg-gray-90 flex md:mt-0 items-center justify-center rounded-lg max-w-140 shadow-[0px_4px_55px_0px_rgba(230,72,79,0.10)]"
+          >
+            media
+          </div>
+          <img
+            className="absolute z-1 bottom-0 right-0 -mb-12 -mr-12 max-w-[20rem]"
+            src="/lp/grid2.svg"
+          />
+        </div>
+      </div>
+      <svg
+        className={`md:hidden absolute z-1 w-full h-full bottom-0 left-0 ${polyColor}`}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        <polygon className="fill-current" points=polyPointsMobile />
+      </svg>
+      <svg
+        className={`hidden md:block absolute z-1 w-full h-full right-0 top-0 ${polyColor}`}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        <polygon className="fill-current" points=polyPointsLg />
+      </svg>
+    </div>
+  }
+}
+
+@react.component
+let make = () => {
+  <section className="w-full bg-gray-90 overflow-hidden min-h-148">
+    <Item
+      caption="Fast and simple"
+      title={React.string("The fastest build system on the web")}
+      media={<video className="rounded-lg" controls={true} poster={"/lp/fast-build-preview.avif"}>
+        <source src="https://assets-17077.kxcdn.com/videos/fast-build-3.mp4" type_="video/mp4" />
+      </video>}
+      paragraph={<>
+        <p>
+          {React.string(`ReScript cares about a consistent and fast
+      feedback loop for any codebase size. Refactor code, pull complex changes,
+      or switch to feature branches as you please. No sluggish CI builds, stale
+      caches, wrong type hints, or memory hungry language servers that slow you
+      down.`)}
+        </p>
+        <p className="mt-6" />
+      </>}
+    />
+    <Item
+      caption="A robust type system"
+      title={<span
+        className="text-transparent bg-clip-text bg-linear-to-r from-berry-dark-50 to-fire-50"
+      >
+        {React.string("Type Better")}
+      </span>}
+      media={<video className="rounded-lg" controls={true} poster={"/lp/type-better-preview.avif"}>
+        <source src="https://assets-17077.kxcdn.com/videos/type-better-3.mp4" type_="video/mp4" />
+      </video>}
+      polygonDirection=Up
+      paragraph={React.string(`Every ReScript app is fully typed and provides
+      reliable type information for any given value in your program. We
+      prioritize simpler types over complex types for the sake of
+      clarity and easy debugability. No \`any\`, no magic types, no surprise
+      \`undefined\`.
+      `)}
+    />
+    <Item
+      caption="Seamless Integration"
+      title={<>
+        <span className="text-orange-dark"> {React.string("The familiar JS ecosystem")} </span>
+        {React.string(" at your fingertips")}
+      </>}
+      media={<video
+        className="rounded-lg" controls={true} poster={"/lp/interop-example-preview.avif"}
+      >
+        <source
+          src="https://assets-17077.kxcdn.com/videos/interop-example-2.mp4" type_="video/mp4"
+        />
+      </video>}
+      paragraph={React.string(`Use any library from JavaScript, export ReScript
+      libraries to JavaScript, automatically generate TypeScript types. It's
+      like you've never left the good parts of JavaScript at all.`)}
+    />
+  </section>
+}

apps/docs/src/components/LandingPageMainSellingPoints.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: unit => React.element

apps/docs/src/components/LandingPageOtherSellingPoints.res

@@ -0,0 +1,61 @@
+@react.component
+let make = () => {
+  <section
+    dataTestId="landing-other-selling-points"
+    className="flex justify-center w-full bg-gray-90 border-t border-gray-80
+          px-4 sm:px-8 lg:px-16 pt-24 pb-20 "
+  >
+    <div className="max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8">
+      <div className="pb-24 md:pb-32 row-span-2 row-start-1 col-start-1 col-span-4 md:col-span-6">
+        <ImageGallery
+          className="w-full "
+          imgClassName="w-full h-[25.9rem] object-cover rounded-lg"
+          imgSrcs={["/lp/community-3.avif", "/lp/community-2.avif", "/lp/community-1.avif"]}
+          imgLoading=#lazy
+        />
+        <h3 className="hl-3 text-gray-20 mt-4 mb-2">
+          {React.string(`A community of programmers who value getting things done`)}
+        </h3>
+        <p className="body-md text-gray-40">
+          {React.string(`No language can be popular without a solid
+          community. A great type system isn't useful if library authors
+          abuse it. Performance doesn't show if all the libraries are slow.
+          Join the ReScript community — A group of companies and individuals
+          who deeply care about simplicity, speed and practicality.`)}
+        </p>
+        <a href="https://forum.rescript-lang.org" className="mt-6 inline-block">
+          <Button size={Button.Small} kind={Button.PrimaryBlue}>
+            {React.string("Join our Forum")}
+          </Button>
+        </a>
+      </div>
+      <div className="col-span-4 lg:row-start-1">
+        <img
+          className="w-full rounded-lg border-2 border-turtle-dark" src="/lp/editor-tooling-1.avif"
+        />
+        <h3 className="hl-3 text-gray-20 mt-6 mb-2">
+          {React.string(`Tooling that just works out of the box`)}
+        </h3>
+        <p className="body-md text-gray-40">
+          {React.string(`A builtin pretty printer, memory friendly
+          VSCode & Vim plugins, a stable type system and compiler that doesn't require lots
+          of extra configuration. ReScript brings all the tools you need to
+          build reliable JavaScript, Node and ReactJS applications.`)}
+        </p>
+      </div>
+      <div className="col-span-4 lg:row-start-2">
+        <img className="w-full rounded-lg border-2 border-fire-30" src="/lp/easy-to-unadopt.avif" />
+        <h3 className="hl-3 text-gray-20 mt-6 mb-2">
+          {React.string(`Easy to adopt — without any lock-in`)}
+        </h3>
+        <p className="body-md text-gray-40">
+          {React.string(`ReScript was made with gradual adoption in mind.  If
+          you ever want to go back to plain JavaScript, just remove all
+          source files and keep its clean JavaScript output. Tell
+          your coworkers that your project will keep functioning with or
+          without ReScript!`)}
+        </p>
+      </div>
+    </div>
+  </section>
+}

apps/docs/src/components/LandingPageOtherSellingPoints.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: unit => React.element