Header updates

website/src/HomePage.tsx

@@ -29,16 +29,64 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
             className="left-16 h-full max-w-none xs:-top-2 xs:left-0"
           />
         </div>
-        <div className="col-[container] py-28 xs:py-36">
-          <div className="max-w-120">
-            <h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
-            <p className="mt-2">{t('index.hero.description')}</p>
-            {/*
-              <ExperimentalButtonGroup className="mt-4 prop-orientation-vertical xs:prop-orientation-horizontal">
-                <ExperimentalButton href="/about/">{t('index.hero.cta1')}</ExperimentalButton>
-                <ExperimentalButton href="/subgraphs/quick-start/">{t('index.hero.cta2')}</ExperimentalButton>
-              </ExperimentalButtonGroup>
-            */}
+        <div className="col-[container] py-28">
+          <div className="flex flex-col items-start gap-4 lg:flex-row">
+            <div className="flex-1 lg:mb-0 lg:max-w-84">
+              <h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
+              <p className="mt-2 text-16">{t('index.hero.description')}</p>
+            </div>
+            <div className="flex w-full flex-1 justify-end lg:w-auto">
+              <div className="w-full overflow-clip rounded-8 border border-space-1600 bg-space-1800 lg:w-auto">
+                <div className="relative grid grid-cols-4 gap-px">
+                  {[
+                    'mainnet',
+                    'btc',
+                    'bsc',
+                    'solana-mainnet-beta',
+                    'avalanche',
+                    'stellar',
+                    'litecoin',
+                    'matic',
+                    'arbitrum-one',
+                    'sonic',
+                    'optimism',
+                    'sei-mainnet',
+                    'starknet-mainnet',
+                    'zksync-era',
+                    'celo',
+                    'metis',
+                  ]
+                    .map((id) => supportedNetworks.find((network) => network.id === id))
+                    .filter((network): network is typeof network & {} => Boolean(network))
+                    .map((network) => (
+                      <div key={network.id} className="-mb-px -mr-px">
+                        <ButtonOrLink
+                          href={`/supported-networks/${network.id}`}
+                          className="flex items-center justify-center border-b border-r border-space-1600 px-8 py-5 transition hover:bg-space-1600"
+                        >
+                          <NetworkIcon
+                            network={network}
+                            size={6}
+                            variant={
+                              network.id === 'stellar' || network.id === 'sonic' || network.id === 'zksync-era'
+                                ? 'mono'
+                                : 'branded'
+                            }
+                          />
+                        </ButtonOrLink>
+                      </div>
+                    ))}
+                  <ExperimentalLink
+                    href="/supported-networks"
+                    className="absolute bottom-0 right-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center text-14 backdrop-blur-md sm:w-[calc(50%-1px)]"
+                  >
+                    {t('index.supportedNetworks.seeAllNetworks', [
+                      supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length,
+                    ])}
+                  </ExperimentalLink>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

website/src/pages/ar/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/cs/index.json

@@ -2,7 +2,7 @@
   "title": "Domov",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/de/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Starten Sie Ihr Web3-Projekt mit den Tools zum Extrahieren, Transformieren und Laden von Blockchain-Daten.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "Funktionsweise von The Graph",
     "cta2": "Erstellen Sie Ihren ersten Subgraphen"
   },

website/src/pages/en/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },
@@ -58,6 +58,7 @@
       "networks": "networks",
       "completeThisForm": "complete this form"
     },
+    "seeAllNetworks": "See all {0} networks",
     "emptySearch": {
       "title": "No networks found",
       "description": "No networks match your search for \"{0}\"",

website/src/pages/es/index.json

@@ -2,7 +2,7 @@
   "title": "Inicio",
   "hero": {
     "title": "Documentación de The Graph",
-    "description": "Inicia tu proyecto web3 con las herramientas para extraer, transformar y cargar datos de blockchain.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "Cómo funciona The Graph",
     "cta2": "Crea tu primer subgrafo"
   },

website/src/pages/fr/index.json

@@ -2,7 +2,7 @@
   "title": "Accueil",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Construisez votre premier subgraph"
   },

website/src/pages/hi/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph डॉक्स",
-    "description": "अपनी वेब3 परियोजना को शुरू करें उन उपकरणों के साथ जो ब्लॉकचेन डेटा को निकालने, बदलने और लोड करने में सहायता करते हैं।",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "The Graph कैसे काम करता है",
     "cta2": "अपना पहला Subgraph बनाएं"
   },

website/src/pages/it/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/ja/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graphのドキュメント",
-    "description": "ブロックチェーンデータを抽出、変換、読み込み可能なツールを用いて、あなたのWeb3プロジェクトを開始しましょう。",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "The Graphの仕組み",
     "cta2": "最初のサブグラフを作る"
   },

website/src/pages/ko/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/mr/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/nl/index.json

@@ -2,7 +2,7 @@
   "title": "Start",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/pl/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/pt/index.json

@@ -2,7 +2,7 @@
   "title": "Início",
   "hero": {
     "title": "Documentação do The Graph",
-    "description": "Comece o seu projeto web3 com as ferramentas para extrair, transformar e carregar os dados da blockchain.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "Como o The Graph funciona",
     "cta2": "Construa o seu primeiro subgraph"
   },

website/src/pages/ro/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/ru/index.json

@@ -2,7 +2,7 @@
   "title": "Главная страница",
   "hero": {
     "title": "Документация The Graph",
-    "description": "Запустите свой проект web3 с помощью инструментов для извлечения, преобразования и загрузки данных блокчейна.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "Как работает The Graph",
     "cta2": "Создайте свой первый субграф"
   },

website/src/pages/sv/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/tr/index.json

@@ -2,7 +2,7 @@
   "title": "Ana sayfa",
   "hero": {
     "title": "The Graph Dokümantasyonu",
-    "description": "Blokzinciri verilerini çıkarma, dönüştürme ve yükleme araçlarıyla web3 projenize hızlı bir başlangıç yapın.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "The Graph nasıl çalışır?",
     "cta2": "İlk subgraph'inizi oluşturun"
   },

website/src/pages/uk/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/ur/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/vi/index.json

@@ -2,7 +2,7 @@
   "title": "Home",
   "hero": {
     "title": "The Graph Docs",
-    "description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "How The Graph works",
     "cta2": "Build your first subgraph"
   },

website/src/pages/zh/index.json

@@ -2,7 +2,7 @@
   "title": "主页",
   "hero": {
     "title": "The Graph 文档",
-    "description": "使用提取、转换和加载区块链数据的工具启动您的 web3 项目。",
+    "description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
     "cta1": "The Graph 是如何工作的",
     "cta2": "创建你的第一个子图"
   },