feat(website): update website homepage

packages/website/docusaurus.config.js

@@ -83,12 +83,13 @@ const config = {
     ({
       colorMode: {
         defaultMode: "dark",
-        respectPrefersColorScheme: true,
+        respectPrefersColorScheme: false,
       },
       navbar: {
         logo: {
           alt: "Taiko Logo",
-          src: "img/Taiko_Logo_Fluo.svg",
+          src: "./img/Taiko_Logotype_Horiz_1_Fluo_Black.svg",
+          srcDark: "./img/Taiko_Logotype_Horiz_1_Fluo_White.svg",
         },
         items: [
           {
@@ -112,7 +113,7 @@ const config = {
             position: "left",
           },
           {
-            href: "https://discord.gg/tnSra3aFfg",
+            href: "https://discord.gg/taikoxyz",
             position: "right",
             className: "header-discord-link",
             "aria-label": "Discord",
@@ -138,34 +139,57 @@ const config = {
         ],
       },
       footer: {
+        copyright: "© Taiko Labs " + new Date().getFullYear(),
         style: "dark",
         links: [
           {
-            label: "Careers",
-            href: "https://taikoxyz.notion.site/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2",
+            title: "About",
+            items: [
+              {
+                label: "Careers",
+                href: "https://www.notion.so/taikoxyz/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2",
+              },
+              {
+                label: "Media kit",
+                href: "https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/",
+              },
+            ],
           },
           {
-            label: "Discord",
-            href: "https://discord.gg/tnSra3aFfg",
+            title: "Developers",
+            items: [
+              {
+                label: "Getting started",
+                to: "docs/intro",
+              },
+              {
+                label: "GitHub",
+                href: "https://github.com/taikoxyz",
+              },
+            ],
           },
           {
-            label: "GitHub",
-            href: "https://github.com/taikoxyz",
-          },
-          {
-            label: "Reddit",
-            href: "https://www.reddit.com/r/taiko_xyz/",
-          },
-          {
-            label: "Twitter",
-            href: "https://twitter.com/taikoxyz",
-          },
-          {
-            label: "YouTube",
-            href: "https://www.youtube.com/@taikoxyz",
+            title: "Social",
+            items: [
+              {
+                label: "Discord",
+                href: "https://discord.gg/taikoxyz",
+              },
+              {
+                label: "Reddit",
+                href: "https://www.reddit.com/r/taiko_xyz/",
+              },
+              {
+                label: "Twitter",
+                href: "https://twitter.com/taikoxyz",
+              },
+              {
+                label: "YouTube",
+                href: "https://www.youtube.com/@taikoxyz",
+              },
+            ],
           },
         ],
-        copyright: `© Taiko Labs ${new Date().getFullYear()}`,
       },
       prism: {
         additionalLanguages: ["solidity"],

packages/website/package.json

@@ -31,8 +31,12 @@
     "@docusaurus/module-type-aliases": "2.2.0",
     "@docusaurus/theme-classic": "^2.2.0",
     "@docusaurus/types": "^2.2.0",
+    "@heroicons/react": "^2.0.13",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/node": "^12.20.45",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.8.4"
   },
   "browserslist": {

packages/website/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/website/src/components/BlogSection/index.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+const posts = [
+  {
+    title: "Taiko Is Fully Open Source",
+    href: "https://mirror.xyz/labs.taiko.eth/31vzkwgNaKNrze0oIv_wTKCw6Tha8OYQ6ffrquS3XUg",
+    category: { name: "Article" },
+    description:
+      'Taiko is fully open source -- you can view all the code on our GitHub. By "open source" we mean free to see the source and modify it.',
+    date: "Dec 01, 2022",
+    datetime: "2022-12-01",
+    imageUrl:
+      "https://mirror-media.imgix.net/publication-images/h-KI5JueXbaUalAJeiMvA.png?height=1024&width=2048&h=1024&w=2048&auto=compress",
+    readingTime: "4 min",
+    author: {
+      name: "d1onys1us",
+      imageUrl: "https://avatars.githubusercontent.com/u/13951458?v=4",
+    },
+  },
+  {
+    title: "Community Update #2",
+    href: "https://mirror.xyz/labs.taiko.eth/JdMMaBLOtK3Hk_SGZy_c9WFEnn1jDtOpfeXVHxJAtMU",
+    category: { name: "Community Update" },
+    description:
+      "Hey everyone 👋, we want to update you on the progress we’ve made since our last community update.",
+    date: "Nov 24, 2022",
+    datetime: "2022-11-24",
+    imageUrl:
+      "https://mirror-media.imgix.net/publication-images/hcstqDARznViEZh0CXJ-T.png?height=960&width=1920&h=960&w=1920&auto=compress",
+    readingTime: "2 min",
+    author: {
+      name: "Taiko Labs",
+      imageUrl: "./img/Taiko_Logo_Fluo-on-Black.svg",
+    },
+  },
+  {
+    title: "The Type 1 ZK-EVM",
+    href: "https://mirror.xyz/labs.taiko.eth/w7NSKDeKfJoEy0p89I9feixKfdK-20JgWF9HZzxfeBo",
+    category: { name: "Article" },
+    description:
+      "Taiko is building a Type 1 (Ethereum-equivalent) ZK-EVM. What benefits come from using a Type 1 ZK-EVM? Let’s learn together in this post.",
+    date: "Nov 15, 2022",
+    datetime: "2022-11-15",
+    imageUrl:
+      "https://mirror-media.imgix.net/publication-images/3Dn5g9BMMfwPnMOi-IIEK.png?height=512&width=1024&h=512&w=1024&auto=compress",
+    readingTime: "6 min",
+    author: {
+      name: "Taiko Labs",
+      imageUrl: "./img/Taiko_Logo_Fluo-on-Black.svg",
+    },
+  },
+];
+/**
+ * @returns Blog section displaying latest Taiko blog posts from Mirror
+ */
+export default function BlogSection(): JSX.Element {
+  return (
+    <div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-800">
+      <div className="absolute inset-0">
+        <div className="h-1/3 bg-white sm:h-2/3 dark:bg-[#1B1B1D]" />
+      </div>
+      <div className="relative mx-auto max-w-7xl">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-100">
+            Latest Blog Posts
+          </h2>
+          <div className="mx-auto mt-3 max-w-2xl text-xl text-neutral-500 sm:mt-4 dark:text-neutral-300">
+            Check out the full blog at{" "}
+            <a href="https://mirror.xyz/labs.taiko.eth" target="_blank">
+              mirror.xyz
+            </a>
+          </div>
+        </div>
+        <div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <div
+              key={post.title}
+              className="flex flex-col overflow-hidden rounded-lg shadow-lg"
+            >
+              <div className="flex-shrink-0">
+                <a href={post.href} target="_blank">
+                  <img
+                    className="h-54 w-full object-cover"
+                    src={post.imageUrl}
+                    alt=""
+                  />
+                </a>
+              </div>
+              <div className="flex flex-1 flex-col justify-between bg-white p-6 dark:bg-neutral-700">
+                <div className="flex-1">
+                  <div className="text-sm font-medium">
+                    <a>{post.category.name}</a>
+                  </div>
+                  <a href={post.href} target="_blank" className="mt-2 block">
+                    <div className="text-xl font-semibold text-neutral-900 dark:text-neutral-200">
+                      {post.title}
+                    </div>
+                    <div className="mt-3 text-base text-neutral-500 dark:text-neutral-300">
+                      {post.description}
+                    </div>
+                  </a>
+                </div>
+                <div className="mt-6 flex items-center">
+                  <div className="flex-shrink-0">
+                    <a>
+                      <span className="sr-only">{post.author.name}</span>
+                      <img
+                        className="h-10 w-10 rounded-full"
+                        src={post.author.imageUrl}
+                        alt=""
+                      />
+                    </a>
+                  </div>
+                  <div className="ml-3">
+                    <div className="text-sm font-medium text-neutral-900">
+                      <a>{post.author.name}</a>
+                    </div>
+                    <div className="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
+                      <time dateTime={post.datetime}>{post.date}</time>
+                      <span aria-hidden="true">&middot;</span>
+                      <span>{post.readingTime} read</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/website/src/components/Features/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  ArrowPathIcon,
+  GlobeAltIcon,
+  ScaleIcon,
+} from "@heroicons/react/24/outline";
+
+const features = [
+  {
+    name: "Type 1",
+    description:
+      "A Type 1 (Ethereum-equivalent) ZK-EVM aims for maximum compatibility. This results in a seamless developer experience.",
+    icon: ArrowPathIcon,
+  },
+  {
+    name: "Open Source",
+    description:
+      "Taiko's code is open source and available on GitHub. “Open source” means free to view and modify the source code.",
+    icon: ScaleIcon,
+  },
+  {
+    name: "Decentralized",
+    description:
+      "Fully decentralized and permissionless nodes, proposers, and provers. Anyone can participate in Taiko.",
+    icon: GlobeAltIcon,
+  },
+];
+
+export default function Features() {
+  return (
+    <div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8 dark:bg-[#1B1B1D]">
+      <div className="mt-20">
+        <div className="grid grid-cols-1 gap-12 sm:grid-cols-1 lg:grid-cols-3">
+          {features.map((feature) => (
+            <div key={feature.name} className="pt-6">
+              <div className="flow-root rounded-lg bg-neutral-50 px-6 pb-8 dark:bg-neutral-700">
+                <div className="-mt-6">
+                  <div>
+                    <span className="inline-flex items-center justify-center rounded-xl bg-neutral-600 p-3 shadow-lg dark:bg-neutral-500">
+                      <feature.icon
+                        className="h-8 w-8 text-neutral-100"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </div>
+                  <h3 className="mt-8 text-lg font-semibold leading-8 tracking-tight text-neutral-900 dark:text-neutral-100">
+                    {feature.name}
+                  </h3>
+                  <p className="mt-5 text-base leading-7 text-neutral-600 dark:text-neutral-300">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/website/src/components/Hero/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export default function Hero() {
+  return (
+    <div className="relative bg-neutral-50 dark:bg-neutral-800">
+      <main className="lg:relative">
+        <div className="mx-auto w-full max-w-7xl pt-16 pb-20 text-center lg:py-48 lg:text-left">
+          <div className="px-4 sm:px-8 lg:w-1/2 xl:pr-16">
+            <h1 className="text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
+              <span className="block xl:inline">
+                <span className="font-oxanium dark:text-neutral-100">A </span>
+                <span className="font-oxanium block text-[#e30ead] xl:inline">
+                  Type 1{" "}
+                </span>
+                <span className="font-oxanium dark:text-neutral-100">
+                  ZK-EVM
+                </span>
+              </span>{" "}
+            </h1>
+            <p className="font-oxanium mx-auto mt-3 max-w-md text-lg text-neutral-600 sm:text-xl md:mt-5 md:max-w-3xl dark:text-neutral-100">
+              Fully decentralized, Ethereum-equivalent ZK-Rollup.
+            </p>
+            <div className="mt-10 sm:flex sm:justify-center lg:justify-start">
+              <div className="inline-flex rounded-md shadow">
+                <a
+                  href="./docs/intro"
+                  className="inline-flex items-center justify-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
+                >
+                  Get started
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="relative h-64 w-full sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2">
+          <img
+            className="absolute inset-0 h-full w-full object-cover"
+            src="./img/Taiko_GEOM_1_Fluo_Sliced.svg"
+            alt=""
+          />
+        </div>
+      </main>
+    </div>
+  );
+}