Skip to content

Commit

Permalink
feat: trailblazer banner (#220)
Browse files Browse the repository at this point in the history
  • Loading branch information
2manslkh authored Aug 8, 2024
1 parent c5db918 commit 0b196a9
Show file tree
Hide file tree
Showing 15 changed files with 550 additions and 296 deletions.
12 changes: 12 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/img/trailblazer/banner-lg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/trailblazer/banner-md.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/trailblazer/banner-sm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/trailblazer/banner-xl.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/img/trailblazer/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
223 changes: 117 additions & 106 deletions public/locales/en/home.json
Original file line number Diff line number Diff line change
@@ -1,111 +1,122 @@
{
"hero": {
"title": "a based rollup",
"text": "Inspired, secured, and sequenced by Ethereum",
"taiko": {
"is": "Taiko is:",
"value": "Permissionless",
"labels": [
"Permissionless",
"Ethereum-equivalent",
"Open-source",
"based"
]
},
"startBuilding": "Start building",
"bridgeToTaiko": "Bridge to Taiko",
"scrollToExplore": "Scroll to explore"
"hero": {
"title": "a based rollup",
"text": "Inspired, secured, and sequenced by Ethereum",
"taiko": {
"is": "Taiko is:",
"value": "Permissionless",
"labels": [
"Permissionless",
"Ethereum-equivalent",
"Open-source",
"based"
]
},
"blog": {
"title": "Blog"
},
"advantages": [
{
"id": "aicon-seamless",
"icon": "aicon:seamless",
"title": "seamless UX",
"text": "Taiko is an Ethereum-equivalent (Type 1) ZK-EVM, maximally compatible with Ethereum. No additional compiling, reaudits, or tooling needed. Everything works out of the box, guaranteed.",
"colors": {
"icon": "#E81899",
"text": "#0B101B",
"background": "#EFEFEF"
}
}, {
"id": "aicon-community",
"icon": "aicon:community",
"title": "community-aligned",
"text": "We build with the support of our community and fully open-source. Meaning it's free to use and modify Taiko's source code with the permissive license.",
"colors": {
"icon": "#E81899",
"text": "#0B101B",
"background": "#FFE2A0"
}
}, {
"id": "aicon-security",
"icon": "aicon:security",
"title": "security-first",
"text": "Taiko demands no additional trust assumptions to Ethereum. As a based rollup with a permissionless (& decentralized) proposer/prover network from Day 1, Taiko inherits Ethereum's level of decentralization.",
"colors": {
"icon": "#FFFFFF",
"text": "#FFFFFF",
"background": "#E81899"
}
}, {
"id": "aicon-based",
"icon": "aicon:based",
"title": "based",
"text": "Taiko is a based rollup: the transaction sequencing on Taiko is done by Ethereum validators. Based sequencing is maximally simple and inherits Ethereum's liveness and credible neutrality.",
"colors": {
"icon": "#FFFFFF",
"text": "#FFFFFF",
"background": "#6321B6"
}
}
],
"about": {
"suptitle": "About us",
"title": "Getting started with <strong>Taiko</strong>",
"text": "Taiko is compatible with Ethereum at the bytecode-level, meaning everything works right out of the box.",
"startBuilding": "Start building",
"list": [
{
"icon": "about:ethereum",
"title": "Bridge your ETH",
"text": "You can bridge your ETH to Taiko using our native bridge or another ecosystem bridge. For a walkthrough, start with the user guide’s setup page."
}, {
"icon": "about:link",
"title": "Change RPC provider",
"text": "To configure your Ethereum tools to Taiko you'll just need to point your favorite builder tools to a Taiko RPC Provider."
}, {
"icon": "about:settings",
"title": "Build with your usual developer tools",
"text": "Start building with your favorite developer toolkit."
}
]
"startBuilding": "Start building",
"bridgeToTaiko": "Bridge to Taiko",
"scrollToExplore": "Scroll to explore"
},
"blog": {
"title": "Blog"
},
"advantages": [
{
"id": "aicon-seamless",
"icon": "aicon:seamless",
"title": "seamless UX",
"text": "Taiko is an Ethereum-equivalent (Type 1) ZK-EVM, maximally compatible with Ethereum. No additional compiling, reaudits, or tooling needed. Everything works out of the box, guaranteed.",
"colors": {
"icon": "#E81899",
"text": "#0B101B",
"background": "#EFEFEF"
}
},
"solutions": {
"solutions": "Our solutions",
"list": [ {
"title": "<strong>Based Contestable Rollups</strong> — a modular, multi-proof design",
"extraTitle": "a modular, multi-proof design",
"title_short": "Based Contestable Rollup",
"text": "Combining the best of optimistic and ZK-rollups to maximally reduce costs and increase decentralization.",
"icon": "laptop",
"iconLottie": "/img/laptop.json"
},{
"title": "<strong>Based Booster Rollups</strong> — scale natively, compose synchronously",
"extraTitle": "scale natively, compose synchronously",
"title_short": "Based Booster Rollup",
"text": "Deploy on Ethereum and scale natively across all L2s.",
"icon": "rocket",
"iconLottie": "/img/rocket.json"
}
]
{
"id": "aicon-community",
"icon": "aicon:community",
"title": "community-aligned",
"text": "We build with the support of our community and fully open-source. Meaning it's free to use and modify Taiko's source code with the permissive license.",
"colors": {
"icon": "#E81899",
"text": "#0B101B",
"background": "#FFE2A0"
}
},
"ecosystem": {
"title": "Explore \nour ecosystem",
"text": "Become part of an accessible, open and inclusive ecosystem driven by a shared mission — nurturing Ethereum's Infinite Garden.",
"exploreButton": "Explore the ecosystem",
"dapps": "DAPPS"
{
"id": "aicon-security",
"icon": "aicon:security",
"title": "security-first",
"text": "Taiko demands no additional trust assumptions to Ethereum. As a based rollup with a permissionless (& decentralized) proposer/prover network from Day 1, Taiko inherits Ethereum's level of decentralization.",
"colors": {
"icon": "#FFFFFF",
"text": "#FFFFFF",
"background": "#E81899"
}
},
{
"id": "aicon-based",
"icon": "aicon:based",
"title": "based",
"text": "Taiko is a based rollup: the transaction sequencing on Taiko is done by Ethereum validators. Based sequencing is maximally simple and inherits Ethereum's liveness and credible neutrality.",
"colors": {
"icon": "#FFFFFF",
"text": "#FFFFFF",
"background": "#6321B6"
}
}
}
],
"about": {
"suptitle": "About us",
"title": "Getting started with <strong>Taiko</strong>",
"text": "Taiko is compatible with Ethereum at the bytecode-level, meaning everything works right out of the box.",
"startBuilding": "Start building",
"list": [
{
"icon": "about:ethereum",
"title": "Bridge your ETH",
"text": "You can bridge your ETH to Taiko using our native bridge or another ecosystem bridge. For a walkthrough, start with the user guide’s setup page."
},
{
"icon": "about:link",
"title": "Change RPC provider",
"text": "To configure your Ethereum tools to Taiko you'll just need to point your favorite builder tools to a Taiko RPC Provider."
},
{
"icon": "about:settings",
"title": "Build with your usual developer tools",
"text": "Start building with your favorite developer toolkit."
}
]
},
"solutions": {
"solutions": "Our solutions",
"list": [
{
"title": "<strong>Based Contestable Rollups</strong> — a modular, multi-proof design",
"extraTitle": "a modular, multi-proof design",
"title_short": "Based Contestable Rollup",
"text": "Combining the best of optimistic and ZK-rollups to maximally reduce costs and increase decentralization.",
"icon": "laptop",
"iconLottie": "/img/laptop.json"
},
{
"title": "<strong>Based Booster Rollups</strong> — scale natively, compose synchronously",
"extraTitle": "scale natively, compose synchronously",
"title_short": "Based Booster Rollup",
"text": "Deploy on Ethereum and scale natively across all L2s.",
"icon": "rocket",
"iconLottie": "/img/rocket.json"
}
]
},
"ecosystem": {
"title": "Explore \nour ecosystem",
"text": "Become part of an accessible, open and inclusive ecosystem driven by a shared mission — nurturing Ethereum's Infinite Garden.",
"exploreButton": "Explore the ecosystem",
"dapps": "DAPPS"
},
"trailblazerBanner": {
"button": "Start your journey",
"text": "Embark on the Trailblazers Journey: Unleash your potential in the Taiko universe!"
}
}
106 changes: 53 additions & 53 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,72 @@ import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { Footer } from "widgets/footer";
import { Header } from "widgets/header";
import * as HomeScreens from 'widgets/01-home-screens';
import * as HomeScreens from "widgets/01-home-screens";
import MainLayout from "widgets/layouts/main-layout";
import { dehydrate, QueryClient } from "@tanstack/react-query";
import { HomeApiKeys } from "widgets/01-home-screens/lib/types";
import { blogApi } from "shared/lib/api";
import { Menu } from "widgets/menu";
import css from './home.module.scss';
import css from "./home.module.scss";
import { useEffect, useState } from "react";
import { exucuteOnReadyPage } from "shared/lib/utils/browser";

function Home() {
const [complete, setComplete] = useState(false);
const { t } = useTranslation('home');
const [complete, setComplete] = useState(false);
const { t } = useTranslation("home");

useEffect(() => exucuteOnReadyPage(() => setComplete(true)), []);
return (
<MainLayout
className={clsx(
css.root,
complete && css.rootAnimated
)}
meta={{
title: t('Home - Taiko'),
description: t('Taiko is a fully permissionless, Ethereum-equivalent based rollup. Inspired, secured, and sequenced by Ethereum.'),
image: "/img/og-image.png",
url: "https://taiko.xyz/"
}}
title="Home – Taiko"
>
<Menu />
<Header fixed />
<div className={css.gap}>
<HomeScreens.GradientFill>
<HomeScreens.Hero />
<HomeScreens.StickyContent
stickyEl={<HomeScreens.Advantages />}
children={<HomeScreens.About />}
/>
</HomeScreens.GradientFill>
<HomeScreens.Solutions />
<HomeScreens.Ecosystem />
<HomeScreens.Community />
<HomeScreens.Blog />
<Footer subscribeBar />
</div>
</MainLayout>
);
}
useEffect(() => exucuteOnReadyPage(() => setComplete(true)), []);

return (
<MainLayout
className={clsx(css.root, complete && css.rootAnimated)}
meta={{
title: t("Home - Taiko"),
description: t(
"Taiko is a fully permissionless, Ethereum-equivalent based rollup. Inspired, secured, and sequenced by Ethereum."
),
image: "/img/og-image.png",
url: "https://taiko.xyz/",
}}
title="Home – Taiko"
>
<Menu />
<Header fixed />
<div className={css.gap}>
<HomeScreens.GradientFill>
<HomeScreens.Hero />
<HomeScreens.StickyContent
stickyEl={<HomeScreens.Advantages />}
children={<HomeScreens.About />}
/>
</HomeScreens.GradientFill>
<HomeScreens.Solutions />
<HomeScreens.Ecosystem />
<HomeScreens.Community />
<HomeScreens.Blog />
<HomeScreens.Trailblazer />
<Footer subscribeBar />
</div>
</MainLayout>
);
}

export default Home;

export const getServerSideProps: GetServerSideProps = withTranslation(
async (context) => {
const queryClient = new QueryClient();
async (context) => {
const queryClient = new QueryClient();

await queryClient.prefetchQuery({
queryKey: [HomeApiKeys.BLOG],
queryFn: () => blogApi.getAll()
});
await queryClient.prefetchQuery({
queryKey: [HomeApiKeys.BLOG],
queryFn: () => blogApi.getAll(),
});

return {
props: {
dehydratedState: dehydrate(queryClient)
},
}
},
["home"]
)
return {
props: {
dehydratedState: dehydrate(queryClient),
},
};
},
["home"]
);
Loading

0 comments on commit 0b196a9

Please sign in to comment.