LandingPageLayout.mjs

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as Mdx from "../common/Mdx.mjs";
import * as Icon from "../components/Icon.mjs";
import * as Meta from "../components/Meta.mjs";
import * as Next from "../bindings/Next.mjs";
import * as Curry from "rescript/lib/es6/curry.js";
import * as React from "react";
import * as Button from "../components/Button.mjs";
import * as Markdown from "../components/Markdown.mjs";
import * as OurUsers from "../common/OurUsers.mjs";
import * as LzString from "lz-string";
import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
import * as Navigation from "../components/Navigation.mjs";
import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
import * as Caml_option from "rescript/lib/es6/caml_option.js";
import * as HighlightJs from "../common/HighlightJs.mjs";
import * as ImageGallery from "../components/ImageGallery.mjs";

function LandingPageLayout$Intro(Props) {
  return React.createElement("section", {
              className: "flex justify-center word-keep-all"
            }, React.createElement("div", {
                  className: "max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content"
                }, React.createElement("h1", {
                      className: "hl-title text-center max-w-[53rem]"
                    }, "빠르고, 단순하고,", React.createElement("br", undefined), "온전한 타입의", React.createElement("br", undefined), "미래에서 온 JavaScript"), React.createElement("h2", {
                      className: "body-lg text-center text-gray-60 my-4 max-w-[40rem]"
                    }, "ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다."), React.createElement("div", {
                      className: "mt-4 mb-2"
                    }, React.createElement(Next.Link.make, {
                          href: "/docs/manual/latest/installation",
                          passHref: true,
                          children: React.createElement(Button.make, {
                                children: "시작하기"
                              })
                        }))));
}

var examples = [{
    res: "module Button = {\n  @react.component\n  let make = (~count: int) => {\n    let times = switch count {\n    | 1 => \"once\"\n    | 2 => \"twice\"\n    | n => Belt.Int.toString(n) ++ \" times\"\n    }\n    let msg = \"Click me \" ++ times\n\n    <button> {msg->React.string} </button>\n  }\n}",
    js: "var React = require(\"react\");\n\nfunction Playground$Button(Props) {\n  var count = Props.count;\n  var times = count !== 1 ? (\n      count !== 2 ? String(count) + \" times\" : \"twice\"\n    ) : \"once\";\n  var msg = \"Click me \" + times;\n  return React.createElement(\"button\", undefined, msg);\n}\n\nvar Button = {\n  make: Playground$Button\n};\n\nexports.Button = Button;"
  }];

function LandingPageLayout$PlaygroundHero(Props) {
  var match = React.useState(function () {
        return examples[0];
      });
  var example = match[0];
  return React.createElement("section", {
              className: "relative mt-20 bg-gray-10 word-keep-all"
            }, React.createElement("div", {
                  className: "relative flex justify-center w-full"
                }, React.createElement("div", {
                      className: "relative w-full pt-6 pb-8 sm:px-8 md:px-16 max-w-[1400px]"
                    }, React.createElement("div", {
                          className: "relative z-2 flex flex-col md:flex-row bg-gray-90 mx-auto sm:rounded-lg max-w-[1280px]"
                        }, React.createElement("div", {
                              className: "md:w-1/2"
                            }, React.createElement("div", {
                                  className: "body-sm text-gray-40 text-center py-3 sm:rounded-t-lg md:rounded-tl-lg bg-gray-100"
                                }, "ReScript로 작성하면"), React.createElement("pre", {
                                  className: "text-14 px-8 pt-6 pb-12 whitespace-pre-wrap"
                                }, HighlightJs.renderHLJS(undefined, true, example.res, "res", undefined))), React.createElement("div", {
                              className: "md:w-1/2 "
                            }, React.createElement("div", {
                                  className: "body-sm text-gray-40 py-3 text-center md:border-l border-gray-80 bg-gray-100 sm:rounded-tr-lg"
                                }, "JavaScript로 컴파일됩니다."), React.createElement("pre", {
                                  className: "text-14 px-8 pt-6 pb-14 md:border-l border-gray-80 whitespace-pre-wrap"
                                }, HighlightJs.renderHLJS(undefined, true, example.js, "js", undefined)))), React.createElement("div", undefined, React.createElement(Next.Link.make, {
                              href: "/try?code=" + LzString.compressToEncodedURIComponent(example.res) + "}",
                              children: React.createElement("a", {
                                    className: "captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60"
                                  }, "플레이 그라운드에서 위의 예제 편집하기")
                            })), React.createElement("div", {
                          className: "hidden md:block"
                        }, React.createElement("img", {
                              className: "absolute z-0 left-0 top-0 -ml-10 -mt-6",
                              style: {
                                height: "24rem",
                                width: "24rem"
                              },
                              src: "/static/lp/grid.svg"
                            }), React.createElement("img", {
                              className: "absolute z-0 left-0 top-0 -ml-10 mt-10",
                              src: "/static/lp/illu_left.png"
                            })), React.createElement("div", {
                          className: "hidden md:block"
                        }, React.createElement("img", {
                              className: "absolute z-0 right-0 bottom-0 -mb-10 mt-24 -mr-10",
                              style: {
                                height: "24rem",
                                width: "24rem"
                              },
                              src: "/static/lp/grid.svg"
                            }), React.createElement("img", {
                              className: "absolute z-3 right-0 bottom-0 -mr-2 mb-10",
                              src: "/static/lp/illu_right.png"
                            })))));
}

var copyToClipboard = (function(str) {
    try {
      const el = document.createElement('textarea');
      el.value = str;
      el.setAttribute('readonly', '');
      el.style.position = 'absolute';
      el.style.left = '-9999px';
      document.body.appendChild(el);
      const selected =
        document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        if (selected) {
          document.getSelection().removeAllRanges();
          document.getSelection().addRange(selected);
        }
        return true;
      } catch(e) {
        return false;
      }
    });

function LandingPageLayout$QuickInstall$CopyButton(Props) {
  var code = Props.code;
  var match = React.useState(function () {
        return /* Init */0;
      });
  var setState = match[1];
  var state = match[0];
  var buttonRef = React.useRef(null);
  var onClick = function (evt) {
    evt.preventDefault();
    if (copyToClipboard(code)) {
      return Curry._1(setState, (function (param) {
                    return /* Copied */1;
                  }));
    } else {
      return Curry._1(setState, (function (param) {
                    return /* Failed */2;
                  }));
    }
  };
  React.useEffect((function () {
          if (state !== 1) {
            return ;
          }
          var buttonEl = Belt_Option.getExn(Caml_option.nullable_to_opt(buttonRef.current));
          var bannerEl = document.createElement("div");
          bannerEl.className = "foobar opacity-0 absolute top-0 mt-4 -mr-1 px-2 rounded right-0\n            bg-turtle text-gray-80-tr body-sm\n            transition-all duration-500 ease-in-out ";
          var textNode = document.createTextNode("Copied!");
          bannerEl.appendChild(textNode);
          buttonEl.appendChild(bannerEl);
          var nextFrameId = window.requestAnimationFrame(function (param) {
                bannerEl.classList.toggle("opacity-0");
                bannerEl.classList.toggle("opacity-100");
              });
          var timeoutId = setTimeout((function (param) {
                  buttonEl.removeChild(bannerEl);
                  Curry._1(setState, (function (param) {
                          return /* Init */0;
                        }));
                }), 2000);
          return (function (param) {
                    window.cancelAnimationFrame(nextFrameId);
                    clearTimeout(timeoutId);
                  });
        }), [state]);
  return React.createElement("button", {
              ref: buttonRef,
              className: "relative h-10 w-10 flex justify-center items-center ",
              disabled: state === /* Copied */1,
              onClick: onClick
            }, React.createElement(Icon.Copy.make, {
                  className: "w-6 h-6 mt-px text-gray-40 hover:cursor-pointer hover:text-gray-80"
                }));
}

function copyBox(text) {
  return React.createElement("div", {
              className: "flex justify-between items-center pl-6 pr-3 py-3 w-full bg-gray-10 border border-gray-20 rounded max-w-[25rem]"
            }, React.createElement("span", {
                  className: "font-mono text-14  text-gray-70"
                }, text), React.createElement(LandingPageLayout$QuickInstall$CopyButton, {
                  code: text
                }));
}

function LandingPageLayout$QuickInstall$Instructions(Props) {
  return React.createElement("div", {
              className: "w-full max-w-[400px] word-keep-all"
            }, React.createElement("h2", {
                  className: "hl-3 lg:mt-12"
                }, "빠른 설치"), React.createElement("div", {
                  className: "captions x text-gray-40 mb-2 mt-1"
                }, "기존 JavaScript 코드베이스에서 npm 또는 yarn을 이용해 ReScript를 빠르게 추가할 수 있습니다."), React.createElement("div", {
                  className: "w-full space-y-2"
                }, copyBox("npm install rescript"), copyBox("npx rescript init .")));
}

function LandingPageLayout$QuickInstall(Props) {
  return React.createElement("section", {
              className: "my-32 sm:px-4 sm:flex sm:justify-center word-keep-all"
            }, React.createElement("div", {
                  className: "max-w-1060 flex flex-col w-full px-5 md:px-8 lg:px-8 lg:box-content "
                }, React.createElement("div", {
                      className: "relative max-w-[28rem]"
                    }, React.createElement("h2", {
                          className: "relative z-1 space-y-12 text-gray-80 font-semibold text-24 md:text-32 leading-2"
                        }, React.createElement("span", {
                              className: "bg-fire-5 rounded-lg border border-fire-10 p-1 "
                            }, "JavaScript의 모든 기능"), "을 \`any(어떤)\` 타입으로 쓰던 걱정 없이 강력한 타입의 언어로 누리세요.")), React.createElement("div", {
                      className: "w-full mt-12 md:flex flex-col lg:flex-row md:justify-between "
                    }, React.createElement("p", {
                          className: "relative z-1 text-gray-80 font-semibold text-24 md:text-32 leading-2 max-w-[32rem]"
                        }, "ReScript는 UI 및 UX가 우수한 미션 크리티컬한 제품을 출시하고 관리하는 데 사용됩니다."), React.createElement("div", {
                          className: "mt-16 lg:mt-0 self-end",
                          style: {
                            maxWidth: "25rem"
                          }
                        }, React.createElement(LandingPageLayout$QuickInstall$Instructions, {})))));
}

function LandingPageLayout$MainUSP$Item(Props) {
  var caption = Props.caption;
  var title = Props.title;
  var mediaOpt = Props.media;
  var polygonDirectionOpt = Props.polygonDirection;
  var paragraph = Props.paragraph;
  var media = mediaOpt !== undefined ? Caml_option.valFromOption(mediaOpt) : "Placeholder";
  var polygonDirection = polygonDirectionOpt !== undefined ? polygonDirectionOpt : /* Down */1;
  var polyPointsLg = polygonDirection ? "80,0 85,100 100,100 100,0" : "85,0 80,100 100,100 100,0";
  var polyPointsMobile = polygonDirection ? "0,100 100,100 100,70 0,80" : "0,100 100,100 100,78 0,72";
  var polyColor = polygonDirection ? "text-fire-30" : "text-fire";
  return React.createElement("div", {
              className: "relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden word-keep-all"
            }, React.createElement("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"
                }, React.createElement("div", {
                      className: "max-w-[24rem] flex flex-col justify-center mb-6 lg:mb-2"
                    }, React.createElement("div", {
                          className: "hl-overline text-gray-20 mb-4"
                        }, caption), React.createElement("h3", {
                          className: "text-gray-10 mb-4 hl-2 font-semibold"
                        }, title), React.createElement("div", {
                          className: "flex"
                        }, React.createElement("div", {
                              className: "text-gray-30 body-md pr-8"
                            }, paragraph))), React.createElement("div", {
                      className: "relative mt-10 lg:mt-0"
                    }, React.createElement("div", {
                          className: "relative w-full z-2 bg-gray-90 rounded-lg flex md:mt-0 items-center justify-center",
                          style: {
                            maxWidth: "35rem",
                            boxShadow: "0px 4px 55px 0px rgba(230,72,79,0.10)"
                          }
                        }, media), React.createElement("img", {
                          className: "absolute z-1 bottom-0 right-0 -mb-12 -mr-12",
                          style: {
                            maxWidth: "20rem"
                          },
                          src: "/static/lp/grid2.svg"
                        }))), React.createElement("svg", {
                  className: "md:hidden absolute z-1 w-full h-full bottom-0 left-0 " + polyColor + "",
                  preserveAspectRatio: "none",
                  viewBox: "0 0 100 100"
                }, React.createElement("polygon", {
                      className: "fill-current",
                      points: polyPointsMobile
                    })), React.createElement("svg", {
                  className: "hidden md:block absolute z-1 w-full h-full right-0 top-0 " + polyColor + "",
                  preserveAspectRatio: "none",
                  viewBox: "0 0 100 100"
                }, React.createElement("polygon", {
                      className: "fill-current",
                      points: polyPointsLg
                    })));
}

var item1 = React.createElement(LandingPageLayout$MainUSP$Item, {
      caption: "빠르고 심플함",
      title: React.createElement(React.Fragment, undefined, "웹에서 가장 빠른", React.createElement("br", undefined), "빌드 시스템"),
      media: React.createElement("video", {
            className: "rounded-lg",
            controls: true,
            poster: "/static/lp/fast-build-preview.jpg"
          }, React.createElement("source", {
                src: "https://assets-17077.kxcdn.com/videos/fast-build-3.mp4",
                type: "video/mp4"
              })),
      paragraph: React.createElement(React.Fragment, undefined, React.createElement("p", undefined, "ReScript는 어떠한 크기의 코드베이스에서도 일관되게 빠른 피드백 루프를 제공하기 위해 노력합니다.\n      자유롭게 코드를 리팩토링하고, 복잡한 변경 사항을 가져오고, 기능 브랜치를 전환하세요.\n      느린 CI 빌드, 오래된 캐시 문제, 잘못된 타입 힌트, 과도한 메모리 사용으로 개발이 느려지는 일은 없습니다."), React.createElement("p", {
                className: "mt-6"
              }, React.createElement(Next.Link.make, {
                    href: "/docs/manual/latest/build-performance",
                    passHref: true,
                    children: React.createElement(Button.make, {
                          kind: /* PrimaryBlue */1,
                          size: /* Small */0,
                          children: "더 알아보기"
                        })
                  })))
    });

var item2 = React.createElement(LandingPageLayout$MainUSP$Item, {
      caption: "강력한 타입 시스템",
      title: React.createElement("span", {
            className: "text-transparent bg-clip-text bg-gradient-to-r from-berry-dark-50 to-fire-50"
          }, "더 나은 타이핑"),
      media: React.createElement("video", {
            className: "rounded-lg",
            controls: true,
            poster: "/static/lp/type-better-preview.jpg"
          }, React.createElement("source", {
                src: "https://assets-17077.kxcdn.com/videos/type-better-3.mp4",
                type: "video/mp4"
              })),
      polygonDirection: /* Up */0,
      paragraph: "모든 ReScript 앱은 여러분의 프로그램에 어떤 값이 주어지더라도 안전한 타입 정보를 제공합니다.\n      우리는 명확하고 쉬운 디버깅을 위해 복잡한 타입보다는 단순한 타입을 우선시합니다.\n      어떤 종류의 \`any\`도, 어려운 타입도, \`undefined\` 같은 당황스러움도 없습니다."
    });

var item3 = React.createElement(LandingPageLayout$MainUSP$Item, {
      caption: "매끄럽게 진행되는 인터그레이션",
      title: React.createElement(React.Fragment, undefined, React.createElement("span", {
                className: "text-orange-dark"
              }, "JS에 친숙한 생태계"), React.createElement("br", undefined), "를 바로 사용해보세요."),
      media: React.createElement("video", {
            className: "rounded-lg",
            controls: true,
            poster: "/static/lp/interop-example-preview.jpg"
          }, React.createElement("source", {
                src: "https://assets-17077.kxcdn.com/videos/interop-example-2.mp4",
                type: "video/mp4"
              })),
      paragraph: "어떠한 JavaScript 라이브러리도 사용할 수 있고,\n      ReScript 라이브러리를 JavaScript로 내보낼 수도 있습니다. 그리고 자동으로 TypeScript 타입을 생성할 수도 있습니다.\n      마치 JavaScript의 좋은 점은 하나도 잃어버리지 않은 기분일 겁니다."
    });

function LandingPageLayout$MainUSP(Props) {
  return React.createElement("section", {
              className: "w-full bg-gray-90 overflow-hidden",
              style: {
                minHeight: "37rem"
              }
            }, item1, item2, item3);
}

function LandingPageLayout$OtherSellingPoints(Props) {
  return React.createElement("section", {
              className: "flex justify-center w-full bg-gray-90 border-t border-gray-80\n            px-4 sm:px-8 lg:px-16 pt-24 pb-20 word-keep-all"
            }, React.createElement("div", {
                  className: "max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8"
                }, React.createElement("div", {
                      className: "pb-24 md:pb-32 row-span-2 row-start-1 col-start-1 col-span-4 md:col-span-6"
                    }, React.createElement(ImageGallery.make, {
                          className: "w-full ",
                          imgClassName: "w-full h-[25.9rem] object-cover rounded-lg",
                          imgSrcs: [
                            "/static/lp/community-3.jpg",
                            "/static/lp/community-2.jpg",
                            "/static/lp/community-1.jpg"
                          ]
                        }), React.createElement("h3", {
                          className: "hl-3 text-gray-20 mt-4 mb-2"
                        }, "작업 완료를 중요시하는 프로그래머 커뮤니티"), React.createElement("p", {
                          className: "body-md text-gray-40"
                        }, "기반을 잡아주는 든든한 커뮤니티 없이는 어떤 언어도 대중화될 수 없습니다. 훌륭한 타입 시스템도 라이브러리 개발자들이 남용한다면 유용하지 않을 것이고, 모든 라이브러리가 느려지면 퍼포먼스 성능이 표시되지 않을 것입니다.\nReScript 커뮤니티에 참여하세요! 단순성, 속도 및 실용성에 대해 깊은 관심을 가진 기업 및 개인들의 모임입니다."), React.createElement("div", {
                          className: "mt-6"
                        }, React.createElement(Button.make, {
                              href: "https://forum.rescript-lang.org",
                              kind: /* PrimaryBlue */1,
                              size: /* Small */0,
                              children: "포럼에 참여하기"
                            }))), React.createElement("div", {
                      className: "col-span-4 lg:row-start-1"
                    }, React.createElement("img", {
                          className: "w-full rounded-lg border-2 border-turtle-dark",
                          src: "/static/lp/editor-tooling-1.jpg"
                        }), React.createElement("h3", {
                          className: "hl-3 text-gray-20 mt-6 mb-2"
                        }, "기발한 툴링"), React.createElement("p", {
                          className: "body-md text-gray-40"
                        }, "내장된 포맷 도구, 메모리 친화적인 VSCode와 Vim 플러그인, 많은 추가 구성이 필요하지 않은 안정적인 타입 시스템 및 컴파일러입니다. ReScript는 신뢰할 수 있는 JavaScript, Node 및 ReactJS 응용프로그램을 구축하는 데 필요한 모든 도구를 제공합니다.")), React.createElement("div", {
                      className: "col-span-4 lg:row-start-2"
                    }, React.createElement("img", {
                          className: "w-full rounded-lg border-2 border-fire-30",
                          src: "/static/lp/easy-to-unadopt.jpg"
                        }), React.createElement("h3", {
                          className: "hl-3 text-gray-20 mt-6 mb-2"
                        }, "제한없는 간단한 적용"), React.createElement("p", {
                          className: "body-md text-gray-40"
                        }, "ReScript는 점진적인 적용(Adoption)을 염두에 두고 만들어졌습니다. 만약 일반 JavaScript로 돌아가고 싶다면, 모든 소스 파일을 제거하고 깨끗한 JavaScript 컴파일 결과를 유지하면 됩니다. ReScript가 있든 없든 프로젝트는 계속 정상적으로 작동할 것이라고 동료들에게 말할 수 있을 것입니다!"))));
}

function LandingPageLayout$TrustedBy(Props) {
  return React.createElement("section", {
              className: "mt-20"
            }, React.createElement("h3", {
                  className: "hl-1 text-gray-80 text-center max-w-576 mx-auto"
                }, "Trusted by our users"), React.createElement("div", {
                  className: "flex flex-wrap mx-4 gap-8 justify-center items-center max-w-xl lg:mx-auto mt-16 "
                }, OurUsers.companies.map(function (company) {
                      var renderedCompany = React.createElement("a", {
                            href: company.url,
                            rel: "noopener noreferrer"
                          }, React.createElement("img", {
                                className: "hover:opacity-75 max-w-sm h-12",
                                src: company.path
                              }));
                      return React.createElement("div", {
                                  key: company.name
                                }, renderedCompany);
                    })), React.createElement("div", {
                  className: "mt-10 max-w-320 overflow-hidden opacity-50",
                  style: {
                    maxHeight: "6rem"
                  }
                }, React.createElement("img", {
                      className: "w-full h-full",
                      src: "/static/lp/grid.svg"
                    })));
}

var cards = [
  {
    imgSrc: "/static/ic_manual@2x.png",
    title: "언어 메뉴얼",
    descr: "기본 문법 탐색: ReScript의 모든 언어 기능에 대한 참조 문서를 제공합니다.",
    href: "/docs/manual/latest/introduction"
  },
  {
    imgSrc: "/static/ic_rescript_react@2x.png",
    title: "ReScript + React",
    descr: "전 세계의 사용자들이 이용하는 ReactJS를 위한 1급 바인딩들을 알아보세요.",
    href: "/docs/react/latest/introduction"
  },
  {
    imgSrc: "/static/ic_manual@2x.png",
    title: React.createElement(React.Fragment, undefined, React.createElement("div", {
              className: "word-keep-all"
            }, "점진적으로 ReScript 적용하기")),
    descr: "현 프로젝트에서 ReScript 사용을 시작하는 방법에 대해 배워보세요. 전부를 이해할 필요는 없습니다. 먼저 사용해 보세요!",
    href: "/docs/manual/latest/installation#integrate-into-an-existing-js-project"
  },
  {
    imgSrc: "/static/ic_gentype@2x.png",
    title: "TypeScript 인터그레이션",
    descr: "이미 가지고 있는 TypeScript 코드베이스에서 ReScript를 통합하는 방법을 알아보세요.",
    href: "/docs/gentype/latest/introduction"
  }
];

var templates = [{
    imgSrc: "/static/nextjs_starter_logo.svg",
    title: React.createElement(React.Fragment, undefined, React.createElement("div", undefined, "ReScript & "), React.createElement("div", {
              className: "text-gray-40"
            }, "NextJS")),
    descr: "NextJS 스타터 템플릿으로 시작하세요.",
    href: "https://github.com/ryyppy/rescript-nextjs-template"
  }];

function LandingPageLayout$CuratedResources(Props) {
  return React.createElement("section", {
              className: "bg-gray-100 w-full pb-40 pt-20 "
            }, React.createElement("div", {
                  className: "mb-10 max-w-1280 flex flex-col justify-center items-center mx-5 md:mx-8 lg:mx-auto"
                }, React.createElement("div", {
                      className: "body-sm md:body-lg text-gray-40 w-40 mb-4 xs:w-auto text-center"
                    }, "ReScript 시작하기"), React.createElement("h2", {
                      className: "hl-1 text-gray-20 text-center"
                    }, "엄선된 자료들")), React.createElement("div", {
                  className: "px-5 md:px-8 max-w-1280 mx-auto my-20"
                }, React.createElement("div", {
                      className: "body-lg text-center z-2 relative text-gray-40 max-w-[12rem] mx-auto bg-gray-100"
                    }, "설명 가이드와 문서들"), React.createElement("hr", {
                      className: "bg-gray-80 h-px border-0 relative top-[-12px]"
                    })), React.createElement("div", undefined, React.createElement("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 word-keep-all"
                    }, Belt_Array.mapWithIndex(cards, (function (i, card) {
                            return React.createElement(Next.Link.make, {
                                        href: card.href,
                                        children: React.createElement("a", {
                                              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]"
                                            }, React.createElement("img", {
                                                  className: "h-[53px] absolute mt-6",
                                                  src: card.imgSrc
                                                }), React.createElement("h5", {
                                                  className: "text-gray-10 hl-4 mt-32 h-12"
                                                }, card.title), React.createElement("div", {
                                                  className: "text-gray-40 mt-2 mb-8 body-sm"
                                                }, card.descr)),
                                        key: String(i)
                                      });
                          }))), React.createElement("div", {
                      className: "px-5 md:px-8 max-w-1280 mx-auto my-20"
                    }, React.createElement("div", {
                          className: "body-lg text-center z-2 relative text-gray-40 w-[8rem] mx-auto bg-gray-100"
                        }, "템플릿"), React.createElement("hr", {
                          className: "bg-gray-80 h-px border-0 relative top-[-12px]"
                        })), React.createElement("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"
                    }, Belt_Array.mapWithIndex(templates, (function (i, card) {
                            return React.createElement("a", {
                                        key: String(i),
                                        className: "hover:bg-gray-80 bg-gray-90 px-5 pb-8 relative rounded-xl min-w-[200px]",
                                        href: card.href
                                      }, React.createElement("img", {
                                            className: "h-12 absolute mt-5",
                                            src: card.imgSrc
                                          }), React.createElement("h5", {
                                            className: "text-gray-10 hl-4 mt-32 h-12"
                                          }, card.title), React.createElement("div", {
                                            className: "text-gray-40 mt-4 body-sm word-keep-all"
                                          }, card.descr));
                          })))));
}

function LandingPageLayout(Props) {
  var componentsOpt = Props.components;
  var children = Props.children;
  var components = componentsOpt !== undefined ? Caml_option.valFromOption(componentsOpt) : Markdown.$$default;
  var overlayState = React.useState(function () {
        return false;
      });
  return React.createElement(React.Fragment, undefined, React.createElement(Meta.make, {
                  keywords: [
                    "ReScript",
                    "rescriptlang",
                    "JavaScript",
                    "JS",
                    "TypeScript"
                  ],
                  description: "Fast, Simple, Fully Typed JavaScript from the Future",
                  title: "ReScript 프로그래밍 언어",
                  ogImage: "static/Art-3-rescript-launch.jpg"
                }), React.createElement("div", {
                  className: "mt-4 xs:mt-16"
                }, React.createElement("div", {
                      className: "text-gray-80 text-18"
                    }, React.createElement(Navigation.make, {
                          overlayState: overlayState
                        }), React.createElement("div", {
                          className: "absolute top-16 w-full"
                        }, React.createElement("div", {
                              className: "relative overflow-hidden pb-32"
                            }, React.createElement("main", {
                                  className: "mt-10 min-w-320 lg:align-center w-full"
                                }, React.createElement(Mdx.Provider.make, {
                                      components: components,
                                      children: React.createElement("div", {
                                            className: ""
                                          }, React.createElement("div", {
                                                className: "w-full"
                                              }, React.createElement("div", {
                                                    className: "mt-16 md:mt-32 lg:mt-40 mb-12"
                                                  }, React.createElement(LandingPageLayout$Intro, {})), React.createElement(LandingPageLayout$PlaygroundHero, {}), React.createElement(LandingPageLayout$QuickInstall, {}), React.createElement(LandingPageLayout$MainUSP, {}), React.createElement(LandingPageLayout$OtherSellingPoints, {}), React.createElement(LandingPageLayout$TrustedBy, {}), React.createElement(LandingPageLayout$CuratedResources, {}), children))
                                    })))))));
}

var make = LandingPageLayout;

export {
  make ,
}
/* item1 Not a pure module */