diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js index 6861639b7ab..2fd10b2ffd6 100644 --- a/packages/website/docusaurus.config.js +++ b/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"], diff --git a/packages/website/package.json b/packages/website/package.json index fab3c4b8bf7..b2e5adef5da 100644 --- a/packages/website/package.json +++ b/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": { diff --git a/packages/website/postcss.config.js b/packages/website/postcss.config.js new file mode 100644 index 00000000000..33ad091d26d --- /dev/null +++ b/packages/website/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/website/src/components/BlogSection/index.tsx b/packages/website/src/components/BlogSection/index.tsx new file mode 100644 index 00000000000..1a1273effd0 --- /dev/null +++ b/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 ( +
+
+
+
+
+
+

+ Latest Blog Posts +

+
+ Check out the full blog at{" "} + + mirror.xyz + +
+
+
+ {posts.map((post) => ( +
+
+ + + +
+
+ +
+ +
+ +
+ + + {post.readingTime} read +
+
+
+
+
+ ))} +
+
+
+ ); +} diff --git a/packages/website/src/components/Features/index.tsx b/packages/website/src/components/Features/index.tsx new file mode 100644 index 00000000000..d44e7e3f6a7 --- /dev/null +++ b/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 ( +
+
+
+ {features.map((feature) => ( +
+
+
+
+ + +
+

+ {feature.name} +

+

+ {feature.description} +

+
+
+
+ ))} +
+
+
+ ); +} diff --git a/packages/website/src/components/Hero/index.tsx b/packages/website/src/components/Hero/index.tsx new file mode 100644 index 00000000000..2ab6eacb56a --- /dev/null +++ b/packages/website/src/components/Hero/index.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +export default function Hero() { + return ( +
+
+
+
+

+ + A + + Type 1{" "} + + + ZK-EVM + + {" "} +

+

+ Fully decentralized, Ethereum-equivalent ZK-Rollup. +

+ +
+
+
+ +
+
+
+ ); +} diff --git a/packages/website/src/components/HomepageFeatures/index.tsx b/packages/website/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index bdb6ed7c105..00000000000 --- a/packages/website/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from "react"; -import clsx from "clsx"; -import styles from "./styles.module.css"; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: "Accessible", - Svg: require("@site/static/img/undraw_connected_world_wuay.svg").default, - description: ( - <> - Anyone who wants to build on or use Taiko can do so. - This is because the transaction fees are cheap and throughput - is high; the developer experience is robust and Ethereum dapp migration - is seamless. You can’t have freedom without access. - - ), - }, - { - title: "Inclusive", - Svg: require("@site/static/img/undraw_having_fun_re_vj4h.svg").default, - description: ( - <> - Taiko is censorship-resistant and cannot exclude groups or individuals. - The rollup is decentralized - relying on Ethereum for data availability - and security; and permissionless - allowing any network participant to opt-in. - We are only interested in building credibly neutral, fair systems. - - ), - }, - { - title: "Open", - Svg: require("@site/static/img/undraw_collaboration_re_vyau.svg").default, - description: ( - <> - Taiko is fully open-source and community-centric. We build on the - shoulders of giants, and cherish contributing back into Ethereum’s - technical progress and community. We value community contributions into - the project, harnessing the best minds and ideas in the space. - - ), - }, -]; - -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/packages/website/src/components/HomepageFeatures/styles.module.css b/packages/website/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e5de..00000000000 --- a/packages/website/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/packages/website/src/components/JoinUs/index.tsx b/packages/website/src/components/JoinUs/index.tsx new file mode 100644 index 00000000000..2811050dc44 --- /dev/null +++ b/packages/website/src/components/JoinUs/index.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +export default function JoinUs() { + return ( +
+
+

+ Join Us 🥁 +

+
+ +
+
+
+ ); +} diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index 5152ad36f03..5a2b0abd388 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to @@ -6,9 +10,11 @@ /* You can override the default Infima variables here. */ +.footer, +.footer__title, .hero__subtitle, .navbar, -.footer { +.oxanium { font-family: "Oxanium"; } @@ -117,18 +123,3 @@ [data-theme="dark"] .header-twitter-link::before { background: url("@site/static/img/social-icons/twitter-white.svg") no-repeat; } - -.footer__links { - display: flex; - flex-wrap: wrap; - justify-content: center; - width: 100%; - align-items: center; -} - -@media screen and (max-width: 996px) { - .footer__link-item { - margin-left: 8px; - margin-right: 8px; - } -} \ No newline at end of file diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css deleted file mode 100644 index 9f71a5da775..00000000000 --- a/packages/website/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx index 5598ff30f2d..e82bf99fa73 100644 --- a/packages/website/src/pages/index.tsx +++ b/packages/website/src/pages/index.tsx @@ -1,49 +1,24 @@ import React from "react"; -import clsx from "clsx"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import HomepageFeatures from "@site/src/components/HomepageFeatures"; -import ThemedImage from "@theme/ThemedImage"; - -import styles from "./index.module.css"; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - - return ( -
-
- -

{siteConfig.tagline}

- -
-
- ); -} +import BlogSection from "../components/BlogSection"; +import JoinUs from "../components/JoinUs"; +import Features from "../components/Features"; +import Hero from "../components/Hero"; +import Head from "@docusaurus/Head"; export default function Home(): JSX.Element { - const { siteConfig } = useDocusaurusContext(); return ( - - -
- -
+ + + + + + + + ); } diff --git a/packages/website/static/img/Taiko_GEOM_1_Fluo_Sliced.svg b/packages/website/static/img/Taiko_GEOM_1_Fluo_Sliced.svg new file mode 100755 index 00000000000..3a56ef10e85 --- /dev/null +++ b/packages/website/static/img/Taiko_GEOM_1_Fluo_Sliced.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/Taiko_Logo_Fluo-on-Black.svg b/packages/website/static/img/Taiko_Logo_Fluo-on-Black.svg new file mode 100755 index 00000000000..0956e5ceb21 --- /dev/null +++ b/packages/website/static/img/Taiko_Logo_Fluo-on-Black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/static/img/Taiko_Logo_Fluo.png b/packages/website/static/img/Taiko_Logo_Fluo.png new file mode 100755 index 00000000000..948ef3aaf6b Binary files /dev/null and b/packages/website/static/img/Taiko_Logo_Fluo.png differ diff --git a/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_Black.svg b/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_Black.svg new file mode 100755 index 00000000000..98b41d1da4f --- /dev/null +++ b/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_Black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_White.svg b/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_White.svg new file mode 100755 index 00000000000..a0b4eaa8b48 --- /dev/null +++ b/packages/website/static/img/Taiko_Logotype_Horiz_1_Fluo_White.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/undraw_collaboration_re_vyau.svg b/packages/website/static/img/undraw_collaboration_re_vyau.svg deleted file mode 100644 index 159bb6c9995..00000000000 --- a/packages/website/static/img/undraw_collaboration_re_vyau.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/website/static/img/undraw_connected_world_wuay.svg b/packages/website/static/img/undraw_connected_world_wuay.svg deleted file mode 100644 index efd0793af32..00000000000 --- a/packages/website/static/img/undraw_connected_world_wuay.svg +++ /dev/null @@ -1 +0,0 @@ -connected world \ No newline at end of file diff --git a/packages/website/static/img/undraw_having_fun_re_vj4h.svg b/packages/website/static/img/undraw_having_fun_re_vj4h.svg deleted file mode 100644 index 9de316fdb56..00000000000 --- a/packages/website/static/img/undraw_having_fun_re_vj4h.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js new file mode 100644 index 00000000000..7c91663a2f5 --- /dev/null +++ b/packages/website/tailwind.config.js @@ -0,0 +1,17 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: { + fontFamily: { + oxanium: ["Oxanium", "sans-serif"], + }, + }, + }, + plugins: [], + corePlugins: { + container: false, + preflight: false, + }, + darkMode: ["class", '[data-theme="dark"]'], +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45c878ca5d8..d173fc3d5d9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -207,16 +207,20 @@ importers: '@docusaurus/preset-classic': 2.2.0 '@docusaurus/theme-classic': ^2.2.0 '@docusaurus/types': ^2.2.0 + '@heroicons/react': ^2.0.13 '@mdx-js/react': ^1.6.22 '@tsconfig/docusaurus': ^1.0.6 '@types/node': ^12.20.45 + autoprefixer: ^10.4.13 clsx: ^1.2.1 hast-util-is-element: 1.1.0 + postcss: ^8.4.19 prism-react-renderer: ^1.3.5 react: ^17.0.2 react-dom: ^17.0.2 rehype-katex: ^5.0.0 remark-math: ^3.0.1 + tailwindcss: ^3.2.4 typescript: ^4.8.4 dependencies: '@docusaurus/core': 2.2.0_aeigrxhfhc4abyd45ix2hknizy @@ -233,8 +237,12 @@ importers: '@docusaurus/module-type-aliases': 2.2.0_sfoxds7t5ydpegc3knd667wn6m '@docusaurus/theme-classic': 2.2.0_wfh3mw2ke2bdr53qfq544ltemu '@docusaurus/types': 2.2.0_sfoxds7t5ydpegc3knd667wn6m + '@heroicons/react': 2.0.13_react@17.0.2 '@tsconfig/docusaurus': 1.0.6 '@types/node': 12.20.55 + autoprefixer: 10.4.13_postcss@8.4.19 + postcss: 8.4.19 + tailwindcss: 3.2.4_postcss@8.4.19 typescript: 4.9.3 packages: @@ -2900,6 +2908,14 @@ packages: dependencies: '@hapi/hoek': 9.3.0 + /@heroicons/react/2.0.13_react@17.0.2: + resolution: {integrity: sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==} + peerDependencies: + react: '>= 16' + dependencies: + react: 17.0.2 + dev: true + /@humanwhocodes/config-array/0.5.0: resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==} engines: {node: '>=10.10.0'}