clean up landing page

Signed-off-by: Flipez <code@brauser.io>

docs/components/CodeBlockTheme.js

@@ -0,0 +1,71 @@
+var theme = {
+  plain: {
+    color: "rgba(255,90,121,255)",
+    backgroundColor: "rgba(48,56,70,255)",
+  },
+  styles: [
+    {
+      types: ["prolog", "constant", "builtin", "boolean"],
+      style: {
+        color: "rgb(189, 147, 249)",
+      },
+    },
+    {
+      types: ["inserted", "function"],
+      style: {
+        color: "rgba(255,157,39,255)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        color: "rgb(255, 85, 85)",
+      },
+    },
+    {
+      types: ["changed"],
+      style: {
+        color: "rgb(255, 184, 108)",
+      },
+    },
+    {
+      types: ["punctuation", "symbol"],
+      style: {
+        color: "rgb(248, 248, 242)",
+      },
+    },
+    {
+      types: ["string", "char", "tag", "selector"],
+      style: {
+        color: "rgba(79,209,217,255)",
+      },
+    },
+    {
+      types: ["keyword", "variable"],
+      style: {
+        color: "rgba(253,245,22,255)",
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["operator"],
+      style: {
+        color: "rgba(253,245,22,255)",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "rgb(98, 114, 164)",
+      },
+    },
+    {
+      types: ["attr-name"],
+      style: {
+        color: "rgba(253,245,22,255)",
+      },
+    },
+  ],
+};
+
+module.exports = theme;

docs/components/GetStarted.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import { BlueButton } from "./layout/Button";
 import styles from "./get-started.module.css";
-import { GithubButton } from "./GithubButton";
 
 export const GetStarted: React.FC = () => {
   const [clicked, setClicked] = useState<number | null>(null);
@@ -27,6 +25,10 @@ export const GetStarted: React.FC = () => {
           </div>
         </div>
       </div>
+      <br />
+      <br />
+      <br />
+      <br />
     </>
   );
 };

docs/components/Highlights.js

@@ -0,0 +1,192 @@
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import styles from "./Highlights.module.css";
+import Link from "@docusaurus/Link";
+import clsx from "clsx";
+import { GetStarted } from "./GetStarted";
+
+const WelcomeCode = `
+🚀 > puts("hello from rocket-lang!")
+"hello from rocket-lang!"
+=> nil
+
+🚀 > langs = ["ruby", "go", "crystal", "python", "php"]
+=> ["ruby", "go", "crystal", "python", "php"]
+
+🚀 > langs.yeet()
+=> "php"
+
+🚀 > langs.yoink("rocket-lang")
+=> nil
+
+🚀 > langs
+=> ["ruby", "go", "crystal", "python", "rocket-lang"]
+`
+
+function Welcome() {
+  return (
+    <section className={clsx(styles.section)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">
+            <h1 className={styles.writeincsstitle}>
+              It's not <br /> rocket science.
+            </h1>
+            <p>
+              Use some of the syntax features of Ruby (but worse) and create programs that will maybe perform better.
+            </p>
+
+            < GetStarted />
+          </div>
+          <div className="col col--6">
+            <CodeBlock language="js" children={WelcomeCode} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+
+
+
+const JSONExample = `
+🚀 > JSON.parse('{"test": 123}')
+=> {"test": 123.0}
+
+🚀 > a = {"test": 1234}
+=> {"test": 1234}
+
+🚀 > a.to_json()
+=> '{"test":1234}'
+`;
+
+const HTTPExample = `
+def test()
+  puts(request["body"])
+  return("test")
+end
+
+HTTP.handle("/", test)
+
+HTTP.listen(3000)
+`;
+
+const ClosuresExample = `
+newGreeter = def (greeting)
+  return def (name)
+           puts(greeting + " " + name)
+         end
+end
+
+hello = newGreeter("Hello");
+hello("dear, future Reader!");
+`;
+
+const BuiltinList = [
+  {
+    label: "JSON",
+    value: "json",
+    content: <CodeBlock language="js" children={JSONExample} />,
+  },
+  {
+    label: "HTTP",
+    value: "http",
+    content: <CodeBlock language="js" children={HTTPExample} />,
+  },
+  {
+    label: "Closures",
+    value: "closures",
+    content: <CodeBlock language="js" children={ClosuresExample} />,
+  },
+];
+
+function Builtins() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">
+            <Tabs defaultValue="json" values={BuiltinList}>
+              {BuiltinList.map((props, idx) => {
+                return (
+                  <TabItem key={idx} value={props.value}>
+                    {props.content}
+                  </TabItem>
+                );
+              })}
+            </Tabs>
+          </div>
+          <div className="col col--6">
+            <h2>
+              Strong and stable <span className="highlight">builtins</span>
+            </h2>
+            <p>
+              RocketLang ships some neat builtins such as handling HTTP requests and responses,
+              marshaling and unmashaling of JSON objects.
+            </p>
+            <p>
+              It also comes with support of closures and modules and context sensitive variables in order
+              to create complex programs.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const ObjectExample = `
+🚀 > "test".type()
+=> "STRING"
+
+🚀 > true.wat()
+=> BOOLEAN supports the following methods:
+                plz_s()
+
+🚀 > 1.methods()
+=> ["plz_s", "plz_i", "plz_f"]
+`;
+
+function EverythingObject() {
+  return (
+    <section className={clsx(styles.section)}>
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <h2>
+              <span className="highlight">Everything</span> is an object
+            </h2>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col col--6">
+            <p className={styles.paddingTopLg}>
+              Inspired by Ruby, in RocketLang everything is an object.
+            </p>
+            <p>
+              This allows to thread unknown input in the same way and figuring out what kind of
+              information your function passes on the go.
+              Every object supports the same minimum default subset of methods to achive this.
+            </p>
+          </div>
+          <div className="col col--6">
+            <CodeBlock language="js" children={ObjectExample} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default function Highlights() {
+  return (
+    <span>
+      {Welcome()}
+      {Builtins()}
+      {EverythingObject()}
+    </span>
+  );
+}

docs/components/Highlights.module.css

@@ -0,0 +1,59 @@
+.section {
+  display: flex;
+  padding: 4rem 0;
+  align-items: center;
+  vertical-align: center;
+  position: relative;
+  font-size: 1rem;
+}
+
+.section.darker {
+  background: #f9f9f9;
+}
+
+.section h2 {
+  font-size: 2rem;
+  text-align: center;
+  padding: 0 0 2rem;
+}
+
+.section p {
+  font-size: 1.2rem;
+}
+
+.paddingTopLg {
+  padding-top: 2rem;
+}
+
+@media (max-width: 996px) {
+  .paddingTopLg {
+    padding-top: 0;
+  }
+}
+
+.section code {
+  font-size: 0.83rem;
+}
+
+.wantMore {
+  border-top: 1px dashed #d4d5d8;
+  margin-top: 1rem;
+  padding: 2rem 0 1rem 0;
+}
+
+.writeincsstitle {
+  font-size: 4em;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 700;
+  line-height: 1;
+  -webkit-text-fill-color: transparent;
+  background: linear-gradient(
+    to right,
+    var(--text-color),
+    var(--light-text-color)
+  );
+  -webkit-background-clip: text;
+  max-width: 600px;
+  margin-top: 50px
+}