feat(website): update website homepage (#278)

* chore(lint): fix eslint errors

* feat(fonts): use oxanium fonts only for styling

* feat(docs): add community page

* fix(website): make favicon correct size

* feat(website): add faqs

* feat(website): add reddit

packages/website/docs/intro.md

@@ -2,6 +2,16 @@
 sidebar_position: 1
 ---
 
-# Introduction
+# Getting started
 
-Welcome to Taiko!
+Welcome to Taiko! 🥁
+
+## Learning materials
+
+The best places to start learning about Taiko would be:
+
+- [FAQ](../faq/)
+- [Introduction to Taiko](https://mirror.xyz/labs.taiko.eth/oRy3ZZ_4-6IEQcuLCMMlxvdH6E-T3_H7UwYVzGDsgf4)
+- [The Type 1 ZK-EVM](https://mirror.xyz/labs.taiko.eth/w7NSKDeKfJoEy0p89I9feixKfdK-20JgWF9HZzxfeBo)
+- [Whitepaper](https://taikochain.github.io/taiko-mono/taiko-whitepaper.pdf)
+- [GitHub](https://github.com/taikochain/)

packages/website/docusaurus.config.js

@@ -9,12 +9,12 @@ const katex = require("rehype-katex");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Taiko",
-  tagline: "A decentralized Ethereum equivalent ZK rollup",
+  tagline: "A decentralized Ethereum-equivalent ZK-rollup",
   url: "https://taiko.xyz",
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/Taiko_Token_Fluo.png",
+  favicon: "img/Taiko_Favicon_Fluo.png",
 
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
@@ -24,6 +24,26 @@ const config = {
     locales: ["en"],
   },
 
+  plugins: [
+    [
+      "content-docs",
+      {
+        id: "talks",
+        path: "talks",
+        routeBasePath: "talks",
+        sidebarPath: require.resolve("./sidebars.js"),
+      },
+    ],
+    [
+      "content-docs",
+      {
+        id: "faq",
+        path: "faq",
+        routeBasePath: "faq",
+      },
+    ],
+  ],
+
   presets: [
     [
       "classic",
@@ -70,14 +90,24 @@ const config = {
         items: [
           {
             to: "docs/intro",
-            label: "Docs",
+            label: "Learn",
             position: "left",
           },
           {
             href: "https://mirror.xyz/labs.taiko.eth",
             label: "Blog",
             position: "left",
           },
+          {
+            to: "talks",
+            label: "Talks",
+            position: "left",
+          },
+          {
+            to: "faq",
+            label: "FAQ",
+            position: "left",
+          },
           {
             href: "https://discord.gg/tnSra3aFfg",
             position: "right",
@@ -90,6 +120,12 @@ const config = {
             className: "header-github-link",
             "aria-label": "GitHub",
           },
+          {
+            href: "https://www.reddit.com/r/taiko_xyz/",
+            position: "right",
+            className: "header-reddit-link",
+            "aria-label": "Reddit",
+          },
           {
             href: "https://twitter.com/taikoxyz",
             position: "right",
@@ -101,6 +137,10 @@ const config = {
       footer: {
         style: "dark",
         links: [
+          {
+            label: "Careers",
+            href: "https://taikochain.notion.site/Taiko-Jobs",
+          },
           {
             label: "Discord",
             href: "https://discord.gg/tnSra3aFfg",
@@ -109,6 +149,10 @@ const config = {
             label: "GitHub",
             href: "https://github.com/taikochain",
           },
+          {
+            label: "Reddit",
+            href: "https://www.reddit.com/r/taiko_xyz/",
+          },
           {
             label: "Twitter",
             href: "https://twitter.com/taikoxyz",

packages/website/faq/index.md

@@ -0,0 +1,66 @@
+# Frequently Asked Questions
+
+## What is Taiko?
+
+Taiko is a decentralized Ethereum-equivalent ZK-EVM and general-purpose ZK-Rollup. Its purpose is to allow developers and users of dApps developed for Ethereum L1 to be used on Taiko without any changes. As a result, dApps can be easily deployed to L2, inheriting Ethereum's security while incurring lower transaction fees than on L1.
+
+## How does Taiko differ from other ZK-EVMs?
+
+Currently, only the Privacy and Scaling Explorations (PSE) team and Taiko are working on a Type 1 ZK-EVM. This means it aims to be Ethereum-equivalent.
+
+You can read more about the difference between a Type 1 ZK-EVM and others from our blog post, [The Type 1 ZK-EVM](https://mirror.xyz/labs.taiko.eth/w7NSKDeKfJoEy0p89I9feixKfdK-20JgWF9HZzxfeBo).
+
+## Where can I learn more about Taiko?
+
+Here are the official links to our social media and public documentation:
+
+- Website: https://taiko.xyz/
+- Twitter: https://twitter.com/taikoxyz
+- Reddit: https://www.reddit.com/r/taiko_xyz/
+- Blog: https://mirror.xyz/labs.taiko.eth
+- GitHub: https://github.com/taikochain/
+- Whitepaper: https://github.com/taikochain/whitepaper
+
+## What is Layer 2 (L2)?
+
+Although security and decentralization are built into Ethereum L1, its popularity has led to spikes in network traffic and data congestion. Gas prices go up as a result, and apps run more slowly.
+
+L2 refers to an off-chain solution built on top of Ethereum L1 that aids in the reduction of data bottlenecks and improves scaling. L2 differentiates itself by offering lower fees and higher throughput. L2 transactions combine multiple off-chain transactions into a single L1 transaction, reducing data load while also maintaining security and decentralization by settling transactions on the mainnet.
+
+[Learn more about Layer 2](https://ethereum.org/en/layer-2/)
+
+## What is a rollup?
+
+Rollups conduct transactions on L2, which is quicker and allows for batching, and then send the transaction data back to Ethereum L1 at a far cheaper cost. Users can benefit from the rollup's efficiency and accessibility as well as the safety of the Ethereum blockchain as a result. Rollups are a fundamental piece to Ethereum's scaling solution.
+
+[Learn more about scaling](https://ethereum.org/en/developers/docs/scaling/)
+
+## What is a ZK-Rollup?
+
+ZK-Rollups generate cryptographic proofs to validate transaction authenticity. These proofs which are posted to L1 are known as validity proofs. ZK-Rollups are more efficient because they maintain the state of all L2 transfers, which are only updated via validity proofs. There are 2 types of validity proof: SNARKs (short non-interactive argument of knowledge), and STARKs (scalable transparent argument of knowledge).
+
+Every batch, which can have thousands of transactions submitted to Ethereum, includes a cryptographic proof with minimal data verified by a contract that is deployed on the Ethereum mainnet. Since ZK-Rollups do not require the entire transaction data, it is simpler to validate blocks and transfer data to L1.
+
+[Learn more about ZK-Rollups](https://ethereum.org/en/developers/docs/scaling/zk-rollups/)
+
+## What is an EVM?
+
+Developers utilize an Ethereum virtual machine, often known as a "virtual computer," as a software platform to build decentralized applications (dApps) and to run and deploy smart contracts on the Ethereum network. All Ethereum accounts and smart contracts exist on this virtual machine. The EVM's purpose is to determine what the overall state of Ethereum for each block in the blockchain will be.
+
+[Learn more about the EVM](https://ethereum.org/en/developers/docs/evm/)
+
+## What is a ZK-EVM?
+
+The ZK-EVM proves the correctness of the EVM computations on the rollup with validity proofs.
+
+Taiko implements a ZK-EVM that supports every EVM opcode, producing a validity proof of the ZK-EVM circuit. Besides perfect compatibility with Ethereum L1 smart contracts and dapps, this also means that all Ethereum and solidity tooling works seamlessly with Taiko, no need to disrupt developers’ workflow whatsoever.
+
+## What are Zero-Knowledge Proofs (ZKPs)?
+
+A zero-knowledge proof is a method by which one party (the prover) can prove to another party (the verifier) that something is true, without revealing any information apart from the fact that this specific statement is true.
+
+There are 2 types of zero-knowledge proofs: ZK-SNARKs and ZK-STARKs. Taiko uses ZK-SNARKs in its design.
+
+## Where can I purchase the Taiko token?
+
+Currently, no token is available to purchase. The tokenomics are still under development.

packages/website/package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.2.0",
     "@docusaurus/theme-classic": "^2.2.0",
+    "@docusaurus/types": "^2.2.0",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/node": "^12.20.45",
     "typescript": "^4.8.4"

packages/website/src/css/custom.css

@@ -5,6 +5,13 @@
  */
 
 /* You can override the default Infima variables here. */
+
+.hero__subtitle,
+.navbar,
+.footer {
+  font-family: "Oxanium";
+}
+
 :root {
   --ifm-color-primary: #e30ead;
   --ifm-color-primary-dark: #ca0c9a;
@@ -79,6 +86,22 @@
   background: url("@site/static/img/social-icons/github-white.svg") no-repeat;
 }
 
+.header-reddit-link:hover {
+  opacity: 0.6;
+}
+
+.header-reddit-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("@site/static/img/social-icons/reddit-black.svg") no-repeat;
+}
+
+[data-theme="dark"] .header-reddit-link::before {
+  background: url("@site/static/img/social-icons/reddit-white.svg") no-repeat;
+}
+
 .header-twitter-link:hover {
   opacity: 0.6;
 }

packages/website/src/pages/index.module.css

@@ -2,9 +2,6 @@
  * CSS files with the .module.css suffix will be treated as CSS modules
  * and scoped locally.
  */
-:root {
-  --ifm-font-family-base: "Oxanium";
-}
 
 .heroBanner {
   padding: 4rem 0;

packages/website/talks/index.md

@@ -0,0 +1,8 @@
+---
+sidebar_position: 1
+---
+
+# Talks
+
+- `2022-11-01`: [Taiko ZK-EVM: Layer 2 Finality](https://hackmd.io/@taikolabs/HkN7GR64i) (Old Friends Reunion - ETH Lisbon)
+- `2022-10-10`: [Taiko ZK-EVM: Overview and Optimizations](https://docs.google.com/presentation/d/1eHVzLPRIEziCJ_oDuJG0yZ-5klNj_daqioC0UaGDaiw/edit?usp=sharing) (Rollup Day - Devcon)