feat: trailblazer banner

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3032",
     "build": "next build",
     "start": "next start -p 3033",
     "lint": "next lint"

public/locales/en/home.json

@@ -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!"
+  }
+}

src/pages/index.tsx

@@ -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"]
+);