From a1e36cf4cf93822db20d64f12e7209b6db339d24 Mon Sep 17 00:00:00 2001 From: Hayder Date: Thu, 5 Jun 2025 09:09:48 +0200 Subject: [PATCH 1/3] Display networks in home hero --- website/src/HomePage.tsx | 67 ++++++++++++++++++++++++++++----- website/src/pages/ar/index.json | 2 +- website/src/pages/cs/index.json | 2 +- website/src/pages/en/index.json | 2 +- website/src/pages/fr/index.json | 2 +- website/src/pages/it/index.json | 2 +- website/src/pages/ko/index.json | 2 +- website/src/pages/mr/index.json | 2 +- website/src/pages/nl/index.json | 2 +- website/src/pages/pl/index.json | 2 +- website/src/pages/ro/index.json | 2 +- website/src/pages/sv/index.json | 2 +- website/src/pages/uk/index.json | 2 +- website/src/pages/ur/index.json | 2 +- website/src/pages/vi/index.json | 2 +- 15 files changed, 71 insertions(+), 24 deletions(-) diff --git a/website/src/HomePage.tsx b/website/src/HomePage.tsx index 925a9121ce93..7f5ea48f5c90 100644 --- a/website/src/HomePage.tsx +++ b/website/src/HomePage.tsx @@ -29,16 +29,63 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup className="left-16 h-full max-w-none xs:-top-2 xs:left-0" /> -
-
-

{t('index.hero.title')}

-

{t('index.hero.description')}

- {/* - - {t('index.hero.cta1')} - {t('index.hero.cta2')} - - */} +
+
+
+

{t('index.hero.title')}

+

{t('index.hero.description')}

+
+
+
+
+ {[ + '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) => ( +
+ + + +
+ ))} + + See all {supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length}{' '} + networks + +
+
+
diff --git a/website/src/pages/ar/index.json b/website/src/pages/ar/index.json index 159d15493785..d7b50df1c3ee 100644 --- a/website/src/pages/ar/index.json +++ b/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" }, diff --git a/website/src/pages/cs/index.json b/website/src/pages/cs/index.json index c7c9956ba5ca..80e16a746c4e 100644 --- a/website/src/pages/cs/index.json +++ b/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" }, diff --git a/website/src/pages/en/index.json b/website/src/pages/en/index.json index 10c2f88a914d..0add9582b852 100644 --- a/website/src/pages/en/index.json +++ b/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" }, diff --git a/website/src/pages/fr/index.json b/website/src/pages/fr/index.json index bc2d30415995..a4cba5dad8de 100644 --- a/website/src/pages/fr/index.json +++ b/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" }, diff --git a/website/src/pages/it/index.json b/website/src/pages/it/index.json index 24e90faec34c..c86981bd867e 100644 --- a/website/src/pages/it/index.json +++ b/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" }, diff --git a/website/src/pages/ko/index.json b/website/src/pages/ko/index.json index d1abe9f98842..a28226c30dd8 100644 --- a/website/src/pages/ko/index.json +++ b/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" }, diff --git a/website/src/pages/mr/index.json b/website/src/pages/mr/index.json index a5c9345c8847..cd04d0600104 100644 --- a/website/src/pages/mr/index.json +++ b/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" }, diff --git a/website/src/pages/nl/index.json b/website/src/pages/nl/index.json index c0d608afb35f..d71381808fc7 100644 --- a/website/src/pages/nl/index.json +++ b/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" }, diff --git a/website/src/pages/pl/index.json b/website/src/pages/pl/index.json index 722e7a072497..dcbd562d0a1a 100644 --- a/website/src/pages/pl/index.json +++ b/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" }, diff --git a/website/src/pages/ro/index.json b/website/src/pages/ro/index.json index 6ac1141ae67c..d833513cf931 100644 --- a/website/src/pages/ro/index.json +++ b/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" }, diff --git a/website/src/pages/sv/index.json b/website/src/pages/sv/index.json index 81d02709835a..c587ea1d2cdd 100644 --- a/website/src/pages/sv/index.json +++ b/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" }, diff --git a/website/src/pages/uk/index.json b/website/src/pages/uk/index.json index 3dfd641fe3c4..c5adce6b66b2 100644 --- a/website/src/pages/uk/index.json +++ b/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" }, diff --git a/website/src/pages/ur/index.json b/website/src/pages/ur/index.json index 500260d1036a..4d97eec9b52d 100644 --- a/website/src/pages/ur/index.json +++ b/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" }, diff --git a/website/src/pages/vi/index.json b/website/src/pages/vi/index.json index eac5dae67800..776370dc027c 100644 --- a/website/src/pages/vi/index.json +++ b/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" }, From fd9b0517b3af1235be089795274a78de63ffbe07 Mon Sep 17 00:00:00 2001 From: Hayder Date: Thu, 5 Jun 2025 09:26:22 +0200 Subject: [PATCH 2/3] Move text to literals --- website/src/HomePage.tsx | 13 +++++++------ website/src/pages/en/index.json | 1 + 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/website/src/HomePage.tsx b/website/src/HomePage.tsx index 7f5ea48f5c90..93893d89fc65 100644 --- a/website/src/HomePage.tsx +++ b/website/src/HomePage.tsx @@ -31,13 +31,13 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
-
+

{t('index.hero.title')}

{t('index.hero.description')}

-
+
-
+
{[ 'mainnet', 'btc', @@ -78,10 +78,11 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup ))} - See all {supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length}{' '} - networks + {t('index.supportedNetworks.seeAllNetworks', [ + supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length, + ])}
diff --git a/website/src/pages/en/index.json b/website/src/pages/en/index.json index 0add9582b852..3a514cbb1908 100644 --- a/website/src/pages/en/index.json +++ b/website/src/pages/en/index.json @@ -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}\"", From 2fdb112a6425ec15e24fd2340569a00693972a93 Mon Sep 17 00:00:00 2001 From: Hayder Date: Thu, 5 Jun 2025 09:32:27 +0200 Subject: [PATCH 3/3] update literals --- website/src/pages/de/index.json | 2 +- website/src/pages/es/index.json | 2 +- website/src/pages/hi/index.json | 2 +- website/src/pages/ja/index.json | 2 +- website/src/pages/pt/index.json | 2 +- website/src/pages/ru/index.json | 2 +- website/src/pages/tr/index.json | 2 +- website/src/pages/zh/index.json | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/website/src/pages/de/index.json b/website/src/pages/de/index.json index 61fcd4065920..a388badaa79e 100644 --- a/website/src/pages/de/index.json +++ b/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" }, diff --git a/website/src/pages/es/index.json b/website/src/pages/es/index.json index 3a8c94f16d18..55ad2d38b392 100644 --- a/website/src/pages/es/index.json +++ b/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" }, diff --git a/website/src/pages/hi/index.json b/website/src/pages/hi/index.json index 9e2ff46d9218..192262297c87 100644 --- a/website/src/pages/hi/index.json +++ b/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 बनाएं" }, diff --git a/website/src/pages/ja/index.json b/website/src/pages/ja/index.json index af6f44a25b76..ed6ccaf2c73d 100644 --- a/website/src/pages/ja/index.json +++ b/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": "最初のサブグラフを作る" }, diff --git a/website/src/pages/pt/index.json b/website/src/pages/pt/index.json index 524cc864da3a..c4b5c926f747 100644 --- a/website/src/pages/pt/index.json +++ b/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" }, diff --git a/website/src/pages/ru/index.json b/website/src/pages/ru/index.json index 80decb0770bf..cf30e93cbcc6 100644 --- a/website/src/pages/ru/index.json +++ b/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": "Создайте свой первый субграф" }, diff --git a/website/src/pages/tr/index.json b/website/src/pages/tr/index.json index 596088eea70c..d80ecab9206f 100644 --- a/website/src/pages/tr/index.json +++ b/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" }, diff --git a/website/src/pages/zh/index.json b/website/src/pages/zh/index.json index 2905c14fb5f0..f0e93d47203a 100644 --- a/website/src/pages/zh/index.json +++ b/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": "创建你的第一个子图" },