docs: new branding

.nvmrc

@@ -0,0 +1 @@
+14.0.0

website/docs/getting-started.md

@@ -4,12 +4,11 @@ id: getting-started
 slug: /getting-started
 ---
 
-## Quick start
+## Quick start 🚀
 
 The following code excerpt demonstrates a quick start example:
 
-```rescript
-// UserForm.res
+```ocaml title="UserForm.res"
 
 module FormFields = %lenses(
   type state = {
@@ -31,7 +30,6 @@ let make = (~email) => {
     }},
     ~initialState={
       name: "",
-      // Initialize from external values if you want
       email,
     },
     ~schema={

website/docs/installation.md

@@ -4,7 +4,7 @@ id: installation
 slug: /installation
 ---
 
-## Dependencies
+## Dependencies 📦
 
 Install `reform` and `reschema`:
 

website/docs/what-and-why.md

@@ -4,20 +4,20 @@ id: what-and-why
 slug: /
 ---
 
-## What is this?
+## What is this? 🤔
 
 As you might know, you can use any existing React / JavaScript libraries with ReScript, 
 including **form libraries** like Formik, react-hook-form, Final Form, since you install or create bindings for these libraries.
 ReForm is not a set of bindings for an existing form library, it was created from scratch to use with ReScript and React. 
 
 
-## Why?
+## Why? 🧐
 
 Code that deals with strongly typed forms can quickly become walls of repeated text. 
 We created ReForm to be both deadly simple and to make forms sound good leveraging ReScript's powerful typesytem. 
 Even the schemas we use are nothing more than constructors built-in in the language itself with a small size footprint.
 
-## Features
+## Features 📦
 
 - Hook API
 - Schema API

website/docusaurus.config.js

@@ -1,4 +1,6 @@
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
 module.exports = {
   title: "ReForm",
   tagline: "Reasonably making forms sound good",
@@ -15,7 +17,7 @@ module.exports = {
       disableSwitch: true,
     },
     navbar: {
-      title: "ReForm",
+      title: "",
       logo: {
         alt: "ReForm Logo",
         src: "img/logo.svg",
@@ -28,8 +30,7 @@ module.exports = {
           position: "left",
         },
         {
-          href:
-            "https://github.com/rescriptbr/reform/blob/master/reform/CHANGELOG.md",
+          href: "https://github.com/rescriptbr/reform/blob/master/reform/CHANGELOG.md",
           label: "Changelog",
           position: "left",
         },
@@ -80,6 +81,10 @@ module.exports = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} ReForm. Built with Docusaurus.`,
     },
+    prism: {
+      theme: lightCodeTheme,
+      darkTheme: darkCodeTheme,
+    },
   },
   presets: [
     [

website/package.json

@@ -1,6 +1,9 @@
 {
   "name": "website",
   "version": "0.0.0",
+  "engine": {
+    "node": ">=14"
+  },
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -14,10 +17,11 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.72",
-    "@docusaurus/preset-classic": "2.0.0-alpha.72",
+    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/preset-classic": "2.0.0-beta.14",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
+    "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

website/src/css/custom.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
 :root {
   --red: #DD1350;
   --red-hover: #C11347;
@@ -14,6 +16,8 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+  --ifm-font-family-base: 'DM Sans', sans-serif;
+  --ifm-footer-link-hover-color: #000;
 }
 
 html[data-theme="dark"] {

website/src/pages/index.js

@@ -17,11 +17,11 @@ export default function Home() {
       <main>
         <div className={clsx(styles["main-wrapper"])}>
           <div className={clsx(styles.hero)}>
-            <img src="/img/hero-logo.svg" />
-            <h1 className={styles["hero-title"]}>
+            <h1 className={styles["hero-title"]}>Powerful and type-safe</h1>
+            <p className={styles["hero-text"]}>
               Reasonably making forms with <span>ReScript</span> and{" "}
-              <span>React</span> sound good
-            </h1>
+              React sound good
+            </p>
             <div>
               <Link
                 className={clsx("button button--primary button--lg")}
@@ -37,7 +37,7 @@ export default function Home() {
             <div className={clsx("row", styles.highlights)}>
               <section className="col margin-bottom--xl">
                 <img src="/img/focus.svg" />
-                <h2>Focused in ReScript</h2>
+                <h2 className={styles["highlight-title"]}>Focused in ReScript</h2>
                 <p className=" padding-horiz--md">
                   We created ReForm to be both deadly simple and to make forms
                   sound good leveraging ReScript's powerful typesytem. Even the
@@ -47,7 +47,7 @@ export default function Home() {
               </section>
               <section className="col margin-bottom--xl">
                 <img src="/img/powerful.svg" />
-                <h2>Powerful and type-safe</h2>
+                <h2 className={styles["highlight-title"]}>Powerful and type-safe</h2>
                 <p className=" padding-horiz--md">
                   ReForm is a powerful, type-safe and fully-featured form
                   library that includes hooks api, schema api, context provider,
@@ -56,7 +56,7 @@ export default function Home() {
               </section>
               <section className="col margin-bottom--xl">
                 <img src="/img/activity.svg" />
-                <h2>Actively maintained</h2>
+                <h2 className={styles["highlight-title"]}>Actively maintained</h2>
                 <p className=" padding-horiz--md">
                   ReForm is used in production projects. This incentivizes us to
                   regularly improving the library and to keep breaking changes

website/src/pages/styles.module.css

@@ -7,10 +7,26 @@
   text-align: center;
 }
 
+.hero {
+  padding: 0 24px;
+}
+
 .hero > img {
   margin-bottom: 1.6rem;
 }
 
+.hero-text {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.6);
+  letter-spacing: -0.06em;
+  margin-bottom: 16px;
+}
+
+.hero-title {
+  letter-spacing: -0.06em;
+  font-weight: bold;
+}
+
 .hero-title > span {
   color: var(--red);
 }
@@ -27,12 +43,16 @@
   }
 
   .main-wrapper {
-    padding: 4rem 0;
+    padding: 3rem 0;
   }
 
   .hero-title {
-    font-size: 1.8rem;
-    margin-bottom: 1.6rem;
+    font-size: 2.4rem;
+    margin-bottom: 8px;
+  }
+
+  .hero-text {
+    font-size: 1.6rem;
   }
 }
 
@@ -43,14 +63,19 @@
   }
 
   .main-wrapper {
-    padding: 4rem 0;
+    padding: 3rem 0;
     max-width: 600px;
   }
 
   .hero-title {
-    font-size: 2.4rem;
-    margin-bottom: 1.6rem;
+    font-size: 3.0rem;
+    margin-bottom: 10px;
+  }
+
+  .hero-text {
+    font-size: 1.8rem;
   }
+
 }
 
 
@@ -61,14 +86,19 @@
   }
 
   .main-wrapper {
-    padding: 5rem 0;
+    padding: 4rem 0;
     max-width: 700px;
   }
 
   .hero-title {
-    font-size: 2.6rem;
-    margin-bottom: 1.6rem;
+    font-size: 3.0rem;
+    margin-bottom: 10px;
+  }
+
+  .hero-text {
+    font-size: 1.8rem;
   }
+
 }
 
 
@@ -81,14 +111,20 @@
   }
 
   .main-wrapper {
-    padding: 6rem 0;
+    padding: 5rem 0;
     max-width: 800px;
   }
 
-  .hero-title {
-    font-size: 2.4rem;
-    margin-bottom: 1.6rem;
+   .hero-title {
+    font-size: 3.0rem;
+    margin-bottom: 10px;
   }
-}
 
+  .hero-text {
+    font-size: 1.8rem;
+  }
+}
 
+.highlight-title {
+  letter-spacing: -0.06em;
+}