-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(website): update website homepage (#383)
- Loading branch information
dave | d1onys1us
authored
Dec 8, 2022
1 parent
fe479c8
commit 0b0e3c0
Showing
22 changed files
with
515 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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">·</span> | ||
| <span>{post.readingTime} read</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
Oops, something went wrong.